Question

简单案例：用于小显示屏的汉堡菜单，需要对其进行测试。

问题是：如何在ember.js测试环境中更改Chrome浏览器的显示尺寸？

加法：仅用于一项测试

Answer 1

要直接回答问题：截至撰写本文时，在验收测试期间无法调整Chrome窗口的大小。

允许的Chrome API似乎一直在变化，但是从今天起，我可以从Chrome窗口中打开一个新的弹出窗口，然后对弹出窗口进行断言。

this.popup = window.open('/index.html?inTestPopup', 'resizable', `resizable=yes`);
this.popup.resizeTo(200, 500);

您可以在我的Ember插件“ Ember屏幕”中看到an example of this approach。

但是，这是一种为您的应用程序进行验收测试的笨拙且脆弱的方法。我建议您确定一个真正的“端到端”（黑盒）测试是否有价值，足以证明相对于便宜的白盒式单元测试而言，成本是合理的。

对于端到端测试，您应该考虑针对真实设备（电话，平板电脑，计算机）运行测试。使用诸如browserstack之类的服务或在诸如testem之类的测试运行程序中使用配置选项（如@jelhan所建议）是一种更为经济的方法。当然，这些方法实际上并不能满足在测试过程中更改显示尺寸的要求。仍然可能是费用与测试价值之间的良好折衷。

如果单元测试方法更适合您的应用程序，则可以研究ember-screen之类的库。它在window API和在单元测试中支持straightforward stubbing的应用程序之间提供了一层。但是，这种方法与实现细节或您的应用程序结合在一起：它要求您使用JavaScript而不是CSS媒体查询来处理相关的显示更改。

不幸的是，这里没有一种千篇一律的方法。对于Ember验收测试，我的第一步是确保测试对“台式”和“移动”尺寸均起作用。换句话说，如果有汉堡包，请在选择菜单项之前单击它。如果不存在，则直接选择菜单项。然后，您可以使用不同的宽度配置运行验收测试，并确保所有测试均通过。如果单元测试方法似乎更经济，请使用Ember Screen的单元测试方法。如果设备测试对任务至关重要，请评估Percy，BrowserStack之类的服务或自定义测试平台。

Answer 2

鉴于您使用的是最新版的余烬，ember-test-helpers提供了有用的实用程序，可用于与浏览器和DOM进行交互。您可以在triggerEvent元素的接受测试中尝试body 1。这是我使用ember g acceptance-test resize在新的余烬应用程序中生成的示例验收测试：

import { module, test } from 'qunit';
import { visit, currentURL, triggerEvent } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';

module('Acceptance | resize', function(hooks) {
  setupApplicationTest(hooks);

  test('visiting /resize', async function(assert) {
    await visit('/resize');

    assert.equal(currentURL(), '/resize');
    await triggerEvent(window, 'resize');
    assert.equal(currentURL(), '/resize');
  });
});

如何调整铬窗口的灰烬接受度测试？

2 个答案: