cypress - 使用 cy.viewport() 时如何触发窗口调整大小事件

Question

我的目标是在 Cypress 中为 Angular SPA 应用程序开发 e2e 测试，测试元素是否在不同视口(viewport)中按预期隐藏/显示。

我试过使用 Cypress viewport命令，但这似乎不会触发 window resize event .

这个事件是我必须手动发送的吗？致谢。

更新

该问题与 Cypress 和调整大小无关，而是与 Angular 中的更改检测有关。这是 stackblitz ，如果其他人将来需要对此进行测试。

Answer 1

无法重现。对我来说， resize 事件在 window 上正确触发:

(在 3.3.1 ， 3.5.0 上测试， headless 和有头)

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 兼容事件，但你可以做任何你想做的事情)。