Блог

Я пишу тесты пользовательского интерфейса, используя шаблон PageObject (NodeJS Webdriverio), и у меня есть базовый класс (BasePage), класс страницы (MyPage), класс всплывающего компонента (PopupComponentClass) с многоцелевым поведением, класс всплывающего окна с конкретной реализацией (SpecificPopupComponentClass). Мне нужно расширить SpecificPopupComponentClass из PopupComponentClass .

page.js:

 export default class BasePage {


    get BASE_URL() {
        return "https://url.com";
    };

    ...some methods...
}
 

my.page.js:

 import BasePage from "../page";

class MyPage extends BasePage {

    constructor() {
        super();
    };

    get URL() { return `${this.BASE_URL}/some/path` };
    get title() { return $("h1") };

    orderRandomTariff() {
        ...some actions...
    };

}

export default new MyPage ();
 

popup.component.page.js:

 import BasePage from "../pages/page";

class PopupComponent extends BasePage{

    constructor() {
        super();
    };

    get title() { return $("h1") };
    

}

export default new PopupComponent();
 

specific.popup.component.js:

 import PopupComponent from "./popupFragment";

class SpecificPopupComponent extends PopupComponent {

    constructor() {
        super();
    };

    get popupStreetInput() { return $(".//div[@class='checkAddress']//*[./*[contains(text(),'Street')]]//input") };

    fillStreet(street) {
        ...some actions with this.popupStreetInput...
    };

}

export default new SpecificPopupComponent();
 

… и пытается использовать его в test.js:

 import MyPage from "../../../../pages/my.page";
import SpecificPopupComponent from "../../../../fragments/specific.popup.component";

const myPage= MyPage ;
const popup = SpecificPopupComponent ;

describe("Test", () => {

    before(() => {
        myPage.open();
    });

    it("Check", () => {
        popup.fillStreet("Street");
    });

});
 

но я получаю сообщение об ошибке: «Ошибка типа: класс расширяет vlaue #PopupComponent не является конструктором или null».
Я подозреваю, что это связано с циклическими зависимостями, но я не могу понять, что мне нужно сделать, чтобы это исправить.

Похоже, проблема здесь в том, как вы экспортируете базовый класс. Вы создаете его экземпляр вместо того, чтобы просто экспортировать класс, который вы унаследуете. Это должно быть так:

 export default class PopupComponent extends BasePage {

    constructor() {
        super();
    };

    get title() { return $("h1") };
    

}
 

А затем создайте экземпляр, когда вы собираетесь его использовать

 var myPage = new MyPage()
var popup = new SpecificPopupComponent()

myPage.open()
popup.fillStreet('street')
 

То, что вы там делаете, эквивалентно выполнению этого:

 class SpecificPopupComponent extends new PopupComponent() {
   // ... what am I? 🤔
}
 

Я подозреваю, что это связано с циклическими зависимостями

Вы можете проверить или отклонить своих подозреваемых, скопировав весь код в тестовый файл в правильном порядке без использования импорта. Но я не думаю, что это циклическая зависимость

Я создал этот плунжер, чтобы удалить использование импорта и доказать это.