如何从导航器设置状态或调度操作（例如：cypress testing）

Question

赛普拉斯（e2e 测试）给出的一个好的做法是以编程方式设置应用程序的状态，而不是使用 UI。这当然是有道理的。

在这个视频https://www.youtube.com/watch?v=5XQOK0v_YRE Brian Mann 提出了这个暴露 Redux 存储的解决方案：

NGXS 是否有可能在测试期间以编程方式访问不同的状态？一个例子是登录过程：直接调度登录操作或使用访问令牌设置商店，在任何测试之前登录，会很好。

Answer 1

此配置适用于我：\nin 模型中的应用程序文件夹：

\n

export interface IWindowCypress {\n  Cypress: {\n    __store__: Store;\n  };\n}\n

\n

在 app.module.ts 中：

\n

import {BrowserModule} from '@angular/platform-browser';\nimport {NgModule} from '@angular/core';\nimport {NgxsModule, Store} from '@ngxs/store';\n\nimport {AppComponent, IWindowCypress} from './app.component';\nimport {ZooState} from './state/zoo.state';\nimport {NgxsReduxDevtoolsPluginModule} from '@ngxs/devtools-plugin';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule, NgxsModule.forRoot([ZooState], {}),\n    NgxsReduxDevtoolsPluginModule.forRoot()\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n  constructor(protected store: Store) {\n    const windowSore: IWindowCypress = window as unknown as IWindowCypress;\n    if (windowSore.Cypress) {\n      console.log('ustawi\xc5\x82em store');\n      windowSore.Cypress.__store__ = store;\n    }\n  }\n}\n

\n

在应用程序组件中使用：

\n

import {Component} from '@angular/core';\nimport {Store} from '@ngxs/store';\nimport {FeedAnimals} from './state/zoo.state';\n\n/// <reference types="Cypress" />\n\nexport interface IWindowCypress {\n  Cypress: {\n    __store__: Store;\n  };\n}\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n  title = 'cypress-ngxs';\n\n  constructor() {\n    const windowSore: IWindowCypress = window as unknown as IWindowCypress;\n    if (windowSore.Cypress) {\n      (windowSore.Cypress.__store__ as Store).dispatch(new FeedAnimals());\n    }\n  }\n}\n

\n

在赛普拉斯规范中使用：

\n

/// <reference types="Cypress" />\n\nimport {Store} from '@ngxs/store';\nimport {IWindowCypress} from 'src/app/app.component';\nimport {FeedAnimals, ZooState} from '../../../src/app/state/zoo.state';\nimport {Observable} from 'rxjs';\n\ndescribe('My Second Test Suite', () => {\n  it('My FirstTest case', () => {\n    cy.visit(' http://localhost:4200/ ');\n    cy.get('.content > :nth-child(2)').should(item => {\n      const windowSore: IWindowCypress = window as unknown as IWindowCypress;\n      if (windowSore.Cypress) {\n        // get store\n        const store: Store = windowSore.Cypress.__store__;\n        // declare observable\n        const myObs: Observable<boolean> = store.select(ZooState.zoo$);\n        // subscribe\n        myObs.pipe().subscribe((feed) => console.log('from subscribe: ', feed));\n        // make some dispatch\n        (windowSore.Cypress.__store__ as Store).dispatch(new FeedAnimals());\n        (windowSore.Cypress.__store__ as Store).dispatch(new FeedAnimals());\n        (windowSore.Cypress.__store__ as Store).dispatch(new FeedAnimals());\n        (windowSore.Cypress.__store__ as Store).dispatch(new FeedAnimals());\n      }\n    });\n  });\n});\n

\n

和动物园状态：

\n

import {Injectable} from '@angular/core';\nimport {Action, Selector, State, StateContext} from '@ngxs/store';\n\nexport class FeedAnimals {\n  static readonly type = '[Zoo] FeedAnimals';\n}\n\nexport interface ZooStateModel {\n  feed: boolean;\n}\n\n@State<ZooStateModel>({\n  name: 'zoo',\n  defaults: {\n    feed: false\n  }\n})\n@Injectable()\nexport class ZooState {\n\n  @Selector()\n  static zoo$(state: ZooStateModel): boolean {\n    return state.feed;\n  }\n\n  @Action(FeedAnimals)\n  feedAnimals(ctx: StateContext<ZooStateModel>): void {\n    console.log('fedeeeeeed');\n    const state = ctx.getState();\n    ctx.setState({\n      ...state,\n      feed: !state.feed\n    });\n  }\n}\n

\n