test(web): Switch (and add label back in)

web/src/components/Switch.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { useCallback, useState } from 'preact/hooks';
 
-export default function Switch({ checked, id, onChange }) {
+export default function Switch({ checked, id, onChange, label, labelPosition = 'before' }) {
   const [isFocused, setFocused] = useState(false);
 
   const handleChange = useCallback(
@@ -24,15 +24,21 @@ export default function Switch({ checked, id, onChange }) {
   return (
     <label
       htmlFor={id}
-      className={`flex items-center justify-center ${onChange ? 'cursor-pointer' : 'cursor-not-allowed'}`}
+      className={`flex items-center space-x-4 w-full ${onChange ? 'cursor-pointer' : 'cursor-not-allowed'}`}
     >
+      {label && labelPosition === 'before' ? (
+        <div data-testid={`${id}-label`} className="inline-flex flex-grow">
+          {label}
+        </div>
+      ) : null}
       <div
         onMouseOver={handleFocus}
         onMouseOut={handleBlur}
-        className={`w-8 h-5 relative ${!onChange ? 'opacity-60' : ''}`}
+        className={`self-end w-8 h-5 relative ${!onChange ? 'opacity-60' : ''}`}
       >
         <div className="relative overflow-hidden">
           <input
+            data-testid={`${id}-input`}
             className="absolute left-48"
             onBlur={handleBlur}
             onFocus={handleFocus}
@@ -55,6 +61,11 @@ export default function Switch({ checked, id, onChange }) {
           style={checked ? 'transform: translateX(100%);' : 'transform: translateX(0%);'}
         />
       </div>
+      {label && labelPosition !== 'before' ? (
+        <div data-testid={`${id}-label`} class="inline-flex flex-grow">
+          {label}
+        </div>
+      ) : null}
     </label>
   );
 }

web/src/components/__tests__/Switch.test.jsx

@@ -0,0 +1,47 @@
+import { h } from 'preact';
+import Switch from '../Switch';
+import { fireEvent, render, screen } from '@testing-library/preact';
+
+describe('Switch', () => {
+  test('renders a hidden checkbox', async () => {
+    render(
+      <div>
+        <Switch id="unchecked-switch" />
+        <Switch id="checked-switch" checked={true} />
+      </div>
+    );
+
+    const unchecked = screen.queryByTestId('unchecked-switch-input');
+    expect(unchecked).toHaveAttribute('type', 'checkbox');
+    expect(unchecked).not.toBeChecked();
+
+    const checked = screen.queryByTestId('checked-switch-input');
+    expect(checked).toHaveAttribute('type', 'checkbox');
+    expect(checked).toBeChecked();
+  });
+
+  test('calls onChange callback when checked/unchecked', async () => {
+    const handleChange = jest.fn();
+    const { rerender } = render(<Switch id="check" onChange={handleChange} />);
+    fireEvent.change(screen.queryByTestId('check-input'), { checked: true });
+    expect(handleChange).toHaveBeenCalledWith('check', true);
+
+    rerender(<Switch id="check" onChange={handleChange} checked />);
+    fireEvent.change(screen.queryByTestId('check-input'), { checked: false });
+    expect(handleChange).toHaveBeenCalledWith('check', false);
+  });
+
+  test('renders a label before', async () => {
+    render(<Switch id="check" label="This is the label" />);
+    const items = screen.queryAllByTestId(/check-.+/);
+    expect(items[0]).toHaveTextContent('This is the label');
+    expect(items[1]).toHaveAttribute('data-testid', 'check-input');
+  });
+
+  test('renders a label after', async () => {
+    render(<Switch id="check" label="This is the label" labelPosition="after" />);
+    const items = screen.queryAllByTestId(/check-.+/);
+    expect(items[0]).toHaveAttribute('data-testid', 'check-input');
+    expect(items[1]).toHaveTextContent('This is the label');
+  });
+});