Storybook でフロントエンド開発の治安を良くしていく話

https://gyazo.com/0478f03b0fa81b651ef7ceb48e00070f

https://gyazo.com/5510d4e88c34b7dc94f91817952946e7

メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります

自己紹介

得意領域

車で10分圏内

中の人の所属先情報

https://gyazo.com/c9ab653c5ea3a08ab646801f7bcdc0b8

プロダクト本部 プロダクト開発部 プラットフォーム開発 4グループ所属

テクニカルサポート対応したり

10年選手くらいの長いやつとか

立ち上げるまで確認ができない

立ち上がらないこともあると最悪

https://gyazo.com/f7e906efa8e95e2ca3c9bad777205a1e

バックエンドフレームワークに載らないディレクトリで管理

もし不要ならポイーで良さそう

https://gyazo.com/cc0ce5a30da2779a1fcf6f87da089a28

新しい技術を使っていけるような周辺整備

ここを充実していきたい

A general guide for the **return on investment** 🤑 of the different forms of testing with regards to testing JavaScript applications.

- End to end w/ @Cypress_io ⚫️

- Integration & Unit w/ @fbjest 🃏

- Static w/ @flowtype 𝙁 and @geteslint ⬣

https://pbs.twimg.com/media/DVUoM94VQAAzuws.jpg

いわゆる寸胴型

この部分の厚みを増やす

今の取り組みたいイメージと合致しそう

なんかイメージしやすいいいツールないかな…

https://gyazo.com/f7e906efa8e95e2ca3c9bad777205a1e

「つながり」を見る

想定：フォームコンテナ的なもの

https://gyazo.com/318d838593b039892533f45eedf6acf5

Story をつくっていく

正常パターン

各フォームに入力→送信完了

code:ts

export const createApiSucessMock = (): RestHandler<MockedRequest<DefaultBodyType>>[] => [

rest.post('/api/hello', (_req, res, ctx) => {

const json: ApiSuccessResponse<ApiVisitResponse> = {

status: "sucess",

status_code: 200,

data: {

message: "hello",

},

};

return res(ctx.json(json));

}),

];

エラーパターン（一例）

フォーム未入力の場合

https://gyazo.com/0b23b51b31005bab0a7f3becd3e0224c

https://gyazo.com/51fad77b837d311b1e8bfb74f534a013

送信時のエラー時

Play function にて挙動チェック

code:storybook.ts

import ExampleForm from './ExampleForm.vue';

import { screen, userEvent, waitFor } from '@storybook/testing-library';

import { createApiPublicVisitMock } from './mockfile';

export default {

title: 'pages/ExampleForm',

component: Login,

};

const Template = (args) => ({

components: { ExampleForm },

setup: () => ({ args }),

parameters: {

msw: {

},

}

});

export const ExampleSucessStory = Template.bind({});

ExampleSucessStory.play = async () => {

const TitleInput = screen.getByLabelText('タイトル', {

selector: 'input',

});

await userEvent.type(TitleInput, 'Saitama.js', {

delay: 100,

});

const DescriptionInput = screen.getByLabelText('説明文', {

selector: 'textarea',

});

await userEvent.type(DescriptionInput, '素敵なイベントです！', {

delay: 100,

});

const Submit = screen.getByRole('button');

await userEvent.click(Submit);

};

code:test.js

describe("なんらかのフォーム", () => {

test("正常系パターン", async () => {

const { container } = render(<ExampleSucessStory />);

await ExampleSucessStory.play({ canvasElement: container });

// 送信完了できているとう体でチェック

expect(await screen.findByText("登録完了しました")).toBeInTheDocument();

});

});

用途

Tips

code:test.js

/**

* Date.now() を mock する。

* /

let dateNowOrig = null;

test.beforeAll = () => {

dateNowOrig = Date.now;

Date.now = () => new Date('2021-10-30T08:30:00.000Z').getTime();

};

test.afterAll = () => {

Date.now = dateNowOrig;

};

用途

レビュー時にお役立ち

レビューの安心に繋がる

種類

こちらを活用しています

従量課金制

導入企業・サービス例

なんか最近流行ってますね

それらを確認できる環境をつくる

起動が重い

6.5.0 からは設定ファイルがあるとそっちで読んでくれる

そのほか

Storybook腐りやすい問題

おうじ

絶賛腐ってる

運用していくしかない

SmartHRはここに投資していく

前職では

OKRにデザインシステムのメンテナンス目標に入れる

うさぎ

バージョンニングしてデプロイしてた

＝バージョンが違うと差分がある

ライブラリのアップデートはしていかないといけない

どんな人でもコミットしてよい

社内OSSをするのは無茶だったのでメインメンテナを入れるようにした

はるけん

Storybook警察やってる

警察を置くのは大変？

運用メンバーというのは建てられると良いと思う

まとめ

宣伝タイム

Thank you for listening !

https://gyazo.com/4c1d0df4903765cc351797c10f903ba1