diff --git a/__tests__/App.test.jsx b/__tests__/App.test.jsx index 9712833be4..29f0f21fa0 100644 --- a/__tests__/App.test.jsx +++ b/__tests__/App.test.jsx @@ -1,50 +1,36 @@ import React from 'react'; -import { MemoryRouter } from 'react-router-dom'; -import { I18nProvider } from '@lingui/react'; -import { mount } from 'enzyme'; +import { mountWithContexts } from './enzymeHelpers'; + import { asyncFlush } from '../jest.setup'; -import { ConfigProvider } from '../src/contexts/Config'; -import { NetworkProvider } from '../src/contexts/Network'; - -import App, { _App } from '../src/App'; - -const networkProviderValue = { api: {}, handleHttpError: () => {} }; +import App from '../src/App'; describe('', () => { test('expected content is rendered', () => { - const appWrapper = mount( - - - - - ( - routeGroups.map(({ groupId }) => (
)) - )} - /> - - - - + const appWrapper = mountWithContexts( + ( + routeGroups.map(({ groupId }) => (
)) + )} + /> ); // page components @@ -69,17 +55,7 @@ describe('', () => { const config = { ansible_version, version }; - const wrapper = mount( - - - - - - - - - - ); + const wrapper = mountWithContexts(, { context: { config } }); // open about modal const aboutDropdown = 'Dropdown QuestionCircleIcon'; @@ -106,19 +82,8 @@ describe('', () => { }); test('onNavToggle sets state.isNavOpen to opposite', () => { - const appWrapper = mount( - - - - - - - - - - ).find('App'); + const appWrapper = mountWithContexts().find('App'); const { onNavToggle } = appWrapper.instance(); - [true, false, true, false, true].forEach(expected => { expect(appWrapper.state().isNavOpen).toBe(expected); onNavToggle(); @@ -128,17 +93,9 @@ describe('', () => { test('onLogout makes expected call to api client', async (done) => { const logout = jest.fn(() => Promise.resolve()); - const appWrapper = mount( - - - - - <_App api={{ logout }} handleHttpError={() => {}} /> - - - - - ).find('App'); + const appWrapper = mountWithContexts(, { + context: { network: { api: { logout }, handleHttpError: () => {} } } + }).find('App'); appWrapper.instance().onLogout(); await asyncFlush(); diff --git a/__tests__/components/About.test.jsx b/__tests__/components/About.test.jsx index 86a4dab4c1..575265b9b7 100644 --- a/__tests__/components/About.test.jsx +++ b/__tests__/components/About.test.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import { mount } from 'enzyme'; -import { I18nProvider } from '@lingui/react'; +import { mountWithContexts } from '../enzymeHelpers'; import About from '../../src/components/About'; describe('', () => { @@ -8,20 +7,16 @@ describe('', () => { let closeButton; const onClose = jest.fn(); test('initially renders without crashing', () => { - aboutWrapper = mount( - - - + aboutWrapper = mountWithContexts( + ); expect(aboutWrapper.length).toBe(1); aboutWrapper.unmount(); }); test('close button calls onClose handler', () => { - aboutWrapper = mount( - - - + aboutWrapper = mountWithContexts( + ); closeButton = aboutWrapper.find('AboutModalBoxCloseButton Button'); closeButton.simulate('click'); diff --git a/__tests__/components/AnsibleSelect.test.jsx b/__tests__/components/AnsibleSelect.test.jsx index d23d039d51..cd308f2cfc 100644 --- a/__tests__/components/AnsibleSelect.test.jsx +++ b/__tests__/components/AnsibleSelect.test.jsx @@ -1,37 +1,32 @@ import React from 'react'; -import { mount } from 'enzyme'; -import { I18nProvider } from '@lingui/react'; +import { mountWithContexts } from '../enzymeHelpers'; import AnsibleSelect from '../../src/components/AnsibleSelect'; const label = 'test select'; const mockData = ['/venv/baz/', '/venv/ansible/']; describe('', () => { test('initially renders succesfully', async () => { - mount( - - { }} - label={label} - data={mockData} - /> - + mountWithContexts( + { }} + label={label} + data={mockData} + /> ); }); test('calls "onSelectChange" on dropdown select change', () => { const spy = jest.spyOn(AnsibleSelect.prototype, 'onSelectChange'); - const wrapper = mount( - - { }} - label={label} - data={mockData} - /> - + const wrapper = mountWithContexts( + { }} + label={label} + data={mockData} + /> ); expect(spy).not.toHaveBeenCalled(); wrapper.find('select').simulate('change'); @@ -39,17 +34,15 @@ describe('', () => { }); test('Returns correct select options if defaultSelected props is passed', () => { - const wrapper = mount( - - { }} - label={label} - data={mockData} - defaultSelected={mockData[1]} - /> - + const wrapper = mountWithContexts( + { }} + label={label} + data={mockData} + defaultSelected={mockData[1]} + /> ); expect(wrapper.find('FormSelect')).toHaveLength(1); }); diff --git a/__tests__/components/DataListToolbar.test.jsx b/__tests__/components/DataListToolbar.test.jsx index 50e2a6f61b..a7ad38cca7 100644 --- a/__tests__/components/DataListToolbar.test.jsx +++ b/__tests__/components/DataListToolbar.test.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import { mount } from 'enzyme'; -import { I18nProvider } from '@lingui/react'; +import { mountWithContexts } from '../enzymeHelpers'; import DataListToolbar from '../../src/components/DataListToolbar'; describe('', () => { @@ -25,20 +24,18 @@ describe('', () => { const onSort = jest.fn(); const onSelectAll = jest.fn(); - toolbar = mount( - - - + toolbar = mountWithContexts( + ); toolbar.find(sort).simulate('click'); @@ -76,18 +73,16 @@ describe('', () => { const onSort = jest.fn(); const onSelectAll = jest.fn(); - toolbar = mount( - - - + toolbar = mountWithContexts( + ); const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector); expect(sortDropdownToggle.length).toBe(2); @@ -100,18 +95,16 @@ describe('', () => { const mockedSortEvent = { target: { innerText: 'Bar' } }; sortDropdownItems.at(0).simulate('click', mockedSortEvent); - toolbar = mount( - - - + toolbar = mountWithContexts( + ); toolbar.update(); @@ -152,70 +145,62 @@ describe('', () => { const onSort = jest.fn(); const onSelectAll = jest.fn(); - toolbar = mount( - - - + toolbar = mountWithContexts( + ); const downNumericIcon = toolbar.find(downNumericIconSelector); expect(downNumericIcon.length).toBe(1); - toolbar = mount( - - - + toolbar = mountWithContexts( + ); const upNumericIcon = toolbar.find(upNumericIconSelector); expect(upNumericIcon.length).toBe(1); - toolbar = mount( - - - + toolbar = mountWithContexts( + ); const downAlphaIcon = toolbar.find(downAlphaIconSelector); expect(downAlphaIcon.length).toBe(1); - toolbar = mount( - - - + toolbar = mountWithContexts( + ); const upAlphaIcon = toolbar.find(upAlphaIconSelector); @@ -232,22 +217,20 @@ describe('', () => { const showDelete = true; const disableTrashCanIcon = false; - toolbar = mount( - - [1, 2, 3, 4]} - sortedColumnKey="name" - sortOrder="ascending" - columns={columns} - onSearch={onSearch} - onSort={onSort} - onSelectAll={onSelectAll} - onOpenDeleteModal={onOpenDeleteModal} - showDelete={showDelete} - disableTrashCanIcon={disableTrashCanIcon} - /> - + toolbar = mountWithContexts( + [1, 2, 3, 4]} + sortedColumnKey="name" + sortOrder="ascending" + columns={columns} + onSearch={onSearch} + onSort={onSort} + onSelectAll={onSelectAll} + onOpenDeleteModal={onOpenDeleteModal} + showDelete={showDelete} + disableTrashCanIcon={disableTrashCanIcon} + /> ); toolbar.find(openDeleteModalButton).simulate('click'); diff --git a/__tests__/components/ExpandCollapse.test.jsx b/__tests__/components/ExpandCollapse.test.jsx index f2bf3e27aa..5e60e81a5e 100644 --- a/__tests__/components/ExpandCollapse.test.jsx +++ b/__tests__/components/ExpandCollapse.test.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import { mount } from 'enzyme'; -import { I18nProvider } from '@lingui/react'; +import { mountWithContexts } from '../enzymeHelpers'; import ExpandCollapse from '../../src/components/ExpandCollapse'; describe('', () => { @@ -8,14 +7,12 @@ describe('', () => { const onExpand = jest.fn(); const isCompact = false; test('initially renders without crashing', () => { - const wrapper = mount( - - - + const wrapper = mountWithContexts( + ); expect(wrapper.length).toBe(1); wrapper.unmount(); diff --git a/__tests__/components/Lookup.test.jsx b/__tests__/components/Lookup.test.jsx index 7d08ee3c83..802b67082c 100644 --- a/__tests__/components/Lookup.test.jsx +++ b/__tests__/components/Lookup.test.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import { mount } from 'enzyme'; -import { I18nProvider } from '@lingui/react'; +import { mountWithContexts } from '../enzymeHelpers'; import Lookup from '../../src/components/Lookup'; import { _Lookup } from '../../src/components/Lookup/Lookup'; @@ -10,36 +9,32 @@ const mockColumns = [ ]; describe('', () => { test('initially renders succesfully', () => { - mount( - - <_Lookup - lookup_header="Foo Bar" - name="fooBar" - value={mockData} - onLookupSave={() => { }} - getItems={() => { }} - columns={mockColumns} - sortedColumnKey="name" - handleHttpError={() => {}} - /> - + mountWithContexts( + <_Lookup + lookup_header="Foo Bar" + name="fooBar" + value={mockData} + onLookupSave={() => { }} + getItems={() => { }} + columns={mockColumns} + sortedColumnKey="name" + handleHttpError={() => {}} + /> ); }); test('API response is formatted properly', (done) => { - const wrapper = mount( - - <_Lookup - lookup_header="Foo Bar" - name="fooBar" - value={mockData} - onLookupSave={() => { }} - getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })} - columns={mockColumns} - sortedColumnKey="name" - handleHttpError={() => {}} - /> - + const wrapper = mountWithContexts( + <_Lookup + lookup_header="Foo Bar" + name="fooBar" + value={mockData} + onLookupSave={() => { }} + getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })} + columns={mockColumns} + sortedColumnKey="name" + handleHttpError={() => {}} + /> ).find('Lookup'); setImmediate(() => { @@ -51,20 +46,18 @@ describe('', () => { test('Opens modal when search icon is clicked', () => { const spy = jest.spyOn(_Lookup.prototype, 'handleModalToggle'); const mockSelected = [{ name: 'foo', id: 1 }]; - const wrapper = mount( - - <_Lookup - id="search" - lookup_header="Foo Bar" - name="fooBar" - value={mockSelected} - onLookupSave={() => { }} - getItems={() => { }} - columns={mockColumns} - sortedColumnKey="name" - handleHttpError={() => {}} - /> - + const wrapper = mountWithContexts( + <_Lookup + id="search" + lookup_header="Foo Bar" + name="fooBar" + value={mockSelected} + onLookupSave={() => { }} + getItems={() => { }} + columns={mockColumns} + sortedColumnKey="name" + handleHttpError={() => {}} + /> ).find('Lookup'); expect(spy).not.toHaveBeenCalled(); expect(wrapper.state('lookupSelectedItems')).toEqual(mockSelected); @@ -81,20 +74,18 @@ describe('', () => { test('calls "toggleSelected" when a user changes a checkbox', (done) => { const spy = jest.spyOn(_Lookup.prototype, 'toggleSelected'); const mockSelected = [{ name: 'foo', id: 1 }]; - const wrapper = mount( - - <_Lookup - id="search" - lookup_header="Foo Bar" - name="fooBar" - value={mockSelected} - onLookupSave={() => { }} - getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })} - columns={mockColumns} - sortedColumnKey="name" - handleHttpError={() => {}} - /> - + const wrapper = mountWithContexts( + <_Lookup + id="search" + lookup_header="Foo Bar" + name="fooBar" + value={mockSelected} + onLookupSave={() => { }} + getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })} + columns={mockColumns} + sortedColumnKey="name" + handleHttpError={() => {}} + /> ); setImmediate(() => { const searchItem = wrapper.find('button[aria-label="Search"]'); @@ -108,20 +99,18 @@ describe('', () => { test('calls "toggleSelected" when remove icon is clicked', () => { const spy = jest.spyOn(_Lookup.prototype, 'toggleSelected'); mockData = [{ name: 'foo', id: 1 }, { name: 'bar', id: 2 }]; - const wrapper = mount( - - <_Lookup - id="search" - lookup_header="Foo Bar" - name="fooBar" - value={mockData} - onLookupSave={() => { }} - getItems={() => { }} - columns={mockColumns} - sortedColumnKey="name" - handleHttpError={() => {}} - /> - + const wrapper = mountWithContexts( + <_Lookup + id="search" + lookup_header="Foo Bar" + name="fooBar" + value={mockData} + onLookupSave={() => { }} + getItems={() => { }} + columns={mockColumns} + sortedColumnKey="name" + handleHttpError={() => {}} + /> ); const removeIcon = wrapper.find('button[aria-label="close"]').first(); removeIcon.simulate('click'); @@ -130,19 +119,16 @@ describe('', () => { test('renders chips from prop value', () => { mockData = [{ name: 'foo', id: 0 }, { name: 'bar', id: 1 }]; - const wrapper = mount( - - { }} - value={mockData} - selected={[]} - getItems={() => { }} - columns={mockColumns} - sortedColumnKey="name" - handleHttpError={() => {}} - /> - + const wrapper = mountWithContexts( + { }} + value={mockData} + selected={[]} + getItems={() => { }} + columns={mockColumns} + sortedColumnKey="name" + /> ).find('Lookup'); const chip = wrapper.find('li.pf-c-chip'); expect(chip).toHaveLength(2); @@ -150,18 +136,15 @@ describe('', () => { test('toggleSelected successfully adds/removes row from lookupSelectedItems state', () => { mockData = []; - const wrapper = mount( - - { }} - value={mockData} - getItems={() => { }} - columns={mockColumns} - sortedColumnKey="name" - handleHttpError={() => {}} - /> - + const wrapper = mountWithContexts( + { }} + value={mockData} + getItems={() => { }} + columns={mockColumns} + sortedColumnKey="name" + /> ).find('Lookup'); wrapper.instance().toggleSelected({ id: 1, @@ -181,17 +164,14 @@ describe('', () => { test('saveModal calls callback with selected items', () => { mockData = []; const onLookupSaveFn = jest.fn(); - const wrapper = mount( - - { }} - handleHttpError={() => {}} - /> - + const wrapper = mountWithContexts( + { }} + /> ).find('Lookup'); wrapper.instance().toggleSelected({ id: 1, @@ -210,19 +190,17 @@ describe('', () => { test('onSort sets state and calls getData ', () => { const spy = jest.spyOn(_Lookup.prototype, 'getData'); - const wrapper = mount( - - <_Lookup - lookup_header="Foo Bar" - onLookupSave={() => { }} - value={mockData} - selected={[]} - columns={mockColumns} - sortedColumnKey="name" - getItems={() => { }} - handleHttpError={() => {}} - /> - + const wrapper = mountWithContexts( + <_Lookup + lookup_header="Foo Bar" + onLookupSave={() => { }} + value={mockData} + selected={[]} + columns={mockColumns} + sortedColumnKey="name" + getItems={() => { }} + handleHttpError={() => {}} + /> ).find('Lookup'); wrapper.instance().onSort('id', 'descending'); expect(wrapper.state('sortedColumnKey')).toEqual('id'); @@ -232,19 +210,17 @@ describe('', () => { test('onSearch calls getData (through calling onSort)', () => { const spy = jest.spyOn(_Lookup.prototype, 'getData'); - const wrapper = mount( - - <_Lookup - lookup_header="Foo Bar" - onLookupSave={() => { }} - value={mockData} - selected={[]} - columns={mockColumns} - sortedColumnKey="name" - getItems={() => { }} - handleHttpError={() => {}} - /> - + const wrapper = mountWithContexts( + <_Lookup + lookup_header="Foo Bar" + onLookupSave={() => { }} + value={mockData} + selected={[]} + columns={mockColumns} + sortedColumnKey="name" + getItems={() => { }} + handleHttpError={() => {}} + /> ).find('Lookup'); wrapper.instance().onSearch(); expect(spy).toHaveBeenCalled(); @@ -252,19 +228,17 @@ describe('', () => { test('onSetPage sets state and calls getData ', () => { const spy = jest.spyOn(_Lookup.prototype, 'getData'); - const wrapper = mount( - - <_Lookup - lookup_header="Foo Bar" - onLookupSave={() => { }} - value={mockData} - selected={[]} - columns={mockColumns} - sortedColumnKey="name" - getItems={() => { }} - handleHttpError={() => {}} - /> - + const wrapper = mountWithContexts( + <_Lookup + lookup_header="Foo Bar" + onLookupSave={() => { }} + value={mockData} + selected={[]} + columns={mockColumns} + sortedColumnKey="name" + getItems={() => { }} + handleHttpError={() => {}} + /> ).find('Lookup'); wrapper.instance().onSetPage(2, 10); expect(wrapper.state('page')).toEqual(2); diff --git a/__tests__/components/NavExpandableGroup.test.jsx b/__tests__/components/NavExpandableGroup.test.jsx index 7619dcbfcd..df803efea4 100644 --- a/__tests__/components/NavExpandableGroup.test.jsx +++ b/__tests__/components/NavExpandableGroup.test.jsx @@ -39,7 +39,7 @@ describe('NavExpandableGroup', () => { ]; params.forEach(([location, path, expected]) => { - test(`when location is ${location}', isActivePath('${path}') returns ${expected} `, () => { + test(`when location is ${location}, isActivePath('${path}') returns ${expected} `, () => { const component = mount(