时间戳

首页 > 解决方案 > Storybook.js + Storyshots 中的组件初始化（使用 Angular）

angular - Storybook.js + Storyshots 中的组件初始化（使用 Angular）

问题描述

我有这些包的工作配置：

 "@storybook/addon-essentials": "^6.2.9",
 "@storybook/addon-storyshots": "^6.2.9",
 "@storybook/angular": "^6.2.9",
 "jest": "27.0.4",
 "@angular/compiler-cli": "^10.2.4",

执行故事书时，我可以看到故事中的组件，......而且它看起来和工作正常。仅当我尝试使用 storyshots 场景运行测试（ng test --verbose --detectOpenHandles）时才会出现问题。

组件在没有参数的情况下进行初始化，并在稍后设置。使用以下哪种方式无关紧要：

export const Primary = () => ({
  props: {
    data: {
      userCount: 300,
    }
  }
});

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

或者

export const SecondaryArgs = Template.bind({});
SecondaryArgs.args = {
  data: {
    userCount: 400,
  }
};

在这两种情况下，以下组件都会出现TypeError: Cannot read property 'userPrediction' of undefined。

<span *ngIf="data.userPrediction">
  Foo
</span>

有没有办法，如何直接用参数初始化组件？我当前的解决方法是用 '<ng-container *ngIf="data">' 将它括起来，但我不想让我的所有组件复杂化。

标签： angulartestingstorybook

解决方案

推荐阅读