E2E Angular 6 насадка для паутины - PullRequest
Новая
       15

E2E Angular 6 насадка для паутины

0 голосов
/ 22 мая 2018

Мы недавно начали использовать Cypress для наших тестов E2E с нашим Angular 6 UI.Он оказывается великолепным и, по нашему мнению, гораздо лучше в использовании, чем Protractor.

Наш план состоит в том, чтобы высмеивать все взаимодействия с сервером.Это было легко для всех вызовов REST / XHR с использованием cy.route () и фикстур.

Однако мы также используем веб-сокет.И издеваться над взаимодействием с ним оказывается совсем не так просто.

Из проведенных мною исследований единственный совет, который я могу найти, предполагает использование cy.stub ().В принципе это звучит нормально, но я не могу найти какой-либо дополнительной информации по этому вопросу, в идеале с некоторыми примерами использования этого для макета веб-сокета.

Еще один подход, который, как я думал, может сработать, заключается в использовании службы TestBed от Angular.Внедрение нашего собственного сервиса, который обрабатывает наше взаимодействие с веб-сокетом.

Но какой из этих путей - правильный путь?Кто-нибудь может привести примеры того, как это лучше всего сделать?

Любые указатели, которые приведут меня в правильное русло и помогут начать, будут высоко оценены.Спасибо.

Ответы [ 2 ]

0 голосов
/ 29 апреля 2019

У меня была похожая проблема на работе, и в итоге я нашел решение, похожее на ваше (я думаю).

Наше приложение зависит от другой библиотеки, которая выполняет некоторые сетевые функции.Вместо того, чтобы использовать TestBed или подобное, я использовал файлы среды Angular для передачи в другой сервис для тестов e2e, который следовал тому же интерфейсу, что и реальный сервис.

Затем в сервисе-заглушке (который возвращает данные фикстуры)Я раскрыл методы объекта окна для взаимодействия с заглушкой во время выполнения, чтобы она возвращала другие данные и т. Д.

Я сделал сообщение в блоге, объясняющее подход, а также коммиты.

http://wtfisanapi.com/htf-do-i-write-e2e-tests-with-a-stubbed-dependency-angular-nrwl-nx-edition/

Полный код можно найти здесь https://github.com/robt1019/e2e-stub-demo

Как вам помогло ваше решение?

0 голосов
/ 17 июля 2018

После долгих раздумий с этим я наконец-то придумал собственное решение.По сути, это происходит из-за использования ng.probe ().

Специально для Cypress доступ к ng осуществляется через функцию cy.window (), например: 

cy.window().then((win: any) => {
    const ngComponent = win.ng.probe(win.document.getElementsByTagName("component-name")[0].componentInstance;
    const myService = ngComponent.myService;
    myService.doSomething();
});

Обратите внимание, что выдобраться до службы, сначала получив дескриптор компонента, который внедряет эту службу.В моем случае сервисы, которые мне понадобились, были внедрены в компонент app-root, поэтому я получил справку об этом, а затем обратился в службу websocket, которую хотел вызвать или смоделировать для своих тестов.

...