Storybookを導入する #2140
Storybookを導入する #2140
Conversation
.storybook/main.ts
Outdated
There was a problem hiding this comment.
npx sb init --builder @storybook/builder-viteしたら入る設定ほぼそのままです。ファイルパスもここ。
唯一docgen: "vue-component-meta",がドキュメントの自動生成に必要？っぽかったので足しました。
.storybook/preview.ts
Outdated
There was a problem hiding this comment.
こっちのファイルもほぼinitで入るのをVOICEVOXに合うようにしていっただけです。
Previewはちょっと違うのでメモします。
const preview: Preview = {
tags: ["autodocs"], // Storybookにドキュメントを自動生成する
parameters: {
docs: {
toc: true, // 自動生成したドキュメントに目次をつける
},
},
argTypesEnhancers: [addActionsWithEmits], // Vueの`emit`系を自動的にイベントに登録する。argTypeをactionにすればイベントになるらしい。
};
| ## リント（静的解析） | ||
| ## コードフォーマット | ||
|
|
||
| コードの静的解析を行い、バグを未然に防ぎます。プルリクエストを送る前に実行してください。 | ||
| コードのフォーマットを整えます。プルリクエストを送る前に実行してください。 | ||
|
|
||
| ```bash | ||
| npm run lint | ||
| npm run fmt | ||
| ``` | ||
|
|
||
| ## コードフォーマット | ||
| ## リント（静的解析） | ||
|
|
||
| コードのフォーマットを整えます。プルリクエストを送る前に実行してください。 | ||
| コードの静的解析を行い、バグを未然に防ぎます。プルリクエストを送る前に実行してください。 | ||
|
|
||
| ```bash | ||
| npm run fmt | ||
| npm run lint | ||
| ``` |
There was a problem hiding this comment.
リントしてエラーになって手動でフォーマットしたあとにフォーマット方法に気づいた、みたいなことがないように逆にしてみました
There was a problem hiding this comment.
同じテストをStorybookに移したのでこっちはいらないはず
There was a problem hiding this comment.
アプデ通知ダイアログのStoryとかが置いてるのがここ。
コピペすれば別のコンポーネントにも使い回せるはず。
最初にPropsとかを定義して、あとはユースケースに合わせてStoryとPlayを書く感じ。
ダイアログはまだStorybookと相性悪い感じでした。
| const props = defineProps<{ | ||
| /** ダイアログの表示状態 */ | ||
| modelValue: boolean; | ||
| /** 公開されている最新のバージョン */ | ||
| latestVersion: string; | ||
| /** 表示するアップデート情報 */ | ||
| newUpdateInfos: UpdateInfo[]; |
There was a problem hiding this comment.
こうやってドキュメントを書けばStorybookに反映される。
（今回はダイアログだから自動ドキュメントがないけど。。）
| newUpdateInfos: UpdateInfo[]; | ||
| onSkipThisVersionClick: (version: string) => void; |
There was a problem hiding this comment.
イベントはコールバックにするやり方と、emitにするやり方があるけど、emitにするとドキュメントがいい感じになるのでそっちのが良さそう。
これはコールバック形式だったので移動しました。
| /** ダイアログの表示状態が変わるときに呼ばれる */ | ||
| (e: "update:modelValue", value: boolean): void; | ||
| /** スキップするときに呼ばれる */ | ||
| (e: "skipThisVersionClick", version: string): void; |
There was a problem hiding this comment.
イベントのドキュメントの書き方に悩みました。
とりあえずコンポーネント側から見て「～するときに呼ばれる」としました。
Quasarのドキュメントを参考にしてます。
（Emitted when showing/hiding state changes.みたいな文になってました）
| @@ -58,6 +58,32 @@ jobs: | |||
|
|
|||
| - run: npm run test:unit | |||
|
|
|||
| - name: Setup playwright | |||
| run: npx playwright install | |||
| - name: Run Storybook tests | |||
There was a problem hiding this comment.
unitテストかe2eテストかどちらかと言われればunitテスト（エンジンが不要）なので、unitテストのjobに足しました。
npm ciが長いので基本直列のがお得かなと。
There was a problem hiding this comment.
お試しでChromaticにもpushしてみてます。
https://www.chromatic.com/docs/github-actions/
に書いてたコードほぼそのままです。
| ### コンポーネントのテスト | ||
|
|
||
| Storybook を使ってコンポーネントのテストを行います。 | ||
|
|
||
| ```bash | ||
| npm run storybook # 先に Storybook を起動 | ||
| npm run test:storybook | ||
| npm run test-watch:storybook # 監視モード | ||
| ``` |
There was a problem hiding this comment.
Storybookをdevで起動してからtestを回す、みたいな設計になってました。
リモートにあるStorybookでテストを回せるようにする設計みたいです。
|
多分大丈夫だと思うのでマージします！ エンジンのモックを書こうと思います。 |
|
VuexでStoreをmockするコード // デコレーター
export const decorators: Decorator[] = [
(story, context) => {
return {
setup() {
const store = createStoreWrapper();
provide(storeKey, store);
context.parameters.storeState = store.state;
return story()
},
};
},
];
// store側export function createStoreWrapper() {
return createStore<State, AllGetters, AllActions, AllMutations>({
...
}
}
export const store = createStoreWrapper();chromaticのgithub actionsが落ちちゃったので修正します 🙇 |
内容
Storybookを導入してみます。
とりあえずアップデート通知ダイアログをテストしてます。
使い方もREADMEに書きました。
とりあえず
npm run storybookして、*.stories.tsを定義すればOKなはず。とりあえず表示だけで済む（Vuexがいらない）コンポーネントを選びました。
今後のリファクタリングの方針によってはVuexを指すことになりそう？
（どうやってmock入れれば良いだろう･･･。）
Storybookでのテストはユニットテストに足してみました。
一番わかりやすいのはインテグレーションテスト（統合テスト）なのですが、まあ何が統合テストで何が単体テストなのかは最近考えなくてもいい風潮があるので、一緒にしてみました。
（単体テストと一緒にしないならe2eテストになるけど、ただ表示するだけどテストとかなのでe2eかというと微妙だなと）
chromaticにも登録してみました。とりあえずmainブランチ更新されたら更新される･･･はずです。
たぶんChromaticのURLはここ https://www.chromatic.com/library?appId=667d9c007418420dbb5b0f75
Chromatic内のStorybookのURLは･･･どこになるかわからないです。。
たぶんここ･･･？ https://main--667d9c007418420dbb5b0f75.chromatic.com/
ちなみに今のStorybookはこのあたりです
スクリーンショット・動画など
その他