Merge pull request #108 from kento-yoshidu/94_Form4

✨ #94 テストを作成

__tests__/form4.test.tsx

@@ -0,0 +1,94 @@
+import { cleanup, render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { rest } from "msw"
+import { setupServer } from "msw/node"
+
+import "@testing-library/jest-dom/extend-expect"
+import 'cross-fetch/polyfill'
+
+import Form4 from "../pages/form4"
+
+const server = setupServer(
+  rest.post("/api/form3", (_req, res, ctx) => {
+    return res(ctx.status(200), ctx.json({ email: "[email protected]" }))
+  })
+)
+
+beforeAll(() => server.listen())
+
+afterEach(() => {
+  server.resetHandlers()
+  cleanup()
+})
+
+afterAll(() => server.close())
+
+describe("Form4", () => {
+  describe("初回レンダリング時、各要素が正しく表示されていること", () => {
+    it("Form4がレンダリングされること", () => {
+      render(<Form4 />)
+      expect(screen.getByTestId("form-title")).toBeTruthy()
+    })
+
+    it("初回レンダリング時、変換結果が表示されるエリアに何も表示されていないこと", () => {
+      render(<Form4 />)
+      expect(screen.queryByTestId("result-area")).toBeNull()
+    })
+
+    it("初回レンダリング時、エラーメッセージが表示されていないこと", () => {
+      render(<Form4 />)
+      expect(screen.queryByTestId("error-message")).toBeNull()
+    })
+
+    it("初回レンダリング時、ボタンがdisabledになっていること", () => {
+      render(<Form4 />)
+      expect(screen.getByTestId("submit")).toBeDisabled()
+    })
+  })
+
+  describe("正しいメールアドレスを入力し送信した時に、各要素が正しく表示されていること", () => {
+    it("送信ボタンをクリックした時、変換結果が表示されること", async () => {
+      render(<Form4 />)
+      const passwordForm = screen.getByTestId("email")
+      await userEvent.type(passwordForm, "[email protected]")
+      await userEvent.click(screen.getByTestId("submit"))
+      expect(screen.getByTestId("result-area")).toHaveTextContent("[email protected]")
+    })
+  })
+
+  describe("メールアドレスを入力した時、バリデーションが正しく働くこと", () => {
+    it("正しいメールアドレスを入力した時、ボタンのdisabledが解除されること", async () => {
+      render(<Form4 />)
+      await userEvent.type(screen.getByTestId("email"), "[email protected]")
+      expect(screen.getByTestId("submit")).not.toBeDisabled()
+    })
+
+    it("正しいメールアドレスを入力しフォーカスを外した時、エラーメッセージが表示されないこと", async () => {
+      render(<Form4 />)
+      await userEvent.type(screen.getByTestId("email"), "[email protected]")
+      expect(screen.queryByTestId("error-message")).toBeNull()
+    })
+
+    it("正しくないメールアドレスを入力した時、ボタンがdisabledになっていること", async () => {
+      render(<Form4 />)
+      await userEvent.type(screen.getByTestId("email"), "dummy")
+      expect(screen.getByTestId("submit")).toBeDisabled()
+    })
+
+    it("正しくないメールアドレスを入力しフォーカスを外した時、エラーメッセージが表示されること", async () => {
+      render(<Form4 />)
+      await userEvent.type(screen.getByTestId("email"), "dummy")
+      await userEvent.tab()
+      expect(screen.getByTestId("error-message")).toBeTruthy()
+    })
+
+    it("正しくないメールアドレスを入力しフォーカスを外し、再度フォーカスした時、エラーメッセージが表示されないこと", async () => {
+      render(<Form4 />)
+      const emailForm = screen.getByTestId("email")
+      await userEvent.type(emailForm, "dummy")
+      await userEvent.tab()
+      await userEvent.click(emailForm)
+      expect(screen.queryByTestId("error-message")).toBeNull()
+    })
+  })
+})

pages/form4/index.tsx

@@ -69,7 +69,12 @@ const Form4 = () => {
 
       <Container>
         <div className={styles.wrapper}>
-          <h3 className={styles.title}>メールアドレス登録フォーム</h3>
+          <h3
+            className={styles.title}
+            data-testid="form-title"
+          >
+            メールアドレス登録フォーム
+          </h3>
 
           <p className={styles.text}>利用するメールアドレスを入力してください（適当なアドレスでOKです。ただ、バリデーションがかかりますので、形式は正しいものにしてください）。</p>
 
@@ -126,7 +131,21 @@ const Form4 = () => {
 
           <p>HTML標準でこういう機能を提供してくれるのはありがたいですね。この正規表現も完璧なものではないらしいですが、今回はありがたく利用しましょう。</p>
 
-          <p>テストコードは実装中です。</p>
+          <p>テストコードは<a href="https://github.com/kento-yoshidu/MyForms/blob/main/__tests__/form4.test.tsx">こちら</a>です。テストは、</p>
+
+          <ol>
+            <li>初回レンダリング時、変換結果が表示されるエリアに何も表示されていないこと</li>
+            <li>初回レンダリング時、エラーメッセージが表示されていないこと</li>
+            <li>初回レンダリング時、ボタンがdisabledになっていること</li>
+            <li>正しいメールアドレスを入力し送信ボタンをクリックした時、入力したメールアドレスが表示されること</li>
+            <li>正しいメールアドレスを入力した時、ボタンのdisabledが解除されること</li>
+            <li>正しいメールアドレスを入力しフォーカスを外した時、エラーメッセージが表示されないこと</li>
+            <li>正しくないメールアドレスを入力した時、ボタンがdisabledになっていること</li>
+            <li>正しくないメールアドレスを入力しフォーカスを外した時、エラーメッセージが表示されること</li>
+            <li>正しくないメールアドレスを入力しフォーカスを外し、再度フォーカスした時、エラーメッセージが表示されないこと</li>
+          </ol>
+
+          <p>を行っています。</p>
         </Description>
 
         <PageLink prev="3" />