Skip to content
This repository was archived by the owner on Jul 29, 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 = <ChipSet><Chip /></ChipSet>;
const render = () => shallow<ChipSet>(stub);
assert.isOk(render);
});


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

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

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

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