External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-07 17:37:37 -02:30
Code Issues Packages Projects Releases Wiki Activity

update components tests to use mountWithContexts when relevant

Browse Source
This commit is contained in:
John Mitchell
2019-04-22 16:34:33 -04:00
parent 986641de9f
commit 261980f18e
12 changed files with 399 additions and 546 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
__tests__/components/About.test.jsx
View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mountWithContexts } from '../enzymeHelpers';
import { I18nProvider } from '@lingui/react';
import About from '../../src/components/About'; import About from '../../src/components/About';
describe('<About />', () => { describe('<About />', () => {
@@ -8,20 +7,16 @@ describe('<About />', () => {
let closeButton; let closeButton;
const onClose = jest.fn(); const onClose = jest.fn();
test('initially renders without crashing', () => { test('initially renders without crashing', () => {
aboutWrapper = mount( aboutWrapper = mountWithContexts(
<I18nProvider>
<About isOpen onClose={onClose} /> <About isOpen onClose={onClose} />
</I18nProvider>
); );
expect(aboutWrapper.length).toBe(1); expect(aboutWrapper.length).toBe(1);
aboutWrapper.unmount(); aboutWrapper.unmount();
}); });
test('close button calls onClose handler', () => { test('close button calls onClose handler', () => {
aboutWrapper = mount( aboutWrapper = mountWithContexts(
<I18nProvider>
<About isOpen onClose={onClose} /> <About isOpen onClose={onClose} />
</I18nProvider>
); );
closeButton = aboutWrapper.find('AboutModalBoxCloseButton Button'); closeButton = aboutWrapper.find('AboutModalBoxCloseButton Button');
closeButton.simulate('click'); closeButton.simulate('click');

15
__tests__/components/AnsibleSelect.test.jsx
View File

@@ -1,14 +1,12 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mountWithContexts } from '../enzymeHelpers';
import { I18nProvider } from '@lingui/react';
import AnsibleSelect from '../../src/components/AnsibleSelect'; import AnsibleSelect from '../../src/components/AnsibleSelect';
const label = 'test select'; const label = 'test select';
const mockData = ['/venv/baz/', '/venv/ansible/']; const mockData = ['/venv/baz/', '/venv/ansible/'];
describe('<AnsibleSelect />', () => { describe('<AnsibleSelect />', () => {
test('initially renders succesfully', async () => { test('initially renders succesfully', async () => {
mount( mountWithContexts(
<I18nProvider>
<AnsibleSelect <AnsibleSelect
value="foo" value="foo"
name="bar" name="bar"
@@ -16,14 +14,12 @@ describe('<AnsibleSelect />', () => {
label={label} label={label}
data={mockData} data={mockData}
/> />
</I18nProvider>
); );
}); });
test('calls "onSelectChange" on dropdown select change', () => { test('calls "onSelectChange" on dropdown select change', () => {
const spy = jest.spyOn(AnsibleSelect.prototype, 'onSelectChange'); const spy = jest.spyOn(AnsibleSelect.prototype, 'onSelectChange');
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<AnsibleSelect <AnsibleSelect
value="foo" value="foo"
name="bar" name="bar"
@@ -31,7 +27,6 @@ describe('<AnsibleSelect />', () => {
label={label} label={label}
data={mockData} data={mockData}
/> />
</I18nProvider>
); );
expect(spy).not.toHaveBeenCalled(); expect(spy).not.toHaveBeenCalled();
wrapper.find('select').simulate('change'); wrapper.find('select').simulate('change');
@@ -39,8 +34,7 @@ describe('<AnsibleSelect />', () => {
}); });
test('Returns correct select options if defaultSelected props is passed', () => { test('Returns correct select options if defaultSelected props is passed', () => {
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<AnsibleSelect <AnsibleSelect
value="foo" value="foo"
name="bar" name="bar"
@@ -49,7 +43,6 @@ describe('<AnsibleSelect />', () => {
data={mockData} data={mockData}
defaultSelected={mockData[1]} defaultSelected={mockData[1]}
/> />
</I18nProvider>
); );
expect(wrapper.find('FormSelect')).toHaveLength(1); expect(wrapper.find('FormSelect')).toHaveLength(1);
}); });

35
__tests__/components/DataListToolbar.test.jsx
View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mountWithContexts } from '../enzymeHelpers';
import { I18nProvider } from '@lingui/react';
import DataListToolbar from '../../src/components/DataListToolbar'; import DataListToolbar from '../../src/components/DataListToolbar';
describe('<DataListToolbar />', () => { describe('<DataListToolbar />', () => {
@@ -25,8 +24,7 @@ describe('<DataListToolbar />', () => {
const onSort = jest.fn(); const onSort = jest.fn();
const onSelectAll = jest.fn(); const onSelectAll = jest.fn();
toolbar = mount( toolbar = mountWithContexts(
<I18nProvider>
<DataListToolbar <DataListToolbar
isAllSelected={false} isAllSelected={false}
showExpandCollapse showExpandCollapse
@@ -38,7 +36,6 @@ describe('<DataListToolbar />', () => {
onSelectAll={onSelectAll} onSelectAll={onSelectAll}
showSelectAll showSelectAll
/> />
</I18nProvider>
); );
toolbar.find(sort).simulate('click'); toolbar.find(sort).simulate('click');
@@ -76,8 +73,7 @@ describe('<DataListToolbar />', () => {
const onSort = jest.fn(); const onSort = jest.fn();
const onSelectAll = jest.fn(); const onSelectAll = jest.fn();
toolbar = mount( toolbar = mountWithContexts(
<I18nProvider>
<DataListToolbar <DataListToolbar
isAllSelected={false} isAllSelected={false}
sortedColumnKey="foo" sortedColumnKey="foo"
@@ -87,7 +83,6 @@ describe('<DataListToolbar />', () => {
onSort={onSort} onSort={onSort}
onSelectAll={onSelectAll} onSelectAll={onSelectAll}
/> />
</I18nProvider>
); );
const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector); const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector);
expect(sortDropdownToggle.length).toBe(2); expect(sortDropdownToggle.length).toBe(2);
@@ -100,8 +95,7 @@ describe('<DataListToolbar />', () => {
const mockedSortEvent = { target: { innerText: 'Bar' } }; const mockedSortEvent = { target: { innerText: 'Bar' } };
sortDropdownItems.at(0).simulate('click', mockedSortEvent); sortDropdownItems.at(0).simulate('click', mockedSortEvent);
toolbar = mount( toolbar = mountWithContexts(
<I18nProvider>
<DataListToolbar <DataListToolbar
isAllSelected={false} isAllSelected={false}
sortedColumnKey="foo" sortedColumnKey="foo"
@@ -111,7 +105,6 @@ describe('<DataListToolbar />', () => {
onSort={onSort} onSort={onSort}
onSelectAll={onSelectAll} onSelectAll={onSelectAll}
/> />
</I18nProvider>
); );
toolbar.update(); toolbar.update();
@@ -152,8 +145,7 @@ describe('<DataListToolbar />', () => {
const onSort = jest.fn(); const onSort = jest.fn();
const onSelectAll = jest.fn(); const onSelectAll = jest.fn();
toolbar = mount( toolbar = mountWithContexts(
<I18nProvider>
<DataListToolbar <DataListToolbar
isAllSelected={false} isAllSelected={false}
sortedColumnKey="id" sortedColumnKey="id"
@@ -164,14 +156,12 @@ describe('<DataListToolbar />', () => {
onSelectAll={onSelectAll} onSelectAll={onSelectAll}
showDelete showDelete
/> />
</I18nProvider>
); );
const downNumericIcon = toolbar.find(downNumericIconSelector); const downNumericIcon = toolbar.find(downNumericIconSelector);
expect(downNumericIcon.length).toBe(1); expect(downNumericIcon.length).toBe(1);
toolbar = mount( toolbar = mountWithContexts(
<I18nProvider>
<DataListToolbar <DataListToolbar
isAllSelected={false} isAllSelected={false}
sortedColumnKey="id" sortedColumnKey="id"
@@ -181,14 +171,12 @@ describe('<DataListToolbar />', () => {
onSort={onSort} onSort={onSort}
onSelectAll={onSelectAll} onSelectAll={onSelectAll}
/> />
</I18nProvider>
); );
const upNumericIcon = toolbar.find(upNumericIconSelector); const upNumericIcon = toolbar.find(upNumericIconSelector);
expect(upNumericIcon.length).toBe(1); expect(upNumericIcon.length).toBe(1);
toolbar = mount( toolbar = mountWithContexts(
<I18nProvider>
<DataListToolbar <DataListToolbar
isAllSelected={false} isAllSelected={false}
sortedColumnKey="name" sortedColumnKey="name"
@@ -198,14 +186,12 @@ describe('<DataListToolbar />', () => {
onSort={onSort} onSort={onSort}
onSelectAll={onSelectAll} onSelectAll={onSelectAll}
/> />
</I18nProvider>
); );
const downAlphaIcon = toolbar.find(downAlphaIconSelector); const downAlphaIcon = toolbar.find(downAlphaIconSelector);
expect(downAlphaIcon.length).toBe(1); expect(downAlphaIcon.length).toBe(1);
toolbar = mount( toolbar = mountWithContexts(
<I18nProvider>
<DataListToolbar <DataListToolbar
isAllSelected={false} isAllSelected={false}
sortedColumnKey="name" sortedColumnKey="name"
@@ -215,7 +201,6 @@ describe('<DataListToolbar />', () => {
onSort={onSort} onSort={onSort}
onSelectAll={onSelectAll} onSelectAll={onSelectAll}
/> />
</I18nProvider>
); );
const upAlphaIcon = toolbar.find(upAlphaIconSelector); const upAlphaIcon = toolbar.find(upAlphaIconSelector);
@@ -232,8 +217,7 @@ describe('<DataListToolbar />', () => {
const showDelete = true; const showDelete = true;
const disableTrashCanIcon = false; const disableTrashCanIcon = false;
toolbar = mount( toolbar = mountWithContexts(
<I18nProvider>
<DataListToolbar <DataListToolbar
isAllSelected={false} isAllSelected={false}
selected={() => [1, 2, 3, 4]} selected={() => [1, 2, 3, 4]}
@@ -247,7 +231,6 @@ describe('<DataListToolbar />', () => {
showDelete={showDelete} showDelete={showDelete}
disableTrashCanIcon={disableTrashCanIcon} disableTrashCanIcon={disableTrashCanIcon}
/> />
</I18nProvider>
); );
toolbar.find(openDeleteModalButton).simulate('click'); toolbar.find(openDeleteModalButton).simulate('click');

7
__tests__/components/ExpandCollapse.test.jsx
View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mountWithContexts } from '../enzymeHelpers';
import { I18nProvider } from '@lingui/react';
import ExpandCollapse from '../../src/components/ExpandCollapse'; import ExpandCollapse from '../../src/components/ExpandCollapse';
describe('<ExpandCollapse />', () => { describe('<ExpandCollapse />', () => {
@@ -8,14 +7,12 @@ describe('<ExpandCollapse />', () => {
const onExpand = jest.fn(); const onExpand = jest.fn();
const isCompact = false; const isCompact = false;
test('initially renders without crashing', () => { test('initially renders without crashing', () => {
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<ExpandCollapse <ExpandCollapse
onCompact={onCompact} onCompact={onCompact}
onExpand={onExpand} onExpand={onExpand}
isCompact={isCompact} isCompact={isCompact}
/> />
</I18nProvider>
); );
expect(wrapper.length).toBe(1); expect(wrapper.length).toBe(1);
wrapper.unmount(); wrapper.unmount();

50
__tests__/components/Lookup.test.jsx
View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mountWithContexts } from '../enzymeHelpers';
import { I18nProvider } from '@lingui/react';
import Lookup from '../../src/components/Lookup'; import Lookup from '../../src/components/Lookup';
import { _Lookup } from '../../src/components/Lookup/Lookup'; import { _Lookup } from '../../src/components/Lookup/Lookup';
@@ -10,8 +9,7 @@ const mockColumns = [
]; ];
describe('<Lookup />', () => { describe('<Lookup />', () => {
test('initially renders succesfully', () => { test('initially renders succesfully', () => {
mount( mountWithContexts(
<I18nProvider>
<_Lookup <_Lookup
lookup_header="Foo Bar" lookup_header="Foo Bar"
name="fooBar" name="fooBar"
@@ -22,13 +20,11 @@ describe('<Lookup />', () => {
sortedColumnKey="name" sortedColumnKey="name"
handleHttpError={() => {}} handleHttpError={() => {}}
/> />
</I18nProvider>
); );
}); });
test('API response is formatted properly', (done) => { test('API response is formatted properly', (done) => {
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<_Lookup <_Lookup
lookup_header="Foo Bar" lookup_header="Foo Bar"
name="fooBar" name="fooBar"
@@ -39,7 +35,6 @@ describe('<Lookup />', () => {
sortedColumnKey="name" sortedColumnKey="name"
handleHttpError={() => {}} handleHttpError={() => {}}
/> />
</I18nProvider>
).find('Lookup'); ).find('Lookup');
setImmediate(() => { setImmediate(() => {
@@ -51,8 +46,7 @@ describe('<Lookup />', () => {
test('Opens modal when search icon is clicked', () => { test('Opens modal when search icon is clicked', () => {
const spy = jest.spyOn(_Lookup.prototype, 'handleModalToggle'); const spy = jest.spyOn(_Lookup.prototype, 'handleModalToggle');
const mockSelected = [{ name: 'foo', id: 1 }]; const mockSelected = [{ name: 'foo', id: 1 }];
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<_Lookup <_Lookup
id="search" id="search"
lookup_header="Foo Bar" lookup_header="Foo Bar"
@@ -64,7 +58,6 @@ describe('<Lookup />', () => {
sortedColumnKey="name" sortedColumnKey="name"
handleHttpError={() => {}} handleHttpError={() => {}}
/> />
</I18nProvider>
).find('Lookup'); ).find('Lookup');
expect(spy).not.toHaveBeenCalled(); expect(spy).not.toHaveBeenCalled();
expect(wrapper.state('lookupSelectedItems')).toEqual(mockSelected); expect(wrapper.state('lookupSelectedItems')).toEqual(mockSelected);
@@ -81,8 +74,7 @@ describe('<Lookup />', () => {
test('calls "toggleSelected" when a user changes a checkbox', (done) => { test('calls "toggleSelected" when a user changes a checkbox', (done) => {
const spy = jest.spyOn(_Lookup.prototype, 'toggleSelected'); const spy = jest.spyOn(_Lookup.prototype, 'toggleSelected');
const mockSelected = [{ name: 'foo', id: 1 }]; const mockSelected = [{ name: 'foo', id: 1 }];
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<_Lookup <_Lookup
id="search" id="search"
lookup_header="Foo Bar" lookup_header="Foo Bar"
@@ -94,7 +86,6 @@ describe('<Lookup />', () => {
sortedColumnKey="name" sortedColumnKey="name"
handleHttpError={() => {}} handleHttpError={() => {}}
/> />
</I18nProvider>
); );
setImmediate(() => { setImmediate(() => {
const searchItem = wrapper.find('button[aria-label="Search"]'); const searchItem = wrapper.find('button[aria-label="Search"]');
@@ -108,8 +99,7 @@ describe('<Lookup />', () => {
test('calls "toggleSelected" when remove icon is clicked', () => { test('calls "toggleSelected" when remove icon is clicked', () => {
const spy = jest.spyOn(_Lookup.prototype, 'toggleSelected'); const spy = jest.spyOn(_Lookup.prototype, 'toggleSelected');
mockData = [{ name: 'foo', id: 1 }, { name: 'bar', id: 2 }]; mockData = [{ name: 'foo', id: 1 }, { name: 'bar', id: 2 }];
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<_Lookup <_Lookup
id="search" id="search"
lookup_header="Foo Bar" lookup_header="Foo Bar"
@@ -121,7 +111,6 @@ describe('<Lookup />', () => {
sortedColumnKey="name" sortedColumnKey="name"
handleHttpError={() => {}} handleHttpError={() => {}}
/> />
</I18nProvider>
); );
const removeIcon = wrapper.find('button[aria-label="close"]').first(); const removeIcon = wrapper.find('button[aria-label="close"]').first();
removeIcon.simulate('click'); removeIcon.simulate('click');
@@ -130,8 +119,7 @@ describe('<Lookup />', () => {
test('renders chips from prop value', () => { test('renders chips from prop value', () => {
mockData = [{ name: 'foo', id: 0 }, { name: 'bar', id: 1 }]; mockData = [{ name: 'foo', id: 0 }, { name: 'bar', id: 1 }];
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<Lookup <Lookup
lookup_header="Foo Bar" lookup_header="Foo Bar"
onLookupSave={() => { }} onLookupSave={() => { }}
@@ -140,9 +128,7 @@ describe('<Lookup />', () => {
getItems={() => { }} getItems={() => { }}
columns={mockColumns} columns={mockColumns}
sortedColumnKey="name" sortedColumnKey="name"
handleHttpError={() => {}}
/> />
</I18nProvider>
).find('Lookup'); ).find('Lookup');
const chip = wrapper.find('li.pf-c-chip'); const chip = wrapper.find('li.pf-c-chip');
expect(chip).toHaveLength(2); expect(chip).toHaveLength(2);
@@ -150,8 +136,7 @@ describe('<Lookup />', () => {
test('toggleSelected successfully adds/removes row from lookupSelectedItems state', () => { test('toggleSelected successfully adds/removes row from lookupSelectedItems state', () => {
mockData = []; mockData = [];
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<Lookup <Lookup
lookup_header="Foo Bar" lookup_header="Foo Bar"
onLookupSave={() => { }} onLookupSave={() => { }}
@@ -159,9 +144,7 @@ describe('<Lookup />', () => {
getItems={() => { }} getItems={() => { }}
columns={mockColumns} columns={mockColumns}
sortedColumnKey="name" sortedColumnKey="name"
handleHttpError={() => {}}
/> />
</I18nProvider>
).find('Lookup'); ).find('Lookup');
wrapper.instance().toggleSelected({ wrapper.instance().toggleSelected({
id: 1, id: 1,
@@ -181,17 +164,14 @@ describe('<Lookup />', () => {
test('saveModal calls callback with selected items', () => { test('saveModal calls callback with selected items', () => {
mockData = []; mockData = [];
const onLookupSaveFn = jest.fn(); const onLookupSaveFn = jest.fn();
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<Lookup <Lookup
lookup_header="Foo Bar" lookup_header="Foo Bar"
name="fooBar" name="fooBar"
value={mockData} value={mockData}
onLookupSave={onLookupSaveFn} onLookupSave={onLookupSaveFn}
getItems={() => { }} getItems={() => { }}
handleHttpError={() => {}}
/> />
</I18nProvider>
).find('Lookup'); ).find('Lookup');
wrapper.instance().toggleSelected({ wrapper.instance().toggleSelected({
id: 1, id: 1,
@@ -210,8 +190,7 @@ describe('<Lookup />', () => {
test('onSort sets state and calls getData ', () => { test('onSort sets state and calls getData ', () => {
const spy = jest.spyOn(_Lookup.prototype, 'getData'); const spy = jest.spyOn(_Lookup.prototype, 'getData');
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<_Lookup <_Lookup
lookup_header="Foo Bar" lookup_header="Foo Bar"
onLookupSave={() => { }} onLookupSave={() => { }}
@@ -222,7 +201,6 @@ describe('<Lookup />', () => {
getItems={() => { }} getItems={() => { }}
handleHttpError={() => {}} handleHttpError={() => {}}
/> />
</I18nProvider>
).find('Lookup'); ).find('Lookup');
wrapper.instance().onSort('id', 'descending'); wrapper.instance().onSort('id', 'descending');
expect(wrapper.state('sortedColumnKey')).toEqual('id'); expect(wrapper.state('sortedColumnKey')).toEqual('id');
@@ -232,8 +210,7 @@ describe('<Lookup />', () => {
test('onSearch calls getData (through calling onSort)', () => { test('onSearch calls getData (through calling onSort)', () => {
const spy = jest.spyOn(_Lookup.prototype, 'getData'); const spy = jest.spyOn(_Lookup.prototype, 'getData');
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<_Lookup <_Lookup
lookup_header="Foo Bar" lookup_header="Foo Bar"
onLookupSave={() => { }} onLookupSave={() => { }}
@@ -244,7 +221,6 @@ describe('<Lookup />', () => {
getItems={() => { }} getItems={() => { }}
handleHttpError={() => {}} handleHttpError={() => {}}
/> />
</I18nProvider>
).find('Lookup'); ).find('Lookup');
wrapper.instance().onSearch(); wrapper.instance().onSearch();
expect(spy).toHaveBeenCalled(); expect(spy).toHaveBeenCalled();
@@ -252,8 +228,7 @@ describe('<Lookup />', () => {
test('onSetPage sets state and calls getData ', () => { test('onSetPage sets state and calls getData ', () => {
const spy = jest.spyOn(_Lookup.prototype, 'getData'); const spy = jest.spyOn(_Lookup.prototype, 'getData');
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<_Lookup <_Lookup
lookup_header="Foo Bar" lookup_header="Foo Bar"
onLookupSave={() => { }} onLookupSave={() => { }}
@@ -264,7 +239,6 @@ describe('<Lookup />', () => {
getItems={() => { }} getItems={() => { }}
handleHttpError={() => {}} handleHttpError={() => {}}
/> />
</I18nProvider>
).find('Lookup'); ).find('Lookup');
wrapper.instance().onSetPage(2, 10); wrapper.instance().onSetPage(2, 10);
expect(wrapper.state('page')).toEqual(2); expect(wrapper.state('page')).toEqual(2);

2
__tests__/components/NavExpandableGroup.test.jsx
View File

@@ -39,7 +39,7 @@ describe('NavExpandableGroup', () => {
]; ];
params.forEach(([location, path, expected]) => { 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( const component = mount(
<MemoryRouter initialEntries={[location]}> <MemoryRouter initialEntries={[location]}>
<Nav aria-label="Test Navigation"> <Nav aria-label="Test Navigation">

34
__tests__/components/NotificationListItem.test.jsx
View File

@@ -1,7 +1,5 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mountWithContexts } from '../enzymeHelpers';
import { MemoryRouter } from 'react-router-dom';
import { I18nProvider } from '@lingui/react';
import NotificationListItem from '../../src/components/NotificationsList/NotificationListItem'; import NotificationListItem from '../../src/components/NotificationsList/NotificationListItem';
describe('<NotificationListItem />', () => { describe('<NotificationListItem />', () => {
@@ -16,25 +14,19 @@ describe('<NotificationListItem />', () => {
}); });
test('initially renders succesfully', () => { test('initially renders succesfully', () => {
wrapper = mount( wrapper = mountWithContexts(
<I18nProvider>
<MemoryRouter>
<NotificationListItem <NotificationListItem
itemId={9000} itemId={9000}
toggleNotification={toggleNotification} toggleNotification={toggleNotification}
detailUrl="/foo" detailUrl="/foo"
notificationType="slack" notificationType="slack"
/> />
</MemoryRouter>
</I18nProvider>
); );
expect(wrapper.length).toBe(1); expect(wrapper.length).toBe(1);
}); });
test('handles success click when toggle is on', () => { test('handles success click when toggle is on', () => {
wrapper = mount( wrapper = mountWithContexts(
<I18nProvider>
<MemoryRouter>
<NotificationListItem <NotificationListItem
itemId={9000} itemId={9000}
successTurnedOn successTurnedOn
@@ -42,17 +34,13 @@ describe('<NotificationListItem />', () => {
detailUrl="/foo" detailUrl="/foo"
notificationType="slack" notificationType="slack"
/> />
</MemoryRouter>
</I18nProvider>
); );
wrapper.find('Switch').first().find('input').simulate('change'); wrapper.find('Switch').first().find('input').simulate('change');
expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'success'); expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'success');
}); });
test('handles success click when toggle is off', () => { test('handles success click when toggle is off', () => {
wrapper = mount( wrapper = mountWithContexts(
<I18nProvider>
<MemoryRouter>
<NotificationListItem <NotificationListItem
itemId={9000} itemId={9000}
successTurnedOn={false} successTurnedOn={false}
@@ -60,17 +48,13 @@ describe('<NotificationListItem />', () => {
detailUrl="/foo" detailUrl="/foo"
notificationType="slack" notificationType="slack"
/> />
</MemoryRouter>
</I18nProvider>
); );
wrapper.find('Switch').first().find('input').simulate('change'); wrapper.find('Switch').first().find('input').simulate('change');
expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'success'); expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'success');
}); });
test('handles error click when toggle is on', () => { test('handles error click when toggle is on', () => {
wrapper = mount( wrapper = mountWithContexts(
<I18nProvider>
<MemoryRouter>
<NotificationListItem <NotificationListItem
itemId={9000} itemId={9000}
errorTurnedOn errorTurnedOn
@@ -78,17 +62,13 @@ describe('<NotificationListItem />', () => {
detailUrl="/foo" detailUrl="/foo"
notificationType="slack" notificationType="slack"
/> />
</MemoryRouter>
</I18nProvider>
); );
wrapper.find('Switch').at(1).find('input').simulate('change'); wrapper.find('Switch').at(1).find('input').simulate('change');
expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'error'); expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'error');
}); });
test('handles error click when toggle is off', () => { test('handles error click when toggle is off', () => {
wrapper = mount( wrapper = mountWithContexts(
<I18nProvider>
<MemoryRouter>
<NotificationListItem <NotificationListItem
itemId={9000} itemId={9000}
errorTurnedOn={false} errorTurnedOn={false}
@@ -96,8 +76,6 @@ describe('<NotificationListItem />', () => {
detailUrl="/foo" detailUrl="/foo"
notificationType="slack" notificationType="slack"
/> />
</MemoryRouter>
</I18nProvider>
); );
wrapper.find('Switch').at(1).find('input').simulate('change'); wrapper.find('Switch').at(1).find('input').simulate('change');
expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'error'); expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'error');

11
__tests__/components/NotifyAndRedirect.test.jsx
View File

@@ -1,24 +1,17 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mountWithContexts } from '../enzymeHelpers';
import { MemoryRouter } from 'react-router-dom';
import { I18nProvider } from '@lingui/react';
import { _NotifyAndRedirect } from '../../src/components/NotifyAndRedirect'; import { _NotifyAndRedirect } from '../../src/components/NotifyAndRedirect';
describe('<NotifyAndRedirect />', () => { describe('<NotifyAndRedirect />', () => {
test('initially renders succesfully and calls setRootDialogMessage', () => { test('initially renders succesfully and calls setRootDialogMessage', () => {
const setRootDialogMessage = jest.fn(); const setRootDialogMessage = jest.fn();
mount( mountWithContexts(
<MemoryRouter>
<I18nProvider>
<_NotifyAndRedirect <_NotifyAndRedirect
to="foo" to="foo"
setRootDialogMessage={setRootDialogMessage} setRootDialogMessage={setRootDialogMessage}
location={{ pathname: 'foo' }} location={{ pathname: 'foo' }}
/> />
</I18nProvider>
</MemoryRouter>
); );
expect(setRootDialogMessage).toHaveBeenCalled(); expect(setRootDialogMessage).toHaveBeenCalled();
}); });

15
__tests__/components/PageHeaderToolbar.test.jsx
View File

@@ -1,8 +1,5 @@
import React from 'react'; import React from 'react';
import { MemoryRouter } from 'react-router-dom'; import { mountWithContexts } from '../enzymeHelpers';
import { mount } from 'enzyme';
import { I18nProvider } from '@lingui/react';
import PageHeaderToolbar from '../../src/components/PageHeaderToolbar'; import PageHeaderToolbar from '../../src/components/PageHeaderToolbar';
describe('PageHeaderToolbar', () => { describe('PageHeaderToolbar', () => {
@@ -12,13 +9,11 @@ describe('PageHeaderToolbar', () => {
const onLogoutClick = jest.fn(); const onLogoutClick = jest.fn();
test('expected content is rendered on initialization', () => { test('expected content is rendered on initialization', () => {
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<PageHeaderToolbar <PageHeaderToolbar
onAboutClick={onAboutClick} onAboutClick={onAboutClick}
onLogoutClick={onLogoutClick} onLogoutClick={onLogoutClick}
/> />
</I18nProvider>
); );
expect(wrapper.find(pageHelpDropdownSelector)).toHaveLength(1); expect(wrapper.find(pageHelpDropdownSelector)).toHaveLength(1);
@@ -26,15 +21,11 @@ describe('PageHeaderToolbar', () => {
}); });
test('dropdowns have expected items and callbacks', () => { test('dropdowns have expected items and callbacks', () => {
const wrapper = mount( const wrapper = mountWithContexts(
<MemoryRouter>
<I18nProvider>
<PageHeaderToolbar <PageHeaderToolbar
onAboutClick={onAboutClick} onAboutClick={onAboutClick}
onLogoutClick={onLogoutClick} onLogoutClick={onLogoutClick}
/> />
</I18nProvider>
</MemoryRouter>
); );
expect(wrapper.find('DropdownItem')).toHaveLength(0); expect(wrapper.find('DropdownItem')).toHaveLength(0);
wrapper.find(pageHelpDropdownSelector).simulate('click'); wrapper.find(pageHelpDropdownSelector).simulate('click');

16
__tests__/components/Search.test.jsx
View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mountWithContexts } from '../enzymeHelpers';
import { I18nProvider } from '@lingui/react';
import Search from '../../src/components/Search'; import Search from '../../src/components/Search';
describe('<Search />', () => { describe('<Search />', () => {
@@ -8,7 +7,6 @@ describe('<Search />', () => {
afterEach(() => { afterEach(() => {
if (search) { if (search) {
search.unmount();
search = null; search = null;
} }
}); });
@@ -21,14 +19,12 @@ describe('<Search />', () => {
const onSearch = jest.fn(); const onSearch = jest.fn();
search = mount( search = mountWithContexts(
<I18nProvider>
<Search <Search
sortedColumnKey="name" sortedColumnKey="name"
columns={columns} columns={columns}
onSearch={onSearch} onSearch={onSearch}
/> />
</I18nProvider>
); );
search.find(searchTextInput).instance().value = 'test-321'; search.find(searchTextInput).instance().value = 'test-321';
@@ -42,14 +38,12 @@ describe('<Search />', () => {
test('handleDropdownToggle properly updates state', async () => { test('handleDropdownToggle properly updates state', async () => {
const columns = [{ name: 'Name', key: 'name', isSortable: true }]; const columns = [{ name: 'Name', key: 'name', isSortable: true }];
const onSearch = jest.fn(); const onSearch = jest.fn();
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<Search <Search
sortedColumnKey="name" sortedColumnKey="name"
columns={columns} columns={columns}
onSearch={onSearch} onSearch={onSearch}
/> />
</I18nProvider>
).find('Search'); ).find('Search');
expect(wrapper.state('isSearchDropdownOpen')).toEqual(false); expect(wrapper.state('isSearchDropdownOpen')).toEqual(false);
wrapper.instance().handleDropdownToggle(true); wrapper.instance().handleDropdownToggle(true);
@@ -62,14 +56,12 @@ describe('<Search />', () => {
{ name: 'Description', key: 'description', isSortable: true } { name: 'Description', key: 'description', isSortable: true }
]; ];
const onSearch = jest.fn(); const onSearch = jest.fn();
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<Search <Search
sortedColumnKey="name" sortedColumnKey="name"
columns={columns} columns={columns}
onSearch={onSearch} onSearch={onSearch}
/> />
</I18nProvider>
).find('Search'); ).find('Search');
expect(wrapper.state('searchKey')).toEqual('name'); expect(wrapper.state('searchKey')).toEqual('name');
wrapper.instance().handleDropdownSelect({ target: { innerText: 'Description' } }); wrapper.instance().handleDropdownSelect({ target: { innerText: 'Description' } });

40
__tests__/components/Sort.test.jsx
View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mountWithContexts } from '../enzymeHelpers';
import { I18nProvider } from '@lingui/react';
import Sort from '../../src/components/Sort'; import Sort from '../../src/components/Sort';
describe('<Sort />', () => { describe('<Sort />', () => {
@@ -8,7 +7,6 @@ describe('<Sort />', () => {
afterEach(() => { afterEach(() => {
if (sort) { if (sort) {
sort.unmount();
sort = null; sort = null;
} }
}); });
@@ -20,15 +18,13 @@ describe('<Sort />', () => {
const onSort = jest.fn(); const onSort = jest.fn();
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<Sort <Sort
sortedColumnKey="name" sortedColumnKey="name"
sortOrder="ascending" sortOrder="ascending"
columns={columns} columns={columns}
onSort={onSort} onSort={onSort}
/> />
</I18nProvider>
).find('Sort'); ).find('Sort');
wrapper.find(sortBtn).simulate('click'); wrapper.find(sortBtn).simulate('click');
@@ -47,15 +43,13 @@ describe('<Sort />', () => {
const onSort = jest.fn(); const onSort = jest.fn();
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<Sort <Sort
sortedColumnKey="foo" sortedColumnKey="foo"
sortOrder="ascending" sortOrder="ascending"
columns={multipleColumns} columns={multipleColumns}
onSort={onSort} onSort={onSort}
/> />
</I18nProvider>
).find('Sort'); ).find('Sort');
const sortDropdownToggle = wrapper.find('Button'); const sortDropdownToggle = wrapper.find('Button');
expect(sortDropdownToggle.length).toBe(1); expect(sortDropdownToggle.length).toBe(1);
@@ -73,15 +67,13 @@ describe('<Sort />', () => {
const onSort = jest.fn(); const onSort = jest.fn();
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<Sort <Sort
sortedColumnKey="foo" sortedColumnKey="foo"
sortOrder="descending" sortOrder="descending"
columns={multipleColumns} columns={multipleColumns}
onSort={onSort} onSort={onSort}
/> />
</I18nProvider>
).find('Sort'); ).find('Sort');
const sortDropdownToggle = wrapper.find('Button'); const sortDropdownToggle = wrapper.find('Button');
expect(sortDropdownToggle.length).toBe(1); expect(sortDropdownToggle.length).toBe(1);
@@ -99,15 +91,13 @@ describe('<Sort />', () => {
const onSort = jest.fn(); const onSort = jest.fn();
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<Sort <Sort
sortedColumnKey="foo" sortedColumnKey="foo"
sortOrder="ascending" sortOrder="ascending"
columns={multipleColumns} columns={multipleColumns}
onSort={onSort} onSort={onSort}
/> />
</I18nProvider>
).find('Sort'); ).find('Sort');
wrapper.instance().handleDropdownSelect({ target: { innerText: 'Bar' } }); wrapper.instance().handleDropdownSelect({ target: { innerText: 'Bar' } });
@@ -124,15 +114,13 @@ describe('<Sort />', () => {
const onSort = jest.fn(); const onSort = jest.fn();
const wrapper = mount( const wrapper = mountWithContexts(
<I18nProvider>
<Sort <Sort
sortedColumnKey="foo" sortedColumnKey="foo"
sortOrder="ascending" sortOrder="ascending"
columns={multipleColumns} columns={multipleColumns}
onSort={onSort} onSort={onSort}
/> />
</I18nProvider>
).find('Sort'); ).find('Sort');
expect(wrapper.state('isSortDropdownOpen')).toEqual(false); expect(wrapper.state('isSortDropdownOpen')).toEqual(false);
wrapper.instance().handleDropdownToggle(true); wrapper.instance().handleDropdownToggle(true);
@@ -149,57 +137,49 @@ describe('<Sort />', () => {
const alphaColumns = [{ name: 'Name', key: 'name', isSortable: true, isNumeric: false }]; const alphaColumns = [{ name: 'Name', key: 'name', isSortable: true, isNumeric: false }];
const onSort = jest.fn(); const onSort = jest.fn();
sort = mount( sort = mountWithContexts(
<I18nProvider>
<Sort <Sort
sortedColumnKey="id" sortedColumnKey="id"
sortOrder="descending" sortOrder="descending"
columns={numericColumns} columns={numericColumns}
onSort={onSort} onSort={onSort}
/> />
</I18nProvider>
); );
const downNumericIcon = sort.find(downNumericIconSelector); const downNumericIcon = sort.find(downNumericIconSelector);
expect(downNumericIcon.length).toBe(1); expect(downNumericIcon.length).toBe(1);
sort = mount( sort = mountWithContexts(
<I18nProvider>
<Sort <Sort
sortedColumnKey="id" sortedColumnKey="id"
sortOrder="ascending" sortOrder="ascending"
columns={numericColumns} columns={numericColumns}
onSort={onSort} onSort={onSort}
/> />
</I18nProvider>
); );
const upNumericIcon = sort.find(upNumericIconSelector); const upNumericIcon = sort.find(upNumericIconSelector);
expect(upNumericIcon.length).toBe(1); expect(upNumericIcon.length).toBe(1);
sort = mount( sort = mountWithContexts(
<I18nProvider>
<Sort <Sort
sortedColumnKey="name" sortedColumnKey="name"
sortOrder="descending" sortOrder="descending"
columns={alphaColumns} columns={alphaColumns}
onSort={onSort} onSort={onSort}
/> />
</I18nProvider>
); );
const downAlphaIcon = sort.find(downAlphaIconSelector); const downAlphaIcon = sort.find(downAlphaIconSelector);
expect(downAlphaIcon.length).toBe(1); expect(downAlphaIcon.length).toBe(1);
sort = mount( sort = mountWithContexts(
<I18nProvider>
<Sort <Sort
sortedColumnKey="name" sortedColumnKey="name"
sortOrder="ascending" sortOrder="ascending"
columns={alphaColumns} columns={alphaColumns}
onSort={onSort} onSort={onSort}
/> />
</I18nProvider>
); );
const upAlphaIcon = sort.find(upAlphaIconSelector); const upAlphaIcon = sort.find(upAlphaIconSelector);

43
__tests__/components/TowerLogo.test.jsx
View File

@@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { MemoryRouter } from 'react-router-dom'; import { createMemoryHistory } from 'history';
import { mount } from 'enzyme'; import { mountWithContexts } from '../enzymeHelpers';
import { I18nProvider } from '@lingui/react';
import TowerLogo from '../../src/components/TowerLogo'; import TowerLogo from '../../src/components/TowerLogo';
let logoWrapper; let logoWrapper;
@@ -15,12 +14,8 @@ const findChildren = () => {
describe('<TowerLogo />', () => { describe('<TowerLogo />', () => {
test('initially renders without crashing', () => { test('initially renders without crashing', () => {
logoWrapper = mount( logoWrapper = mountWithContexts(
<MemoryRouter>
<I18nProvider>
<TowerLogo /> <TowerLogo />
</I18nProvider>
</MemoryRouter>
); );
findChildren(); findChildren();
expect(logoWrapper.length).toBe(1); expect(logoWrapper.length).toBe(1);
@@ -29,12 +24,12 @@ describe('<TowerLogo />', () => {
}); });
test('adds navigation to route history on click', () => { test('adds navigation to route history on click', () => {
logoWrapper = mount( const history = createMemoryHistory({
<MemoryRouter> initialEntries: ['/organizations/1/teams'],
<I18nProvider> });
<TowerLogo linkTo="/" />
</I18nProvider> logoWrapper = mountWithContexts(
</MemoryRouter> <TowerLogo linkTo="/" />, { context: { router: { history } } }
); );
findChildren(); findChildren();
expect(towerLogoElem.props().history.length).toBe(1); expect(towerLogoElem.props().history.length).toBe(1);
@@ -42,27 +37,9 @@ describe('<TowerLogo />', () => {
expect(towerLogoElem.props().history.length).toBe(2); expect(towerLogoElem.props().history.length).toBe(2);
}); });
test('linkTo prop is optional', () => {
logoWrapper = mount(
<MemoryRouter>
<I18nProvider>
<TowerLogo />
</I18nProvider>
</MemoryRouter>
);
findChildren();
expect(towerLogoElem.props().history.length).toBe(1);
logoWrapper.simulate('click');
expect(towerLogoElem.props().history.length).toBe(1);
});
test('handles mouse over and out state.hover changes', () => { test('handles mouse over and out state.hover changes', () => {
logoWrapper = mount( logoWrapper = mountWithContexts(
<MemoryRouter>
<I18nProvider>
<TowerLogo /> <TowerLogo />
</I18nProvider>
</MemoryRouter>
); );
findChildren(); findChildren();
findChildren(); findChildren();