问题

您正在使用 Storybook 来开发组件，并使用 Jasmine 测试框架 或 Angular 测试库（很可能与 Karma 测试运行器 结合）编写测试。在您的 Storybook 故事中，您已经定义了组件的场景。您还设置了必要的装饰器（主题、路由、状态管理等），以确保它们都能正确渲染。当您编写测试时，您最终也会定义组件的场景，并设置必要的装饰器。由于重复执行相同的操作，您会感觉自己花费了过多的精力，导致编写和维护故事/测试变得不再有趣，而更像是一种负担。

解决方案

@storybook/testing-angular 是一种在 Angular 测试中重用 Storybook 故事的解决方案。通过在测试中重用您的故事，您拥有了一个可供测试的组件场景目录。此库将组合来自您的 args 和 decorators 以及您的 story 和其 元数据，以及 全局装饰器，并将其返回给您一个简单的组件。这样，在您的单元测试中，您只需选择要渲染的故事，所有必要的设置都将为您完成。这是允许在编写测试和编写 Storybook 故事之间更好地共享和维护的缺失部分。

安装

此库应作为项目 devDependencies 的一部分进行安装。

通过 npm

设置

Storybook 8 和组件故事格式

此库要求您使用 Storybook 版本 8、组件故事格式 (CSF) 和 提升的 CSF 注解，这是 Storybook 8 中推荐的编写故事的方式。

基本上，如果您使用 Storybook 8 并且您的故事看起来与此类似，那么您就可以开始了！

// CSF: default export (meta) + named exports (stories)
export default {
  title: 'Example/Button',
  component: Button,
} as Meta;

const Primary: Story<ButtonComponent> = args => (args: ButtonComponent) => ({
  props: args,
}); // or with Template.bind({})
Primary.args = {
  primary: true,
};

全局配置

这是一个可选步骤。如果您没有 全局装饰器，则无需执行此操作。但是，如果您有，则这是应用全局装饰器的必要步骤。

如果您有全局装饰器/参数等，并希望在测试它们时将其应用于您的故事，则首先需要进行设置。您可以通过将以下内容添加到测试 设置文件 中来实现。

// test.ts <-- this will run before the tests in karma.
import { setProjectAnnotations } from '@storybook/testing-angular';
import * as globalStorybookConfig from '../.storybook/preview'; // path of your preview.js file

setProjectAnnotations(globalStorybookConfig);

用法

composeStories

composeStories 将处理您指定的组件中的所有故事，组合其中的所有 args/decorators，并返回一个包含组合故事的对象。

如果您使用组合的故事（例如 PrimaryButton），则组件将使用故事中传递的 args 进行渲染。但是，您可以自由地在组件之上传递任何 props，这些 props 将覆盖故事的 args 中传递的默认值。

import { render, screen } from '@testing-library/angular';
import {
  composeStories,
  createMountable,
} from '@storybook/testing-angular';
import * as stories from './button.stories'; // import all stories from the stories file
import Meta from './button.stories';

// Every component that is returned maps 1:1 with the stories, but they already contain all decorators from story level, meta level and global level.
const { Primary, Secondary } = composeStories(stories);

describe('button', () => {
  it('renders primary button with default args', async () => {
    const { component, applicationConfig } = createMountable(
      Primary({})
    );
    await render(component, { providers: applicationConfig.providers });
    const buttonElement = screen.getByText(
      /Text coming from args in stories file!/i
    );
    expect(buttonElement).not.toBeNull();
  });

  it('renders primary button with overriden props', async () => {
    const { component, applicationConfig } = createMountable(
      Primary({ label: 'Hello world' })
    ); // you can override props and they will get merged with values from the Story's args
    await render(component, { providers: applicationConfig.providers });
    const buttonElement = screen.getByText(/Hello world/i);
    expect(buttonElement).not.toBeNull();
  });
});

composeStory

如果您希望将其应用于单个故事而不是所有故事，则可以使用 composeStory。您需要同时传递元数据（默认导出）。

import { render, screen } from '@testing-library/angular';
import {
  composeStory,
  createMountable,
} from '@storybook/testing-angular';
import Meta, { Primary as PrimaryStory } from './button.stories';

// Returns a component that already contain all decorators from story level, meta level and global level.
const Primary = composeStory(PrimaryStory, Meta);

describe('button', () => {
  it('onclick handler is called', async () => {
    const onClickSpy = jasmine.createSpy();
    const { component, applicationConfig } = createMountable(
      Primary({ onClick: onClickSpy })
    );
    await render(component, { provider: applicationConfig.provider });
    const buttonElement = screen.getByText(Primary.args?.label!);
    buttonElement.click();
    expect(onClickSpy).toHaveBeenCalled();
  });
});

重用故事属性

composeStories 或 composeStory 返回的组件不仅可以作为 Angular 组件渲染，还可以包含来自故事、元数据和全局配置的组合属性。这意味着，如果您想访问 args 或 parameters，例如，您可以这样做。

import { render, screen } from '@testing-library/angular';
import {
  composeStory,
  createMountable,
} from '@storybook/testing-angular';
import * as stories from './button.stories';
import Meta from './button.stories';

const { Primary } = composeStories(stories);

describe('button', () => {
  it('reuses args from composed story', async () => {
    const { component, applicationConfig } = createMountable(Primary({}));
    await render(component, { providers: applicationConfig.providers });
    expect(screen.getByText(Primary.args?.label!)).not.toBeNull();
  });
});

如果您使用的是 TypeScript：鉴于某些返回的属性不是必需的，TypeScript 可能会将它们视为可为空属性并显示错误。如果您确定它们存在（例如，故事中设置的某个特定 arg），您可以使用 非空断言运算符 告诉 TypeScript 一切正常。

// ERROR: Object is possibly 'undefined'
Primary.args.children;

// SUCCESS: 🎉
Primary.args!.children;

TypeScript

@storybook/testing-angular 准备就绪，并提供自动完成功能以轻松检测组件的所有故事。

它还提供组件的 props，就像您在测试中直接使用它们时所期望的那样。

类型推断仅在项目在其 tsconfig.json 文件中将 strict 或 strictBindApplyCall 模式设置为 true 的情况下才有可能。您还需要 4.0.0 以上版本的 TypeScript。如果您没有正确的类型推断，这可能是原因。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "strict": true, // You need either this option
    "strictBindCallApply": true // or this option
    // ...
  }
  // ...
}

免责声明

为了自动获取类型，您的故事必须是类型化的。请参阅示例。

import { Story, Meta } from '@storybook/angular';

import { ButtonComponent } from './button.component';

export default {
  title: 'Components/Button',
  component: ButtonComponent,
} as Meta;

// Story<Props> is the key piece needed for typescript validation
const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

许可证

MIT