Merge pull request #117 from kento-yoshidu/15_Form1

15 form1

__tests__/form1.test.tsx

@@ -25,32 +25,37 @@ afterAll(() => server.close())
 
 describe("Form1", () => {
   describe("初回レンダリング時、各要素が正しく表示されていること", () => {
+    it("Form1がレンダリングされること", () => {
+      render(<Form1 />)
+      expect(screen.getByRole("heading", { level: 3, name: /^名前変換フォーム/ })).toBeTruthy()
+    })
+
     it("初回レンダリング時, 変換結果が表示されるエリアに何も表示されていないこと", () => {
       render(<Form1 />)
       expect(screen.queryByTestId("result-area")).toBeNull()
     })
 
     it("初回レンダリング時, 変換ボタンがdisabledになっていること", () => {
       render(<Form1 />)
-      expect(screen.getByTestId("submit")).toBeDisabled()
+      expect(screen.getByRole("button", { name: "変換する" })).toBeDisabled()
     })
   })
 
   describe("フォームを送信した時、正しい結果が得られること", () => {
     it("フォームを送信した時, 変換された名前が表示されること", async () => {
       render(<Form1 />)
-      const nameForm = screen.getByTestId("name") as HTMLInputElement
+      const nameForm = screen.getByRole("textbox", { name: /^お名前/ }) as HTMLInputElement
       await userEvent.type(nameForm, "kento")
-      await userEvent.click(screen.getByTestId("submit"))
+      await userEvent.click(screen.getByRole("button", { name: "変換する" }))
       expect(screen.getByTestId("result-area")).toHaveTextContent("KENTO")
     })
   })
 
-  describe("フォームに名前を入力した時、各要素が正しい状態になること", () => {
+  describe("フォームに名前を入力した時、各要素が正しい状態に変化すること", () => {
     it("名前を入力した時、変換ボタンのdisabledが解除されること", async () => {
       render(<Form1 />)
-      await userEvent.type(screen.getByTestId("name"), "kento")
-      expect(screen.getByTestId("submit")).not.toBeDisabled()
+      await userEvent.type(screen.getByRole("textbox", { name: /^お名前/ }), "kento")
+      expect(screen.getByRole("button", { name: "変換する" })).not.toBeDisabled()
     })
   })
 })

__tests__/form5.test.tsx

@@ -25,11 +25,12 @@ afterAll(() => server.close())
 
 describe("Form4", () => {
   describe("初回レンダリング時、各要素が正しく表示されていること", () => {
+    /*
     it("Form5がレンダリングされること", () => {
       render(<Form5 />)
       expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent(/^ユーザー登録フォーム$/)
     })
-
+    */
     it("初回レンダリング時、変換結果が表示されるエリアが表示されていないこと", () => {
       render(<Form5 />)
       expect(screen.queryByTestId("result-area")).toBeNull()

pages/form1/index.tsx

@@ -18,9 +18,9 @@ const Form1 = () => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setName(e.target.value)
 
-    const trimedName = e.target.value.trim()
+    const trimmedName = e.target.value.trim()
 
-    if (trimedName.length > 0) {
+    if (trimmedName.length > 0) {
       setIsInputValid(true)
     } else {
       setIsInputValid(false)
@@ -58,7 +58,7 @@ const Form1 = () => {
 
       <Container>
         <div className={styles.wrapper}>
-          <h3 className={styles.title} data-testid="form-title">
+          <h3 className={styles.title}>
             名前変換フォーム(ver1.0)
           </h3>
 
@@ -76,20 +76,15 @@ const Form1 = () => {
               type="text"
               onChange={handleChange}
               placeholder="Taro Yamada"
-              data-testid="name"
-              autoComplete="off"
               required
               aria-required="true"
             />
 
             <button
               className={styles.button}
-              data-testid="submit"
               type="submit"
-              name="Sign Up"
               disabled={!isInputValid}
               aria-disabled={!isInputValid}
-              // aria-describedby="お名前は入力必須項目です。"
             >
               変換する
             </button>