Merge pull request #119 from kento-yoshidu/72_Form2

✨ #72 マッチャーを修正

__tests__/form2.test.tsx

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

pages/form2/index.tsx

@@ -8,7 +8,6 @@ import HomeLink from "../../components/home-link"
 import PageLink from "../../components/page-link"
 
 import styles from "../form1/style.module.css"
-import descStyles from "../../styles/description.module.css"
 import Description from "../../components/description"
 
 const Form2 = () => {
@@ -62,7 +61,7 @@ const Form2 = () => {
 
       <Container>
         <div className={styles.wrapper}>
-          <h3 className={styles.title} data-testid="form-title">
+          <h3 className={styles.title}>
             名前変換フォーム(ver1.1)
           </h3>
 
@@ -78,11 +77,8 @@ const Form2 = () => {
               id="name"
               className={styles.input}
               type="text"
-              onChange={handleChange}
               placeholder="Taro Yamada"
-              data-testid="name"
-              autoComplete="off"
-              value={name}
+              onChange={handleChange}
             />
 
             {isInputInvalid && (
@@ -96,25 +92,23 @@ const Form2 = () => {
 
             <button
               className={styles.button}
-              data-testid="submit"
               type="submit"
-              name="Sign Up"
               disabled={!isClickable}
-              aria-disabled="true"
+              aria-disabled={!isClickable}
             >
               変換する
             </button>
           </form>
 
           {convertedData && (
-            <div className={styles.result} data-testid="result-area">
+            <section className={styles.result} data-testid="result-area">
               <p>あなたの名前を大文字に変換しました！<br />{convertedData}</p>
-            </div>
+            </section>
           )}
         </div>
 
         <Description>
-          <p>Form2の構成はForm1とほとんど同じです。違う点は、テキストボックスに文字を入力した後で、文字を全て削除すると、「文字が入力されていません」というエラーメッセージが表示される点です。</p>
+          <p>Form2の構成はForm1とほとんど同じです。違う点は、テキストボックスに文字を入力した後で文字を全て削除すると、「文字が入力されていません」というエラーメッセージが表示される点です。</p>
 
           <p>onChangeイベントハンドラーで入力された文字数をカウントし、0になった時にエラーメッセージのstateを変化させ表示させます。</p>