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

【问题标题】：How do I trigger a window resize event, when using cy.viewport()使用 cy.viewport() 时如何触发窗口调整大小事件
【发布时间】：2019-11-04 18:00:30
【问题描述】：

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

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

这个事件是我必须手动分派的吗？感谢您的问候。

更新

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

【问题讨论】：

标签： cypress

【解决方案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'));
    });
});

（我在window 上触发resize-compatible 事件，但你可以为所欲为）。

【讨论】：

感谢您的回答。我今天将对此进行测试。我在想我的问题可能与 Angular 没有进行变更检测有关，但我会对其进行测试并找出答案。
你是对的。我创建了一个堆栈闪电战，供其他人一起玩。