From 9ffee33b596420326d320be8eb9fa82f8bb22ae7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 21 Mar 2024 09:02:01 +0100
Subject: [PATCH] Reorganize tests

---
 packages/mui-base/src/Switch/Switch.test.tsx | 238 ++++++++++---------
 1 file changed, 128 insertions(+), 110 deletions(-)

diff --git a/packages/mui-base/src/Switch/Switch.test.tsx b/packages/mui-base/src/Switch/Switch.test.tsx
index 534d7790e..304ba8855 100644
--- a/packages/mui-base/src/Switch/Switch.test.tsx
+++ b/packages/mui-base/src/Switch/Switch.test.tsx
@@ -14,68 +14,98 @@ describe('<Switch />', () => {
     render,
   }));
 
-  describe('extra props', () => {
-    it('should override the built-in attributes', () => {
-      const { container } = render(<Switch data-state="checked" role="checkbox" />);
-      expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'checkbox');
-      expect(container.firstElementChild as HTMLElement).to.have.attribute('data-state', 'checked');
-    });
-  });
+  describe('interaction', () => {
+    it('should change its state when clicked', () => {
+      const { getByRole } = render(<Switch />);
+      const switchElement = getByRole('switch');
 
-  it('should change its state when clicked', () => {
-    const { getByRole } = render(<Switch />);
-    const switchElement = getByRole('switch');
+      expect(switchElement).to.have.attribute('aria-checked', 'false');
 
-    expect(switchElement).to.have.attribute('aria-checked', 'false');
+      act(() => {
+        switchElement.click();
+      });
 
-    act(() => {
-      switchElement.click();
+      expect(switchElement).to.have.attribute('aria-checked', 'true');
     });
 
-    expect(switchElement).to.have.attribute('aria-checked', 'true');
-  });
+    it('should update its state when changed from outside', () => {
+      function Test() {
+        const [checked, setChecked] = React.useState(false);
+        return (
+          <div>
+            <button onClick={() => setChecked((c) => !c)}>Toggle</button>
+            <Switch checked={checked} />;
+          </div>
+        );
+      }
+
+      const { getByRole, getByText } = render(<Test />);
+      const switchElement = getByRole('switch');
+      const button = getByText('Toggle');
 
-  it('should update its state when changed from outside', () => {
-    function Test() {
-      const [checked, setChecked] = React.useState(false);
-      return (
-        <div>
-          <button onClick={() => setChecked((c) => !c)}>Toggle</button>
-          <Switch checked={checked} />;
-        </div>
-      );
-    }
+      expect(switchElement).to.have.attribute('aria-checked', 'false');
+      act(() => {
+        button.click();
+      });
 
-    const { getByRole, getByText } = render(<Test />);
-    const switchElement = getByRole('switch');
-    const button = getByText('Toggle');
+      expect(switchElement).to.have.attribute('aria-checked', 'true');
 
-    expect(switchElement).to.have.attribute('aria-checked', 'false');
-    act(() => {
-      button.click();
+      act(() => {
+        button.click();
+      });
+
+      expect(switchElement).to.have.attribute('aria-checked', 'false');
     });
 
-    expect(switchElement).to.have.attribute('aria-checked', 'true');
+    it('should update its state if the underlying input is toggled', () => {
+      const { getByRole, container } = render(<Switch />);
+      const switchElement = getByRole('switch');
+      const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+      act(() => {
+        internalInput.click();
+      });
 
-    act(() => {
-      button.click();
+      expect(switchElement).to.have.attribute('aria-checked', 'true');
     });
+  });
 
-    expect(switchElement).to.have.attribute('aria-checked', 'false');
+  describe('extra props', () => {
+    it('should override the built-in attributes', () => {
+      const { container } = render(<Switch data-state="checked" role="checkbox" />);
+      expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'checkbox');
+      expect(container.firstElementChild as HTMLElement).to.have.attribute('data-state', 'checked');
+    });
   });
 
-  it('should call onChange when clicked', () => {
-    const handleChange = spy();
-    const { getByRole, container } = render(<Switch onChange={handleChange} />);
-    const switchElement = getByRole('switch');
-    const internalInput = container.querySelector('input[type="checkbox"]')!;
+  describe('prop: onChange', () => {
+    it('should call onChange when clicked', () => {
+      const handleChange = spy();
+      const { getByRole, container } = render(<Switch onChange={handleChange} />);
+      const switchElement = getByRole('switch');
+      const internalInput = container.querySelector('input[type="checkbox"]')!;
+
+      act(() => {
+        switchElement.click();
+      });
 
-    act(() => {
-      switchElement.click();
+      expect(handleChange.callCount).to.equal(1);
+      expect(handleChange.firstCall.args[0].target).to.equal(internalInput);
     });
+  });
+
+  describe('prop: onClick', () => {
+    it('should call onClick when clicked', () => {
+      const handleClick = spy();
+      const { getByRole } = render(<Switch onClick={handleClick} />);
+      const switchElement = getByRole('switch');
+
+      act(() => {
+        switchElement.click();
+      });
 
-    expect(handleChange.callCount).to.equal(1);
-    expect(handleChange.firstCall.args[0].target).to.equal(internalInput);
+      expect(handleClick.callCount).to.equal(1);
+    });
   });
 
   describe('prop: disabled', () => {
@@ -138,46 +168,6 @@ describe('<Switch />', () => {
     });
   });
 
-  it('should update its state if the underlying input is toggled', () => {
-    const { getByRole, container } = render(<Switch />);
-    const switchElement = getByRole('switch');
-    const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;
-
-    act(() => {
-      internalInput.click();
-    });
-
-    expect(switchElement).to.have.attribute('aria-checked', 'true');
-  });
-
-  it('should place the style hooks on the root and the thumb', () => {
-    const { getByRole } = render(
-      <Switch defaultChecked disabled readOnly required>
-        <Switch.Thumb />
-      </Switch>,
-    );
-
-    const switchElement = getByRole('switch');
-    const thumb = switchElement.querySelector('span');
-
-    expect(switchElement).to.have.attribute('data-state', 'checked');
-    expect(switchElement).to.have.attribute('data-disabled', 'true');
-    expect(switchElement).to.have.attribute('data-readonly', 'true');
-    expect(switchElement).to.have.attribute('data-required', 'true');
-
-    expect(thumb).to.have.attribute('data-state', 'checked');
-    expect(thumb).to.have.attribute('data-disabled', 'true');
-    expect(thumb).to.have.attribute('data-readonly', 'true');
-    expect(thumb).to.have.attribute('data-required', 'true');
-  });
-
-  it('should set the name attribute on the input', () => {
-    const { container } = render(<Switch name="switch-name" />);
-    const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;
-
-    expect(internalInput).to.have.attribute('name', 'switch-name');
-  });
-
   describe('form handling', () => {
     it('should toggle the switch when a parent label is clicked', () => {
       const { getByTestId, getByRole } = render(
@@ -220,42 +210,70 @@ describe('<Switch />', () => {
 
       expect(switchElement).to.have.attribute('aria-checked', 'true');
     });
-  });
 
-  it('should include the switch value in the form submission', function test() {
-    if (/jsdom/.test(window.navigator.userAgent)) {
-      // FormData is not available in JSDOM
-      this.skip();
-    }
+    it('should include the switch value in the form submission', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        // FormData is not available in JSDOM
+        this.skip();
+      }
+
+      let stringifiedFormData = '';
+
+      const { getByRole } = render(
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            stringifiedFormData = new URLSearchParams(formData as any).toString();
+          }}
+        >
+          <Switch name="test-switch" />
+          <button type="submit">Submit</button>
+        </form>,
+      );
 
-    let stringifiedFormData = '';
+      const switchElement = getByRole('switch');
+      const submitButton = getByRole('button')!;
 
+      submitButton.click();
+
+      expect(stringifiedFormData).to.equal('test-switch=off');
+
+      act(() => {
+        switchElement.click();
+      });
+
+      submitButton.click();
+
+      expect(stringifiedFormData).to.equal('test-switch=on');
+    });
+  });
+
+  it('should place the style hooks on the root and the thumb', () => {
     const { getByRole } = render(
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          const formData = new FormData(event.currentTarget);
-          stringifiedFormData = new URLSearchParams(formData as any).toString();
-        }}
-      >
-        <Switch name="test-switch" />
-        <button type="submit">Submit</button>
-      </form>,
+      <Switch defaultChecked disabled readOnly required>
+        <Switch.Thumb />
+      </Switch>,
     );
 
     const switchElement = getByRole('switch');
-    const submitButton = getByRole('button')!;
-
-    submitButton.click();
+    const thumb = switchElement.querySelector('span');
 
-    expect(stringifiedFormData).to.equal('test-switch=off');
+    expect(switchElement).to.have.attribute('data-state', 'checked');
+    expect(switchElement).to.have.attribute('data-disabled', 'true');
+    expect(switchElement).to.have.attribute('data-readonly', 'true');
+    expect(switchElement).to.have.attribute('data-required', 'true');
 
-    act(() => {
-      switchElement.click();
-    });
+    expect(thumb).to.have.attribute('data-state', 'checked');
+    expect(thumb).to.have.attribute('data-disabled', 'true');
+    expect(thumb).to.have.attribute('data-readonly', 'true');
+    expect(thumb).to.have.attribute('data-required', 'true');
+  });
 
-    submitButton.click();
+  it('should set the name attribute on the input', () => {
+    const { container } = render(<Switch name="switch-name" />);
+    const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;
 
-    expect(stringifiedFormData).to.equal('test-switch=on');
+    expect(internalInput).to.have.attribute('name', 'switch-name');
   });
 });