故事书Angular如何在嵌套/屏幕故事中添加动作

时间:2020-04-27 04:57:08

标签: angular storybook angular-storybook

我正在尝试使用提供的教程(https://www.learnstorybook.com/intro-to-storybook/angular/en)在Angular中建立一个基本的故事书项目。

我已经完成了所有步骤,除了屏幕部分中触发的操作之外,所有内容均按说明进行渲染和工作。单击子TaskListComponent / TaskComponent会触发一个Storybook操作,尽管该教程清楚地显示了它们已被触发。

我已经按照与教程完全相同的方式设置了所有内容。唯一的区别是我使用的是NgRx而不是NGXS,尽管我看不出这会有什么影响。

我曾尝试提供本教程中提到的onPinTask和onArchiveTask操作作为道具,但是由于组件是嵌套的,因此无法使用。我还尝试在其实时应用示例中尝试进行类似this story的操作,在该示例中,它们具有以下内容:

const props: { [K in keyof ChipsGroupComponent]?: any } = {
    chips: object('Chips', [
        {
            id: 1,
            text: 'Chip 1',
        },
        {
            id: 2,
            text: 'Chip 2',
        },
    ]),
        removeChipClick: action('Remove chip'),
        removeAllChipsClick: action('Remove all chips clicked'),
};

但是我也没有运气来展示动作。我不确定在安装过程中是否做错了什么,或者Angular实现需要额外的操作。

下面是我的pure-inbox-screen.stories.ts文件,如果有帮助的话:

const FEATURE_KEY = 'todos';
// pure-inbox-screen.stories.ts
const initialState = {
    [FEATURE_KEY]: {
        entities: defaultTasks,
    },
};

export default {
    title: 'PureInboxScreen',
    decorators: [
        moduleMetadata({
            imports: [TaskModule, StoreModule.forRoot({})],
            providers: [provideMockStore({ initialState })],
        }),
    ],
};
// inbox screen default state
export const Default = () => ({
    component: PureInboxScreenComponent,
});

// inbox screen error state
export const error = () => ({
    component: PureInboxScreenComponent,
    props: {
        error: true,
    },
});

是否有人知道如何实现屏幕/嵌套组件以及如何触发他们在故事书ui中显示的动作?

0 个答案:

没有答案