Тестирование vuex с кипарисом - PullRequest
Новая
       17

Тестирование vuex с кипарисом

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

Я использую Cypress в своем проекте Vue.js (Nuxt.js).Главная проблема, с которой я не могу справиться, это как понять, что магазин vuex готов.Допустим, у меня есть кнопка, которая может вызывать axios для получения некоторых данных.Затем данные поступают в хранилище мутациями, и Vue отображает их в шаблоне.Следующий элемент, с которым я хочу взаимодействовать, пуст до того, как магазин будет построенНо кипарис пытается это проверить.

Как вызвать следующее действие кипариса (например, cy.get) после сборки магазина?

Мой проект сложнее.Но основная проблема в том, что кипарисы иногда не ждут, пока магазин строят и пытаются работать дальше.Впервые мы использовали cy.wait(1000), но, похоже, это не идеальное решение. 

<div>
    <button data-cy="fetchDataBtn" @click="fetchData">get items</button>
    <ul>
        <li v-for="item in items">
           <p>{{ item.title }}</p>
           <button
                @click="fetchProduct(item.id)"
            >
                buy {{ item.name }}
            </button>
        </li>
    </ul>
</div> 

    <script>
    import { mapState } from 'vuex';
    export default {
        name: 'App',
        computed: {
            ...mapState('list', ['items'])
        }
    } 
    </script>

Я ожидаю сценарий ниже: 

cy.get([‘data-cy=fetchDataBtn’]).click()
// wait for store is ready and list is already rendered 
// (NOT cy.wait('GET', 'url_string') or cy.wait(milliseconds))
cy.contains(‘button’, 'buyItemName').click()

1 Ответ

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

Взгляните на этот пост Тестирование ... с Vuex Store ... , ключом является добавление ссылки на приложение Vue в окно, 

const app = new Vue({
  store,
  el: '.todoapp'
  //
})
if (window.Cypress) {
  // only available during E2E tests
  window.app = app
}

затемпроверьте хранилище на наличие соответствующих ключей, прежде чем приступить к тестированию DOM 

const getStore = () => cy.window().its('app.$store')

it('has loading, newTodo and todos properties', () => {
  getStore().its('state').should('have.keys', ['loading', 'newTodo', 'todos'])
})

Однако это может быть даже проще!

Вы говорите

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

При правильном сочетании команд Cypress будет ожидать получения содержимого через аксиос, пока вы выберете правильный 'индикатор 'element и проверьте его content , например 

cy.contains('my.next.element.i.want.to.interact.with', 'the.content.fetched.with.axios', { timeout: 10000 })

Это ожидает до 10 секунд, пока не отобразится извлеченное содержимое (или меньше, если оно появляется раньше).Без параметра тайм-аута он ожидает до 5 секунд, что может быть достаточно.

ПРИМЕЧАНИЕ , существует небольшая ловушка с командами Cypress.

Не используйте 

cy.get('my.next.element.i.want.to.interact.with')
  .contains('the.content.fetched.with.axios')

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

...