feat(Toggle): remove all container query

shervinchen · May 6, 2024 · d568925 · d568925
1 parent f6670b5
commit d568925
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/packages/Toggle/Toggle.tsx b/packages/Toggle/Toggle.tsx
@@ -31,9 +31,10 @@ const Toggle: FC<ToggleProps> = ({
   };
 
   return (
-    <label className={toggleClasses}>
+    <label className={toggleClasses} data-testid="toggleLabel">
       <VisuallyHiddenInput
         className="raw-toggle-input"
+        role="switch"
         type="checkbox"
         disabled={disabled}
         checked={internalValue}

diff --git a/packages/Toggle/__tests__/Toggle.test.tsx b/packages/Toggle/__tests__/Toggle.test.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useState } from 'react';
-import { render, renderHook } from '@testing-library/react';
+import { render, renderHook, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Toggle from '..';
 import { ToggleProps, ToggleStatus } from '../Toggle.types';
@@ -14,21 +14,21 @@ describe('Toggle', () => {
   });
 
   test('should support custom class name', () => {
-    const { container } = render(<Toggle className="custom-toggle" />);
-    expect(container.firstChild).toHaveClass('custom-toggle');
+    render(<Toggle className="custom-toggle" />);
+    expect(screen.getByTestId('toggleLabel')).toHaveClass('custom-toggle');
   });
 
   test('should trigger event when clicked', async () => {
     const clickHandler = jest.fn();
-    const { container } = render(<Toggle onClick={clickHandler} />);
-    const toggle = container.firstChild;
-    await user.click(toggle as Element);
+    render(<Toggle onClick={clickHandler} />);
+    const toggle = screen.getByTestId('toggleLabel');
+    await user.click(toggle);
     expect(clickHandler).toHaveBeenCalledTimes(1);
   });
 
   test('should support uncontrolled value', () => {
-    const { container } = render(<Toggle defaultChecked />);
-    const toggleInput = container.querySelector('.raw-toggle-input');
+    render(<Toggle defaultChecked />);
+    const toggleInput = screen.getByRole('switch');
     expect(toggleInput).toBeChecked();
   });
 
@@ -49,21 +49,21 @@ describe('Toggle', () => {
       );
     };
 
-    const { container } = render(<Component onChange={onChange} />);
-    const toggle = container.firstChild;
-    const toggleInput = container.querySelector('.raw-toggle-input');
+    render(<Component onChange={onChange} />);
+    const toggle = screen.getByTestId('toggleLabel');
+    const toggleInput = screen.getByRole('switch');
     expect(toggleInput).not.toBeChecked();
-    await user.click(toggle as Element);
+    await user.click(toggle);
     expect(toggleInput).toBeChecked();
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
   test('should support disabled', async () => {
-    const { container } = render(<Toggle disabled />);
-    const toggle = container.firstChild;
-    const toggleInput = container.querySelector('.raw-toggle-input');
+    render(<Toggle disabled />);
+    const toggle = screen.getByTestId('toggleLabel');
+    const toggleInput = screen.getByRole('switch');
     expect(toggleInput).toBeDisabled();
-    await user.click(toggle as Element);
+    await user.click(toggle);
     expect(toggleInput).not.toBeChecked();
   });
 

diff --git a/packages/Toggle/__tests__/__snapshots__/Toggle.test.tsx.snap b/packages/Toggle/__tests__/__snapshots__/Toggle.test.tsx.snap
@@ -4,9 +4,11 @@ exports[`Toggle should match the snapshot 1`] = `
 <DocumentFragment>
   <label
     class="raw-toggle jsx-2283230529"
+    data-testid="toggleLabel"
   >
     <input
       class="jsx-1802955700 raw-toggle-input"
+      role="switch"
       type="checkbox"
     />
     <span