update switch unit tests

interledger · Jan 16, 2024 · 717c7e4 · 717c7e4
1 parent 18ccbff
commit 717c7e4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/src/components/__tests__/switch.test.tsx b/src/components/__tests__/switch.test.tsx
@@ -8,18 +8,18 @@ import { Switch } from '@/components/switch'
 describe('Switch', () => {
   it('renders without crashing', () => {
     render(<Switch />)
-    expect(screen.getByRole('checkbox')).toBeInTheDocument()
+    expect(screen.getByRole('switch')).toBeInTheDocument()
   })
 
   it('applies default classes', () => {
     render(<Switch />)
-    const switchElement = screen.getByRole('checkbox').nextSibling
+    const switchElement = screen.getByRole('switch').nextSibling
     expect(switchElement).toHaveClass('w-[42px] h-[26px] before:h-5 before:w-5')
   })
 
   it('applies small size classes when size prop is small', () => {
     render(<Switch size="small" />)
-    const switchElement = screen.getByRole('checkbox').nextSibling
+    const switchElement = screen.getByRole('switch').nextSibling
     expect(switchElement).toHaveClass('w-9 h-[22px] before:h-4 before:w-4 before:left-[3px]')
   })
 
@@ -31,26 +31,26 @@ describe('Switch', () => {
 
   it('forwards checked prop to input element', () => {
     render(<Switch checked />)
-    const inputElement = screen.getByRole('checkbox')
+    const inputElement = screen.getByRole('switch')
     expect(inputElement).toBeChecked()
   })
 
   it('handles additional props', () => {
     render(<Switch aria-label="Custom Switch" />)
-    const inputElement = screen.getByRole('checkbox')
+    const inputElement = screen.getByRole('switch')
     expect(inputElement).toHaveAttribute('aria-label', 'Custom Switch')
   })
 
   it('applies custom class names', () => {
     const customClass = 'custom-class'
     render(<Switch className={customClass} />)
-    const switchElement = screen.getByRole('checkbox').nextSibling
+    const switchElement = screen.getByRole('switch').nextSibling
     expect(switchElement).toHaveClass(customClass)
   })
 
   it('toggles switch state when clicked', () => {
     render(<Switch />)
-    const inputElement = screen.getByRole('checkbox')
+    const inputElement = screen.getByRole('switch')
     expect(inputElement).not.toBeChecked()
 
     fireEvent.click(inputElement)

diff --git a/src/components/switch.tsx b/src/components/switch.tsx
@@ -46,7 +46,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
         ref={ref}
         type="checkbox"
         {...props}
-        className="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
+        className="peer absolute opacity-0 -translate-x-[100%] pointer-events-none"
       />
       <div className={cn(switchVariants({ size }), className)} />
     </label>