From 35c10eaa6151727385e9df99b6fa7187cfa400a4 Mon Sep 17 00:00:00 2001
From: kento <kento@toriwatari.bird>
Date: Wed, 14 Feb 2024 19:27:18 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Update?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 __tests__/{form7.test.tsx => __form7} |  37 ++--
 pages/form6/index.tsx                 |   2 +-
 pages/form7/index.tsx                 | 243 --------------------------
 pages/index.tsx                       |   2 +-
 4 files changed, 26 insertions(+), 258 deletions(-)
 rename __tests__/{form7.test.tsx => __form7} (73%)
 delete mode 100644 pages/form7/index.tsx

diff --git a/__tests__/form7.test.tsx b/__tests__/__form7
similarity index 73%
rename from __tests__/form7.test.tsx
rename to __tests__/__form7
index 80c4776..fc6f5b4 100644
--- a/__tests__/form7.test.tsx
+++ b/__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 />)
diff --git a/pages/form6/index.tsx b/pages/form6/index.tsx
index 513b686..fedafb0 100644
--- a/pages/form6/index.tsx
+++ b/pages/form6/index.tsx
@@ -144,7 +144,7 @@ const Form6 = () => {
           </ul>
         </Description>
 
-        <PageLink prev="5" next="7" />
+        <PageLink prev="5" />
 
         <HomeLink />
       </Container>
diff --git a/pages/form7/index.tsx b/pages/form7/index.tsx
deleted file mode 100644
index f85d2b2..0000000
--- a/pages/form7/index.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import { useState } from "react"
-
-import Head from "next/head"
-
-import PageTitle from "../../components/page-header"
-import Header from "../../components/header"
-import Container from "../../components/container"
-import PageLink from "../../components/page-link"
-import HomeLink from "../../components/home-link"
-import Description from "../../components/description"
-
-import styles from "../form1/style.module.css"
-
-type LoginData = {
-  id: string
-  password: string
-}
-
-const Form7 = () => {
-  const [formData, setFormData] = useState<LoginData>({
-    id: "",
-    password: ""
-  })
-  // id, passwordがちゃんと入力されているか
-  const [isInputForm, setIsInputForm] = useState({
-    id: true,
-    password: true
-  })
-  // フォーム全体として送信可能な状態か
-  const [isFormValid, setIsFormValid] = useState(false)
-
-  const [isLoading, setIsLoading] = useState(false)
-  const [isLogin, setIsLogin] = useState(false)
-  const [isLoginFailed, setIsLoginFailed] = useState<boolean>(false)
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target
-
-    const trimmedValue = value.trim()
-
-    const data = {...formData, [name]: trimmedValue}
-
-    setFormData(data)
-
-    checkFormValid(data)
-  }
-
-  // 入力内容から送信ボタンのON/OFFを切り替える
-  const checkFormValid = ({id, password}: LoginData) => {
-    if (id && password) {
-      setIsFormValid(true)
-    } else {
-      setIsFormValid(false)
-    }
-  }
-
-  // フォームのフォーカスを外した時、エラーメッセージの表示/非表示を切り替える
-  const handleBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value, validity } = e.target
-
-    // Todo : validity.validでリファクタ
-    // Todo : この辺換数に切り出せない？
-    if (name === "id") {
-      if (value.trim().length !== 0) {
-        setIsInputForm((prevState) => ({...prevState, id: true}))
-      } else {
-        setIsInputForm((prevState) => ({...prevState, id: false}))
-      }
-    }
-
-    if (name === "password") {
-      if (value && validity.valid) {
-        setIsInputForm((prevState) => ({...prevState, password: true}))
-      } else {
-        setIsInputForm((prevState) => ({...prevState, password: false}))
-      }
-    }
-  }
-
-  const handleFocus = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setIsInputForm((prevState) => ({...prevState, [e.target.name]: true}))
-  }
-
-  const submit = async (e: React.FormEvent) => {
-    e.preventDefault()
-
-    if (!isLogin) {
-      setIsLoading(true)
-
-      const data = await fetch("/api/api5", {
-        method: "POST",
-        body: JSON.stringify({ id: formData.id, password: formData.password }),
-        headers: { "Content-Type": "application/json" }
-      })
-
-      setIsLoading(false)
-
-      if (data.ok) {
-        setIsLogin(true)
-        setIsLoginFailed(false)
-      } else {
-        const res = await data.json()
-        setIsLoginFailed(true)
-      }
-    } else {
-      // ログアウト
-      setIsLogin(false)
-    }
-  }
-
-  return (
-    <>
-      <Head>
-        <title>Form7 | MyForms</title>
-      </Head>
-
-      <Header />
-
-      <PageTitle
-        pageTitle="Form7"
-        postdate="2023-07-25"
-        update="2023-11-05"
-      />
-
-      <Container>
-        <div className={styles.wrapper}>
-          <h3 className={styles.title}>
-            ログインフォーム
-          </h3>
-
-          <p className={styles.text}>ユーザーIDとパスワードを入力してください<br />（ID = user、パスワード = pass でログインできます）。</p>
-
-          <form
-            className={styles.form}
-            onSubmit={submit}
-          >
-            <label htmlFor="id" className={styles.label}>
-              ユーザーID <span>(※必須)</span>
-            </label>
-
-            <input
-              id="id"
-              name="id"
-              className={styles.input}
-              placeholder="id"
-              onChange={handleChange}
-              onBlur={handleBlur}
-              onFocus={handleFocus}
-              required
-              disabled={isLogin}
-            />
-            {!isInputForm.id && (
-              <p
-                className={styles.errorMessage}
-                data-testid="username-error-message"
-              >
-                ユーザー名を入力してください。
-              </p>
-            )}
-
-            <label htmlFor="password" className={styles.label}>
-              パスワード <span>(※必須)</span>
-            </label>
-
-            <input
-              id="password"
-              name="password"
-              className={styles.input}
-              placeholder="password"
-              onChange={handleChange}
-              onBlur={handleBlur}
-              onFocus={handleFocus}
-              required
-              disabled={isLogin}
-            />
-            {!isInputForm.password && (
-              <p
-                className={styles.errorMessage}
-                data-testid="email-error-message"
-              >
-                パスワードを入力してください。
-              </p>
-            )}
-
-            {isLoginFailed && (
-              <p
-                className={styles.errorMessage}
-                data-testid="error-message"
-              >
-                ユーザーID、パスワードの入力に間違いがあるか、ユーザー登録がされていません。
-              </p>
-            )}
-
-            {isLogin && (
-              <p
-                className={styles.successMessage}
-              >
-                ログインに成功しました！
-              </p>
-            )}
-
-            {isLogin
-              ? (
-                <button
-                  className={styles.button}
-                  type="submit"
-                >
-                  ログアウト
-                </button>
-              ) : (
-                <>
-                  {isLoading
-                    ? (
-                      <p>認証中...</p>
-                    ) : (
-                      <button
-                        className={styles.button}
-                        type="submit"
-                        disabled={!isFormValid}
-                      >
-                        ログイン
-                      </button>
-                    )}
-                  </>
-                )
-            }
-
-          </form>
-        </div>
-
-        <Description>
-          <p>11月5日時点、作業中。。。👷‍♂️</p>
-        </Description>
-
-        <PageLink prev="6" />
-
-        <HomeLink />
-      </Container>
-    </>
-  )
-}
-
-export default Form7
diff --git a/pages/index.tsx b/pages/index.tsx
index 087f3ef..2e1f095 100644
--- a/pages/index.tsx
+++ b/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>