Как вызвать событие изменения размера окна при использовании cy.viewport ()

Question

Моя цель состоит в том, чтобы разработать e2e-тест в Cypress для приложения Angular SPA, проверяя, скрыты ли / показаны ли элементы, как и ожидалось, в разных окнах просмотра.

Я пытался использовать Cypress viewport команда, но, похоже, это не вызывает событие изменения размера окна *1006*.

Это событие нужно отправить вручную? С уважением.

обновление

Проблема не связана с Cypress и изменением размера, а скорее с обнаружением изменений в Angular. Вот stackblitz , если другие люди должны проверить это в будущем.

Answer 1

Невозможно воспроизвести. Для меня событие resize правильно запускается на window:

(проверено на 3.3.1, 3.5.0, как без головы, так и во главе)

describe('test', () => {
    it('test', () => {
        let resizeEventFired = false;
        cy.window().then(win => {
            win.addEventListener('resize', () => {
                resizeEventFired = true;
            });
        });

        cy.viewport(123, 456);
        cy.wrap().should(() => {
            expect(resizeEventFired).to.eq(true);
        });
    });
});

Если оно все ещене работает для вас, или вы подписываетесь на какое-то нестандартное событие или элемент, тогда вы можете сделать это:

Cypress.Commands.overwrite('viewport', (origFn, ...args) => {
    return origFn(...args).then(() => {
        const window = cy.state('window');
        window.dispatchEvent(new window.UIEvent('resize'));
    });
});

(я запускаю resize -совместимое событие на window,но ты можешь делать все, что захочешь).