问题标签 [angular-storybook]

我用 Angular 创建了一个简单的故事，但故事参数没有出现在组件中。故事：

零件：

构造函数：

它显示未定义。我是否必须设置提供程序或构造函数参数？

我开始在 Angular 组件库中使用 Storybook。

它适用于具有布尔值或字符串等输入的组件，它使用控件显示这些输入。

但是有些组件的输入是一个对象。

对于那些组件，我可以提供一个对象，但用户可以使用对象的 JSON 表示来编辑字符串，而不是几个输入。

如何以用户友好的方式执行此操作，以便用户可以在控件中编辑这些属性，而无需使用对象的 JSON 表示？

我有一个非常基本的 Angular 10 应用程序。我添加了 Storybook 和npx sb init. 该项目要求应用程序在 IE11（13% 的流量）上运行，所以我.babelrc在项目根目录中添加，not从 IE 中删除并将in.browserlistrc设置为.targettsconfiges5

应用程序本身可以在 IE 中运行，但是当打开故事书时，我得到了SCRIPT1002: Syntax error来自供应商〜主包的消息，显然是由以下原因引起的：class DomAdapter { }.

可以做些什么呢？我没主意了...

.babelrc：

tsconfig 基础

我正在尝试将 Angular 与 Storybook 一起使用，并使用按钮旋钮打开一个垫子对话框。

我需要添加constructor(public dialog: MatDialog) {}但我不知道将构造函数放在哪里。我试图在旋钮回调中创建整个组件的新实例，但没有运气。有任何想法吗？

我有一个使用 Angular Bootstrap 的 Toast 组件：

此组件模板通过服务调用：

<app-toast></app-toast>因此，从任何具有.

问题：如何定义使用 Service 来呈现组件的故事？show如您所见，除非通过该方法 调用服务，否则组件不会呈现模板。我怎样才能在故事中复制这一点？

到目前为止的故事：

试过： 我试过new在故事中实例化一个服务，但这不起作用。

我也可以demo为故事书创建一个组件，它自己从服务中调用show方法，但我宁愿不必为故事书和任何其他组件创建额外的组件，而是按原样使用，因为它更容易管理.

有没有办法在故事书中调用服务并调用show里面的函数？

我正在尝试使用 Protractor 对 Storybook 的 UI 组件进行 e2e 测试。任何使用定位器在页面上查找元素的尝试都会在终端中显示错误，指出无法使用量角器定位器找到该元素，即（by.css、by.id 和 by.className）。但是，在运行涉及按钮文本的测试时，它们成功通过且没有错误。

重现

重现行为的步骤：要重现问题，必须在使用 Angular 的故事书项目中安装量角器。运行量角器命令开始测试。

测试失败并在终端中出现此错误：失败：使用定位器找不到元素：By（css选择器）

预期行为

预期的行为是在屏幕上定位输入字段并将文本传递到输入字段以检查该输入的值是否等于特定值。

代码：

HTML：

附加上下文

如果我将类名或 ID 添加到输入字段，并尝试使用任一方法进行定位，则会出现相同的错误。但是，在 Protractor API 的按钮上使用 buttonText 或 partialButtonText 可以正常工作。Protractor 和 Storybook 之间是否存在我不知道的兼容性问题？

故事书 iFrame 可能会妨碍查找元素，但我不确定是否有解决方法。

我创建了多个角度库，角度项目没有应用程序。如果我将模板和样式放在.component.ts中，它可以正常工作。但是如果我使用外部模板和样式，它会开始抛出错误并且在故事书中不起作用。

我必须在angular.json中指定什么吗？我一直卡在这个问题上，请帮忙。

我定义了一个组件“test-component-wrapper”，其中 viewencapsulation 设置为 none。它的模板只有一个

我还用这个模板定义了一个“测试组件项”

在故事书中，我尝试使用此模板创建故事

但它不起作用...... dom 没有被渲染。如果我在没有课的情况下添加这个故事，它会起作用。我直接在 Angular 项目中尝试过，并添加了类。我该如何解决？

这个问题是针对 Angular 9 的，尽管这个问题在任何情况下都应该是有效的。

我有一个或多或少看起来如下的组件：

并在组件内部执行几个步骤并以 this.control.setValue(value); 结束。

我想使用插件操作来捕获该功能，但我无法做到这一点，因为我找不到如何捕获嵌套事件的方法。

我通常这样做：

但是当然没有任何动作，我也尝试：

但似乎因为不在第一级，所以那里没有捕获。

我有一个具有组件级提供程序的 Angular 组件。

在这种情况下，我如何让故事书注入不同的提供者，以便我可以提供替代/模拟服务？例如，在上面的 DiComponent 中，如果我想注入{ provide: TEST_TOKEN, useValue: 456 }呢？

真实世界的用例是我正在使用 ngrx/component-store 并且需要为组件提供一个虚拟的、预填充的存储。

（附加信息：）在模块级别（如下所示）注入它不起作用，因为组件仍在运行并创建它自己的提供者实例：