finish updating tests for upgraded react-router

awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.test.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
-
+import { createMemoryHistory } from 'history';
 import {
   mountWithContexts,
   waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
-
 import OrganizationAdd from './OrganizationAdd';
 import { OrganizationsAPI } from '../../../api';
 
@@ -27,33 +26,25 @@ describe('<OrganizationAdd />', () => {
   });
 
   test('should navigate to organizations list when cancel is clicked', () => {
-    const history = {
+    const history = createMemoryHistory({});
-      push: jest.fn(),
-    };
     const wrapper = mountWithContexts(<OrganizationAdd />, {
       context: { router: { history } },
     });
-    expect(history.push).not.toHaveBeenCalled();
     wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
-    expect(history.push).toHaveBeenCalledWith('/organizations');
+    expect(history.location.pathname).toEqual('/organizations');
   });
 
   test('should navigate to organizations list when close (x) is clicked', () => {
-    const history = {
+    const history = createMemoryHistory({});
-      push: jest.fn(),
-    };
     const wrapper = mountWithContexts(<OrganizationAdd />, {
       context: { router: { history } },
     });
-    expect(history.push).not.toHaveBeenCalled();
     wrapper.find('button[aria-label="Close"]').prop('onClick')();
-    expect(history.push).toHaveBeenCalledWith('/organizations');
+    expect(history.location.pathname).toEqual('/organizations');
   });
 
-  test('successful form submission should trigger redirect', async done => {
+  test('successful form submission should trigger redirect', async () => {
-    const history = {
+    const history = createMemoryHistory({});
-      push: jest.fn(),
-    };
     const orgData = {
       name: 'new name',
       description: 'new description',
@@ -77,11 +68,10 @@ describe('<OrganizationAdd />', () => {
       [3],
       []
     );
-    expect(history.push).toHaveBeenCalledWith('/organizations/5');
+    expect(history.location.pathname).toEqual('/organizations/5');
-    done();
   });
 
-  test('handleSubmit should post instance groups', async done => {
+  test('handleSubmit should post instance groups', async () => {
     const orgData = {
       name: 'new name',
       description: 'new description',
@@ -104,7 +94,6 @@ describe('<OrganizationAdd />', () => {
       []
     );
     expect(OrganizationsAPI.associateInstanceGroup).toHaveBeenCalledWith(5, 3);
-    done();
   });
 
   test('AnsibleSelect component renders if there are virtual environments', () => {

awx/ui_next/src/screens/Organization/OrganizationEdit/OrganizationEdit.test.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
-
+import { createMemoryHistory } from 'history';
 import { OrganizationsAPI } from '@api';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
-
 import OrganizationEdit from './OrganizationEdit';
 
 jest.mock('@api');
@@ -65,17 +64,14 @@ describe('<OrganizationEdit />', () => {
   });
 
   test('should navigate to organization detail when cancel is clicked', () => {
-    const history = {
+    const history = createMemoryHistory({});
-      push: jest.fn(),
-    };
     const wrapper = mountWithContexts(
       <OrganizationEdit organization={mockData} />,
       { context: { router: { history } } }
     );
 
-    expect(history.push).not.toHaveBeenCalled();
     wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
 
-    expect(history.push).toHaveBeenCalledWith('/organizations/1/details');
+    expect(history.location.pathname).toEqual('/organizations/1/details');
   });
 });

awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { createMemoryHistory } from 'history';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
 import { sleep } from '@testUtils/testUtils';
 import JobTemplateAdd from './JobTemplateAdd';
@@ -110,9 +111,7 @@ describe('<JobTemplateAdd />', () => {
   });
 
   test('should navigate to job template detail after form submission', async () => {
-    const history = {
+    const history = createMemoryHistory({});
-      push: jest.fn(),
-    };
     JobTemplatesAPI.create.mockResolvedValueOnce({
       data: {
         id: 1,
@@ -128,20 +127,18 @@ describe('<JobTemplateAdd />', () => {
       jobTemplateData
     );
     await sleep(0);
-    expect(history.push).toHaveBeenCalledWith(
+    expect(history.location.pathname).toEqual(
       '/templates/job_template/1/details'
     );
   });
 
   test('should navigate to templates list when cancel is clicked', async () => {
-    const history = {
+    const history = createMemoryHistory({});
-      push: jest.fn(),
-    };
     const wrapper = mountWithContexts(<JobTemplateAdd />, {
       context: { router: { history } },
     });
     await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
     wrapper.find('button[aria-label="Cancel"]').invoke('onClick')();
-    expect(history.push).toHaveBeenCalledWith('/templates');
+    expect(history.location.pathname).toEqual('/templates');
   });
 });

awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { createMemoryHistory } from 'history';
 import { sleep } from '@testUtils/testUtils';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
 import { JobTemplatesAPI, LabelsAPI, ProjectsAPI } from '@api';
@@ -163,7 +164,7 @@ describe('<JobTemplateEdit />', () => {
     await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
   });
 
-  test('handleSubmit should call api update', async done => {
+  test('handleSubmit should call api update', async () => {
     const wrapper = mountWithContexts(
       <JobTemplateEdit template={mockJobTemplate} />
     );
@@ -206,11 +207,10 @@ describe('<JobTemplateEdit />', () => {
     expect(JobTemplatesAPI.disassociateLabel).toHaveBeenCalledTimes(2);
     expect(JobTemplatesAPI.associateLabel).toHaveBeenCalledTimes(2);
     expect(JobTemplatesAPI.generateLabel).toHaveBeenCalledTimes(2);
-    done();
   });
 
-  test('should navigate to job template detail when cancel is clicked', async done => {
+  test('should navigate to job template detail when cancel is clicked', async () => {
-    const history = { push: jest.fn() };
+    const history = createMemoryHistory({});
     const wrapper = mountWithContexts(
       <JobTemplateEdit template={mockJobTemplate} />,
       { context: { router: { history } } }
@@ -220,11 +220,9 @@ describe('<JobTemplateEdit />', () => {
       'button[aria-label="Cancel"]',
       e => e.length === 1
     );
-    expect(history.push).not.toHaveBeenCalled();
     cancelButton.prop('onClick')();
-    expect(history.push).toHaveBeenCalledWith(
+    expect(history.location.pathname).toEqual(
       '/templates/job_template/1/details'
     );
-    done();
   });
 });

awx/ui_next/testUtils/enzymeHelpers.test.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { createMemoryHistory } from 'history';
 import { Link } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -21,7 +22,7 @@ describe('mountWithContexts', () => {
       const Child = withI18n()(({ i18n }) => (
         <div>{i18n._(t`Text content`)}</div>
       ));
-      const Parent = () => (<Child />);
+      const Parent = () => <Child />;
       const wrapper = mountWithContexts(<Parent />);
       expect(wrapper.find('Parent')).toMatchSnapshot();
     });
@@ -41,23 +42,17 @@ describe('mountWithContexts', () => {
     it('should mount and render with stubbed context', () => {
       const context = {
         router: {
-          history: {
+          history: createMemoryHistory({}),
-            push: jest.fn(),
-            replace: jest.fn(),
-            createHref: jest.fn(),
-          },
           route: {
             location: {},
-            match: {}
+            match: {},
-          }
+          },
-        }
+        },
       };
       const wrapper = mountWithContexts(
-        (
+        <div>
-          <div>
+          <Link to="/">home</Link>
-            <Link to="/">home</Link>
+        </div>,
-          </div>
-        ),
         { context }
       );
 
@@ -66,7 +61,7 @@ describe('mountWithContexts', () => {
       link.simulate('click', { button: 0 });
       wrapper.update();
 
-      expect(context.router.history.push).toHaveBeenCalledWith('/');
+      expect(context.router.history.location.pathname).toEqual('/');
     });
   });
 
@@ -101,10 +96,7 @@ describe('mountWithContexts', () => {
           )}
         </Config>
       );
-      const wrapper = mountWithContexts(
+      const wrapper = mountWithContexts(<Foo />, { context: { config } });
-        <Foo />,
-        { context: { config } }
-      );
       expect(wrapper.find('Foo')).toMatchSnapshot();
     });
   });
@@ -115,26 +107,26 @@ describe('mountWithContexts', () => {
  * after a short amount of time.
  */
 class TestAsyncComponent extends Component {
-  constructor (props) {
+  constructor(props) {
     super(props);
     this.state = { displayElement: false };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     setTimeout(() => this.setState({ displayElement: true }), 500);
   }
 
-  render () {
+  render() {
     const { displayElement } = this.state;
     if (displayElement) {
-      return (<div id="test-async-component" />);
+      return <div id="test-async-component" />;
     }
     return null;
   }
 }
 
 describe('waitForElement', () => {
-  it('waits for the element and returns it', async (done) => {
+  it('waits for the element and returns it', async done => {
     const selector = '#test-async-component';
     const wrapper = mountWithContexts(<TestAsyncComponent />);
     expect(wrapper.exists(selector)).toEqual(false);
@@ -145,7 +137,7 @@ describe('waitForElement', () => {
     done();
   });
 
-  it('eventually throws an error for elements that don\'t exist', async (done) => {
+  it("eventually throws an error for elements that don't exist", async done => {
     const wrapper = mountWithContexts(<div />);
 
     let error;
@@ -154,7 +146,11 @@ describe('waitForElement', () => {
     } catch (err) {
       error = err;
     } finally {
-      expect(error).toEqual(new Error('Expected condition for <#does-not-exist> not met: el => el.length === 1'));
+      expect(error).toEqual(
+        new Error(
+          'Expected condition for <#does-not-exist> not met: el => el.length === 1'
+        )
+      );
       done();
     }
   });