在 Storybook 中使用 @angular-redux/store 测试 Angular

Posted 2023-02-19

【中文标题】在 Storybook 中使用 @angular-redux/store 测试 Angular

【英文标题】：Testing Angular with @angular-redux/store in Storybook

【发布时间】：2019-06-16 11:46:36

【问题描述】：

我在@angular-redux/store 上写了这篇文章，想知道是否已经存在解决方案。

https://github.com/angular-redux/store/issues/551

这里有一个概述，可以让您免于阅读链接：

到目前为止，使用 Angular 和 Storybook 效果很好。但是，在某些情况下，我的组件依赖于 @select()。如何让我的故事中的组件使用模拟的 observable 或数据点？

这是我的示例代码：

import  storiesOf, moduleMetadata  from '@storybook/angular';

import  CommonModule  from '@angular/common';
import  BrowserAnimationsModule  from '@angular/platform-browser/animations';

// Modules
... custom modules ...


// Components
...myAppComponents...
import  MyParticularComponent as component  from './my-particular.component';


// Mock Data
... mock json data...

const props =  ...mockData... ;

storiesOf('This Particular Component', module)
  .addDecorator(
    moduleMetadata(
      declarations: [component, ...other components...],
      imports: [
        CommonModule,
        BrowserAnimationsModule,
        ...custom modules...
      ],
      schemas: [],
      providers: []
    )
  )
  .add('Some View of the Component', () => (
    component,
    props
  ));

我的组件有：

@Input()
someInput: string;

@select()
stateValue$: Observable<SomeData>;

propOne;
propTwo;

ngOnInit() 
    this.stateValue$.subscribe(data => 
      const  propOne, propTwo  = data;
      this.propOne = propOne;
      this.propTwo = propTwo;
    );
  

【参考方案1】：

首先，我为我的组件创建道具。如果有任何东西有 @select 装饰器，那么它需要属于 '@angular-redux::substore::instance::selections' 属性。我们开始：

const createProps = 

   const stateValue: DataStruct = ...;

   // Create the Observable.  Need .next and .complete for subscribe.
   const stateValue$: Subject<DataStruct> = MockNgRedux.getSelectorStub('stateValue');
   stateValue$.next(stateValue);
   stateValue$.complete();

   return 
      someInput: 'Hello World!',
      '@angular-redux::substore::instance::selections': 
           stateValue$
       
   



...
.add('Some View of the Component', () => (
    component,
    props: createProps()
));