mirror of
https://github.com/ansible/awx.git
synced 2026-03-07 19:51:08 -03:30
Merge pull request #4469 from jakemcdermott/lookup-tests
refactor lookup tests Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]
This commit is contained in:
softwarefactory-project-zuul[bot]
GitHub
@@ -1,285 +1,362 @@
|
|||||||
/* eslint-disable react/jsx-pascal-case */
|
/* eslint-disable react/jsx-pascal-case */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createMemoryHistory } from 'history';
|
import { createMemoryHistory } from 'history';
|
||||||
import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
|
import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
|
||||||
import Lookup, { _Lookup } from './Lookup';
|
import Lookup, { _Lookup } from './Lookup';
|
||||||
|
|
||||||
let mockData = [{ name: 'foo', id: 1, isChecked: false }];
|
let mockData = [{ name: 'foo', id: 1, isChecked: false }];
|
||||||
const mockColumns = [{ name: 'Name', key: 'name', isSortable: true }];
|
const mockColumns = [{ name: 'Name', key: 'name', isSortable: true }];
|
||||||
describe('<Lookup />', () => {
|
|
||||||
test('initially renders succesfully', () => {
|
/**
|
||||||
mountWithContexts(
|
* Check that an element is present on the document body
|
||||||
<Lookup
|
* @param {selector} query selector
|
||||||
lookupHeader="Foo Bar"
|
*/
|
||||||
name="fooBar"
|
function checkRootElementPresent(selector) {
|
||||||
value={mockData}
|
const queryResult = global.document.querySelector(selector);
|
||||||
onLookupSave={() => {}}
|
expect(queryResult).not.toEqual(null);
|
||||||
getItems={() => {}}
|
}
|
||||||
columns={mockColumns}
|
|
||||||
sortedColumnKey="name"
|
/**
|
||||||
multiple
|
* Check that an element isn't present on the document body
|
||||||
/>
|
* @param {selector} query selector
|
||||||
);
|
*/
|
||||||
|
function checkRootElementNotPresent(selector) {
|
||||||
|
const queryResult = global.document.querySelector(selector);
|
||||||
|
expect(queryResult).toEqual(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check lookup input group tags for expected values
|
||||||
|
* @param {wrapper} enzyme wrapper instance
|
||||||
|
* @param {expected} array of expected tag values
|
||||||
|
*/
|
||||||
|
async function checkInputTagValues(wrapper, expected) {
|
||||||
|
checkRootElementNotPresent('body div[role="dialog"]');
|
||||||
|
// check input group chip values
|
||||||
|
const chips = await waitForElement(
|
||||||
|
wrapper,
|
||||||
|
'Lookup InputGroup Chip span',
|
||||||
|
el => el.length === expected.length
|
||||||
|
);
|
||||||
|
expect(chips).toHaveLength(expected.length);
|
||||||
|
chips.forEach((el, index) => {
|
||||||
|
expect(el.text()).toEqual(expected[index]);
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
test('API response is formatted properly', done => {
|
/**
|
||||||
const wrapper = mountWithContexts(
|
* Check lookup modal list for expected values
|
||||||
<Lookup
|
* @param {wrapper} enzyme wrapper instance
|
||||||
lookupHeader="Foo Bar"
|
* @param {expected} array of [selected, text] pairs describing
|
||||||
name="fooBar"
|
* the expected visible state of the modal data list
|
||||||
value={mockData}
|
*/
|
||||||
onLookupSave={() => {}}
|
async function checkModalListValues(wrapper, expected) {
|
||||||
getItems={() => ({
|
// fail if modal isn't actually visible
|
||||||
data: { results: [{ name: 'test instance', id: 1 }] },
|
checkRootElementPresent('body div[role="dialog"]');
|
||||||
})}
|
// check list item values
|
||||||
columns={mockColumns}
|
const rows = await waitForElement(
|
||||||
sortedColumnKey="name"
|
wrapper,
|
||||||
multiple
|
'DataListItemRow',
|
||||||
/>
|
el => el.length === expected.length
|
||||||
).find('Lookup');
|
);
|
||||||
|
expect(rows).toHaveLength(expected.length);
|
||||||
setImmediate(() => {
|
rows.forEach((el, index) => {
|
||||||
expect(wrapper.state().results).toEqual([
|
const [expectedChecked, expectedText] = expected[index];
|
||||||
{ id: 1, name: 'test instance' },
|
expect(expectedText).toEqual(el.text());
|
||||||
]);
|
expect(expectedChecked).toEqual(el.find('input').props().checked);
|
||||||
done();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
test('Opens modal when search icon is clicked', () => {
|
/**
|
||||||
const spy = jest.spyOn(_Lookup.prototype, 'handleModalToggle');
|
* Check lookup modal selection tags for expected values
|
||||||
const mockSelected = [{ name: 'foo', id: 1 }];
|
* @param {wrapper} enzyme wrapper instance
|
||||||
const wrapper = mountWithContexts(
|
* @param {expected} array of expected tag values
|
||||||
|
*/
|
||||||
|
async function checkModalTagValues(wrapper, expected) {
|
||||||
|
// fail if modal isn't actually visible
|
||||||
|
checkRootElementPresent('body div[role="dialog"]');
|
||||||
|
// check modal chip values
|
||||||
|
const chips = await waitForElement(
|
||||||
|
wrapper,
|
||||||
|
'Modal Chip span',
|
||||||
|
el => el.length === expected.length
|
||||||
|
);
|
||||||
|
expect(chips).toHaveLength(expected.length);
|
||||||
|
chips.forEach((el, index) => {
|
||||||
|
expect(el.text()).toEqual(expected[index]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('<Lookup multiple/>', () => {
|
||||||
|
let wrapper;
|
||||||
|
let onChange;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
const mockSelected = [{ name: 'foo', id: 1, url: '/api/v2/item/1' }];
|
||||||
|
onChange = jest.fn();
|
||||||
|
document.body.innerHTML = '';
|
||||||
|
wrapper = mountWithContexts(
|
||||||
<Lookup
|
<Lookup
|
||||||
id="search"
|
multiple
|
||||||
lookupHeader="Foo Bar"
|
lookupHeader="Foo Bar"
|
||||||
name="fooBar"
|
name="foobar"
|
||||||
value={mockSelected}
|
value={mockSelected}
|
||||||
onLookupSave={() => {}}
|
onLookupSave={onChange}
|
||||||
getItems={() => {}}
|
|
||||||
columns={mockColumns}
|
|
||||||
sortedColumnKey="name"
|
|
||||||
multiple
|
|
||||||
/>
|
|
||||||
).find('Lookup');
|
|
||||||
expect(spy).not.toHaveBeenCalled();
|
|
||||||
expect(wrapper.state('lookupSelectedItems')).toEqual(mockSelected);
|
|
||||||
const searchItem = wrapper.find('button[aria-label="Search"]');
|
|
||||||
searchItem.first().simulate('click');
|
|
||||||
expect(spy).toHaveBeenCalled();
|
|
||||||
expect(wrapper.state('lookupSelectedItems')).toEqual([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'foo',
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
expect(wrapper.state('isModalOpen')).toEqual(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('calls "toggleSelected" when a user changes a checkbox', done => {
|
|
||||||
const spy = jest.spyOn(_Lookup.prototype, 'toggleSelected');
|
|
||||||
const mockSelected = [{ name: 'foo', id: 1 }];
|
|
||||||
const data = {
|
|
||||||
results: [{ name: 'test instance', id: 1, url: '/foo' }],
|
|
||||||
count: 1,
|
|
||||||
};
|
|
||||||
const wrapper = mountWithContexts(
|
|
||||||
<Lookup
|
|
||||||
id="search"
|
|
||||||
lookupHeader="Foo Bar"
|
|
||||||
name="fooBar"
|
|
||||||
value={mockSelected}
|
|
||||||
onLookupSave={() => {}}
|
|
||||||
getItems={() => ({ data })}
|
|
||||||
columns={mockColumns}
|
|
||||||
sortedColumnKey="name"
|
|
||||||
multiple
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
setImmediate(() => {
|
|
||||||
const searchItem = wrapper.find('button[aria-label="Search"]');
|
|
||||||
searchItem.first().simulate('click');
|
|
||||||
wrapper.find('input[type="checkbox"]').simulate('change');
|
|
||||||
expect(spy).toHaveBeenCalled();
|
|
||||||
done();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
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 data = {
|
|
||||||
results: [{ name: 'test instance', id: 1, url: '/foo' }],
|
|
||||||
count: 1,
|
|
||||||
};
|
|
||||||
const wrapper = mountWithContexts(
|
|
||||||
<Lookup
|
|
||||||
id="search"
|
|
||||||
lookupHeader="Foo Bar"
|
|
||||||
name="fooBar"
|
|
||||||
value={mockData}
|
|
||||||
onLookupSave={() => {}}
|
|
||||||
getItems={() => ({ data })}
|
|
||||||
columns={mockColumns}
|
|
||||||
sortedColumnKey="name"
|
|
||||||
multiple
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
const removeIcon = wrapper.find('button[aria-label="close"]').first();
|
|
||||||
removeIcon.simulate('click');
|
|
||||||
expect(spy).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('renders chips from prop value', () => {
|
|
||||||
mockData = [{ name: 'foo', id: 0 }, { name: 'bar', id: 1 }];
|
|
||||||
const wrapper = mountWithContexts(
|
|
||||||
<Lookup
|
|
||||||
lookupHeader="Foo Bar"
|
|
||||||
onLookupSave={() => {}}
|
|
||||||
value={mockData}
|
|
||||||
selected={[]}
|
|
||||||
getItems={() => {}}
|
|
||||||
columns={mockColumns}
|
|
||||||
sortedColumnKey="name"
|
|
||||||
multiple
|
|
||||||
/>
|
|
||||||
).find('Lookup');
|
|
||||||
const chip = wrapper.find('.pf-c-chip');
|
|
||||||
expect(chip).toHaveLength(2);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('toggleSelected successfully adds/removes row from lookupSelectedItems state', () => {
|
|
||||||
mockData = [];
|
|
||||||
const wrapper = mountWithContexts(
|
|
||||||
<Lookup
|
|
||||||
lookupHeader="Foo Bar"
|
|
||||||
onLookupSave={() => {}}
|
|
||||||
value={mockData}
|
|
||||||
getItems={() => {}}
|
|
||||||
columns={mockColumns}
|
|
||||||
sortedColumnKey="name"
|
|
||||||
multiple
|
|
||||||
/>
|
|
||||||
).find('Lookup');
|
|
||||||
wrapper.instance().toggleSelected({
|
|
||||||
id: 1,
|
|
||||||
name: 'foo',
|
|
||||||
});
|
|
||||||
expect(wrapper.state('lookupSelectedItems')).toEqual([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'foo',
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
wrapper.instance().toggleSelected({
|
|
||||||
id: 1,
|
|
||||||
name: 'foo',
|
|
||||||
});
|
|
||||||
expect(wrapper.state('lookupSelectedItems')).toEqual([]);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('saveModal calls callback with selected items', () => {
|
|
||||||
mockData = [];
|
|
||||||
const onLookupSaveFn = jest.fn();
|
|
||||||
const wrapper = mountWithContexts(
|
|
||||||
<Lookup
|
|
||||||
lookupHeader="Foo Bar"
|
|
||||||
name="fooBar"
|
|
||||||
value={mockData}
|
|
||||||
onLookupSave={onLookupSaveFn}
|
|
||||||
getItems={() => {}}
|
|
||||||
sortedColumnKey="name"
|
|
||||||
multiple
|
|
||||||
/>
|
|
||||||
).find('Lookup');
|
|
||||||
wrapper.instance().toggleSelected({
|
|
||||||
id: 1,
|
|
||||||
name: 'foo',
|
|
||||||
});
|
|
||||||
expect(wrapper.state('lookupSelectedItems')).toEqual([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'foo',
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
wrapper.instance().saveModal();
|
|
||||||
expect(onLookupSaveFn).toHaveBeenCalledWith(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'foo',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
'fooBar'
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should call callback with selected single item', () => {
|
|
||||||
mockData = { name: 'foo', id: 1, isChecked: false, url: 'https://foo' };
|
|
||||||
const onLookupSaveFn = jest.fn();
|
|
||||||
const wrapper = mountWithContexts(
|
|
||||||
<Lookup
|
|
||||||
lookupHeader="Foo Bar"
|
|
||||||
name="fooBar"
|
|
||||||
value={mockData}
|
|
||||||
onLookupSave={onLookupSaveFn}
|
|
||||||
getItems={() => ({
|
getItems={() => ({
|
||||||
data: {
|
data: {
|
||||||
results: [mockData],
|
count: 2,
|
||||||
count: 1,
|
results: [
|
||||||
|
...mockSelected,
|
||||||
|
{ name: 'bar', id: 2, url: '/api/v2/item/2' },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
})}
|
})}
|
||||||
|
columns={mockColumns}
|
||||||
sortedColumnKey="name"
|
sortedColumnKey="name"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Initially renders succesfully', () => {
|
||||||
|
expect(wrapper.find('Lookup')).toHaveLength(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Expected items are shown', async done => {
|
||||||
|
expect(wrapper.find('Lookup')).toHaveLength(1);
|
||||||
|
await checkInputTagValues(wrapper, ['foo']);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Open and close modal', async done => {
|
||||||
|
checkRootElementNotPresent('body div[role="dialog"]');
|
||||||
|
wrapper.find('button[aria-label="Search"]').simulate('click');
|
||||||
|
checkRootElementPresent('body div[role="dialog"]');
|
||||||
|
// This check couldn't pass unless api response was formatted properly
|
||||||
|
await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
|
||||||
|
wrapper.find('Modal button[aria-label="Close"]').simulate('click');
|
||||||
|
checkRootElementNotPresent('body div[role="dialog"]');
|
||||||
|
wrapper.find('button[aria-label="Search"]').simulate('click');
|
||||||
|
checkRootElementPresent('body div[role="dialog"]');
|
||||||
wrapper
|
wrapper
|
||||||
.find('Lookup')
|
.find('Modal button')
|
||||||
.instance()
|
.findWhere(e => e.text() === 'Cancel')
|
||||||
.toggleSelected({
|
.first()
|
||||||
id: 1,
|
.simulate('click');
|
||||||
name: 'foo',
|
checkRootElementNotPresent('body div[role="dialog"]');
|
||||||
});
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Add item with checkbox then save', async done => {
|
||||||
|
wrapper.find('button[aria-label="Search"]').simulate('click');
|
||||||
|
await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
|
||||||
wrapper
|
wrapper
|
||||||
.find('Lookup')
|
.find('DataListItemRow')
|
||||||
.instance()
|
.findWhere(el => el.text() === 'bar')
|
||||||
.saveModal();
|
.find('input[type="checkbox"]')
|
||||||
expect(onLookupSaveFn).toHaveBeenCalledWith(
|
.simulate('change');
|
||||||
{
|
await checkModalListValues(wrapper, [[true, 'foo'], [true, 'bar']]);
|
||||||
id: 1,
|
wrapper
|
||||||
name: 'foo',
|
.find('Modal button')
|
||||||
},
|
.findWhere(e => e.text() === 'Save')
|
||||||
'fooBar'
|
.first()
|
||||||
|
.simulate('click');
|
||||||
|
expect(onChange).toHaveBeenCalledTimes(1);
|
||||||
|
expect(onChange.mock.calls[0][0].map(({ name }) => name)).toEqual([
|
||||||
|
'foo',
|
||||||
|
'bar',
|
||||||
|
]);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Add item with checkbox then cancel', async done => {
|
||||||
|
wrapper.find('button[aria-label="Search"]').simulate('click');
|
||||||
|
await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
|
||||||
|
wrapper
|
||||||
|
.find('DataListItemRow')
|
||||||
|
.findWhere(el => el.text() === 'bar')
|
||||||
|
.find('input[type="checkbox"]')
|
||||||
|
.simulate('change');
|
||||||
|
await checkModalListValues(wrapper, [[true, 'foo'], [true, 'bar']]);
|
||||||
|
wrapper
|
||||||
|
.find('Modal button')
|
||||||
|
.findWhere(e => e.text() === 'Cancel')
|
||||||
|
.first()
|
||||||
|
.simulate('click');
|
||||||
|
expect(onChange).toHaveBeenCalledTimes(0);
|
||||||
|
await checkInputTagValues(wrapper, ['foo']);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Remove item with checkbox', async done => {
|
||||||
|
wrapper.find('button[aria-label="Search"]').simulate('click');
|
||||||
|
await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
|
||||||
|
await checkModalTagValues(wrapper, ['foo']);
|
||||||
|
wrapper
|
||||||
|
.find('DataListItemRow')
|
||||||
|
.findWhere(el => el.text() === 'foo')
|
||||||
|
.find('input[type="checkbox"]')
|
||||||
|
.simulate('change');
|
||||||
|
await checkModalListValues(wrapper, [[false, 'foo'], [false, 'bar']]);
|
||||||
|
await checkModalTagValues(wrapper, []);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Remove item with selected icon button', async done => {
|
||||||
|
wrapper.find('button[aria-label="Search"]').simulate('click');
|
||||||
|
await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
|
||||||
|
await checkModalTagValues(wrapper, ['foo']);
|
||||||
|
wrapper
|
||||||
|
.find('Modal Chip')
|
||||||
|
.findWhere(el => el.text() === 'foo')
|
||||||
|
.first()
|
||||||
|
.find('button')
|
||||||
|
.simulate('click');
|
||||||
|
await checkModalListValues(wrapper, [[false, 'foo'], [false, 'bar']]);
|
||||||
|
await checkModalTagValues(wrapper, []);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Remove item with input group button', async done => {
|
||||||
|
await checkInputTagValues(wrapper, ['foo']);
|
||||||
|
wrapper
|
||||||
|
.find('Lookup InputGroup Chip')
|
||||||
|
.findWhere(el => el.text() === 'foo')
|
||||||
|
.first()
|
||||||
|
.find('button')
|
||||||
|
.simulate('click');
|
||||||
|
expect(onChange).toHaveBeenCalledTimes(1);
|
||||||
|
expect(onChange).toHaveBeenCalledWith([], 'foobar');
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('<Lookup />', () => {
|
||||||
|
let wrapper;
|
||||||
|
let onChange;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
const mockSelected = { name: 'foo', id: 1, url: '/api/v2/item/1' };
|
||||||
|
onChange = jest.fn();
|
||||||
|
document.body.innerHTML = '';
|
||||||
|
wrapper = mountWithContexts(
|
||||||
|
<Lookup
|
||||||
|
lookupHeader="Foo Bar"
|
||||||
|
name="foobar"
|
||||||
|
value={mockSelected}
|
||||||
|
onLookupSave={onChange}
|
||||||
|
getItems={() => ({
|
||||||
|
data: {
|
||||||
|
count: 2,
|
||||||
|
results: [
|
||||||
|
mockSelected,
|
||||||
|
{ name: 'bar', id: 2, url: '/api/v2/item/2' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
columns={mockColumns}
|
||||||
|
sortedColumnKey="name"
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should re-fetch data when URL params change', async () => {
|
test('Initially renders succesfully', () => {
|
||||||
|
expect(wrapper.find('Lookup')).toHaveLength(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Expected items are shown', async done => {
|
||||||
|
expect(wrapper.find('Lookup')).toHaveLength(1);
|
||||||
|
await checkInputTagValues(wrapper, ['foo']);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Open and close modal', async done => {
|
||||||
|
checkRootElementNotPresent('body div[role="dialog"]');
|
||||||
|
wrapper.find('button[aria-label="Search"]').simulate('click');
|
||||||
|
checkRootElementPresent('body div[role="dialog"]');
|
||||||
|
// This check couldn't pass unless api response was formatted properly
|
||||||
|
await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
|
||||||
|
wrapper.find('Modal button[aria-label="Close"]').simulate('click');
|
||||||
|
checkRootElementNotPresent('body div[role="dialog"]');
|
||||||
|
wrapper.find('button[aria-label="Search"]').simulate('click');
|
||||||
|
checkRootElementPresent('body div[role="dialog"]');
|
||||||
|
wrapper
|
||||||
|
.find('Modal button')
|
||||||
|
.findWhere(e => e.text() === 'Cancel')
|
||||||
|
.first()
|
||||||
|
.simulate('click');
|
||||||
|
checkRootElementNotPresent('body div[role="dialog"]');
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Change selected item with radio control then save', async done => {
|
||||||
|
wrapper.find('button[aria-label="Search"]').simulate('click');
|
||||||
|
await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
|
||||||
|
await checkModalTagValues(wrapper, ['foo']);
|
||||||
|
wrapper
|
||||||
|
.find('DataListItemRow')
|
||||||
|
.findWhere(el => el.text() === 'bar')
|
||||||
|
.find('input[type="radio"]')
|
||||||
|
.simulate('change');
|
||||||
|
await checkModalListValues(wrapper, [[false, 'foo'], [true, 'bar']]);
|
||||||
|
await checkModalTagValues(wrapper, ['bar']);
|
||||||
|
wrapper
|
||||||
|
.find('Modal button')
|
||||||
|
.findWhere(e => e.text() === 'Save')
|
||||||
|
.first()
|
||||||
|
.simulate('click');
|
||||||
|
expect(onChange).toHaveBeenCalledTimes(1);
|
||||||
|
const [[{ name }]] = onChange.mock.calls;
|
||||||
|
expect(name).toEqual('bar');
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Change selected item with checkbox then cancel', async done => {
|
||||||
|
wrapper.find('button[aria-label="Search"]').simulate('click');
|
||||||
|
await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
|
||||||
|
await checkModalTagValues(wrapper, ['foo']);
|
||||||
|
wrapper
|
||||||
|
.find('DataListItemRow')
|
||||||
|
.findWhere(el => el.text() === 'bar')
|
||||||
|
.find('input[type="radio"]')
|
||||||
|
.simulate('change');
|
||||||
|
await checkModalListValues(wrapper, [[false, 'foo'], [true, 'bar']]);
|
||||||
|
await checkModalTagValues(wrapper, ['bar']);
|
||||||
|
wrapper
|
||||||
|
.find('Modal button')
|
||||||
|
.findWhere(e => e.text() === 'Cancel')
|
||||||
|
.first()
|
||||||
|
.simulate('click');
|
||||||
|
expect(onChange).toHaveBeenCalledTimes(0);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should re-fetch data when URL params change', async done => {
|
||||||
mockData = [{ name: 'foo', id: 1, isChecked: false }];
|
mockData = [{ name: 'foo', id: 1, isChecked: false }];
|
||||||
const history = createMemoryHistory({
|
const history = createMemoryHistory({
|
||||||
initialEntries: ['/organizations/add'],
|
initialEntries: ['/organizations/add'],
|
||||||
});
|
});
|
||||||
const getItems = jest.fn();
|
const getItems = jest.fn();
|
||||||
const wrapper = mountWithContexts(
|
const LookupWrapper = mountWithContexts(
|
||||||
<_Lookup
|
<_Lookup
|
||||||
|
multiple
|
||||||
|
name="foo"
|
||||||
lookupHeader="Foo Bar"
|
lookupHeader="Foo Bar"
|
||||||
onLookupSave={() => {}}
|
onLookupSave={() => {}}
|
||||||
value={mockData}
|
value={mockData}
|
||||||
selected={[]}
|
|
||||||
columns={mockColumns}
|
columns={mockColumns}
|
||||||
sortedColumnKey="name"
|
sortedColumnKey="name"
|
||||||
getItems={getItems}
|
getItems={getItems}
|
||||||
multiple
|
|
||||||
handleHttpError={() => {}}
|
|
||||||
location={{ history }}
|
location={{ history }}
|
||||||
i18n={{ _: val => val.toString() }}
|
i18n={{ _: val => val.toString() }}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(getItems).toHaveBeenCalledTimes(1);
|
expect(getItems).toHaveBeenCalledTimes(1);
|
||||||
history.push('organizations/add?page=2');
|
history.push('organizations/add?page=2');
|
||||||
wrapper.setProps({
|
LookupWrapper.setProps({
|
||||||
location: { history },
|
location: { history },
|
||||||
});
|
});
|
||||||
wrapper.update();
|
LookupWrapper.update();
|
||||||
expect(getItems).toHaveBeenCalledTimes(2);
|
expect(getItems).toHaveBeenCalledTimes(2);
|
||||||
|
done();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user