Continue converting tests from enzyme to @testing-library/react

ui/components/ui/button-group/__snapshots__/button-group-component.test.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonGroup Component should match snapshot 1`] = `
+<div>
+  <div
+    class="someClassName"
+    style="color: red;"
+  >
+    <button
+      aria-checked="false"
+      class="button-group__button"
+      data-testid="button-group__button0"
+    >
+      <div
+        class="mockClass"
+      />
+    </button>
+    <button
+      aria-checked="true"
+      class="button-group__button button-group__button--active"
+      data-testid="button-group__button1"
+    />
+    <button
+      aria-checked="false"
+      class="button-group__button"
+      data-testid="button-group__button2"
+    />
+  </div>
+</div>
+`;

ui/components/ui/button-group/button-group-component.test.js

@@ -1,130 +1,30 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import ButtonGroup from './button-group.component';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import ButtonGroup from '.';
 
 describe('ButtonGroup Component', () => {
-  let wrapper;
-
-  const childButtonSpies = {
-    onClick: sinon.spy(),
+  const props = {
+    defaultActiveButtonIndex: 1,
+    disabled: false,
+    className: 'someClassName',
+    style: {
+      color: 'red',
+    },
   };
 
   const mockButtons = [
-    <button onClick={childButtonSpies.onClick} key="a">
+    <button key="a">
       <div className="mockClass" />
     </button>,
-    <button onClick={childButtonSpies.onClick} key="b"></button>,
-    <button onClick={childButtonSpies.onClick} key="c"></button>,
+    <button key="b"></button>,
+    <button key="c"></button>,
   ];
 
-  beforeAll(() => {
-    sinon.spy(ButtonGroup.prototype, 'handleButtonClick');
-    sinon.spy(ButtonGroup.prototype, 'renderButtons');
-  });
-
-  beforeEach(() => {
-    wrapper = shallow(
-      <ButtonGroup
-        defaultActiveButtonIndex={1}
-        disabled={false}
-        className="someClassName"
-        style={{ color: 'red' }}
-      >
-        {mockButtons}
-      </ButtonGroup>,
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(
+      <ButtonGroup {...props}>{mockButtons}</ButtonGroup>,
     );
-  });
-
-  afterEach(() => {
-    childButtonSpies.onClick.resetHistory();
-    ButtonGroup.prototype.handleButtonClick.resetHistory();
-    ButtonGroup.prototype.renderButtons.resetHistory();
-  });
-
-  afterAll(() => {
-    sinon.restore();
-  });
-
-  describe('componentDidUpdate', () => {
-    it('should set the activeButtonIndex to the updated newActiveButtonIndex', () => {
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
-      wrapper.setProps({ newActiveButtonIndex: 2 });
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(2);
-    });
-
-    it('should not set the activeButtonIndex to an updated newActiveButtonIndex that is not a number', () => {
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
-      wrapper.setProps({ newActiveButtonIndex: null });
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
-    });
-  });
-
-  describe('handleButtonClick', () => {
-    it('should set the activeButtonIndex', () => {
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
-      wrapper.instance().handleButtonClick(2);
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(2);
-    });
-  });
-
-  describe('renderButtons', () => {
-    it('should render a button for each child', () => {
-      const childButtons = wrapper.find('.button-group__button');
-      expect(childButtons).toHaveLength(3);
-    });
-
-    it('should render the correct button with an active state', () => {
-      const childButtons = wrapper.find('.button-group__button');
-      const activeChildButton = wrapper.find('.button-group__button--active');
-      expect(childButtons.get(1)).toStrictEqual(activeChildButton.get(0));
-    });
-
-    it("should call handleButtonClick and the respective button's onClick method when a button is clicked", () => {
-      expect(ButtonGroup.prototype.handleButtonClick.callCount).toStrictEqual(
-        0,
-      );
-      expect(childButtonSpies.onClick.callCount).toStrictEqual(0);
-      const childButtons = wrapper.find('.button-group__button');
-      childButtons.at(0).props().onClick();
-      childButtons.at(1).props().onClick();
-      childButtons.at(2).props().onClick();
-      expect(ButtonGroup.prototype.handleButtonClick.callCount).toStrictEqual(
-        3,
-      );
-      expect(childButtonSpies.onClick.callCount).toStrictEqual(3);
-    });
-
-    it('should render all child buttons as disabled if props.disabled is true', () => {
-      const childButtons = wrapper.find('.button-group__button');
-      childButtons.forEach((button) => {
-        expect(button.props().disabled).toBeUndefined();
-      });
-      wrapper.setProps({ disabled: true });
-      const disabledChildButtons = wrapper.find('[disabled=true]');
-      expect(disabledChildButtons).toHaveLength(3);
-    });
-
-    it('should render the children of the button', () => {
-      const mockClass = wrapper.find('.mockClass');
-      expect(mockClass).toHaveLength(1);
-    });
-  });
-
-  describe('render', () => {
-    it('should render a div with the expected class and style', () => {
-      expect(wrapper.find('div').at(0).props().className).toStrictEqual(
-        'someClassName',
-      );
-      expect(wrapper.find('div').at(0).props().style).toStrictEqual({
-        color: 'red',
-      });
-    });
 
-    it('should call renderButtons when rendering', () => {
-      expect(ButtonGroup.prototype.renderButtons.callCount).toStrictEqual(1);
-      wrapper.instance().render();
-      expect(ButtonGroup.prototype.renderButtons.callCount).toStrictEqual(2);
-    });
+    expect(container).toMatchSnapshot();
   });
 });

ui/components/ui/page-container/page-container-footer/__snapshots__/page-container-footer.component.test.js.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Page Footer should match snapshot 1`] = `
+<div>
+  <div
+    class="page-container__footer"
+  >
+    <footer>
+      <button
+        class="button btn--rounded btn-secondary page-container__footer-button"
+        data-testid="page-container-footer-cancel"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </button>
+      <button
+        class="button btn--rounded btn-default page-container__footer-button"
+        data-testid="page-container-footer-next"
+        role="button"
+        tabindex="0"
+      >
+        Submit
+      </button>
+    </footer>
+  </div>
+</div>
+`;
+
+exports[`Page Footer should render a secondary footer inside page-container__footer when given children 1`] = `
+<div>
+  <div
+    class="page-container__footer"
+  >
+    <footer>
+      <button
+        class="button btn--rounded btn-secondary page-container__footer-button"
+        data-testid="page-container-footer-cancel"
+        role="button"
+        tabindex="0"
+      >
+        [cancel]
+      </button>
+      <button
+        class="button btn--rounded btn-primary page-container__footer-button"
+        data-testid="page-container-footer-next"
+        role="button"
+        tabindex="0"
+      >
+        [next]
+      </button>
+    </footer>
+    <div
+      class="page-container__footer-secondary"
+    >
+      <div>
+        Works
+      </div>
+    </div>
+  </div>
+</div>
+`;

ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js

