如何从导航器设置状态或分派操作（例如：cypress测试）

Cypress（e2e测试）给出的一个良好实践是以编程方式设置应用程序的状态，而不是使用UI。这当然有道理

在本视频中，Brian Mann提出了一个公开Redux商店的解决方案：

---

NGX是否有可能在测试期间以编程方式访问不同的状态？登录过程就是一个例子：直接发送登录操作或使用访问令牌设置存储，以便在任何测试之前登录，这将是一个不错的选择。

此联合配置适用于我： 模型中的应用程序内文件夹：

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

在app.module.ts中：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgxsModule, Store} from '@ngxs/store';

import {AppComponent, IWindowCypress} from './app.component';
import {ZooState} from './state/zoo.state';
import {NgxsReduxDevtoolsPluginModule} from '@ngxs/devtools-plugin';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, NgxsModule.forRoot([ZooState], {}),
    NgxsReduxDevtoolsPluginModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(protected store: Store) {
    const windowSore: IWindowCypress = window as unknown as IWindowCypress;
    if (windowSore.Cypress) {
      console.log('ustawiłem store');
      windowSore.Cypress.__store__ = store;
    }
  }
}

使用应用程序内组件：

import {Component} from '@angular/core';
import {Store} from '@ngxs/store';
import {FeedAnimals} from './state/zoo.state';

/// <reference types="Cypress" />

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'cypress-ngxs';

  constructor() {
    const windowSore: IWindowCypress = window as unknown as IWindowCypress;
    if (windowSore.Cypress) {
      (windowSore.Cypress.__store__ as Store).dispatch(new FeedAnimals());
    }
  }
}

从'@angular/core'导入{Component}；
从'@ngxs/Store'导入{Store}；
从“./state/zoo.state”导入{feedanies}；
/// 
导出接口IWindowCypress{
柏树：{
__商店：商店；
};
}
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.scss']
})
导出类AppComponent{
标题='cypress ngxs'；
构造函数（）{
const windowstore:IWindowCypress=与IWindowCypress一样未知的窗口；
if（窗台、柏树）{
（WindowsStore.Cypress._u store__u;as store）.分派（新饲养动物（））；
}
}
}

在cypress规范中使用：

/// <reference types="Cypress" />

import {Store} from '@ngxs/store';
import {IWindowCypress} from 'src/app/app.component';
import {FeedAnimals, ZooState} from '../../../src/app/state/zoo.state';
import {Observable} from 'rxjs';

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

//
从'@ngxs/Store'导入{Store}；
从'src/app/app.component'导入{IWindowCypress}；
从“../../../src/app/state/zoo.state”导入{feedanies，ZooState}；
从“rxjs”导入{Observable}；
描述（'我的第二个测试套件'，（）=>{
它（'我的第一个测试用例'，（）=>{
参观http://localhost:4200/ ');
cy.get（'.content>：第n个子项（2）'）。应该（项=>{
const windowstore:IWindowCypress=与IWindowCypress一样未知的窗口；
if（窗台、柏树）{
//去商店
const store:store=windowstore.Cypress.\uuuuuu store\uuuuuuu；
//宣布可观测
constmyobs:Observable=store.select（ZooState.zoo$）；
//订阅
myObs.pipe（）.subscribe（（提要）=>console.log（'fromsubscribe:'，提要））；
//发送
（WindowsStore.Cypress._u store__u;as store）.分派（新饲养动物（））；
（WindowsStore.Cypress._u store__u;as store）.分派（新饲养动物（））；
（WindowsStore.Cypress._u store__u;as store）.分派（新饲养动物（））；
（WindowsStore.Cypress._u store__u;as store）.分派（新饲养动物（））；
}
});
});
});

和动物园州：

import {Injectable} from '@angular/core';
import {Action, Selector, State, StateContext} from '@ngxs/store';

export class FeedAnimals {
  static readonly type = '[Zoo] FeedAnimals';
}

export interface ZooStateModel {
  feed: boolean;
}

@State<ZooStateModel>({
  name: 'zoo',
  defaults: {
    feed: false
  }
})
@Injectable()
export class ZooState {

  @Selector()
  static zoo$(state: ZooStateModel): boolean {
    return state.feed;
  }

  @Action(FeedAnimals)
  feedAnimals(ctx: StateContext<ZooStateModel>): void {
    console.log('fedeeeeeed');
    const state = ctx.getState();
    ctx.setState({
      ...state,
      feed: !state.feed
    });
  }
}

从'@angular/core'导入{Injectable}；
从'@ngxs/store'导入{Action，Selector，State，StateContext}；
出口级饲料动物{
静态只读类型=“[Zoo]饲养动物”；
}
导出接口模型{
提要：布尔；
}
@陈述({
名称：‘动物园’，
默认值：{
提要：false
}
})
@可注射（）
导出类ZooState{
@选择器（）
静态zoo$（状态：ZooStateModel）：布尔值{
返回状态.feed；
}
@行动（饲养动物）
饲养动物（ctx:StateContext）：无效{
console.log（'fedeeeed'）；
const state=ctx.getState（）；
ctx.setState({
……国家，
提要：！state.feed
});
}
}