如何从导航器设置状态或调度操作（例如：柏树测试）

Question

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

在这个视频中https://www.youtube.com/watch?v=5XQOK0v_YREBrian Mann 提出了这个解决方案来公开一个 Redux 存储：

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

Answer 1

这个配置对我有用： 在模型的 app 文件夹中：

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());
    }
  }
}

在柏树规范中使用：

/// <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());
      }
    });
  });
});

和动物园状态：

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
    });
  }
}