在 Storybook 中使用 @angular-redux/store 测试 Angular
Testing Angular with @angular-redux/store in Storybook
我在 @angular-redux/store
上写了这篇文章,想知道是否已经存在解决方案。
https://github.com/angular-redux/store/issues/551
这里有一个概述,可以让您免于阅读 link:
使用 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;
});
}
首先,我为我的组件创建道具。如果任何东西有 @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()
}));
我在 @angular-redux/store
上写了这篇文章,想知道是否已经存在解决方案。
https://github.com/angular-redux/store/issues/551
这里有一个概述,可以让您免于阅读 link:
使用 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;
});
}
首先,我为我的组件创建道具。如果任何东西有 @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()
}));