Skip to content

Commit

Permalink
update suggestor specs - hendles keys
Browse files Browse the repository at this point in the history
  • Loading branch information
@carloluis
carloluis committed Dec 23, 2017
1 parent aa35eda commit 7f0924f
Showing 1 changed file with 86 additions and 110 deletions.
196 changes: 86 additions & 110 deletions src/suggestor/__tests__/Suggestor.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ describe('Suggestor component', () => {

const spy = jest.spyOn(component.instance(), 'setState');

component.setProps({ });
component.setProps({});

expect(spy).toBeCalled();
});
Expand Down Expand Up @@ -296,48 +296,43 @@ describe('Suggestor component', () => {

expect(spy).toBeCalled();
});
})
});

describe('... handles input changes', () => {
const event = {
stopPropagation: jest.fn(),
target: { value: 'temp' }
};
let component;

beforeEach(() => {
event.stopPropagation.mockReset();
PROPS.onChange.mockReset();
component = mount(<Suggestor {...PROPS} />);
});

it('should stop event propagation', () => {
const component = mount(<Suggestor {...PROPS} />);

component.find('input').simulate('change', event);

expect(event.stopPropagation).toBeCalled();
});

it('should update state', () => {
const component = mount(<Suggestor {...PROPS} />);

component.find('input').simulate('change', event);

expect(component.state().value).toBe(event.target.value);
expect(component.state().open).toBeTruthy();
});

it('should call onChange prop callback', () => {
const component = mount(<Suggestor {...PROPS} />);

component.find('input').simulate('change', event);

expect(PROPS.onChange).toBeCalled();
expect(PROPS.onSelect).not.toBeCalled();
});

it('should call onSelect prop callback when select value', () => {
const component = mount(<Suggestor {...PROPS} openOnClick />);

component.setProps({ openOnClick: true });
component.instance().changeValue('temp', true);

expect(PROPS.onChange).toBeCalled();
Expand All @@ -350,152 +345,133 @@ describe('Suggestor component', () => {
preventDefault: jest.fn(),
keyCode: KEY_CODES.ENTER
};
let component;

beforeEach(() => {
event.preventDefault.mockReset();
PROPS.onKey.mockReset();
PROPS.onChange.mockReset();
PROPS.onSelect.mockReset();

component = shallow(<Suggestor {...PROPS} />);
});

it('should call prop onKey callback', () => {
const component = shallow(<Suggestor {...PROPS} />);

component.find('div').simulate('keyDown', event);

expect(event.preventDefault).not.toBeCalled();
expect(PROPS.onKey).toBeCalled();
});

it('should call processKey if useKeys is truthy', () => {
const component = shallow(<Suggestor {...PROPS} useKeys />);

const processKeySpy = jest.spyOn(component.instance(), 'processKey');

component.find('div').simulate('keyDown', { ...event, keyCode: KEY_CODES.UP });

expect(processKeySpy).toBeCalledWith(KEY_CODES.UP);
});

it('should call processKey if useKeys is truthy', () => {
const component = shallow(<Suggestor {...PROPS} />);

it('should not call processKey if useKeys is falsy', () => {
const processKeySpy = jest.spyOn(component.instance(), 'processKey');

component.find('div').simulate('keyDown', { ...event, keyCode: KEY_CODES.UP });

expect(processKeySpy).not.toBeCalledWith();
});

it('should prevent event default action (with keys: ENTER, ESCAPE, UP, DOWN)', () => {
const component = shallow(<Suggestor {...PROPS} useKeys />);

expect(event.preventDefault).not.toBeCalled();

const keys = [KEY_CODES.ENTER, KEY_CODES.ESCAPE, KEY_CODES.UP, KEY_CODES.DOWN];
describe('when using keys (useKeys: true)', () => {
let processKeySpy, changeValueSpy, handleCloseSpy, toggleListSpy, setStateSpy;

keys.map((keyCode, index) => {
component.find('div').simulate('keyDown', { ...event, keyCode });

expect(event.preventDefault).toHaveBeenCalledTimes(index + 1);
beforeEach(() => {
component.setProps({ useKeys: true });
processKeySpy = jest.spyOn(component.instance(), 'processKey');
changeValueSpy = jest.spyOn(component.instance(), 'changeValue');
handleCloseSpy = jest.spyOn(component.instance(), 'handleClose');
toggleListSpy = jest.spyOn(component.instance(), 'toggleList');
setStateSpy = jest.spyOn(component.instance(), 'setState');
});

expect(event.preventDefault).toBeCalled();
});

it('should not prevent event default action (with key: TAB)', () => {
const component = shallow(<Suggestor {...PROPS} useKeys />);
afterEach(() => {
expect(PROPS.onKey).toBeCalled();
expect(processKeySpy).toBeCalled();
});

component.find('div').simulate('keyDown', { ...event, keyCode: KEY_CODES.TAB });
it('should call processKey if useKeys is truthy', () => {
component.find('div').simulate('keyDown', { ...event, keyCode: KEY_CODES.UP });

expect(event.preventDefault).not.toBeCalled();
});
expect(processKeySpy).toBeCalledWith(KEY_CODES.UP);
});

it('should only close suggestion list - if selectOnTab is off (TAB key)', () => {
const component = shallow(<Suggestor {...PROPS} useKeys />);
it('should prevent event default action (with keys: ENTER, ESCAPE, UP, DOWN)', () => {
expect(event.preventDefault).not.toBeCalled();
const keys = [KEY_CODES.ENTER, KEY_CODES.ESCAPE, KEY_CODES.UP, KEY_CODES.DOWN];

const changeValueSpy = jest.spyOn(component.instance(), 'changeValue');
const handleCloseSpy = jest.spyOn(component.instance(), 'handleClose');
keys.map((keyCode, index) => {
component.find('div').simulate('keyDown', { ...event, keyCode });
expect(event.preventDefault).toHaveBeenCalledTimes(index + 1);
});

component.find('div').simulate('keyDown', { ...event, keyCode: KEY_CODES.TAB });
expect(event.preventDefault).toBeCalled();
expect(event.preventDefault.mock.calls.length).toBe(4);
});

expect(changeValueSpy).not.toBeCalled();
expect(handleCloseSpy).toBeCalled();
});
it('should not prevent event default action (with key: TAB)', () => {
component.find('div').simulate('keyDown', { ...event, keyCode: KEY_CODES.TAB });

it('should change value (TAB key)', () => {
const component = shallow(<Suggestor {...PROPS} useKeys selectOnTab />);
component.setState({ open: true });
expect(event.preventDefault).not.toBeCalled();
});

const changeValueSpy = jest.spyOn(component.instance(), 'changeValue');
const handleCloseSpy = jest.spyOn(component.instance(), 'handleClose');
it('should only close suggestion list - if selectOnTab is off (TAB key)', () => {
component.find('div').simulate('keyDown', { ...event, keyCode: KEY_CODES.TAB });

component.find('div').simulate('keyDown', { ...event, keyCode: KEY_CODES.TAB });
expect(changeValueSpy).not.toBeCalled();
expect(handleCloseSpy).toBeCalled();
});

expect(changeValueSpy).toBeCalled();
expect(handleCloseSpy).toBeCalled();
expect(PROPS.onChange).toBeCalled();
expect(PROPS.onSelect).toBeCalled();
});
it('should change value (ENTER key)', () => {
const selectedItem = PROPS.list[0];
component.instance().setState({ open: true, index: 0 });

it('should clear selected value if any and suggestion list is closed (ESC key)', () => {
const component = shallow(<Suggestor {...PROPS} useKeys selectOnTab />);
component.setState({ open: false, value: 'temporise' });
component.find('div').simulate('keyDown', { ...event, keyCode: KEY_CODES.ENTER });

const changeValueSpy = jest.spyOn(component.instance(), 'changeValue');
const handleCloseSpy = jest.spyOn(component.instance(), 'handleClose');
expect(PROPS.onSelect).toBeCalledWith(selectedItem);
expect(event.preventDefault).toBeCalled();
expect(changeValueSpy).toBeCalledWith(selectedItem, true);
expect(toggleListSpy).toBeCalled();
});

component.find('div').simulate('keyDown', { ...event, keyCode: KEY_CODES.ESCAPE });
it('should only call props.onKey and .processKey for unsupported key', () => {
component.find('div').simulate('keyDown', { ...event, keyCode: 0 });

expect(handleCloseSpy).toBeCalled();
expect(changeValueSpy).toBeCalledWith('');
expect(PROPS.onChange).toBeCalled();
expect(PROPS.onSelect).not.toBeCalled(); // check actual behavior
expect(event.preventDefault).not.toBeCalled();
expect(changeValueSpy).not.toBeCalled();
expect(handleCloseSpy).not.toBeCalled();
expect(toggleListSpy).not.toBeCalled();
expect(setStateSpy).not.toBeCalled();
expect(PROPS.onSelect).not.toBeCalled();
});
});

it('should change value (ENTER key)', () => {
const component = shallow(<Suggestor {...PROPS} useKeys />);
const instance = component.instance();
describe('when keys and selectOnTab props are on', () => {
let changeValueSpy, handleCloseSpy;

component.setState({ open: true, index: 0 });

const spies = {
changeValue: jest.spyOn(instance, 'changeValue'),
toggleList: jest.spyOn(instance, 'toggleList')
};

component.find('div').simulate('keyDown', { ...event, keyCode: KEY_CODES.ENTER });

const selectedItem = PROPS.list[0];

expect(PROPS.onKey).toBeCalled();
expect(spies.toggleList).toBeCalled();
expect(spies.changeValue).toBeCalledWith(selectedItem, true);
expect(PROPS.onSelect).toBeCalledWith(selectedItem);
expect(event.preventDefault).toBeCalled();

});
beforeEach(() => {
component.setProps({ useKeys: true, selectOnTab: true });
changeValueSpy = jest.spyOn(component.instance(), 'changeValue');
handleCloseSpy = jest.spyOn(component.instance(), 'handleClose');
});

it('should only call props.onKey for unsupported keys', () => {
const component = shallow(<Suggestor {...PROPS} useKeys />);
const instance = component.instance();
it('should change value (TAB key)', () => {
component.setState({ open: true });
component.find('div').simulate('keyDown', { ...event, keyCode: KEY_CODES.TAB });

const spies = {
changeValue: jest.spyOn(instance, 'changeValue'),
handleClose: jest.spyOn(instance, 'handleClose'),
setState: jest.spyOn(instance, 'setState'),
toggleList: jest.spyOn(instance, 'toggleList')
};
expect(changeValueSpy).toBeCalled();
expect(handleCloseSpy).toBeCalled();
expect(PROPS.onChange).toBeCalled();
expect(PROPS.onSelect).toBeCalled();
});

component.find('div').simulate('keyDown', { ...event, keyCode: 0 });
it('should clear selected value if any and suggestion list is closed (ESC key)', () => {
component.setState({ open: false, value: 'temporise' });
component.find('div').simulate('keyDown', { ...event, keyCode: KEY_CODES.ESCAPE });

expect(event.preventDefault).not.toBeCalled();
expect(spies.changeValue).not.toBeCalled();
expect(spies.handleClose).not.toBeCalled();
expect(spies.setState).not.toBeCalled();
expect(spies.toggleList).not.toBeCalled();
expect(PROPS.onSelect).not.toBeCalled();
expect(PROPS.onKey).toBeCalled();
expect(handleCloseSpy).toBeCalled();
expect(changeValueSpy).toBeCalledWith('');
expect(PROPS.onChange).toBeCalled();
expect(PROPS.onSelect).not.toBeCalled();
});
});
});

Expand Down

0 comments on commit 7f0924f

Please sign in to comment.