Skip to content

Commit

Permalink
Fixes liferay#1285 - SF
Browse files Browse the repository at this point in the history
  • Loading branch information
matuzalemsteles committed Dec 4, 2018
1 parent 88f3f32 commit 6370854
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 41 deletions.
8 changes: 5 additions & 3 deletions packages/clay-autocomplete/src/ClayAutocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,10 @@ class ClayAutocomplete extends ClayComponent {
switch (event.key) {
case 'Enter':
event.stopPropagation();
if (this.filteredItems.length && event.delegateTarget.tagName !== 'INPUT') {
if (
this.filteredItems.length &&
event.delegateTarget.tagName !== 'INPUT'
) {
this._handleItemSelected(event);
}
break;
Expand Down Expand Up @@ -174,8 +177,7 @@ class ClayAutocomplete extends ClayComponent {
this.refs.input.focus();
this._dropdownItemFocused = null;
} else if (
!(direction === true &&
this._dropdownItemFocused === null)
!(direction === true && this._dropdownItemFocused === null)
) {
this._dropdownItemFocused =
this._dropdownItemFocused === null ||
Expand Down
28 changes: 21 additions & 7 deletions packages/clay-autocomplete/src/__tests__/ClayAutocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,11 @@ describe('ClayAutocomplete', function() {

const {dropdown} = component.refs.dataProvider.refs;

triggerEvent(dropdown.querySelector('a[data-dropdown-item-index]'), 'keydown', {key: 'Enter'});
triggerEvent(
dropdown.querySelector('a[data-dropdown-item-index]'),
'keydown',
{key: 'Enter'}
);

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith(
Expand Down Expand Up @@ -324,7 +328,7 @@ describe('ClayAutocomplete', function() {
name: 'Ammonia cookie',
},
],
extractData: (elem) => elem.name,
extractData: elem => elem.name,
});

const spy = jest.spyOn(component, 'emit');
Expand Down Expand Up @@ -420,7 +424,9 @@ describe('ClayAutocomplete', function() {
jest.runAllTimers();

const {dropdown} = component.refs.dataProvider.refs;
const elements = dropdown.querySelectorAll('a[data-dropdown-item-index]');
const elements = dropdown.querySelectorAll(
'a[data-dropdown-item-index]'
);

component._dropdownItemFocused = 1;

Expand Down Expand Up @@ -452,7 +458,9 @@ describe('ClayAutocomplete', function() {
const {dropdown} = component.refs.dataProvider.refs;

triggerEvent(input, 'keydown', {key: 'ArrowDown'});
expect(dropdown.querySelector('a[data-dropdown-item-index]')).toEqual(document.activeElement);
expect(
dropdown.querySelector('a[data-dropdown-item-index]')
).toEqual(document.activeElement);
expect(component._dropdownItemFocused).toBe(0);
});

Expand All @@ -472,13 +480,17 @@ describe('ClayAutocomplete', function() {
jest.runAllTimers();

const {dropdown} = component.refs.dataProvider.refs;
const elements = dropdown.querySelectorAll('a[data-dropdown-item-index]');
const elements = dropdown.querySelectorAll(
'a[data-dropdown-item-index]'
);

triggerEvent(input, 'keydown', {key: 'ArrowDown'});
expect(elements[0]).toEqual(document.activeElement);
expect(component._dropdownItemFocused).toBe(0);

triggerEvent(component.element, 'keydown', {key: 'ArrowDown'});
triggerEvent(component.element, 'keydown', {
key: 'ArrowDown',
});
expect(elements[1]).toEqual(document.activeElement);
expect(component._dropdownItemFocused).toBe(1);
});
Expand All @@ -495,7 +507,9 @@ describe('ClayAutocomplete', function() {
jest.runAllTimers();

const {dropdown} = component.refs.dataProvider.refs;
const elements = dropdown.querySelectorAll('a[data-dropdown-item-index]');
const elements = dropdown.querySelectorAll(
'a[data-dropdown-item-index]'
);

component._dropdownItemFocused = 1;

Expand Down
46 changes: 25 additions & 21 deletions packages/clay-data-provider/src/__tests__/ClayDataProvider.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,18 +73,20 @@ describe('ClayDataProvider', function() {

const filteredItem = component.filter('brea');

expect(filteredItem).toEqual([{
index: 0,
matches: [
{match: true, value: 'B'},
{match: true, value: 'r'},
{match: true, value: 'e'},
{match: true, value: 'a'},
{value: 'd'},
],
originalString: 'Bread',
score: 26,
}]);
expect(filteredItem).toEqual([
{
index: 0,
matches: [
{match: true, value: 'B'},
{match: true, value: 'r'},
{match: true, value: 'e'},
{match: true, value: 'a'},
{value: 'd'},
],
originalString: 'Bread',
score: 26,
},
]);
});

describe('remote data', () => {
Expand All @@ -107,14 +109,14 @@ describe('ClayDataProvider', function() {
expect(fetch.mock.calls[0][0]).toEqual('http://clay.datasource');
});

it('should emit an event on data change', async (done) => {
it('should emit an event on data change', async done => {
fetch.mockResponseOnce(JSON.stringify(dataSourceRemote));

component = new ClayDataProvider({
content,
dataSource: 'http://clay.datasource',
events: {
dataChange: async (event) => {
dataChange: async event => {
expect(dataSourceRemote).toEqual(event.data);
done();
},
Expand All @@ -126,14 +128,16 @@ describe('ClayDataProvider', function() {
expect(fetch.mock.calls.length).toBe(1);
});

it('should add an initial data while the request is not resolved', async (done) => {
it('should add an initial data while the request is not resolved', async done => {
utils.timeout = jest.fn((ms, promise) => promise);
fetch.mockResponseOnce(() =>
new Promise(resolve =>
setTimeout(() =>
resolve(JSON.stringify(dataSourceRemote)), 20
fetch.mockResponseOnce(
() =>
new Promise(resolve =>
setTimeout(
() => resolve(JSON.stringify(dataSourceRemote)),
20
)
)
)
);

const initialData = [{id: 'foo', name: 'Foo'}];
Expand All @@ -143,7 +147,7 @@ describe('ClayDataProvider', function() {
dataSource: 'http://clay.datasource',
initialData,
events: {
dataChange: (event) => {
dataChange: event => {
expect(initialData).toEqual(event.data);
done();
},
Expand Down
2 changes: 1 addition & 1 deletion packages/clay-multi-select/src/ClayMultiSelect.soy
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
{@param? initialData: []|list<?>}
{@param? inputName: string}
{@param? inputValue: string}
{@param? label: string}
{@param? requestOptions: [
method: string,
mode: string,
Expand All @@ -37,7 +38,6 @@
{@param? requestPolling: number}
{@param? requestRetries: number}
{@param? requestTimeout: number}
{@param? label: string}
{@param? selectedItems: list<?>}
{@param? selectedItemsInputName: string}

Expand Down
36 changes: 27 additions & 9 deletions packages/clay-multi-select/src/__tests__/ClayMultiSelect.js
Original file line number Diff line number Diff line change
Expand Up @@ -395,7 +395,9 @@ describe('ClayMultiSelect', function() {
const spy = jest.spyOn(component, 'emit');
const {autocomplete} = component.refs;

triggerEvent(autocomplete.refs.input, 'keydown', {key: 'Backspace'});
triggerEvent(autocomplete.refs.input, 'keydown', {
key: 'Backspace',
});

jest.runAllTimers();

Expand All @@ -405,7 +407,9 @@ describe('ClayMultiSelect', function() {

expect(items[1]).toEqual(document.activeElement);

triggerEvent(autocomplete.element, 'keydown', {key: 'Backspace'});
triggerEvent(autocomplete.element, 'keydown', {
key: 'Backspace',
});

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith(
Expand Down Expand Up @@ -439,7 +443,9 @@ describe('ClayMultiSelect', function() {
const spy = jest.spyOn(component, 'emit');
const {autocomplete} = component.refs;

triggerEvent(autocomplete.refs.input, 'keydown', {key: 'Backspace'});
triggerEvent(autocomplete.refs.input, 'keydown', {
key: 'Backspace',
});

jest.runAllTimers();

Expand Down Expand Up @@ -485,7 +491,9 @@ describe('ClayMultiSelect', function() {

const {autocomplete} = component.refs;

triggerEvent(autocomplete.refs.input, 'keydown', {key: 'Backspace'});
triggerEvent(autocomplete.refs.input, 'keydown', {
key: 'Backspace',
});

jest.runAllTimers();

Expand Down Expand Up @@ -518,7 +526,9 @@ describe('ClayMultiSelect', function() {

const {autocomplete} = component.refs;

triggerEvent(autocomplete.refs.input, 'keydown', {key: 'Backspace'});
triggerEvent(autocomplete.refs.input, 'keydown', {
key: 'Backspace',
});

jest.runAllTimers();

Expand All @@ -531,7 +541,9 @@ describe('ClayMultiSelect', function() {
triggerEvent(autocomplete.element, 'keydown', {key: 'ArrowLeft'});
expect(items[0]).toEqual(document.activeElement);

triggerEvent(autocomplete.element, 'keydown', {key: 'ArrowRight'});
triggerEvent(autocomplete.element, 'keydown', {
key: 'ArrowRight',
});
expect(items[1]).toEqual(document.activeElement);
});

Expand All @@ -554,7 +566,9 @@ describe('ClayMultiSelect', function() {

const {autocomplete} = component.refs;

triggerEvent(autocomplete.refs.input, 'keydown', {key: 'Backspace'});
triggerEvent(autocomplete.refs.input, 'keydown', {
key: 'Backspace',
});

jest.runAllTimers();

Expand All @@ -564,7 +578,9 @@ describe('ClayMultiSelect', function() {

expect(items[1]).toEqual(document.activeElement);

triggerEvent(autocomplete.element, 'keydown', {key: 'ArrowRight'});
triggerEvent(autocomplete.element, 'keydown', {
key: 'ArrowRight',
});
expect(autocomplete.refs.input).toEqual(document.activeElement);
});

Expand All @@ -587,7 +603,9 @@ describe('ClayMultiSelect', function() {

const {autocomplete} = component.refs;

triggerEvent(autocomplete.refs.input, 'keydown', {key: 'Backspace'});
triggerEvent(autocomplete.refs.input, 'keydown', {
key: 'Backspace',
});

jest.runAllTimers();

Expand Down

0 comments on commit 6370854

Please sign in to comment.