Ember & Cypress |Вероятно, сбой интеграционного теста вызван отсутствием контекста хранилища - PullRequest
Новая
       31

Ember & Cypress |Вероятно, сбой интеграционного теста вызван отсутствием контекста хранилища

0 голосов
/ 22 ноября 2018

Я работаю с Ember.js на внешнем интерфейсе и использую Cypress.io для интеграционного тестирования.У меня есть кнопка «Статус заказа», которая при нажатии должна использовать данные в магазине для доступа к конкретному заказу и перехода на страницу «Статус заказа».

Однако в рамках теста при щелчке по модалу страница «Статус заказа» не может быть загружена, и мои тестовые броски эта ошибка :

TypeError: Не удается прочитать свойство'_internalModel' со значением null

... в консоли, что, я думаю, скорее всего, связано с тем, что модель этого маршрута не находит порядок в магазине и не загружает ее.

InВ Cypress-тесте я создал необходимые маршруты для передачи данных сеанса, но с трудом понимаю, вызывает ли эта ошибка отсутствие данных в хранилище, и как ее исправить.Важно отметить, что весь этот поток работает на 100% сам по себе - я просто пытаюсь получить тестовое покрытие.

Я прикреплю фрагменты из соответствующих файлов / функций ниже - пожалуйста, дайте мнезнать, нужна ли дополнительная информацияЯ действительно подозреваю, что Cypress не может получить доступ к хранилищу Ember, но после долгих исследований и экспериментов я не совсем уверен, в чем проблема.

order-status.js - функция модели измаршрут 

async model({ order_id: orderId }) {
    let cachedOrder = this.get('store').peekRecord('order', orderId);
    return cachedOrder
      ? cachedOrder
      : await this.get('store').findRecord('order', orderId);
  },

modal.hbs - где мы перемещаемся от текущей страницы к маршруту статуса заказа 

<fieldset>
  <span class="modal-text">See order status</span>
  <div class="inline-button-wrap">
    <button 
      {{action 'decline'}} 
      class="close-btn button-hollow-green">
        Close
    </button>
    <button 
      {{action 'accept'}} 
      class="order-status-btn">
       Order Status
     </button>
  </div>
</fieldset>

test.js -тест, имитирующий нажатие кнопки статуса заказа выше 

it('order status btn navigates to order status page', () => {
  cy.server();
  cy.route('GET', '/api/session', sessionResponse);
  cy.route('GET', `/api/orders/*`, order);
  cy.visit('/');
  cy.get('.delivery-card .button-cta').click(); //opens modal 
  cy.get('#modal .order-status-btn').click(); //navigates to order-status
});

Большое спасибо за вашу помощь.

1 Ответ

0 голосов
/ 08 января 2019

Независимо от того, является ли заглушка API-запросов или нет, хранилище Ember должно работать должным образом при использовании в сочетании с Cypress.Упомянутая ошибка является хорошим ключом к основной проблеме - неопределенной модели.Не совсем понятно, как работает ваше приложение, пока тест Cypress не проходит и выдает ошибку, но пара изменений (некоторые в Ember, некоторые в Cypress) должны прояснить ситуацию.Вот разбивка для решения этой проблемы (некоторые обратные инженерные / сделанные предположения, из предоставленных примеров кода) ...

Отправить заказ id с помощью действия кнопки, которое открывает модальное окно (в доставкеHTML-разметка карты): 

<button class="button-cta" {{action 'openModal' order.id}}>
  Open Order Status Modal
</button>

Действие openModal передается по порядку id в качестве параметра для model на последующем маршруте a l,при переходе.В контроллере delivery-card.js : 

actions: {
  openModal(id) {
    this.transitionToRoute('modal', id); // <-- id
  }
}

Затем, при переходе, действие accept модала проходит по id на страницу статуса заказа.В контроллере modal.js : 

actions: {
  accept() {
    this.transitionToRoute('order-status', this.get('model.id')); // <-- here
  },

  decline() {
  ...

Кроме того, в order-status.js аргумент, передаваемый в ловушку модели, может быть упрощен как params: 

async model(params) { // <-- just use params
  const id = params.id; // <-- id
  const cachedOrder = this.get('store').peekRecord('order', id); // <-- id

  return cachedOrder
    ? cachedOrder
    : await this.get('store').findRecord('order', id); // <-- id
}

Наконец, некоторые изменения в test.js : 

it('order status btn navigates to order status page', () => {

  cy.server();
  cy.route('GET', `/api/session`, 'fixture:session.json'); // <-- here
  cy.route('GET', `/api/orders`, 'fixture:orders.json');   // <-- here
  cy.visit('/');
  cy.get('.delivery-card .button-cta').click(); // opens modal
  cy.get('#modal .order-status-btn').click(); // navigates to order-status

  // here, verify that an order status is displayed
  cy.get('.current-status')
    .should(($el) => {
      const statusTextValue = $el[0].innerText;
      expect(statusTextValue).to.not.be.empty;
    });

});

API GET запросов заглушены с fixtures с использованием стандартных соглашений Cypress.

Наконец, вот скриншот бегуна Cypress, показывающий только начальный запрос XHR STUB при GET-ting orders.Обратите внимание, что методы хранения Ember, peekRecord и findRecord, используемые в файле маршрута order-status.js, не генерируют никаких дополнительных запросов XHR и не приводят к возникновению ошибок.Ember's store работает как положено.

enter image description here

...