Тесты Ember/Mirage не находят элементы DOM

Я пытаюсь провести базовые приемочные тесты в Ember, используя Mirage. На данный момент я использую только фикстуры для заполнения тестовой среды, просто чтобы найти себя. Когда я запускаю ember в тестовой среде (т. е. с -e test), я вижу, что мое приложение заполняется ожидаемыми данными. И в DOM есть какие-то кнопки и т.д. Все хорошо.

Однако, когда я запускаю тест, чтобы посетить страницу и нажать кнопку, тест сообщает мне, что не может найти кнопку. Другими словами, запуск -e test и проверка localhost показывают, что с приложением все в порядке. Но затем проверка localhost/tests приводит к сбою теста, говорящего, что он не может найти кнопку, которая определенно есть на экране -e test.

Я подтвердил, что кнопка существует в тестовой среде -e, используя как инспектор, так и просто выполнив базовый выбор jquery в строке консоли.

Итак, я предполагаю, что что-то не так в настройках или где-то в конфигурации?

Особенно:

module('Acceptance | basic tests', {
  beforeEach: function() {
    this.application = startApp();
  },

  afterEach: function() {
    Ember.run(this.application, 'destroy');
  }
});

test('visiting /orders', function(assert) {
  visit('/orders');

  andThen(function() {
    assert.equal(currentURL(), '/orders');
  });
});

test('visiting /basic', function(assert) {
  visit('/orders');
  click('top-row-orders-button'); //button.top-row-orders-button fails too
  andThen(function() {
    assert.equal(currentURL(), '/orders');
  });
});

Первый тест (просто посещение URL-адреса) проходит. Во втором тесте он говорит, что не может найти кнопку. И снова, когда я подаю -e test и ввожу это в консоль: $('.top-row-orders-button') он возвращает соответствующую кнопку.

С удовольствием предоставлю любую дополнительную информацию, которая может понадобиться. Был бы признателен за любую помощь. Я уже несколько дней ломаю голову над этим, но безуспешно.

Отредактировано для добавления:

В более общем смысле, при использовании Mirage есть ли способ увидеть, что такое DOM в среде /tests (т. е. DOM, в котором выполняются фактические тесты)? То есть, как выглядит DOM для каждого теста Mirage?


person A B    schedule 25.02.2016    source источник
comment
Так что, возможно, это больше, чем кто-либо готов смотреть, но я сделал простое тестовое приложение, которое можно клонировать здесь (git clone -b develop [email protected]:bdrsgg/ember-movie-example.git). Проблема, с которой я столкнулся, связана со 2-м приемочным тестом, часть 2. Он нажимает кнопку, чтобы перейти на другой экран (который работает), а затем проверяет, отображается ли там таблица с определенным количеством строк. Насколько я могу судить, таблица вообще не отображается. НО, если вы обслуживаете приложение в dev и выбираете jQuery из консоли, вы можете видеть, что это правильный способ получить количество строк в таблице.   -  person A B    schedule 26.02.2016


Ответы (3)


Я просмотрел ваш репозиторий и обнаружил, что вы сделали неверную конфигурацию фабрики Mirage... При использовании mirage вы должны точно определить, что ожидает приложение.

Например: вызов API ur возвращает фильмы в объекте Search при запуске приложения. В тестах он возвращает объект списка фильмов в качестве ответа. И вы сделали проверку в адаптерах -> функция запроса, чтобы возвращать [ ], если нет объекта поиска.

То, что делает Mirage, — это издевательство над API. При вызове API он возвращает ответ, который вы определили в своем config.js, и он по-прежнему проходит через то обещание, которое вы определили в функции запроса в adapters. Поскольку модель пуста, рендерить нечего, и тест провалился.

Измените файл конфигурации Mirage как

this.get('http://www.omdbapi.com/', function(db, request) {
  return { Search: db.movies };
});

а также измените фабрики/фильм, чтобы соответственно вернуть ключи объекта (скажем, в нашем случае «imdbID», а не «id»).

person Nishan Miranda    schedule 25.02.2016
comment
Спасибо за комментарий, но, к сожалению, он по-прежнему не распознает кнопку (ошибка: элемент #top-row-orders-button не найден). - person A B; 25.02.2016
comment
Нишан, спасибо! Это было много очень полезной информации, и теперь у меня все работает. Я очень ценю, что вы смотрите на репо. Я отмечаю это как правильный ответ, так как он решил мою основную проблему, но спасибо Сэму и Кристоферу за ваши ответы, определенно есть и полезная информация. - person A B; 26.02.2016

Помощник клика (click('top-row-orders-button')) использует селектор CSS, поэтому, если вы ищете узел DOM с классом top-row-orders-button, который вы хотели бы использовать

click('.top-row-orders-button');

Если кнопка не найдена, попробуйте поставить debugger перед помощником click и ввести $('.top-row-orders-button') в консоли.

Не могли бы вы уточнить, что означает -e test? Есть два способа просмотра бегуна тестов в браузере. Во-первых, если вы сделали ember serve, вы можете посетить localhost:4200/tests. Однако рекомендуется использовать ember test --server. Это будет использовать testem и запустить тестовый бегун в вашей консоли, но также покажет вам ссылку, что-то вроде

Open the URL below in a browser to connect.
http://localhost:7357/

который вы можете посетить, чтобы увидеть тестовый бегун.

Причина, по которой второй метод предпочтительнее, заключается в том, что команда ember test использует приложение Ember как со средой времени сборки (узла) test, так и со средой времени выполнения. среда test (т. е. переменная среды ниже config/environment.js), тогда как при использовании ember serve и последующем посещении /tests используется среда сборки development и среда выполнения test.

Обычно вам не нужно указывать --environment test — вы можете просто использовать команду ember test --server.

Наконец, на ваш последний вопрос: на самом деле не существует такой вещи, как «тест Mirage». Сервер Mirage загружается вместе с вашим приложением Ember во время приемочных тестов. Но Mirage ничего не знает о вашем приложении Ember и даже о том, что оно используется в тестах. По сути, он просто издевается над XMLHttpRequest и на этом останавливается.

person Sam Selikoff    schedule 25.02.2016
comment
Спасибо, Сэм. -e test - это просто сокращение/псевдоним для --environment test. Итак, я подумал, что ember serve -e test покажет вам, как выглядит ваша тестовая среда ember. Я думаю, что это будет среда, в которой выполняются тесты, если это имеет смысл. У меня такая же кнопка не может быть найдена в ember test --server тоже. Похоже, моя проблема связана не с Mirage, а с тем, что DOM каким-то образом не отображается для тестов Ember. - person A B; 25.02.2016

Добавьте инструкцию отладчика в тело теста и откройте консоль. Перезапустите тест.

Приложение должно быть приостановлено. В консоли вы можете изучить DOM. Используйте Хром.

Попробуйте $('#ember-testing') в консоли.

Вы должны увидеть фрагмент DOM в консоли. Вы можете взаимодействовать с этим фрагментом DOM. Нажмите на стрелки, чтобы открыть его.

Видите ли вы элемент, на который вы пытаетесь настроить таргетинг в HTML? Если он есть, попробуйте снова выбрать его с помощью jQuery. Если jQuery не находит его, ваш селектор неверен.

person Christopher Milne    schedule 26.02.2016
comment
Спасибо, Кристопер. Я не знал о трюке $('#ember-testing'). Использование этого определенно подтверждает, что DOM просто не заполняется правильно (элемента, который пытается настроить таргетинг, там нет). Все еще не уверен, почему это может быть, тем более что запуск теста в среде показывает, что данные есть. Но, по крайней мере, это сужает проблему. - person A B; 26.02.2016