Develop

__tests__/form7.test.tsx → __tests__/__form7

@@ -10,6 +10,7 @@ import Form7 from "../pages/form7"
 
 const server = setupServer(
   rest.post("/api/api5", (_req, res, ctx) => {
+    // https://tech.classi.jp/entry/2022/03/30/120000
     return res(ctx.status(200), ctx.json({ name: "KENTO" }))
   })
 )
@@ -24,43 +25,53 @@ afterEach(() => {
 afterAll(() => server.close())
 
 const inputText = "お名前 ※必須"
-const buttonText = "変換する"
+const buttonText = "ログイン"
 
-describe("Form6", () => {
+describe("Form7", () => {
   describe("初回レンダリング時、各要素が正しく表示されていること", () => {
     it("Form7がレンダリングされること", () => {
       render(<Form7 />)
       expect(screen.getByRole("heading", { level: 3, name: "ログインフォーム" })).toBeTruthy()
     })
 
-    /*
     it("初回レンダリング時、変換結果が表示されるエリアが表示されていないこと", () => {
-      render(<Form6 />)
+      render(<Form7 />)
       expect(screen.queryByTestId("result-area")).toBeNull()
     })
 
     it("初回レンダリング時、エラーメッセージが表示されていないこと", () => {
-      render(<Form6 />)
+      render(<Form7 />)
       expect(screen.queryByTestId("error-message")).toBeNull()
+      expect(screen.queryByTestId("id-error-message")).toBeNull()
+      expect(screen.queryByTestId("password-error-message")).toBeNull()
     })
 
     it("初回レンダリング時、送信ボタンがdisabledになっていること", () => {
-      render(<Form6 />)
+      render(<Form7 />)
       expect(screen.getByRole("button", { name: buttonText })).toBeDisabled()
     })
-    */
   })
 
-  /*
   describe("フォームを送信した時に、正しい結果が得られること", () => {
-    it("フォームを送信した時、大文字に変換された名前が表示されること", async () => {
-      render(<Form6 />)
-      await userEvent.type(screen.getByRole("textbox", { name: inputText }), "kento")
-      await userEvent.click(screen.getByRole("button", { name: buttonText }))
-      expect(screen.getByTestId("result-area")).toHaveTextContent("KENTO")
+    it("正しいIDとPWでログインした時、ログインできたメッセージが表示されること", async () => {
+      render(<Form7 />)
+      await userEvent.type(screen.getByRole("textbox", { name: "ユーザーID (※必須)" }), "user")
+      await userEvent.type(screen.getByRole("textbox", { name: "パスワード (※必須)" }), "pass")
+      await userEvent.click(screen.getByRole("button", { name: "ログイン" }))
+      expect(screen.getByTestId("result-area")).toHaveTextContent("ログインに成功しました！")
+    })
+
+    it("間違ったIDとPWでログインした時、ログインできなかったメッセージが表示されること", async () => {
+      render(<Form7 />)
+      await userEvent.type(screen.getByRole("textbox", { name: "ユーザーID (※必須)" }), "dummy")
+      await userEvent.type(screen.getByRole("textbox", { name: "パスワード (※必須)" }), "dummy")
+      await userEvent.click(screen.getByRole("button", { name: "ログイン" }))
+      screen.debug();
+      expect(screen.getByTestId("result-area")).toHaveTextContent("ログインに成功しました")
     })
   })
 
+  /*
   describe("フォームに名前を入力した時、各要素が正しい状態になること", () => {
     it("名前を正しく入力した時、登録ボタンのdisabledが解除されること", async () => {
       render(<Form6 />)

pages/form6/index.tsx

@@ -144,7 +144,7 @@ const Form6 = () => {
           </ul>
         </Description>
 
-        <PageLink prev="5" next="7" />
+        <PageLink prev="5" />
 
         <HomeLink />
       </Container>

pages/index.tsx

@@ -28,7 +28,7 @@ const Home: NextPage = () => (
 
         <nav>
           <ul className={styles.list}>
-            {[...Array(7)].map((_, i) => (
+            {[...Array(6)].map((_, i) => (
               <li key={i}>
                 <Link href={`/form${i+1}`}>Form{i+1}</Link>
               </li>