[NO JIRA] Migrate Checkbox enzyme test to RTL

3 files changed, 77 insertions, 98 deletions

diff --git a/server/sonar-web/src/main/js/components/controls/Checkbox.tsx b/server/sonar-web/src/main/js/components/controls/Checkbox.tsx
index ce2940fbfc4..c02a75414c3 100644
--- a/server/sonar-web/src/main/js/components/controls/Checkbox.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Checkbox.tsx
@@ -93,7 +93,7 @@ export default class Checkbox extends React.PureComponent<Props> {
     }
 
     if (loading) {
-      return <DeferredSpinner />;
+      return <DeferredSpinner ariaLabel={label} />;
     }
 
     return (
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.tsx
index dcd89ea0f75..cd987b866fa 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.tsx
@@ -17,101 +17,59 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { shallow } from 'enzyme';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import * as React from 'react';
-import { click } from '../../../helpers/testUtils';
+import { renderComponent } from '../../../helpers/testReactTestingUtils';
 import Checkbox from '../Checkbox';
 
-it('should render', () => {
-  const checkbox = shallow(<Checkbox checked={true} onCheck={() => {}} title="Title value" />);
-  expect(checkbox).toMatchSnapshot();
-});
-
-it('should render unchecked', () => {
-  const checkbox = shallow(<Checkbox checked={false} onCheck={() => true} />);
-  expect(checkbox.is('.icon-checkbox-checked')).toBe(false);
-  expect(checkbox.prop('aria-checked')).toBe(false);
-});
-
-it('should render checked', () => {
-  const checkbox = shallow(<Checkbox checked={true} onCheck={() => true} />);
-  expect(checkbox.is('.icon-checkbox-checked')).toBe(true);
-  expect(checkbox.prop('aria-checked')).toBe(true);
-});
-
-it('should render disabled', () => {
-  const checkbox = shallow(<Checkbox checked={true} disabled={true} onCheck={() => true} />);
-  expect(checkbox.is('.icon-checkbox-disabled')).toBe(true);
-});
-
-it('should render unchecked third state', () => {
-  const checkbox = shallow(<Checkbox checked={false} onCheck={() => true} thirdState={true} />);
-  expect(checkbox.is('.icon-checkbox-single')).toBe(true);
-  expect(checkbox.is('.icon-checkbox-checked')).toBe(false);
-  expect(checkbox.prop('aria-checked')).toBe('mixed');
-});
-
-it('should render checked third state', () => {
-  const checkbox = shallow(<Checkbox checked={true} onCheck={() => true} thirdState={true} />);
-  expect(checkbox.is('.icon-checkbox-single')).toBe(true);
-  expect(checkbox.is('.icon-checkbox-checked')).toBe(true);
-  expect(checkbox.prop('aria-checked')).toBe('mixed');
-});
-
-it('should render with a spinner', () => {
-  const checkbox = shallow(<Checkbox checked={false} loading={true} onCheck={() => true} />);
-  expect(checkbox.find('DeferredSpinner').exists()).toBe(true);
-});
+describe.each([
+  { children: null, describtion: 'with no children' },
+  { children: <a>child</a>, describtion: 'with children' }
+])('Checkbox $describtion', ({ children }) => {
+  it('should call check function', async () => {
+    const user = userEvent.setup();
+    const onCheck = jest.fn();
+    const rerender = renderCheckbox({
+      label: 'me',
+      children,
+      onCheck,
+      checked: false,
+      title: 'title'
+    });
+    await user.click(screen.getByRole('checkbox', { name: 'me' }));
+    expect(onCheck).toHaveBeenCalledWith(true, undefined);
+    expect(screen.getByTitle('title')).toBeInTheDocument();
+    rerender({ checked: true });
+    await user.click(screen.getByRole('checkbox', { name: 'me' }));
+    expect(onCheck).toHaveBeenCalledWith(false, undefined);
+  });
 
-it('should render children', () => {
-  const checkbox = shallow(
-    <Checkbox checked={false} onCheck={() => true}>
-      <span>foo</span>
-    </Checkbox>
-  );
-  expect(checkbox.hasClass('link-checkbox')).toBe(true);
-  expect(checkbox.find('span').exists()).toBe(true);
-});
+  it('should accept partial state', () => {
+    renderCheckbox({ label: 'me', thirdState: true, children, checked: false });
+    expect(screen.getByRole('checkbox', { name: 'me' })).toHaveAttribute('aria-checked', 'mixed');
+  });
 
-it('should render children with a spinner', () => {
-  const checkbox = shallow(
-    <Checkbox checked={false} loading={true} onCheck={() => true}>
-      <span>foo</span>
-    </Checkbox>
-  );
-  expect(checkbox.hasClass('link-checkbox')).toBe(true);
-  expect(checkbox.find('span').exists()).toBe(true);
-  expect(checkbox.find('DeferredSpinner').exists()).toBe(true);
+  it('should render loading state', () => {
+    jest.useFakeTimers();
+    renderCheckbox({ label: 'me', children, loading: true });
+    jest.runAllTimers();
+    expect(screen.getByLabelText('me')).toMatchSnapshot();
+    jest.useRealTimers();
+  });
 });
 
-it('should call onCheck', () => {
-  const onCheck = jest.fn();
-  const checkbox = shallow(<Checkbox checked={false} onCheck={onCheck} />);
-  click(checkbox);
-  expect(onCheck).toBeCalledWith(true, undefined);
-});
-
-it('should not call onCheck when disabled', () => {
-  const onCheck = jest.fn();
-  const checkbox = shallow(<Checkbox checked={false} disabled={true} onCheck={onCheck} />);
-  click(checkbox);
-  expect(onCheck).toHaveBeenCalledTimes(0);
-});
-
-it('should call onCheck with id as second parameter', () => {
-  const onCheck = jest.fn();
-  const checkbox = shallow(<Checkbox checked={false} id="foo" onCheck={onCheck} />);
-  click(checkbox);
-  expect(onCheck).toBeCalledWith(true, 'foo');
+it('should render the checkbox on the right', () => {
+  renderCheckbox({ label: 'me', children: <a>child</a>, right: true });
+  expect(screen.getByRole('checkbox', { name: 'me' })).toMatchSnapshot();
 });
 
-it('should apply custom class', () => {
-  const checkbox = shallow(
-    <Checkbox checked={true} className="customclass" onCheck={() => true} />
+function renderCheckbox(override?: Partial<Checkbox['props']>) {
+  const { rerender } = renderComponent(
+    <Checkbox checked={true} onCheck={jest.fn()} {...override} />
   );
-  expect(checkbox.is('.customclass')).toBe(true);
-});
-
-it('should render the checkbox on the right', () => {
-  expect(shallow(<Checkbox checked={true} onCheck={() => true} right={true} />)).toMatchSnapshot();
-});
+  return function(reoverride?: Partial<Checkbox['props']>) {
+    rerender(<Checkbox checked={true} onCheck={jest.fn()} {...override} {...reoverride} />);
+  };
+}
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Checkbox-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Checkbox-test.tsx.snap
index 69c0c60af8c..30df5c3539c 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Checkbox-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Checkbox-test.tsx.snap
@@ -1,22 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render 1`] = `
+exports[`Checkbox with children should render loading state 1`] = `
 <a
-  aria-checked={true}
-  className="icon-checkbox icon-checkbox-checked"
+  aria-checked="true"
+  aria-label="me"
+  class="link-checkbox"
   href="#"
-  onClick={[Function]}
   role="checkbox"
-  title="Title value"
+>
+  <i
+    class="deferred-spinner"
+  />
+  <a>
+    child
+  </a>
+</a>
+`;
+
+exports[`Checkbox with no children should render loading state 1`] = `
+<i
+  aria-label="me"
+  aria-live="polite"
+  class="deferred-spinner"
 />
 `;
 
 exports[`should render the checkbox on the right 1`] = `
 <a
-  aria-checked={true}
-  className="icon-checkbox icon-checkbox-checked"
+  aria-checked="true"
+  aria-label="me"
+  class="link-checkbox"
   href="#"
-  onClick={[Function]}
   role="checkbox"
-/>
+>
+  <a>
+    child
+  </a>
+  <i
+    class="icon-checkbox icon-checkbox-checked"
+  />
+</a>
 `;