External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-24 14:36:00 -03: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

15
__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');

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

@@ -1,37 +1,32 @@
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" onChange={() => { }}
onChange={() => { }} 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" onChange={() => { }}
onChange={() => { }} 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,17 +34,15 @@ 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" onChange={() => { }}
onChange={() => { }} label={label}
label={label} data={mockData}
data={mockData} defaultSelected={mockData[1]}
defaultSelected={mockData[1]} />
/>
</I18nProvider>
); );
expect(wrapper.find('FormSelect')).toHaveLength(1); expect(wrapper.find('FormSelect')).toHaveLength(1);
}); });

193
__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,20 +24,18 @@ 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 sortedColumnKey="name"
sortedColumnKey="name" sortOrder="ascending"
sortOrder="ascending" columns={columns}
columns={columns} onSearch={onSearch}
onSearch={onSearch} onSort={onSort}
onSort={onSort} onSelectAll={onSelectAll}
onSelectAll={onSelectAll} showSelectAll
showSelectAll />
/>
</I18nProvider>
); );
toolbar.find(sort).simulate('click'); toolbar.find(sort).simulate('click');
@@ -76,18 +73,16 @@ 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" sortOrder="ascending"
sortOrder="ascending" columns={multipleColumns}
columns={multipleColumns} onSearch={onSearch}
onSearch={onSearch} 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,18 +95,16 @@ 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" sortOrder="descending"
sortOrder="descending" columns={multipleColumns}
columns={multipleColumns} onSearch={onSearch}
onSearch={onSearch} onSort={onSort}
onSort={onSort} onSelectAll={onSelectAll}
onSelectAll={onSelectAll} />
/>
</I18nProvider>
); );
toolbar.update(); toolbar.update();
@@ -152,70 +145,62 @@ 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" sortOrder="descending"
sortOrder="descending" columns={numericColumns}
columns={numericColumns} onSearch={onSearch}
onSearch={onSearch} onSort={onSort}
onSort={onSort} 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" sortOrder="ascending"
sortOrder="ascending" columns={numericColumns}
columns={numericColumns} onSearch={onSearch}
onSearch={onSearch} 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" sortOrder="descending"
sortOrder="descending" columns={alphaColumns}
columns={alphaColumns} onSearch={onSearch}
onSearch={onSearch} 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" sortOrder="ascending"
sortOrder="ascending" columns={alphaColumns}
columns={alphaColumns} onSearch={onSearch}
onSearch={onSearch} onSort={onSort}
onSort={onSort} onSelectAll={onSelectAll}
onSelectAll={onSelectAll} />
/>
</I18nProvider>
); );
const upAlphaIcon = toolbar.find(upAlphaIconSelector); const upAlphaIcon = toolbar.find(upAlphaIconSelector);
@@ -232,22 +217,20 @@ 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]} sortedColumnKey="name"
sortedColumnKey="name" sortOrder="ascending"
sortOrder="ascending" columns={columns}
columns={columns} onSearch={onSearch}
onSearch={onSearch} onSort={onSort}
onSort={onSort} onSelectAll={onSelectAll}
onSelectAll={onSelectAll} onOpenDeleteModal={onOpenDeleteModal}
onOpenDeleteModal={onOpenDeleteModal} showDelete={showDelete}
showDelete={showDelete} disableTrashCanIcon={disableTrashCanIcon}
disableTrashCanIcon={disableTrashCanIcon} />
/>
</I18nProvider>
); );
toolbar.find(openDeleteModalButton).simulate('click'); toolbar.find(openDeleteModalButton).simulate('click');

17
__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();

