diff --git a/packages/elements/src/combo-box/__test__/combo-box.interaction.test.js b/packages/elements/src/combo-box/__test__/combo-box.interaction.test.js index 9c296e51c8..889d4ec5a9 100644 --- a/packages/elements/src/combo-box/__test__/combo-box.interaction.test.js +++ b/packages/elements/src/combo-box/__test__/combo-box.interaction.test.js @@ -1,5 +1,5 @@ import { fixture, expect, elementUpdated, keyboardEvent, nextFrame, isIE } from '@refinitiv-ui/test-helpers'; -import { getData, openedUpdated, makeQueryRequest, onFocusEl } from './utils'; +import { getData, openedUpdated, makeQueryRequest, onFocusEl, dispatchCustomEvent } from './utils'; import '@refinitiv-ui/elements/combo-box'; import '@refinitiv-ui/elemental-theme/light/ef-combo-box'; @@ -8,13 +8,6 @@ import '@refinitiv-ui/elemental-theme/light/ef-combo-box'; // set this flag to false to run all tests locally in IE const skipCITest = isIE() && true; -const dispatchCustomEvent = async (el, eventName) => { - el.dispatchEvent(new CustomEvent(eventName, { - bubbles: true, - composed: true - })); -}; - describe('combo-box/Interaction', () => { describe('Can Open Popup By Different Means', () => { it('Tapping on combo-box should open popup', async function () { diff --git a/packages/elements/src/combo-box/__test__/combo-box.value.test.js b/packages/elements/src/combo-box/__test__/combo-box.value.test.js index 11090fcba8..a6f190820d 100644 --- a/packages/elements/src/combo-box/__test__/combo-box.value.test.js +++ b/packages/elements/src/combo-box/__test__/combo-box.value.test.js @@ -1,5 +1,5 @@ -import { fixture, expect, elementUpdated, nextFrame } from '@refinitiv-ui/test-helpers'; -import { getData, openedUpdated, snapshotIgnore, makeQueryRequest } from './utils'; +import { fixture, expect, elementUpdated, nextFrame, oneEvent } from '@refinitiv-ui/test-helpers'; +import { getData, openedUpdated, snapshotIgnore, makeQueryRequest, dispatchCustomEvent } from './utils'; import '@refinitiv-ui/elements/combo-box'; import '@refinitiv-ui/elemental-theme/light/ef-combo-box'; @@ -59,7 +59,10 @@ describe('combo-box/Value', () => { expect(el).shadowDom.to.equalSnapshot(snapshotIgnore); }); - it('Free text. Set any value via API', async () => { + }); + describe('Free Text mode', () => { + + it('Set any value via API', async () => { const el = await fixture(''); el.data = getData(); await openedUpdated(el); @@ -76,7 +79,42 @@ describe('combo-box/Value', () => { expect(el.value).to.equal('Any', 'Value must be "Any" string'); }); - it('Free text. Reset value via API', async () => { + it('Set any value via API then select value in the list', async () => { + // set value via attribute + const el = await fixture(''); + el.data = getData(); + await openedUpdated(el); + + let afItem = el.listEl.querySelectorAll('ef-list-item')[1]; // AF, Afghanistan + setTimeout(() => dispatchCustomEvent(afItem, 'tap')); + + const attributeEvent = await oneEvent(el, 'value-changed'); + expect(attributeEvent.detail.value).to.equal('AF', `value-changed event's value doesn't equal selected value`); + + // set value via input element + await makeQueryRequest(el, 'A'); + + const axItem = el.listEl.querySelectorAll('ef-list-item')[2]; // AX, AAland Islands + setTimeout(() => dispatchCustomEvent(axItem, 'tap')); + + const inputEvent = await oneEvent(el, 'value-changed'); + expect(inputEvent.detail.value).to.equal('AX', `value-changed event's value doesn't equal selected value`); + + // set value via property + // cleanup first + el.value = ''; + await elementUpdated(el); + + el.value = 'property'; + + const alItem = el.listEl.querySelectorAll('ef-list-item')[3]; // AL, Albania + setTimeout(() => dispatchCustomEvent(alItem, 'tap')); + + const propertyEvent = await oneEvent(el, 'value-changed'); + expect(propertyEvent.detail.value).to.equal('AL', `value-changed event's value doesn't equal selected value`); + }); + + it('Reset value via API', async () => { const el = await fixture(''); el.data = getData(); await openedUpdated(el); diff --git a/packages/elements/src/combo-box/__test__/utils.js b/packages/elements/src/combo-box/__test__/utils.js index 13ffae682b..b58a8b144f 100644 --- a/packages/elements/src/combo-box/__test__/utils.js +++ b/packages/elements/src/combo-box/__test__/utils.js @@ -6,13 +6,14 @@ export const snapshotIgnore = { /** * Cross browser function to wait while select element becomes opened/closed and resized + * @async * @param {Select} el Select - * @returns {void} + * @returns {Promise} Empty promise */ export const openedUpdated = async (el) => { await elementUpdated(el); await nextFrame(); - await nextFrame(); // IE11 needs a second iframe, otherwise resize observer is not run; + await nextFrame(); // IE11 needs another frame, otherwise resize observer is not run; }; export const data = [{ @@ -55,3 +56,10 @@ export const makeQueryRequest = async (el, textInput) => { await elementUpdated(el); await aTimeout(100); }; + +export const dispatchCustomEvent = (el, eventName) => { + el.dispatchEvent(new CustomEvent(eventName, { + bubbles: true, + composed: true + })); +}; diff --git a/packages/elements/src/combo-box/index.ts b/packages/elements/src/combo-box/index.ts index dd40bb351f..aa29e6498b 100644 --- a/packages/elements/src/combo-box/index.ts +++ b/packages/elements/src/combo-box/index.ts @@ -968,8 +968,8 @@ export class ComboBox extends FormFieldElement { */ protected onListValueChanged (): void { // cascade value changed event - this.notifyPropertyChange('value', this.value); this.onListInteraction(); + this.notifyPropertyChange('value', this.value); } /**