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

Question

Am new to storybook and the docs make it pretty clear on the idiomatic way to write stories in Angular. Here's an example of one for my app:

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 = {};

This fails with the following error:

Indeed, if we look at the constructor for the CustomerListComponent there is a dependency on CustomerSearchComponent .

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

So what is typically done in this case? Can I just tell storybook to load that component, and any dependencies it has and so forth? Do I need to pass a mock of CustomerSearchComponent somehow? Am having trouble finding clean examples of cases like this, storybook docs seem to assume components with no depenencies on other components.

This also has me thinking - should I not plan to use storybook to render larger views (ie. parents with several child components)? Is that going to be hard to configure.

---

PS: random question - is storiesOf syntax deprecated? It's not in official docs but tutorials all over the web.

Answer 1

Based on what you've posted, this probably could help you, can you try on your end and see if adding the search component as well will render the component.

Also, to answer your question related to the storiesOf syntax, it's deprecated to the majority of the supported frameworks, with the exception of React Native. Based on the feedback from the maintainer React Native will be getting an update soon removing it