3

我正在关注这个博客。按描述添加代码后,window.app 属性确实出现在控制台中,但是我无法引用app.$store博客中提到的 ans(这类似于在组件中引用商店的方式)。我可以引用app.store哪个确实包含我的 vuex 存储中的属性,但它不包含app.store.state,仅包含 getter (和调度等)。

例如使用 const getStore = () => cy.window().its('app.store')它给出:

截图来自 2018-04-26 09-27-25

我希望能够直接使用状态变量,而不仅仅是在我为它创建一个 getter 时。怎么了?这是因为我在我的 vuex 商店中使用了命名空间吗?

编辑:它也可能与我将商店分配到窗口的方式有关。我使用 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”,看看这是否会导致我的问题......

4

1 回答 1

3

我的 Vue 应用程序也是如此。请参阅本

在我们编写测试之前,我们需要决定如何获取存储引用。为了允许通过 Vue 实例测试和控制应用程序,我更喜欢在窗口对象上保留对组件的引用。在 app.js 中,为可测试性设置 window.app。

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

最后一行是关键,当我添加测试代码按广告宣传时。

注意,要调整的文件可能是main.js而不是app.js


Quasar - 特殊应用插件:引导

参考此文档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
}

请注意,这不是标准的类星体应用插件。

于 2018-04-26T10:04:59.267 回答