ui phase 5

client/src/components/GenderToggle/GenderToggle.test.tsx

@@ -40,3 +40,39 @@ describe('<GenderToggle/> component', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 });
+
+describe('<GenderToggle/> allowAny mode', () => {
+  function renderAnyToggle(value: 'male' | 'female' | 'any' | null) {
+    const onChange = jest.fn();
+    const utils = render(
+      <ThemeProvider>
+        <GenderToggle
+          allowAny
+          value={value}
+          onChange={onChange}
+          maleLabel="Male"
+          femaleLabel="Female"
+          anyLabel="Any"
+        />
+      </ThemeProvider>,
+    );
+    return { ...utils, onChange };
+  }
+
+  it('renders the third "any" option', () => {
+    renderAnyToggle(null);
+    expect(screen.getByText('Any')).toBeInTheDocument();
+  });
+
+  it('calls onChange with "any" when picked', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderAnyToggle(null);
+    await user.click(screen.getByText('Any'));
+    expect(onChange).toHaveBeenCalledWith('any');
+  });
+
+  it('does not render the "any" option when allowAny is omitted', () => {
+    renderToggle(null);
+    expect(screen.queryByText('Any')).not.toBeInTheDocument();
+  });
+});