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