diff --git a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationList.test.jsx.snap b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationList.test.jsx.snap deleted file mode 100644 index 6e1ad5ede3..0000000000 --- a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationList.test.jsx.snap +++ /dev/null @@ -1,5321 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` initially renders succesfully 1`] = ` - - - - - - - - - - - - - - - - - - - -
- - - -
- - -
- - - -
- - - -
- -
- - -
- Name -
- - - - Search value text input - - } - style={ - Object { - "width": "100%", - } - } - suppressClassNameWarning={true} - > - - Search value text input - - } - style={ - Object { - "width": "100%", - } - } - suppressClassNameWarning={true} - > - - Search value text input - - } - style={ - Object { - "width": "100%", - } - } - > -
- - - - - - - - -
- - - - - - - - - -
-
- - - - -
- - - - -
- - - - - -
- -
- - - - -
- -
- - - - - - - Sort By - - - - - Modified - , - - Created - , - ] - } - isOpen={false} - onSelect={[Function]} - onToggle={[Function]} - style={ - Object { - "marginRight": "10px", - } - } - toggle={ - - Name - - } - > - - Modified - , - - Created - , - ] - } - forwardedComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "Sort__Dropdown-sc-21g5aw-0", - "isStatic": true, - "lastClassName": "kdSQuN", - "rules": Array [ - "&&&{> button{min-height:30px;min-width:70px;height:30px;padding:0 10px;margin:0px;> span{width:auto;}> svg{margin:0px;padding-top:3px;padding-left:3px;}}}", - ], - }, - "displayName": "Sort__Dropdown", - "foldedComponentIds": Array [], - "render": [Function], - "styledComponentId": "Sort__Dropdown-sc-21g5aw-0", - "target": [Function], - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - forwardedRef={null} - isOpen={false} - onSelect={[Function]} - onToggle={[Function]} - style={ - Object { - "marginRight": "10px", - } - } - toggle={ - - Name - - } - > - - Modified - , - - Created - , - ] - } - isOpen={false} - onSelect={[Function]} - onToggle={[Function]} - style={ - Object { - "marginRight": "10px", - } - } - toggle={ - - Name - - } - > - - Modified - , - - Created - , - ] - } - isGrouped={false} - isOpen={false} - isPlain={false} - onSelect={[Function]} - onToggle={[Function]} - position="left" - style={ - Object { - "marginRight": "10px", - } - } - toggle={ - - Name - - } - > -
- - -
, - } - } - > - - -
, - } - } - > - - - -
- - - - - - Reverse Sort Order -
- } - distance={15} - enableFlip={true} - entryDelay={500} - exitDelay={500} - flipBehavior={ - Array [ - "top", - "right", - "bottom", - "left", - "top", - "right", - "bottom", - ] - } - isAppLauncher={false} - maxWidth="18.75rem" - position="top" - trigger="mouseenter focus" - zIndex={9999} - > - - -
- Reverse Sort Order -
- -
- } - delay={ - Array [ - 500, - 500, - ] - } - distance={15} - flip={true} - flipBehavior={ - Array [ - "top", - "right", - "bottom", - "left", - "top", - "right", - "bottom", - ] - } - lazy={true} - maxWidth="18.75rem" - onCreate={[Function]} - performance={true} - placement="top" - popperOptions={ - Object { - "modifiers": Object { - "hide": Object { - "enabled": true, - }, - "preventOverflow": Object { - "enabled": true, - }, - }, - } - } - theme="pf-tooltip" - trigger="mouseenter focus" - zIndex={9999} - > - - - - - - - -
-
-
- Reverse Sort Order -
-
-
- - } - > -
- -
-
- Reverse Sort Order -
-
- -
- - - - - - - - - - :not(:first-child){margin-left:20px;}", - ], - }, - "displayName": "DataListToolbar__AdditionalControlsWrapper", - "foldedComponentIds": Array [], - "render": [Function], - "styledComponentId": "DataListToolbar__AdditionalControlsWrapper-ajzso8-5", - "target": "div", - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - forwardedRef={null} - > -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - -
  • - -
    - - - - Notification one - - - , - - Email - , - - - - - , - ] - } - key=".0" - rowid="items-list-item-1" - > -
    - - - - - - - - - - -
    - Email -
    -     -     -     - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -     -     -     -
    -     -
    -     -
    • -     -     -     -     - - - - -
  • - -
    - - - - Notification two - - - , - - Email - , - - - - - , - ] - } - key=".0" - rowid="items-list-item-2" - > -
    - - - - - - - - - - -
    - Email -
    -     -     -     - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -     -     -     -
    -     -
    -     -
    • -     -     -     -     - - - - -
  • - -
    - - - - Notification three - - - , - - Email - , - - - - - , - ] - } - key=".0" - rowid="items-list-item-3" - > -
    - - - - - - - - - - -
    - Email -
    -     -     -     - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -     -     -     -
    -     -
    -     -
    • -     -     -     -     -
- - <_default - itemCount={2} - onPerPageSelect={[Function]} - onSetPage={[Function]} - page={1} - perPage={5} - perPageOptions={ - Array [ - Object { - "title": "5", - "value": 5, - }, - Object { - "title": "10", - "value": 10, - }, - Object { - "title": "20", - "value": 20, - }, - Object { - "title": "50", - "value": 50, - }, - ] - } - variant="bottom" - > - - - - -
- -
- - - 5 - - per page - - - - - , - - 10 - - per page - - , - - 20 - - per page - - , - - 50 - - per page - - , - ] - } - isOpen={false} - isPlain={true} - onSelect={[Function]} - toggle={ - - -
-
- -
-
-
- } - showToggle={true} - toggleTemplate={[Function]} - widgetId="pagination-options-menu" - /> - } - > - - 5 - - per page - - - - - , - - 10 - - per page - - , - - 20 - - per page - - , - - 50 - - per page - - , - ] - } - isGrouped={false} - isOpen={false} - isPlain={true} - onSelect={[Function]} - position="left" - toggle={ - - -
-
- -
-
-
- } - showToggle={true} - toggleTemplate={[Function]} - widgetId="pagination-options-menu" - /> - } - > -
- -
- -
-
, - } - } - showToggle={true} - toggleTemplate={[Function]} - widgetId="pagination-options-menu" - > -
- -
- -
-
, - } - } - > - -
- -
- , - } - } - > - - - - - - - - - - - - - - - - - - - - - - - - - <_default - isOpen={false} - onClose={[Function]} - title="Error!" - variant="danger" - > - - } - > - - - - - - - - - - -`; diff --git a/awx/ui_next/src/screens/NotificationTemplate/NotifcationTemplates.test.jsx b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplates.test.jsx similarity index 100% rename from awx/ui_next/src/screens/NotificationTemplate/NotifcationTemplates.test.jsx rename to awx/ui_next/src/screens/NotificationTemplate/NotificationTemplates.test.jsx diff --git a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx index 1cb52e4e5d..0539c657fe 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { act } from 'react-dom/test-utils'; import { createMemoryHistory } from 'history'; import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers'; import { sleep } from '@testUtils/testUtils'; @@ -28,8 +29,6 @@ const jobTemplateData = { host_config_key: '', }; -// TODO: Needs React/React-router upgrade to remove `act()` warnings -// See https://github.com/ansible/awx/issues/4817 describe('', () => { const defaultProps = { description: '', @@ -53,13 +52,19 @@ describe('', () => { jest.clearAllMocks(); }); - test('should render Job Template Form', () => { - const wrapper = mountWithContexts(); + test('should render Job Template Form', async () => { + let wrapper; + await act(async () => { + wrapper = mountWithContexts(); + }); expect(wrapper.find('JobTemplateForm').length).toBe(1); }); test('should render Job Template Form with default values', async () => { - const wrapper = mountWithContexts(); + let wrapper; + await act(async () => { + wrapper = mountWithContexts(); + }); await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0); expect(wrapper.find('input#template-description').text()).toBe( defaultProps.description @@ -90,7 +95,10 @@ describe('', () => { ...jobTemplateData, }, }); - const wrapper = mountWithContexts(); + let wrapper; + await act(async () => { + wrapper = mountWithContexts(); + }); await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0); const formik = wrapper.find('Formik').instance(); const changeState = new Promise(resolve => { @@ -99,6 +107,7 @@ describe('', () => { values: { ...jobTemplateData, labels: [], + instanceGroups: [], }, }, () => resolve() @@ -119,10 +128,38 @@ describe('', () => { ...jobTemplateData, }, }); - const wrapper = mountWithContexts(, { - context: { router: { history } }, + let wrapper; + await act(async () => { + wrapper = mountWithContexts(, { + context: { router: { history } }, + }); }); + const updatedTemplateData = { + name: 'new name', + description: 'new description', + job_type: 'check', + }; + const labels = [ + { id: 3, name: 'Foo', isNew: true }, + { id: 4, name: 'Bar', isNew: true }, + { id: 5, name: 'Maple' }, + { id: 6, name: 'Tree' }, + ]; + JobTemplatesAPI.update.mockResolvedValue({ + data: { ...updatedTemplateData }, + }); + const formik = wrapper.find('Formik').instance(); + const changeState = new Promise(resolve => { + const values = { + ...jobTemplateData, + ...updatedTemplateData, + labels, + instanceGroups: [], + }; + formik.setState({ values }, () => resolve()); + }); + await changeState; await wrapper.find('JobTemplateForm').invoke('handleSubmit')( jobTemplateData ); @@ -134,8 +171,11 @@ describe('', () => { test('should navigate to templates list when cancel is clicked', async () => { const history = createMemoryHistory({}); - const wrapper = mountWithContexts(, { - context: { router: { history } }, + let wrapper; + await act(async () => { + wrapper = mountWithContexts(, { + context: { router: { history } }, + }); }); await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0); wrapper.find('button[aria-label="Cancel"]').invoke('onClick')(); diff --git a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx index 0ae8ea0c01..6d6c1e4083 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { act } from 'react-dom/test-utils'; import { createMemoryHistory } from 'history'; import { sleep } from '@testUtils/testUtils'; import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers'; @@ -36,6 +37,7 @@ const mockJobTemplate = { results: [{ name: 'Sushi', id: 1 }, { name: 'Major', id: 2 }], }, inventory: { + id: 2, organization_id: 1, }, }, @@ -158,16 +160,22 @@ describe('', () => { }); test('initially renders successfully', async () => { - const wrapper = mountWithContexts( - - ); + let wrapper; + await act(async () => { + wrapper = mountWithContexts( + + ); + }); await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0); }); test('handleSubmit should call api update', async () => { - const wrapper = mountWithContexts( - - ); + let wrapper; + await act(async () => { + wrapper = mountWithContexts( + + ); + }); await waitForElement(wrapper, 'JobTemplateForm', e => e.length === 1); const updatedTemplateData = { name: 'new name', @@ -185,16 +193,13 @@ describe('', () => { }); const formik = wrapper.find('Formik').instance(); const changeState = new Promise(resolve => { - formik.setState( - { - values: { - ...mockJobTemplate, - ...updatedTemplateData, - labels, - }, - }, - () => resolve() - ); + const values = { + ...mockJobTemplate, + ...updatedTemplateData, + labels, + instanceGroups: [], + }; + formik.setState({ values }, () => resolve()); }); await changeState; wrapper.find('button[aria-label="Save"]').simulate('click'); @@ -211,10 +216,13 @@ describe('', () => { test('should navigate to job template detail when cancel is clicked', async () => { const history = createMemoryHistory({}); - const wrapper = mountWithContexts( - , - { context: { router: { history } } } - ); + let wrapper; + await act(async () => { + wrapper = mountWithContexts( + , + { context: { router: { history } } } + ); + }); const cancelButton = await waitForElement( wrapper, 'button[aria-label="Cancel"]', diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx index cf2da14304..efd57650e5 100644 --- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx +++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { act } from 'react-dom/test-utils'; import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers'; import { sleep } from '@testUtils/testUtils'; import JobTemplateForm from './JobTemplateForm'; @@ -71,14 +72,17 @@ describe('', () => { }); test('should render LabelsSelect', async () => { - const wrapper = mountWithContexts( - - ); - await waitForElement(wrapper, 'Form', el => el.length === 0); + let wrapper; + await act(async () => { + wrapper = mountWithContexts( + + ); + }); + // await waitForElement(wrapper, 'Form', el => el.length === 0); expect(LabelsAPI.read).toHaveBeenCalled(); expect(JobTemplatesAPI.readInstanceGroups).toHaveBeenCalled(); wrapper.update(); @@ -90,13 +94,16 @@ describe('', () => { }); test('should update form values on input changes', async () => { - const wrapper = mountWithContexts( - - ); + let wrapper; + await act(async () => { + wrapper = mountWithContexts( + + ); + }); await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0); const form = wrapper.find('Formik'); @@ -112,14 +119,16 @@ describe('', () => { target: { value: 'new job type', name: 'job_type' }, }); expect(form.state('values').job_type).toEqual('new job type'); - wrapper.find('InventoryLookup').prop('onChange')({ + wrapper.find('InventoryLookup').invoke('onChange')({ id: 3, name: 'inventory', }); expect(form.state('values').inventory).toEqual(3); - wrapper.find('ProjectLookup').prop('onChange')({ - id: 4, - name: 'project', + await act(async () => { + wrapper.find('ProjectLookup').invoke('onChange')({ + id: 4, + name: 'project', + }); }); expect(form.state('values').project).toEqual(4); wrapper.find('AnsibleSelect[name="playbook"]').simulate('change', { @@ -130,13 +139,16 @@ describe('', () => { test('should call handleSubmit when Submit button is clicked', async () => { const handleSubmit = jest.fn(); - const wrapper = mountWithContexts( - - ); + let wrapper; + await act(async () => { + wrapper = mountWithContexts( + + ); + }); await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0); expect(handleSubmit).not.toHaveBeenCalled(); wrapper.find('button[aria-label="Save"]').simulate('click'); @@ -146,16 +158,19 @@ describe('', () => { test('should call handleCancel when Cancel button is clicked', async () => { const handleCancel = jest.fn(); - const wrapper = mountWithContexts( - - ); + let wrapper; + await act(async () => { + wrapper = mountWithContexts( + + ); + }); await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0); expect(handleCancel).not.toHaveBeenCalled(); - wrapper.find('button[aria-label="Cancel"]').prop('onClick')(); + wrapper.find('button[aria-label="Cancel"]').invoke('onClick')(); expect(handleCancel).toBeCalled(); }); }); diff --git a/awx/ui_next/src/screens/Template/shared/LabelSelect.test.jsx b/awx/ui_next/src/screens/Template/shared/LabelSelect.test.jsx index b03d4e1572..57e4c7b90d 100644 --- a/awx/ui_next/src/screens/Template/shared/LabelSelect.test.jsx +++ b/awx/ui_next/src/screens/Template/shared/LabelSelect.test.jsx @@ -1,7 +1,7 @@ import React from 'react'; +import { act } from 'react-dom/test-utils'; import { mount } from 'enzyme'; import { LabelsAPI } from '@api'; -import { sleep } from '@testUtils/testUtils'; import LabelSelect from './LabelSelect'; jest.mock('@api'); @@ -17,8 +17,10 @@ describe('', () => { LabelsAPI.read.mockReturnValue({ data: { results: options }, }); - const wrapper = mount(); - await sleep(1); + let wrapper; + await act(async () => { + wrapper = mount( {}} />); + }); wrapper.update(); expect(LabelsAPI.read).toHaveBeenCalledTimes(1); @@ -37,8 +39,10 @@ describe('', () => { results: options, }, }); - const wrapper = mount(); - await sleep(1); + let wrapper; + await act(async () => { + wrapper = mount( {}}/>); + }); wrapper.update(); expect(LabelsAPI.read).toHaveBeenCalledTimes(2); diff --git a/awx/ui_next/src/screens/Template/shared/PlaybookSelect.test.jsx b/awx/ui_next/src/screens/Template/shared/PlaybookSelect.test.jsx index 3d1a26355a..50baffcd9d 100644 --- a/awx/ui_next/src/screens/Template/shared/PlaybookSelect.test.jsx +++ b/awx/ui_next/src/screens/Template/shared/PlaybookSelect.test.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { act } from 'react-dom/test-utils'; import { mountWithContexts } from '@testUtils/enzymeHelpers'; import PlaybookSelect from './PlaybookSelect'; import { ProjectsAPI } from '@api'; @@ -16,19 +17,24 @@ describe('', () => { jest.resetAllMocks(); }); - test('should reload playbooks when project value changes', () => { - const wrapper = mountWithContexts( - {}} - /> - ); + test('should reload playbooks when project value changes', async () => { + let wrapper; + await act(async () => { + wrapper = mountWithContexts( + {}, value: ''}} + onError={() => {}} + /> + ); + }); expect(ProjectsAPI.readPlaybooks).toHaveBeenCalledWith(1); - wrapper.setProps({ projectId: 15 }); + await act(async () => { + wrapper.setProps({ projectId: 15 }); + }); expect(ProjectsAPI.readPlaybooks).toHaveBeenCalledTimes(2); expect(ProjectsAPI.readPlaybooks).toHaveBeenCalledWith(15);