StorybookをAngularで試した

Storybookが気になったので、Angularを使って試しました。
以下の内容をそのまま試していきましたが、Angularの場合、うまく動作しないところがありました。
修正しながら一通り試したので、その内容を残しておきます。
ページに掲載されているコードに記載ミスがあり、それなりにハマりました。

www.learnstorybook.com

ソースはこちらです。

github.com

以下、Learn Storybookのコンテンツ名に沿って補足します。

Get started

learnstorybookではLESSを使って、CSSを定義していますが、そのままCSSを使いました。
styles.cssに全量のCSSを定義しています。
また、assetsに関してもstorybookから参照するように以下のオプションをつけて起動しています。

package.json

...
    "storybook": "start-storybook -p 6006 -s ./src/assets",
...

Build a simple component

TaskComponentをStorybook Serverで動作させるのはすんなりできました。

Storyshotsの動作は修正が必要でした。

ほぼこちらを参考にしました。

github.com

ポイントとしては以下の通りです。

環境変数NODE_ENVにtestを設定する

package.json

...
    "test": "cross-env NODE_ENV=test ng test",
...

古いパッケージを参照することによって、testが失敗する可能性があるため、jestのcacheを使用しないようにする

jest.config.js

...
  cache: false,
...

Assemble a composite component

コンポーネントを組み合わせてリスト化するのはすんなりできました。

Unit tests with Jest

ユニットテストの部分はDOMの作り方がフロントエンドFWによって違うため、修正が必要です。
以下のように修正しました。

task-list.component.spec.ts

...
  it('renders pinned tasks at the start of the list', () => {
    fixture = TestBed.createComponent(TaskListComponent);
    component = fixture.componentInstance;
    component.tasks = withPinnedTasks;

    fixture.detectChanges();
    const lastTaskInput = fixture.debugElement.query(
      By.css('.list-item:nth-child(1) input[type="text"]'),
    );

    // We expect the task titled "Task 6 (pinned)" to be rendered first, not at the end
    expect(lastTaskInput.nativeElement.value).toBe('Task 6 (pinned)');
  });
...

まとめ

今回の内容に注意すれば、Learn Storybookの内容通りに進めることができます。
Storybookはスタイルガイドとしての役割がメインだと思っていましたが、それだけでなく、コンポーネント駆動開発を実現する開発基盤であることが分かりました。
Storybookをベースに開発していくことで、Snapshotテストやビジュアルテストといったテストがやりやすくなり、開発体験の向上に寄与するものだと思います。