@@ -1,87 +1,55 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import Button from '../../button';
-import PageFooter from './page-container-footer.component';
+import { fireEvent } from '@testing-library/react';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import PageFooter from '.';
 
 describe('Page Footer', () => {
-  let wrapper;
-  const onCancel = sinon.spy();
-  const onSubmit = sinon.spy();
-
-  beforeEach(() => {
-    wrapper = shallow(
-      <PageFooter
-        onCancel={onCancel}
-        onSubmit={onSubmit}
-        cancelText="Cancel"
-        submitText="Submit"
-        disabled={false}
-        submitButtonType="Test Type"
-      />,
-    );
-  });
-
-  it('renders page container footer', () => {
-    expect(wrapper.find('.page-container__footer')).toHaveLength(1);
+  const props = {
+    onCancel: jest.fn(),
+    onSubmit: jest.fn(),
+    cancelText: 'Cancel',
+    submitText: 'Submit',
+    disabled: false,
+    submitButtonType: 'Test Type',
+  };
+
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(<PageFooter {...props} />);
+
+    expect(container).toMatchSnapshot();
   });
 
   it('should render a secondary footer inside page-container__footer when given children', () => {
-    wrapper = shallow(
+    const { container } = renderWithProvider(
       <PageFooter>
         <div>Works</div>
       </PageFooter>,
-      { context: { t: sinon.spy((k) => `[${k}]`) } },
     );
 
-    expect(wrapper.find('.page-container__footer-secondary')).toHaveLength(1);
-  });
-
-  it('renders two button components', () => {
-    expect(wrapper.find(Button)).toHaveLength(2);
+    expect(container).toMatchSnapshot();
   });
 
   describe('Cancel Button', () => {
-    it('has button type of default', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').first().prop('type'),
-      ).toStrictEqual('secondary');
-    });
+    it('should call cancel when click is simulated', () => {
+      const { queryByTestId } = renderWithProvider(<PageFooter {...props} />);
 
-    it('has children text of Cancel', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').first().prop('children'),
-      ).toStrictEqual('Cancel');
-    });
+      const cancelButton = queryByTestId('page-container-footer-cancel');
 
-    it('should call cancel when click is simulated', () => {
-      wrapper.find('.page-container__footer-button').first().prop('onClick')();
-      expect(onCancel.callCount).toStrictEqual(1);
+      fireEvent.click(cancelButton);
+
+      expect(props.onCancel).toHaveBeenCalled();
     });
   });
 
   describe('Submit Button', () => {
-    it('assigns button type based on props', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').last().prop('type'),
-      ).toStrictEqual('Test Type');
-    });
+    it('should call submit when click is simulated', () => {
+      const { queryByTestId } = renderWithProvider(<PageFooter {...props} />);
 
-    it('has disabled prop', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').last().prop('disabled'),
-      ).toStrictEqual(false);
-    });
+      const submitButton = queryByTestId('page-container-footer-next');
 
-    it('has children text when submitText prop exists', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').last().prop('children'),
-      ).toStrictEqual('Submit');
-    });
+      fireEvent.click(submitButton);
 
-    it('should call submit when click is simulated', () => {
-      wrapper.find('.page-container__footer-button').last().prop('onClick')();
-      expect(onSubmit.callCount).toStrictEqual(1);
+      expect(props.onSubmit).toHaveBeenCalled();
     });
   });
 });

ui/components/ui/site-origin/__snapshots__/site-origin.test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SiteOrigin renders number and hyphen prefixed domains correctly 1`] = `
+<div>
+  <div
+    class="site-origin"
+  >
+    <bdi
+      dir="ltr"
+    >
+      0-example.com
+    </bdi>
+  </div>
+</div>
+`;

ui/components/ui/site-origin/site-origin.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import SiteOrigin from './site-origin';
 
 describe('SiteOrigin', () => {
@@ -14,11 +14,10 @@ describe('SiteOrigin', () => {
 
   it('renders number and hyphen prefixed domains correctly', () => {
     const numberHyphenPrefixOrigin = '0-example.com';
-    const wrapper = shallow(
+    const { container } = renderWithProvider(
       <SiteOrigin {...defaultProps} siteOrigin={numberHyphenPrefixOrigin} />,
     );
-    const bdiElement = wrapper.find('bdi');
 
-    expect(bdiElement.text()).toBe('0-example.com');
+    expect(container).toMatchSnapshot();
   });
 });