test: 토글 컴포넌트 변경 사항 테스트에 적용

GDSC-Hongik · May 25, 2024 · 7641049 · 7641049
1 parent 595b37f
commit 7641049
Showing 1 changed file with 28 additions and 41 deletions.
diff --git a/packages/wow-ui/src/components/Switch/Switch.test.tsx b/packages/wow-ui/src/components/Switch/Switch.test.tsx
@@ -10,53 +10,49 @@ describe("toggle", () => {
     rendered = render(<Switch text="Text" />);
   });
 
-  it("should render with attributes aria-pressed to be false, data-disabled to be false, aria-label to be switch-inactivated by default", () => {
-    const switchComponent = rendered.getByRole("button");
+  it("should render with attributes aria-checked to be false, aria-disabled to be false by default", () => {
+    const switchComponent = rendered.getByRole("checkbox");
 
-    expect(switchComponent).toHaveAttribute("aria-pressed", "false");
-    expect(switchComponent).toHaveAttribute("data-disabled", "false");
-    expect(switchComponent).toHaveAttribute("aria-label", "switch-inactivated");
+    expect(switchComponent).toHaveAttribute("aria-checked", "false");
+    expect(switchComponent).toHaveAttribute("aria-disabled", "false");
   });
 
   it("should render text", () => {
     expect(rendered.getByText("Text")).toBeInTheDocument();
   });
 
   it("should toggle state when onClick event is fired", async () => {
-    const switchComponent = rendered.getByRole("button");
+    const switchComponent = rendered.getByRole("checkbox");
     const onClickHandler = jest.fn();
     switchComponent.onclick = onClickHandler;
 
     fireEvent.click(switchComponent);
 
     await waitFor(() => {
-      expect(switchComponent).toHaveAttribute("aria-pressed", "true");
-      expect(switchComponent).toHaveAttribute("data-disabled", "false");
-      expect(switchComponent).toHaveAttribute("aria-label", "switch-activated");
+      expect(switchComponent).toHaveAttribute("aria-checked", "true");
+      expect(switchComponent).toHaveAttribute("aria-disabled", "false");
     });
   });
 
   it("should toggle state when Enter key is pressed", async () => {
-    const switchComponent = rendered.getByRole("button");
+    const switchComponent = rendered.getByRole("checkbox");
 
     fireEvent.type(switchComponent, "{enter}");
 
     await waitFor(() => {
-      expect(switchComponent).toHaveAttribute("aria-pressed", "true");
-      expect(switchComponent).toHaveAttribute("data-disabled", "false");
-      expect(switchComponent).toHaveAttribute("aria-label", "switch-activated");
+      expect(switchComponent).toHaveAttribute("aria-checked", "true");
+      expect(switchComponent).toHaveAttribute("aria-disabled", "false");
     });
   });
 
   it("should toggle state when Space key is pressed", async () => {
-    const switchComponent = rendered.getByRole("button");
+    const switchComponent = rendered.getByRole("checkbox");
 
     fireEvent.type(switchComponent, "{space}");
 
     await waitFor(() => {
-      expect(switchComponent).toHaveAttribute("aria-pressed", "true");
-      expect(switchComponent).toHaveAttribute("data-disabled", "false");
-      expect(switchComponent).toHaveAttribute("aria-label", "switch-activated");
+      expect(switchComponent).toHaveAttribute("aria-checked", "true");
+      expect(switchComponent).toHaveAttribute("aria-disabled", "false");
     });
   });
 });
@@ -68,12 +64,11 @@ describe("when defaultChecked is true", () => {
     rendered = render(<Switch defaultChecked />);
   });
 
-  it("should render with attributes aria-pressed to be true, data-disabled to be false, aria-label to be switch-activated", () => {
-    const switchComponent = rendered.getByRole("button");
+  it("should render with attributes aria-checked to be true, aria-disabled to be false", () => {
+    const switchComponent = rendered.getByRole("checkbox");
 
-    expect(switchComponent).toHaveAttribute("aria-pressed", "true");
-    expect(switchComponent).toHaveAttribute("data-disabled", "false");
-    expect(switchComponent).toHaveAttribute("aria-label", "switch-activated");
+    expect(switchComponent).toHaveAttribute("aria-checked", "true");
+    expect(switchComponent).toHaveAttribute("aria-disabled", "false");
   });
 });
 
@@ -84,14 +79,14 @@ describe("disabled", () => {
     rendered = render(<Switch isDisabled />);
   });
 
-  it("should render with attributes data-disabled to be true", () => {
-    const switchComponent = rendered.getByRole("button");
+  it("should render with attributes aria-disabled to be true", () => {
+    const switchComponent = rendered.getByRole("checkbox");
 
-    expect(switchComponent).toHaveAttribute("data-disabled", "true");
+    expect(switchComponent).toHaveAttribute("aria-disabled", "true");
   });
 
   it("should not fire onClick", () => {
-    const switchComponent = rendered.getByRole("button");
+    const switchComponent = rendered.getByRole("checkbox");
     const onClickHandler = jest.fn();
     switchComponent.onclick = onClickHandler;
 
@@ -101,39 +96,31 @@ describe("disabled", () => {
   });
 
   it("should not allow focusing", () => {
-    const switchComponent = rendered.getByRole("button");
+    const switchComponent = rendered.getByRole("checkbox");
     fireEvent.click(switchComponent);
 
     expect(switchComponent).not.toHaveFocus();
   });
 
   it("should not toggle state when fire keyboard event on Enter key", async () => {
-    const switchComponent = rendered.getByRole("button");
+    const switchComponent = rendered.getByRole("checkbox");
 
     fireEvent.type(switchComponent, "{enter}");
 
     await waitFor(() => {
-      expect(switchComponent).toHaveAttribute("aria-pressed", "false");
-      expect(switchComponent).toHaveAttribute("data-disabled", "true");
-      expect(switchComponent).toHaveAttribute(
-        "aria-label",
-        "switch-inactivated"
-      );
+      expect(switchComponent).toHaveAttribute("aria-checked", "false");
+      expect(switchComponent).toHaveAttribute("aria-disabled", "true");
     });
   });
 
   it("should not fire keyboard event on Space key", async () => {
-    const switchComponent = rendered.getByRole("button");
+    const switchComponent = rendered.getByRole("checkbox");
 
     fireEvent.type(switchComponent, "{space}");
 
     await waitFor(() => {
-      expect(switchComponent).toHaveAttribute("aria-pressed", "false");
-      expect(switchComponent).toHaveAttribute("data-disabled", "true");
-      expect(switchComponent).toHaveAttribute(
-        "aria-label",
-        "switch-inactivated"
-      );
+      expect(switchComponent).toHaveAttribute("aria-checked", "false");
+      expect(switchComponent).toHaveAttribute("aria-disabled", "true");
     });
   });
 });