Pulls in latest pf-react. Adds selected list component to org instance groups lookup

This commit is contained in:
mabashian
2019-01-29 13:23:52 -05:00
parent 701eb6afa5
commit 2579e30ca1
11 changed files with 393 additions and 35 deletions

View File

@@ -11,6 +11,7 @@ describe('<Lookup />', () => {
lookup_header="Foo Bar"
lookupChange={() => { }}
data={mockData}
selected={[]}
/>
);
});
@@ -22,6 +23,7 @@ describe('<Lookup />', () => {
lookup_header="Foo Bar"
lookupChange={() => { }}
data={mockData}
selected={[]}
/>
</I18nProvider>
);
@@ -38,6 +40,7 @@ describe('<Lookup />', () => {
lookup_header="Foo Bar"
lookupChange={() => { }}
data={mockData}
selected={[]}
/>
</I18nProvider>
);
@@ -55,6 +58,7 @@ describe('<Lookup />', () => {
lookup_header="Foo Bar"
lookupChange={() => { }}
data={mockData}
selected={[]}
/>
</I18nProvider>
);
@@ -71,6 +75,7 @@ describe('<Lookup />', () => {
lookup_header="Foo Bar"
lookupChange={() => { }}
data={mockData}
selected={[]}
/>
</I18nProvider>
);

View File

@@ -0,0 +1,123 @@
import React from 'react';
import { mount } from 'enzyme';
import SelectedList from '../../src/components/SelectedList';
describe('<SelectedList />', () => {
test('initially renders succesfully', () => {
const mockSelected = [
{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}
];
mount(
<SelectedList
label="Selected"
selected={mockSelected}
showOverflowAfter={5}
onRemove={() => {}}
/>
);
});
test('showOverflow should set showOverflow state to true', () => {
const wrapper = mount(
<SelectedList
label="Selected"
selected={[]}
showOverflowAfter={5}
onRemove={() => {}}
/>
);
expect(wrapper.state('showOverflow')).toBe(false);
wrapper.instance().showOverflow();
expect(wrapper.state('showOverflow')).toBe(true);
});
test('Overflow chip should be shown when more selected.length exceeds showOverflowAfter', () => {
const mockSelected = [
{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}, {
id: 3,
name: 'foobar'
}, {
id: 4,
name: 'baz'
}, {
id: 5,
name: 'foobaz'
}
];
const wrapper = mount(
<SelectedList
label="Selected"
selected={mockSelected}
showOverflowAfter={3}
onRemove={() => {}}
/>
);
expect(wrapper.find('Chip').length).toBe(4);
expect(wrapper.find('[isOverflowChip=true]').length).toBe(1);
});
test('Clicking overflow chip should show all chips', () => {
const mockSelected = [
{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}, {
id: 3,
name: 'foobar'
}, {
id: 4,
name: 'baz'
}, {
id: 5,
name: 'foobaz'
}
];
const wrapper = mount(
<SelectedList
label="Selected"
selected={mockSelected}
showOverflowAfter={3}
onRemove={() => {}}
/>
);
expect(wrapper.find('Chip').length).toBe(4);
expect(wrapper.find('[isOverflowChip=true]').length).toBe(1);
wrapper.find('[isOverflowChip=true] button').simulate('click');
expect(wrapper.find('Chip').length).toBe(5);
expect(wrapper.find('[isOverflowChip=true]').length).toBe(0);
});
test('Clicking remove on chip calls onRemove callback prop with correct params', () => {
const onRemove = jest.fn();
const mockSelected = [
{
id: 1,
name: 'foo'
}
];
const wrapper = mount(
<SelectedList
label="Selected"
selected={mockSelected}
showOverflowAfter={3}
onRemove={onRemove}
/>
);
wrapper.find('.pf-c-chip button').first().simulate('click');
expect(onRemove).toBeCalledWith({
id: 1,
name: 'foo'
});
});
});

View File

@@ -92,4 +92,85 @@ describe('<OrganizationAdd />', () => {
done();
});
});
test('onSelectChange successfully sets custom_virtualenv state', () => {
const wrapper = mount(
<MemoryRouter>
<OrganizationAdd api={{}} />
</MemoryRouter>
).find('OrganizationAdd');
wrapper.instance().onSelectChange('foobar');
expect(wrapper.state('custom_virtualenv')).toBe('foobar');
});
test('onLookupChange successfully adds/removes row from selectedInstanceGroups state', () => {
const wrapper = mount(
<MemoryRouter>
<OrganizationAdd api={{}} />
</MemoryRouter>
).find('OrganizationAdd');
wrapper.setState({ results: [{
id: 1,
name: 'foo'
}] });
wrapper.instance().onLookupChange({
id: 1,
name: 'foo'
});
expect(wrapper.state('results')).toEqual([{
id: 1,
name: 'foo',
isChecked: true
}]);
expect(wrapper.state('selectedInstanceGroups')).toEqual([{
id: 1,
name: 'foo'
}]);
wrapper.instance().onLookupChange({
id: 1,
name: 'foo'
});
expect(wrapper.state('results')).toEqual([{
id: 1,
name: 'foo',
isChecked: false
}]);
expect(wrapper.state('selectedInstanceGroups')).toEqual([]);
});
test('onSubmit posts instance groups from selectedInstanceGroups', async () => {
const createOrganizationFn = jest.fn().mockResolvedValue({
data: {
id: 1,
name: 'mock org',
related: {
instance_groups: '/api/v2/organizations/1/instance_groups'
}
}
});
const createInstanceGroupsFn = jest.fn().mockResolvedValue('done');
const api = {
createOrganization: createOrganizationFn,
createInstanceGroups: createInstanceGroupsFn
};
const wrapper = mount(
<MemoryRouter>
<OrganizationAdd api={api} />
</MemoryRouter>
).find('OrganizationAdd');
wrapper.setState({
name: 'mock org',
selectedInstanceGroups: [{
id: 1,
name: 'foo'
}]
});
await wrapper.instance().onSubmit();
expect(createOrganizationFn).toHaveBeenCalledWith({
custom_virtualenv: '',
description: '',
name: 'mock org'
});
expect(createInstanceGroupsFn).toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 1);
});
});