Cypress.io и пространственная навигация - иногда происходит сбой нажатия клавиши на элементе - PullRequest
Новая
       7

Cypress.io и пространственная навигация - иногда происходит сбой нажатия клавиши на элементе

0 голосов
/ 01 апреля 2020

Справочная информация: Vue. js приложение, работающее на STB, с использованием luke-chang / js -spatial-navigation, выполнение тестов с Cypress.io

Итак, у меня есть этот простой фрагмент компонент для кнопки "go назад" в моем приложении. Я настраиваю его так, чтобы он был доступен через пространственную навигацию, чтобы пользователь мог «щелкнуть» по нему своим устройством R C, чтобы вернуться на предыдущую страницу.

Извлечь из кода компонента: 

<template>
  <div @sn:enter-up="backEnterUp" data-cy="back-button" class="back" :class="{ clicked: backClicked }"></div>
</template>

<script>
  mounted() {
    this.$SN.add({
      id: 'btn-back',
      selector: '.back'
    });

    this.$SN.makeFocusable(); // applies 'tabindex'
  }

  methods: {
    backEnterUp() {
      this.backClicked = true;
      console.log('should go back');
    }
  }
</script>

Команда Cypress (не уверен, правильно ли я понял): 

Cypress.Commands.add('pressOk', { prevSubject: 'element' }, (subject, options) => {
  cy.wrap(subject).should('have.attr', 'tabindex');
  return cy.wrap(subject).focus().trigger('keyup', { keyCode: KEY_ALIASES['enter'] }); // sends '13'
});

Тест: 

beforeEach(() => {
  cy.visit('/#/some-page');
});

it('Back arrow button causes previous app screen to show up.', () => {
  cy.get('[data-cy=back-button]').pressOk().should('have.class', 'clicked');

  cy.location().should((location) => {
    expect(location.href).to.contain('previous-page');
  });
});

Я уже реализовал 2 отказоустойчивых механизма, а именно: should('have.attr', 'tabindex') и should('have.class', 'clicked') поэтому тест ожидает пространственной навигации, чтобы включить кнопку и убедиться, что она нажата. Тест иногда не проходит после части trigger. Cypress logs error Timed out retrying: expected '<div.back>' to have class 'clicked'.

Я не могу сказать, почему это происходит примерно в 1 к 4 из выполнения spe c. Возможно, пространственная навигация не загружается должным образом, и событие триггера ничего не делает? Поскольку это не пакет npm, я загружаю его в приложение, используя Vue.use(SN);, где SN - плагин, обернутый в vue функцию установки: 

SN.install = function (Vue, options) {
  Vue.prototype.$SN = SpatialNavigation;
};
export default SN;

Что я делаю не так?

...