在Storybook中使用@ angular-redux/store测试Angular [英] Testing Angular with @angular-redux/store in Storybook

问题描述

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

I wrote this up on @angular-redux/store and was wondering if a solution already existed.

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

以下是让您免于阅读链接的概述:

Here's a recap to save you from reading the link:

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

Using Angular and Storybook has worked out well so far. However, I have cases where my component is dependent upon @select(). How can I tell the component in my story to use a mocked observable or data point?

这是我的示例代码:

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

推荐答案

首先，我为组件创建道具.如果任何东西都有 @select 装饰器，则它必须属于'@ angular-redux :: substore :: instance :: selections'属性.我们开始:

First, I create props for my component. If anything has an @select decorator, then it needs to belong in an '@angular-redux::substore::instance::selections' property. Here we go:

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

这篇关于在Storybook中使用@ angular-redux/store测试Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！