【Angular】AngularでStorybookを使ってみた - addon-actions編

概要

• 今回はStorybookのaddon-actionsを使用したサンプルです。
• addon-actions は AngularのOutput時の動作をStorybook上で確認できるようになります。

github.com

• AngularでのStorybookの設定については以下の記事を参照ください。

kakkoyakakko2.hatenablog.com

実行環境

• Node.js - 12.x

使用ライブラリ

• Angular - 9.1.x
• @storybook/angular - 5.3.x
• @storybook/addon-actions - 5.3.x

サンプルソース

src/app/custom-button.component.ts

import { Component, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'custom-button',
  template: `<button (click)="onClick()">{{ label }}</button>`,
})
export class CustomButtonComponent {
  @Input() label = 'button';

  @Output() btnClick = new EventEmitter();

  onClick(): void {
    this.btnClick.emit(this.label);
  }
}

src/app/custom-button.component.stories.ts

• props に ComponentでOutputとして定義したbtnClickに対してaction を定義します。

import { action } from '@storybook/addon-actions';
import { CustomButtonComponent } from './custom-button.component';

export default {
  title: 'CustomButton',
};

export const Basic = () => ({
  component: CustomButtonComponent,
  props: { btnClick: action('hoge') },
});

.storybook/main.js

• addons に @storybook/addon-actions を追加します。

module.exports = {
  stories: ['../src/**/*.stories.[tj]s'],
  addons: [
    '@storybook/addon-actions',
  ]
};

.storybook/tsconfig.json

• Storybook用のTypeScriptのコンパイル構成を定義します。

{
  "extends": "../tsconfig.json",
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
  ],
  "include": [
    "../src/**/*",
  ]
}

実行

• start-storybook -p 8080 で実行できます。（-p 8080 はポート番号）
• http://localhost:8080/ にブラウザからアクセスすることで、Storybookの確認が出来ます。

サンプルソース一式

github.com

おわりに

• Storybook上で、どのアクションが実行されたかの確認ができるため便利なAddonです。
• Presentational Componentなどの@Inputと@OutputのみでインジェクションしないComponentに対して動作確認ができるので便利です。