Сборник рассказов Angular Как добавить действия во вложенные / экранные истории - PullRequest
Новая
       1

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

0 голосов
/ 27 апреля 2020

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

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

Я настроил все точно так же, как учебник. Единственное отличие состоит в том, что я использую 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,
    },
});

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

...