не может получить состояние vuex с помощью Cypress - PullRequest
Новая
       28

не может получить состояние vuex с помощью Cypress

0 голосов
/ 26 апреля 2018

Я подписан на этот блог . Свойство window.app действительно появляется в консоли после добавления кода, как описано, однако я не могу сослаться на app.$store и упомянуто в блоге (что напоминает способ ссылки на хранилище в компонентах). Я могу сослаться на app.store, который действительно содержит свойства из моего хранилища vuex, но он не содержит app.store.state, только получатели (и рассылки и т. Д.).

например. используя const getStore = () => cy.window().its('app.store') это дает:

screenshot from 2018-04-26 09-27-25

Я бы предпочел, чтобы переменные состояния были доступны напрямую, а не только после того, как я сделал геттер. В чем дело? Это потому, что я использую пространство имен в моем магазине Vuex?

EDIT: Это также может относиться к моему способу назначения магазина для окна. Я использую Quasar Framework, который в текущей версии (> 0.15) выполняет много настроек на основе настроек в файле quasar.conf.js, который он использует. Я назначил магазин, добавив этот код как квазар-плагин : 

export default ({ app, store, Vue }) => {
  if (window.Cypress) { // should only be available during E2E tests
    window.app = app
  }
}

Это действительно дает мне app.store, о котором я говорил, но не app.$store (включая state). Конфигурация Quasar генерируется и отображается в файле, который после добавления этого плагина содержит: 

/**
 * THIS FILE IS GENERATED AUTOMATICALLY.
 * DO NOT EDIT.
 *
 * You are probably looking on adding initialization code.
 * Use "quasar new plugin <name>" and add it there.
 * One plugin per concern. Then reference the file(s) in quasar.conf.js > plugins:
 * plugins: ['file', ...] // do not add ".js" extension to it.
 **/
import './quasar'
import Vue from 'vue'
Vue.config.productionTip = false
import 'quasar-app-styl'
import 'src/css/app.styl'
import App from 'src/App'
import router from 'src/router'
import store from 'src/store'

const app = {
  el: '#q-app',
  router,
store,
  ...App
}

const plugins = []

import pluginCypress_vuex_store from 'src/plugins/cypress_vuex_store'
plugins.push(pluginCypress_vuex_store)

import pluginVuelidate from 'src/plugins/vuelidate'
plugins.push(pluginVuelidate)

plugins.forEach(plugin => plugin({ app, router, store, Vue }))

new Vue(app)

Как вы можете видеть, плагины являются частью инициализации приложения Vue, в то время как блог и вы предлагаете его, он присоединяется после инициализации Vue. Поскольку Quasar автоматически генерирует конфигурацию, я не знаю, как сделать 'window.app = app' после инициализации, чтобы посмотреть, не вызывает ли это мою проблему ...

1 Ответ

0 голосов
/ 26 апреля 2018

То же самое в моем приложении Vue.См. Этот раздел

Прежде чем писать тест, нам нужно решить, как добраться до ссылки на магазин.Чтобы разрешить тестирование и управление приложением через экземпляр Vue, я предпочитаю сохранять ссылку на компонент в объекте window.В app.js установите window.app для тестируемости. 

const app = new Vue({
  store,
  el: '.todoapp'
  //
})
window.app = app

Последняя строка - ключ, когда я добавляю, что тестовый код работает так, как объявлено.

Обратите внимание, что файл для настройки может быть main.js , а не app.js .

Quasar - плагин для специальных приложений:Загрузив

Ref в этом документе , вы можете получить правильную ссылку Cypress window.app, сгенерировав этот специальный плагин, затем изменив его на 

export default ({ app, Vue }) => {
  // do some logic here...

  // ... then, kick off our Quasar website/app:
  window.app = new Vue(app)
  // "app" has everything cooked in by Quasar CLI,
  // you don't need to inject it with anything at this point
}

Обратите внимание, этоне стандартный плагин квазар-приложения.

...