标签: angular-storybook

我使用 Storybook 创建组件库，我遇到了这个问题，我的组件实现了 ngOnChanges 方法，当我从 Storybook 控件传递值时，该方法不会运行。值从故事传递到组件，并且组件对标题进行视觉更改，但是尽管值传递到变量，但我的 ngOnChanges 方法不会被触发。

这是我的故事书代码，我在其中传递值：

import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/angular/types-6-0';

import { CountComponent } from '../app/count/count.component';

export default {
  title: 'Example/Count Component',
  component: CountComponent,
} as Meta;
const Template: Story<CountComponent> = (args: CountComponent) => ({   component: CountComponent,   props: args, });
    
export const Title = Template.bind({}); Title.args = …

我有一个下拉指令，我想将其添加到我的故事书中，但它不起作用。当我运行故事书上的按钮显示时，但如果我单击该按钮，则模板不会显示。

import {moduleMetadata} from '@storybook/angular';
import {CommonModule} from '@angular/common';
import {DropdownModule} from '../../app/base-components/dropdown';

export default {
  title: 'dropdown',
  decorators: [
    moduleMetadata({
      declarations: [],
      imports: [CommonModule, DropdownModule]
    })
  ]
};

export const withDropdownTemplate = () => ({
  template: '<button dropDown></button>',
  props: {
    displayTpl: `<ng-template #dropdownTpl>
  <ul>
    Hello World
  </ul>
</ng-template>`
  }
});

I started to use compodoc + storybook in a Angular 9 project.

Installed all the dependencies and Storybook is working fine, but for some reason the documentation.json generated by compodoc is empty, like this:

{
    "pipes": [],
    "interfaces": [],
    "injectables": [],
    "classes": [],
    "directives": [],
    "components": [],
    "modules": [],
    "miscellaneous": [],
    "routes": [],
    "coverage": {
        "count": 0,
        "status": "low",
        "files": []
    }
}

The command I'm using is:

compodoc -p .storybook/tsconfig.json -e json -d ./.storybook

And my tsconfig.json is:

