Тестирование Angular с @ angular-redux / store в Storybook

Я написал это на @angular-redux/store, и мне было интересно, существует ли уже решение.

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

Вот краткое изложение, которое поможет вам не читать ссылку:

Пока что использование Angular и Storybook дает хорошие результаты. Однако у меня есть случаи, когда мой компонент зависит от @select (). Как я могу сказать компоненту в моей истории, чтобы он использовал имитацию наблюдаемого объекта или точки данных?

Вот мой пример кода:

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

angular storybook angular-redux
person westandy    schedule 22.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Сначала я создаю реквизит для своего компонента. Если у чего-то есть декоратор @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()
}));
person westandy    schedule 23.01.2019