具有依赖性的组件的故事书故事的基本示例

Question

我是故事书的新手，docs 非常清楚在 Angular 中写故事的惯用方式。这是我的应用程序的一个示例：

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

import {CustomerListComponent} from "@app/modules/customer/customer-search/components/customer-list/customer-list.component";

export default {
  title: 'Customer List',
  component: CustomerListComponent,
} as Meta;


const Template: Story = (args) => ({
  props: args,
});

export const EmptyArgs = Template.bind({});
EmptyArgs.args = {};

失败并出现以下错误：

确实，如果我们查看 CustomerListComponent 的构造函数，就会发现对 CustomerSearchComponent.

的依赖

@Component({
  selector: 'customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.scss']
})
export class CustomerListComponent {
  constructor (
    private customerSearchComponent: CustomerSearchComponent,
  ) {
  }
...

那么在这种情况下通常会做什么？我可以只告诉故事书加载那个组件，以及它具有的任何依赖项等等吗？我需要以某种方式传递 CustomerSearchComponent 的模拟吗？我很难找到像这样的案例的干净示例，故事书文档似乎假定组件对其他组件没有依赖性。

这也让我思考 - 我是否应该不打算使用故事书来呈现更大的视图（即具有多个子组件的父视图）？这会很难配置吗？

PS：随机问题 - storiesOf 语法是否已弃用？它不在官方文档中，而是在整个网络上的教程中。

Answer 1

根据您发布的内容，this 可能会对您有所帮助，您可以尝试一下，看看添加搜索组件是否也会呈现该组件。

此外，为了回答与 storiesOf 语法相关的问题，大多数受支持的框架都弃用了它，但 React Native 除外。根据维护者的反馈，React Native 将很快更新并删除它

具有依赖性的组件的故事书故事的基本示例

Basic example for storybook story for component with dependency

javascript

testing

angular

storybook