Merge branch 'main' into 254-make-fmtにprisma-formatを追加する

.github/workflows/storybook-test.yml

@@ -48,12 +48,15 @@ jobs:
           path: frontend/node_modules
           key: cache-frontend-node-modules-${{ hashFiles('frontend/package-lock.json') }}
 
+      - name: playwright version
+        run: npx playwright -V > playwright-version.txt && cat playwright-version.txt
+
       - name: cache playwright
         id: cache-playwright
         uses: actions/cache@v3
         with:
           path: ~/.cache/ms-playwright
-          key: cache-playwright-${{ hashFiles('frontend/package-lock.json') }}
+          key: cache-playwright-${{ hashFiles('frontend/package-lock.json') }}-${{ hashFiles('playwright-version.txt') }}
 
       - name: cache backend node-modules
         id: cache-backend-node-modules

frontend/package.json

@@ -13,7 +13,7 @@
     "lint-fix": "eslint --fix src",
     "noEmit": "tsc --noEmit",
     "storybook": "storybook dev -p 6006 --quiet",
-    "storybook-test": "test-storybook",
+    "storybook-test": "test-storybook --maxWorkers=1",
     "storybook-test-ci": "concurrently --kill-others --success first \"npm run storybook\" \"wait-on tcp:6006 && npm run storybook-test\"",
     "storybook-update-snapshot": "test-storybook --updateSnapshot",
     "storybook-update-snapshot-ci": "concurrently --kill-others --success first \"npm run storybook\" \"wait-on tcp:6006 && npm run storybook-update-snapshot\"",

frontend/src/app/page.stories.tsx

@@ -20,12 +20,71 @@ export const Basic: Story = {};
 export const Login: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginBtn = canvas.getByText('login as fuga');
 
+    const loginBtn = canvas.getByText('login as fuga');
     await userEvent.click(loginBtn);
+    await sleep(1000);
+    expect(canvas.getByText('ChatChannelArea'));
+  },
+};
+
+export const SelectChannel: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-    await sleep(3000);
+    const hoge0 = canvas.getByText('hoge 0');
+    await userEvent.click(hoge0);
 
-    expect(canvas.getByText('ChatChannelArea'));
+    await sleep(1000);
+  },
+};
+
+export const SendMsg: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const hoge0 = canvas.getByText('hoge 0');
+    await userEvent.click(hoge0);
+
+    const inputElem =
+      canvas.getByTestId('input-test-id')?.firstElementChild?.firstElementChild;
+    if (inputElem === undefined || inputElem === null) {
+      expect(false);
+      return;
+    }
+    await userEvent.type(inputElem, 'This is test msg');
+    await userEvent.click(canvas.getByText('Send'));
+
+    // SEND ボタンに アニメーションがあり、スクショのタイミングによって
+    // スクショに若干の差異が生まれ テストが落ちてしまうので 適当に Footer を クリック
+    await userEvent.click(canvas.getByText('Footer'));
+
+    await sleep(1000);
+  },
+};
+
+export const SendSomeMsg: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const hoge0 = canvas.getByText('hoge 0');
+    await userEvent.click(hoge0);
+
+    const inputElem =
+      canvas.getByTestId('input-test-id')?.firstElementChild?.firstElementChild;
+    if (inputElem === undefined || inputElem === null) {
+      expect(false);
+      return;
+    }
+    for (let i = 0; i < 30; i++) {
+      await userEvent.type(inputElem, `This is test msg ${i}`);
+      await userEvent.click(canvas.getByText('Send'));
+    }
+
+    // SEND ボタンに アニメーションがあり、スクショのタイミングによって
+    // スクショに若干の差異が生まれ テストが落ちてしまうので 適当に Footer を クリック
+    await userEvent.click(canvas.getByText('Footer'));
+
+    await sleep(1000);
   },
 };

frontend/src/components/Elements/Input/Input.tsx

@@ -12,6 +12,7 @@ export const Input = ({
     <>
       <TextField
         id="outlined-multiline-static"
+        data-testid="input-test-id"
         multiline
         value={msg}
         onChange={onChangeAct}