Как изменить размер окна Chrome для приемочного теста?

Question

Простой случай: меню гамбургера для маленьких дисплеев, нужно его проверить.

Вопрос в том, как изменить размер дисплея для браузера Chrome в ember.js test env?

Дополнение: только для одного теста

Answer 1

Чтобы прямо ответить на вопрос: на момент написания статьи невозможно изменить размер окна Chrome во время приемочного теста.

Кажется, что разрешенные API Chrome всегда меняются, но на сегодняшний день явозможность открыть новое всплывающее окно из окна Chrome, а затем сделать утверждения против всплывающего окна.

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

Вы можете увидеть пример такого подхода в моем дополнении Ember, Ember Screen.

Однако это неуклюжий и хрупкий способ приблизиться к приемочным испытаниям для вашего приложения.Я предлагаю вам решить, является ли настоящий «сквозной» (черный ящик) тест достаточно ценным, чтобы оправдать затраты по сравнению с более дешевым модульным тестом в стиле белого ящика.

Для сквозного тестирования.В конце теста вы должны рассмотреть возможность запуска тестов на реальных устройствах (телефонах, планшетах, компьютерах).Использование сервиса, такого как browserstack , или использование параметров конфигурации в тестовом средстве, таком как testem (как предложил @jelhan), является более экономичным подходом.Конечно, эти подходы не соответствуют требованию изменить размер дисплея во время теста.Тем не менее, это, вероятно, хороший компромисс между затратами и стоимостью для тестирования.

Если подход модульного тестирования больше подходит для вашего приложения, вы можете исследовать такую ​​библиотеку, как ember-screen .Он обеспечивает слой между window API и вашим приложением, который поддерживает прямую заглушку в модульных тестах.Однако этот подход связан с деталями реализации или с вашим приложением: он требует, чтобы вы обрабатывали соответствующие изменения отображения в JavaScript, а не в CSS-медиазапросах.

К сожалению, здесь нет единого подхода, подходящего для всех.Для приемочного теста Ember мой первый шаг - убедиться, что тесты работают как для настольных, так и для мобильных устройств.Другими словами, если гамбургер есть, щелкните по нему, прежде чем выбрать пункт меню.Если его там нет, просто выберите пункт меню напрямую.Затем вы можете запустить приемочное тестирование с различными конфигурациями ширины и убедиться, что все тесты пройдены.Если подход модульного тестирования кажется более экономичным, воспользуйтесь подходом модульного тестирования Ember Screen.Если тестирование устройства является критически важным, оцените сервис, такой как Percy , BrowserStack или пользовательский стенд для тестирования.

Answer 2

Если вы используете последнюю версию ember, ember-test-helpers предоставляет полезные утилиты для взаимодействия с браузером и DOM. Вы можете попробовать triggerEvent 1 в этом приемочном тесте на элементе body. Вот пример приемочного теста, который я сгенерировал в новом приложении ember с 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');
  });
});