Skip to content
This repository was archived by the owner on Jan 14, 2025. It is now read-only.

fix(chips): id shuold be required prop #649

Merged
merged 11 commits into from
Feb 8, 2019
6 changes: 5 additions & 1 deletion packages/chips/ChipSet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,11 @@ export default class ChipSet extends React.Component<ChipSetProps, ChipSetState>
};

renderChip = (chip: any) => {
const {filter} = this.props;
const {choice, filter, input} = this.props;
if ((choice || filter || input) && !chip.props.id) {
throw new Error('Chip variant missing required property: id.');
}

const {selectedChipIds} = this.state;
const selected = selectedChipIds.indexOf(chip.props.id) > -1;
const {handleInteraction, handleSelect, handleRemove, ...chipProps} = chip.props;
Expand Down
25 changes: 25 additions & 0 deletions test/unit/chips/ChipSet.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -414,6 +414,31 @@ test('chip is rendered with computeBoundingRect method prop if is not filter var
assert.equal(chip.props.computeBoundingRect, null);
});

test('basic variant ChipSet will not throw error if chip missing id', () => {
const stub = (<Chip/>);
const wrapper = shallow<ChipSet>(<ChipSet/>);
assert.doesNotThrow(() => wrapper.instance().renderChip(stub));
});


test('filter variant ChipSet will throw error if chip missing id', () => {
const stub = (<Chip/>);
const wrapper = shallow<ChipSet>(<ChipSet filter />);
assert.throws(() => wrapper.instance().renderChip(stub));
});

test('choice variant ChipSet will throw error if chip missing id', () => {
const stub = (<Chip/>);
const wrapper = shallow<ChipSet>(<ChipSet choice />);
assert.throws(() => wrapper.instance().renderChip(stub));
});

test('input variant of ChipSet will throw error if chip missing id', () => {
const stub = (<Chip/>);
const wrapper = shallow<ChipSet>(<ChipSet input />);
assert.throws(() => wrapper.instance().renderChip(stub));
});

test('#componentWillUnmount destroys foundation', () => {
const wrapper = shallow<ChipSet>(<ChipSet><Chip id='1' /></ChipSet>);
const foundation = wrapper.state().foundation;
Expand Down