故事书组件弃用

Question

这个设置是Angular 14和Storybook 6.5.9。

基本上，我有一些组件，我想测试它们在被另一个组件使用时是否正常工作。一个具体的例子是一个通过VALUE_ACESSOR公开Angular表单的组件，我想创建一个故事来测试表单是否正确输出到父组件。

所以我的组件会像这样：

export default {
  title: 'Components / Molecule / Multi select dropdown',
  component: MultiSelectDropdownComponent,

  decorators: [
    moduleMetadata({
      imports: [
        // all the necessary imports here
      ]
    })
  ],
  argTypes: {
    selectedOptions: { action: 'selectedOptions' },
    selectedFilteredList: { action: 'selectedFilteredList' }
  }
} as Meta;

export const empty: Story<Model.Input> = (props) => ({ props });

export const initial: Story<Model.Input> = (props) => ({ props });
initial.args = Mock.initial; //<-- this is just a file has mocks for all scenarios

export const hasSelectAllConfig: Story<Model.Input> = (props) => ({ props });
hasSelectAllConfig.args = Mock.hasSelectAllConfig;

export const template: Story<Model.Input> = (props) => ({
  props,
  component: MultiSelectDropdownTemplateStoryComponent // <--- THIS IS THE IMPORTANT PART
});
initial.args = Mock.initial;

MultiSelectDropdownTemplateStoryComponent 的导入涉及到另一个文件，该文件是一个 Angular 独立组件：

@Component({
  selector: 'molecule-story-component',
  standalone: true,
  template: `
    <!-- Here I create the form implementation to "listen" to the actual component -->
    <form [formGroup]="parentForm">
      <molecule-multi-select-dropdown
        [listOptions]="mockData.listOptions"
        [labelName]="mockData.labelName"
        formControlName="form"
      >
      </molecule-multi-select-dropdown>
    </form>
    <button (click)="resetForm()">Reset Form</button>
    <div>Form value: {{ parentForm.value | json }}</div>
  `,
  imports: [
    CommonModule,
    MultiSelectDropdownModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class MultiSelectDropdownTemplateStoryComponent implements OnInit {
  parentForm!: FormGroup;

  mockData = Mock.initial;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this._setupForm();
  }

  resetForm() {
    this.parentForm.reset();
  }

  private _setupForm() {
    this.parentForm = this._formBuilder.group({
      form: []
    });
  }
}

这种策略帮助我验证我的组件是否有效，是否在父级上工作，并且也是新开发成员实施该组件的指南。由于实现也在组件上，我的新手开发人员会询问较少有关如何实现它的问题，因此我们可以更多地关注它的工作原理。

我遇到的问题是CSF3。当我将鼠标悬停在component上时，它说已被弃用并将在V7中删除。我计划提前检查如何使这些故事起作用，因为我不仅为此提供了模板，而且还提供了不同的组件。

这篇博客文章讲述了CSF3：https://storybook.js.org/blog/storybook-csf3-is-here/，但它们没能帮助我理解如何重构我的代码。

在查找时，我发现Typescript支持在CSF3中确实提供了一些澄清，但是StoryObj<T>接口不再具有component属性。

所以我正在寻找解决方案或文档，要么解释如何做到这一点，要么确认我不能再提供整个组件，我需要仅使用模板的策略。

- Estevao Santiago

---

你有在Storybook的GitHub上问过这个问题吗？我对这个重大变化也来得晚，让我也感到意外。现在可能需要每个组件一个文件了吧？ - Mateo Tibaquira

我找到了该 PR 并在此处提问：https://github.com/storybookjs/storybook/pull/21807 - Mateo Tibaquira

Answer 1

使用Storybook 7之后，有些事情发生了变化，现在无法像以前那样定义组件。要渲染自定义的故事组件，请按照以下新方法进行操作：

export const empty: StoryObj<MultiSelectDropdownTemplateStoryComponent> = {
  render: (args) => {
    return {
      props: args,
      template: `<molecule-story-component></molecule-story-component>`
    };
  }
};

- Emre Öztürk