{ …

升级到 Angular 10 后，某些组件出现以下错误 -

ERROR TypeError: Class constructor EventEmitter_ cannot be invoked without 'new'
    at new ZoneAwareEventEmitter (index.js:34)
    at new GridComponent (index.js:6167)
    at createClass (core.js:21921)
    at createDirectiveInstance (core.js:21790)
    at createViewNodes (core.js:30281)
    at callViewAction (core.js:30597)
    at execComponentViewsAction (core.js:30516)
    at createViewNodes (core.js:30309)
    at callViewAction (core.js:30597)
    at execComponentViewsAction (core.js:30516)

导致此问题的代码 -

import { EventEmitter } from "@angular/core";

export class ZoneAwareEventEmitter extends EventEmitter {
    constructor(ngZone, isAsync = false) {
        super(isAsync);
        this.ngZone = ngZone;
    }
}

我错过了什么吗？

先谢谢您的帮助！

我正在尝试测试角度分量的输出。

我有一个复选框组件，它使用 EventEmitter 输出其值。复选框组件包装在故事书故事中，用于演示和测试目的：

export const basic = () => ({
  moduleMetadata: {
    imports: [InputCheckboxModule],
  },
  template: `
<div style="color: orange">
 <checkbox (changeValue)="changeValue($event)" [selected]="checked" label="Awesome">
 </checkbox>
</div>`,
  props: {
    checked: boolean('checked', true),
    changeValue: action('Value Changed'),
  },
});

我正在使用一个操作来捕获值更改并将其记录到屏幕上。

然而，当为此组件编写 cypress e2e 时，我仅使用 iFrame 而不是整个故事书应用程序。

我想找到一种方法来测试输出是否正常。我尝试在 iFrame 中的 postMessage 方法上使用间谍，但这不起作用。

 beforeEach(() => {
      cy.visit('/iframe.html?id=inputcheckboxcomponent--basic', {
        onBeforeLoad(win) {
          cy.spy(window, 'postMessage').as('postMessage');
        },
      });
    });

然后断言将是：

  cy.get('@postMessage').should('be.called');

还有其他方法可以断言已(changeValue)="changeValue($event)" 触发吗？

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

@Component({
  selector: 'storybook-di-component',
  templateUrl: './di.component.html',
  providers: [{ provide: TEST_TOKEN, useValue: 123 }],
})
export class DiComponent {
  @Input()
  title: string;

  constructor(
    protected injector: Injector,
    protected elRef: ElementRef,
    @Inject(TEST_TOKEN) protected testToken: number
  ) {}

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

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

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

moduleMetadata: {
        providers: [
            { provide: StateStore, useValue: stateStore }
        ],
        imports: [...],
    },

我正在使用角度和故事书。我的模型中有 FormGroup 和 FormArray，但它们不适用于故事书。

a.stories.ts ->

import { CommonModule } from '@angular/common';
import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { Meta, moduleMetadata, Story } from '@storybook/angular';

export default {
    title: 'Example/A',
    component: AComponent,
    decorators: [
        moduleMetadata({
            imports: [
                CommonModule,
                ReactiveFormsModule,
            ],
            providers: [],
        }),
    ],
} as Meta;

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

export const Costs = Template.bind({});
Costs.args = {
    model: {
        questions: [
            {
                ...,
                "question": "lorem ipsum", …

我在 Nx 工作区中创建了一个 Angular 库来提供 ui 组件（ui-kit）。我向这个库添加了 Storybook，效果很好。现在我还想包括 Tailwind，因为组件使用了它。

我使用该nx generate @nrwl/angular:setup-tailwind --project=ui-kit --buildTarget=build-storybook命令为该库设置 tailwind。该库是可构建的。

我有一个 tailwind.config.js ，如下所示：

const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
const { join } = require('path');

module.exports = {
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

并添加了 tailwind-imports.css 内容

@tailwind base;
@tailwind components;
@tailwind utilities;

作为导入到preview.js库的 .storybook 文件夹中。

但是，没有顺风。

是否有任何可遵循的方法或一些使用 nx、Angular、storybook 和 Tailwind 的运行示例？

使用nx版本13.8.3

非常感谢您的帮助！

我一直在尝试让 Storybook 交互测试适用于我们的生产 Angular 应用程序。我们有使用 Karma/Jasmine 的现有测试，但我们希望实现 Storybook 测试以实现更多 UI 驱动的测试。

.stories.ts故事在组件文件旁边的文件中定义，如下所示：

import { Meta, Story } from '@storybook/angular';
import { userEvent, within } from '@storybook/testing-library';
import { CounterComponent } from "./counter.component";

export default {
  component: CounterComponent,
  title: 'Components/Counter',
  excludeStories: /.*Data$/,
} as Meta;

const Template: Story = () => ({});

export const Default = Template.bind({});
Default.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);

  await expect(canvas.getByTestId('text').innerHTML).toBe('0');

  await userEvent.click(canvas.getByRole('button'));

  await expect(canvas.getByTestId('text').innerHTML).toBe('1');
};

但是，在构建或运行 Storybook 测试时，我遇到了错误cannot …

我正在使用 Storybook 来显示角度分量。角度分量有一个在单击时调用的函数。但故事书没有调用这个函数。它只是在“操作”选项卡中记录一个事件，然后将其保留在那里。

样本.组件.ts

onClickFunc(): void {
    console.log('clicked');
    // do some other stuff
}

示例.component.html

onClickFunc(): void {
    console.log('clicked');
    // do some other stuff
}

当我单击 div 时，它只是将其记录在操作选项卡中，但实际上并未调用该函数，因此没有 console.log 或其他代码运行。

现在有趣的是，如果我让故事书服务器保持运行并更改 ts 文件和 html 文件中的函数名称，则开始工作。没有登录“操作”选项卡，并且 console.log() 可以工作。但是当我停止服务器并再次启动它时，我们又回到了同样的问题。

安装和启动故事书时出现以下错误。

ERROR in /Users/username/angular-storybook/src/stories/Button.stories.ts
ERROR in /Users/username/angular-storybook/src/stories/Button.stories.ts(2,29):
TS2307: Cannot find module '@storybook/angular/types-6-0'.

ng版本

Angular CLI: 8.3.29
Node: 12.16.2
OS: darwin x64
Angular: 8.2.14

开发依赖

    "@compodoc/compodoc": "^1.1.11",
    "@storybook/addon-actions": "^6.0.12",
    "@storybook/addon-essentials": "^6.0.12",
    "@storybook/addon-links": "^6.0.12",
    "@storybook/angular": "^6.0.12"

我安装了故事书，npx sb init但是当尝试运行故事书时in angular 16出现以下错误。这些错误并不指向项目中的任何特定代码，而是指向节点和角度中的一些随机代码。

\n

变量 'AbortSignal' 的类型必须为 '{ new (): AbortSignal; 原型：AbortSignal；中止（原因？：任何）：AbortSignal；超时（毫秒：数字）：AbortSignal；}'，但这里有类型 '{ new (): AbortSignal; 原型：AbortSignal；}

\n

\n

类型“ServerOptions”不是通用的

\n

这是详细的错误消息：

\nError: node_modules/@types/node/globals.d.ts:72:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'AbortSignal' must be of type '{ new (): AbortSignal; prototype: AbortSignal; abort(reason?: any): AbortSignal; timeout(milliseconds: number): AbortSignal; }', but here has type '{ new (): AbortSignal; prototype: AbortSignal; }'.\n\n72 declare var AbortSignal: {\n               ~~~~~~~~~~~\n\n …

我在我的 Angular 项目中安装了 Storybook，一切正常，直到今天，当我运行时，yarn install这个 Storybook 构建失败并出现以下 TS 错误

node_modules/@storybook/api/dist/ts3.9/modules/shortcuts.d.ts:55:18 - 错误 TS2430：接口“Event”错误地扩展了接口“KeyboardEvent”。呃！属性“目标”的类型不兼容。呃！类型 '{ tagName: string; 中缺少属性 'prototype' addEventListener(): 无效; 删除事件监听器（）：布尔值；调度事件（事件：事件）：布尔值；getAttribute(attr: string): 字符串 | 无效的; }'，但在“EventTarget”类型中是必需的。呃！呃！55 导出接口Event extends KeyboardEvent { 错误！~~~~~ 错误！呃！node_modules/typescript/lib/lib.dom.d.ts:5144:5 错误！第5144章 原型：EventTarget；呃！~~~~~~~~~ 错误！“原型”在这里声明。块引用

包.json

  "name": "tour",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
    "storybook": "npm run docs:json && start-storybook -p 6006",
    "build-storybook": "npm run …