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

Standardize chip height (#213)

Browse Source 
* make all chips the same size

* create DetailList, Detail components; clean up Chips, ChipGroup

* delete BasicChip in favor of <Chip isReadOnly>

* create our own ChipGroup to handle overflow
This commit is contained in:
Keith Grant
2019-05-28 08:49:03 -04:00
committed by GitHub
parent 189e12f8b3
commit 29e17ac49e
25 changed files with 1455 additions and 1050 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
__tests__/components/SelectedList.test.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { mount } from 'enzyme';
import SelectedList from '../../src/components/SelectedList';
import { ChipGroup } from '../../src/components/Chip';
describe('<SelectedList />', () => {
test('initially renders succesfully', () => {
@@ -22,7 +23,8 @@ describe('<SelectedList />', () => {
/>
);
});
test('showOverflow should set showOverflow state to true', () => {
test('showOverflow should set showOverflow on ChipGroup', () => {
const wrapper = mount(
<SelectedList
label="Selected"
@@ -31,73 +33,11 @@ describe('<SelectedList />', () => {
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);
const chipGroup = wrapper.find(ChipGroup);
expect(chipGroup).toHaveLength(1);
expect(chipGroup.prop('showOverflowAfter')).toEqual(5);
});
test('Clicking remove on chip calls onRemove callback prop with correct params', () => {
const onRemove = jest.fn();
const mockSelected = [