Storybook Angular Как добавлять действия во вложенные / экранные истории

Я пытаюсь настроить базовый проект сборника рассказов в Angular, используя предоставленный учебник (https://www.learnstorybook.com/intro-to-storybook/angular/en).

Я выполнил все шаги, все работает и отображается, как описано, за исключением действий, запускаемых в разделе " Экраны ". Щелчок по дочерним компонентам TaskListComponent/TaskComponent запускает действия Storybook, хотя в учебнике четко показано, что они запускаются.

Я настроил все точно так же, как и в руководстве. Единственная разница в том, что я использую NgRx вместо NGXS, хотя я не понимаю, как это изменит ситуацию.

Я попытался предоставить действия onPinTask и onArchiveTask, упомянутые в руководстве, в качестве свойств, но это не работает, поскольку компоненты вложены. Я также пробовал сделать что-то вроде этой истории в их живом примере приложения, где у них есть что-то вроде этого:

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

Кто-нибудь знает, как реализовать экраны / вложенные компоненты, а также получить действия, которые они запускают, для отображения внутри пользовательского интерфейса сборника рассказов?

0 ответов

Другие вопросы по тегам