264
__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,36 +9,32 @@ 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" value={mockData}
value={mockData} onLookupSave={() => { }}
onLookupSave={() => { }} getItems={() => { }}
getItems={() => { }} columns={mockColumns}
columns={mockColumns} 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" value={mockData}
value={mockData} onLookupSave={() => { }}
onLookupSave={() => { }} getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })}
getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })} columns={mockColumns}
columns={mockColumns} sortedColumnKey="name"
sortedColumnKey="name" handleHttpError={() => {}}
handleHttpError={() => {}} />
/>
</I18nProvider>
).find('Lookup'); ).find('Lookup');
setImmediate(() => { setImmediate(() => {
@@ -51,20 +46,18 @@ 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" name="fooBar"
name="fooBar" value={mockSelected}
value={mockSelected} onLookupSave={() => { }}
onLookupSave={() => { }} getItems={() => { }}
getItems={() => { }} columns={mockColumns}
columns={mockColumns} 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,20 +74,18 @@ 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" name="fooBar"
name="fooBar" value={mockSelected}
value={mockSelected} onLookupSave={() => { }}
onLookupSave={() => { }} getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })}
getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })} columns={mockColumns}
columns={mockColumns} 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,20 +99,18 @@ 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" name="fooBar"
name="fooBar" value={mockData}
value={mockData} onLookupSave={() => { }}
onLookupSave={() => { }} getItems={() => { }}
getItems={() => { }} columns={mockColumns}
columns={mockColumns} 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,19 +119,16 @@ 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={() => { }} value={mockData}
value={mockData} selected={[]}
selected={[]} 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,18 +136,15 @@ 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={() => { }} value={mockData}
value={mockData} 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,19 +190,17 @@ 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={() => { }} value={mockData}
value={mockData} selected={[]}
selected={[]} columns={mockColumns}
columns={mockColumns} sortedColumnKey="name"
sortedColumnKey="name" 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,19 +210,17 @@ 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={() => { }} value={mockData}
value={mockData} selected={[]}
selected={[]} columns={mockColumns}
columns={mockColumns} sortedColumnKey="name"
sortedColumnKey="name" getItems={() => { }}
getItems={() => { }} handleHttpError={() => {}}
handleHttpError={() => {}} />
/>
</I18nProvider>
).find('Lookup'); ).find('Lookup');
wrapper.instance().onSearch(); wrapper.instance().onSearch();
expect(spy).toHaveBeenCalled(); expect(spy).toHaveBeenCalled();
@@ -252,19 +228,17 @@ 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={() => { }} value={mockData}
value={mockData} selected={[]}
selected={[]} columns={mockColumns}
columns={mockColumns} sortedColumnKey="name"
sortedColumnKey="name" 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">

102
__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,88 +14,68 @@ describe('<NotificationListItem />', () => {
}); });
test('initially renders succesfully', () => { test('initially renders succesfully', () => {
wrapper = mount( wrapper = mountWithContexts(
<I18nProvider> <NotificationListItem
<MemoryRouter> itemId={9000}
<NotificationListItem toggleNotification={toggleNotification}
itemId={9000} detailUrl="/foo"
toggleNotification={toggleNotification} notificationType="slack"
detailUrl="/foo" />
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> <NotificationListItem
<MemoryRouter> itemId={9000}
<NotificationListItem successTurnedOn
itemId={9000} toggleNotification={toggleNotification}
successTurnedOn detailUrl="/foo"
toggleNotification={toggleNotification} notificationType="slack"
detailUrl="/foo" />
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> <NotificationListItem
<MemoryRouter> itemId={9000}
<NotificationListItem successTurnedOn={false}
itemId={9000} toggleNotification={toggleNotification}
successTurnedOn={false} detailUrl="/foo"
toggleNotification={toggleNotification} notificationType="slack"
detailUrl="/foo" />
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> <NotificationListItem
<MemoryRouter> itemId={9000}
<NotificationListItem errorTurnedOn
itemId={9000} toggleNotification={toggleNotification}
errorTurnedOn detailUrl="/foo"
toggleNotification={toggleNotification} notificationType="slack"
detailUrl="/foo" />
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> <NotificationListItem
<MemoryRouter> itemId={9000}
<NotificationListItem errorTurnedOn={false}
itemId={9000} toggleNotification={toggleNotification}
errorTurnedOn={false} detailUrl="/foo"
toggleNotification={toggleNotification} notificationType="slack"
detailUrl="/foo" />
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');

21
__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> <_NotifyAndRedirect
<I18nProvider> to="foo"
<_NotifyAndRedirect setRootDialogMessage={setRootDialogMessage}
to="foo" location={{ pathname: 'foo' }}
setRootDialogMessage={setRootDialogMessage} />
location={{ pathname: 'foo' }}
/>
</I18nProvider>
</MemoryRouter>
); );
expect(setRootDialogMessage).toHaveBeenCalled(); expect(setRootDialogMessage).toHaveBeenCalled();
}); });

31
__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> <PageHeaderToolbar
<I18nProvider> onAboutClick={onAboutClick}
<PageHeaderToolbar onLogoutClick={onLogoutClick}
onAboutClick={onAboutClick} />
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');

46
__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' } });

148
__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);

47
__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> <TowerLogo />
<I18nProvider>
<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> <TowerLogo />
<I18nProvider>
<TowerLogo />
</I18nProvider>
</MemoryRouter>
); );
findChildren(); findChildren();
findChildren(); findChildren();