q2-tecton-elements 1.51.1 → 1.52.1

package/dist/collection/components/q2-select/test/q2-select-test.e2e.js

@@ -148,10 +148,12 @@ describe('q2-select', () => {
         expect(await firstOption.getProperty('active')).toEqual(true);
         expect(await secondOption.getProperty('active')).toEqual(false);
         await popover.press('ArrowDown');
+        await page.waitForChanges();
         // moving with down arrow sets active element
         expect(await firstOption.getProperty('active')).toEqual(false);
         expect(await secondOption.getProperty('active')).toEqual(true);
         await popover.press('ArrowDown');
+        await page.waitForChanges();
         // moving with down arrow when already at the bottom keeps active at the bottom
         expect(await firstOption.getProperty('active')).toEqual(false);
         expect(await secondOption.getProperty('active')).toEqual(true);
@@ -186,25 +188,30 @@ describe('q2-select', () => {
         // selecting an option closes the dropdown
         expect(await popover.getProperty('open')).toBe(false);
         await input.press('ArrowDown');
+        await page.waitForChanges();
         // the dropdown should open on down arrow
         expect(await popover.getProperty('open')).toBe(true);
         await input.click();
         // dropdown closes again after another click
         expect(await popover.getProperty('open')).toBe(false);
         await input.press('ArrowUp');
+        await page.waitForChanges();
         // the dropdown should open on up arrow
         expect(await popover.getProperty('open')).toBe(true);
         const select = await page.find('q2-select');
         select.setProperty('multiple', true);
         await page.waitForChanges();
         await input.press('ArrowUp');
+        await page.waitForChanges();
         // opened again with up arrow
         expect(await popover.getProperty('open')).toBe(true);
         await input.press('Escape');
+        await page.waitForChanges();
         // escape closes the dropdown when in keyboard mode
         expect(await popover.getProperty('open')).toBe(false);
         await input.press('ArrowUp');
         await input.press('Enter');
+        await page.waitForChanges();
         // selecting or deselecting an option with enter in multiple does not close the dropdown
         expect(await popover.getProperty('open')).toBe(true);
         await options[0].click();
@@ -220,9 +227,11 @@ describe('q2-select', () => {
         expect(await popover.getProperty('open')).toBe(false);
         // opened again with up arrow
         await input.press('ArrowUp');
+        await page.waitForChanges();
         expect(await popover.getProperty('open')).toBe(true);
         // pressing tab key(loses focus) closes the dropdown
         await input.press('Tab');
+        await page.waitForChanges();
         expect(await popover.getProperty('open')).toBe(false);
         expect(selectContainer).not.toHaveClass('is-focused');
     });
@@ -588,6 +597,70 @@ describe('q2-select', () => {
                 });
             });
         });
+        describe('displayChanged', () => {
+            describe('when option display prop provided', () => {
+                beforeEach(async () => {
+                    page = await setup({
+                        html: `
+                        <q2-select value="option-1">
+                            <q2-option value="option-1" display="Option 1">Option 1</q2-option>
+                            <q2-option value="option-2" display="Option 2">Option 2</q2-option>
+                            <q2-option value="option-3" display="Option 3">Option 3</q2-option>
+                    </q2-select>
+                    `,
+                    });
+                    select = await page.find('q2-select');
+                    input = await page.find('q2-select >>> q2-input');
+                    changeSpy = await select.spyOnEvent('displayChanged');
+                });
+                it('should receive displayChanged event when display prop changed in q2-option', async () => {
+                    const option = await page.find('q2-option[value="option-1"]');
+                    option.setProperty('display', 'New Display');
+                    await page.waitForChanges();
+                    expect(changeSpy).toHaveReceivedEventDetail({ display: 'New Display', value: 'option-1' });
+                });
+                it('field should show new display value of selected option', async () => {
+                    select.setAttribute('value', 'option-2');
+                    await page.waitForChanges();
+                    const selectedOption = await page.find('q2-option[selected]');
+                    selectedOption.setProperty('display', 'Option Two');
+                    await page.waitForChanges();
+                    expect(await input.getProperty('value')).toEqual('Option Two');
+                });
+            });
+            describe('when option display prop NOT provided', () => {
+                beforeEach(async () => {
+                    page = await setup({
+                        html: `
+                        <q2-select value="option-1">
+                            <q2-option value="option-1">Option 1</q2-option>
+                            <q2-option value="option-2">Option 2</q2-option>
+                            <q2-option value="option-3">Option 3</q2-option>
+                    </q2-select>
+                    `,
+                    });
+                    select = await page.find('q2-select');
+                    input = await page.find('q2-select >>> q2-input');
+                    changeSpy = await select.spyOnEvent('displayChanged');
+                });
+                it('should receive displayChanged event when textContent changed', async () => {
+                    select.setAttribute('value', 'option-2');
+                    await page.waitForChanges();
+                    const selectedOption = await page.find('q2-option[selected]');
+                    selectedOption.textContent = 'Option Two';
+                    await page.waitForChanges();
+                    expect(changeSpy).toHaveReceivedEventDetail({ display: 'Option Two', value: 'option-2' });
+                });
+                it('field should show new display value of selected option', async () => {
+                    select.setAttribute('value', 'option-2');
+                    await page.waitForChanges();
+                    const selectedOption = await page.find('q2-option[selected]');
+                    selectedOption.textContent = 'Option Two';
+                    await page.waitForChanges();
+                    expect(await input.getProperty('value')).toEqual('Option Two');
+                });
+            });
+        });
     });
     describe('Standard', () => {
         beforeEach(async () => {
@@ -625,12 +698,15 @@ describe('q2-select', () => {
             expect(firstOptionScrollStub).toHaveBeenCalledTimes(0);
             expect(secondOptionScrollStub).toHaveBeenCalledTimes(0);
             await select.press('ArrowDown');
+            await page.waitForChanges();
             expect(firstOptionScrollStub).toHaveBeenCalledTimes(1);
             expect(secondOptionScrollStub).toHaveBeenCalledTimes(0);
             await options[0].press('ArrowDown');
+            await page.waitForChanges();
             expect(firstOptionScrollStub).toHaveBeenCalledTimes(1);
             expect(secondOptionScrollStub).toHaveBeenCalledTimes(1);
             await options[1].press('ArrowUp');
+            await page.waitForChanges();
             expect(firstOptionScrollStub).toHaveBeenCalledTimes(2);
             expect(secondOptionScrollStub).toHaveBeenCalledTimes(1);
         });
@@ -639,14 +715,17 @@ describe('q2-select', () => {
         });
         it('opens popover on click', async () => {
             await select.click();
+            await page.waitForChanges();
             expect(await popover.getProperty('open')).toBe(true);
         });
         it('opens popover on Space', async () => {
             await input.press(' ');
+            await page.waitForChanges();
             expect(await popover.getProperty('open')).toBe(true);
         });
         it('opens popover on Enter', async () => {
             await input.press('Enter');
+            await page.waitForChanges();
             expect(await popover.getProperty('open')).toBe(true);
         });
     });
@@ -823,7 +902,7 @@ describe('q2-select', () => {
                     expect(await selectedOptions[0].getProperty('display')).toEqual('Option 1');
                 });
                 it('updates selected option and input with new value', async () => {
-                    await select.setProperty('value', 'option-2');
+                    select.setProperty('value', 'option-2');
                     await page.waitForChanges();
                     expect(await input.getProperty('value')).toEqual('Option 2');
                     const selectedOptions = await page.findAll('q2-option[selected]');
@@ -832,21 +911,21 @@ describe('q2-select', () => {
                     expect(selectedOptions[0]).toEqualAttribute('aria-selected', 'true');
                 });
                 it('selects no options and shows input with value if no option is found', async () => {
-                    await select.setProperty('value', 'newValue');
+                    select.setProperty('value', 'newValue');
                     await page.waitForChanges();
                     expect(await input.getProperty('value')).toEqual('newValue');
                     const selectedOptions = await page.findAll('q2-option[selected]');
                     expect(selectedOptions).toHaveLength(0);
                 });
                 it('selects no options and shows input with empty string when set to undefined', async () => {
-                    await select.setProperty('value', undefined);
+                    select.setProperty('value', undefined);
                     await page.waitForChanges();
                     expect(await input.getProperty('value')).toEqual('');
                     const selectedOptions = await page.findAll('q2-option[selected]');
                     expect(selectedOptions).toHaveLength(0);
                 });
                 it('does nothing if selectedOptions is set', async () => {
-                    await select.setProperty('selectedOptions', ['option-1', 'option-2']);
+                    select.setProperty('selectedOptions', ['option-1', 'option-2']);
                     await page.waitForChanges();
                     expect(await input.getProperty('value')).toEqual('Option 1');
                     const selectedOptions = await page.findAll('q2-option[selected]');
@@ -856,56 +935,6 @@ describe('q2-select', () => {
                 });
             });
         });
-        describe('when display or textContent changed', () => {
-            beforeEach(async () => {
-                page = await setup({
-                    html: `
-                        <q2-select value="option-1">
-                            <q2-option value="option-1" display="Option 1">Option 1</q2-option>
-                            <q2-option value="option-2" display="Option 2">Option 2</q2-option>
-                            <q2-option value="option-3" display="Option 3">Option 3</q2-option>
-                    </q2-select>
-                    `,
-                });
-                select = await page.find('q2-select');
-                input = await page.find('q2-select >>> q2-input');
-                changeSpy = await select.spyOnEvent('displayChanged');
-            });
-            it('should emit displayChanged event when display changed', async () => {
-                select.setAttribute('value', 'option-2');
-                await page.waitForChanges();
-                const selectedOption = await page.find('q2-option[selected]');
-                selectedOption.setProperty('display', 'Option Two');
-                await page.waitForChanges();
-                expect(changeSpy).toHaveReceivedEventDetail({ display: 'Option Two', value: 'option-2' });
-            });
-            it('should emit displayChanged event when textContent changed', async () => {
-                select.setAttribute('value', 'option-2');
-                await page.waitForChanges();
-                const selectedOption = await page.find('q2-option[selected]');
-                selectedOption.textContent = 'Option Two';
-                await page.waitForChanges();
-                expect(changeSpy).toHaveReceivedEventDetail({ display: 'Option Two', value: 'option-2' });
-            });
-            it('should reflect new display value of selected option', async () => {
-                select.setAttribute('value', 'option-2');
-                await page.waitForChanges();
-                const selectedOption = await page.find('q2-option[selected]');
-                selectedOption.setProperty('display', 'Option Two');
-                await page.waitForChanges();
-                expect(await selectedOption.textContent.trim()).toEqual('Option Two');
-                expect(await input.getProperty('value')).toEqual('Option Two');
-            });
-            it('should reflect new textContent value of selected option', async () => {
-                select.setAttribute('value', 'option-2');
-                await page.waitForChanges();
-                const selectedOption = await page.find('q2-option[selected]');
-                selectedOption.textContent = 'Option Two';
-                await page.waitForChanges();
-                expect(await selectedOption.textContent.trim()).toEqual('Option Two');
-                expect(await input.getProperty('value')).toEqual('Option Two');
-            });
-        });
         describe('selectedOptions', () => {
             describe('when multiple is false', () => {
                 it('selects no options and shows nothing in input ', async () => {
@@ -964,7 +993,7 @@ describe('q2-select', () => {
                     select = await page.find('q2-select');
                     input = await page.find('q2-select >>> q2-input');
                     optionList = await page.find('q2-select >>> q2-option-list');
-                    await select.setProperty('selectedOptions', ['option-3']);
+                    select.setProperty('selectedOptions', ['option-3']);
                     await page.waitForChanges();
                 });
                 it('selects option and shows display attribute in input', async () => {
@@ -976,7 +1005,7 @@ describe('q2-select', () => {
                     expect(await selectedOptions[0].getProperty('display')).toEqual('Option 3');
                 });
                 it('updates selected option and input with new value', async () => {
-                    await select.setProperty('selectedOptions', ['option-2']);
+                    select.setProperty('selectedOptions', ['option-2']);
                     await page.waitForChanges();
                     expect(await input.getProperty('value')).toEqual('Option 2');
                     expect(await input.getProperty('badgeValue')).toBeNull();
@@ -986,7 +1015,7 @@ describe('q2-select', () => {
                     expect(await selectedOptions[0].getProperty('display')).toEqual('Option 2');
                 });
                 it('populates badge when multiple options are provided', async () => {
-                    await select.setProperty('selectedOptions', ['option-1', 'option-3']);
+                    select.setProperty('selectedOptions', ['option-1', 'option-3']);
                     await page.waitForChanges();
                     expect(await input.getProperty('value')).toEqual('Option 1');
                     expect(await input.getProperty('badgeValue')).toEqual('+1');
@@ -1000,7 +1029,7 @@ describe('q2-select', () => {
                     expect(await selectedOptions[1].getProperty('display')).toEqual('Option 3');
                 });
                 it('selects no options and shows input with value if no options are found', async () => {
-                    await select.setProperty('selectedOptions', ['newValue']);
+                    select.setProperty('selectedOptions', ['newValue']);
                     await page.waitForChanges();
                     expect(await input.getProperty('value')).toEqual('newValue');
                     expect(await input.getProperty('badgeValue')).toBeNull();
@@ -1009,7 +1038,7 @@ describe('q2-select', () => {
                     expect(selectedOptions).toHaveLength(0);
                 });
                 it('selects no options and shows input with empty string when set to undefined', async () => {
-                    await select.setProperty('selectedOptions', undefined);
+                    select.setProperty('selectedOptions', undefined);
                     await page.waitForChanges();
                     expect(await input.getProperty('value')).toEqual('');
                     expect(await input.getProperty('badgeValue')).toBeNull();
@@ -1018,7 +1047,7 @@ describe('q2-select', () => {
                     expect(selectedOptions).toHaveLength(0);
                 });
                 it('changes nothing if value is set', async () => {
-                    await select.setProperty('value', 'option-2');
+                    select.setProperty('value', 'option-2');
                     await page.waitForChanges();
                     expect(await input.getProperty('value')).toEqual('Option 3');
                     expect(await input.getProperty('badgeValue')).toBeNull();
@@ -1335,6 +1364,7 @@ describe('q2-select', () => {
                     await dispatchEvent(page, ['q2-select', 'q2-input'], 'input', {
                         detail: { value: 'abc' },
                     });
+                    await page.waitForChanges();
                     visibleOptions = await page.findAll('q2-option:not([hidden])');
                     expect(visibleOptions).toHaveLength(0);
                     await page.waitForTimeout(1000);
@@ -2055,6 +2085,7 @@ describe('q2-select', () => {
                 it('opens the dropdown, and moves focus to default option on ArrowDown', async () => {
                     expect(await popover.getProperty('open')).toBe(false);
                     await input.press('ArrowDown');
+                    await page.waitForChanges();
                     expect(await popover.getProperty('open')).toBe(true);
                     const firstOption = options[0];
                     expect(firstOption).toHaveAttribute('active');
@@ -2233,45 +2264,57 @@ describe('q2-select', () => {
                 });
                 it('focuses next option on ArrowDown', async () => {
                     await popover.press('ArrowDown');
+                    await page.waitForChanges();
                     expect(await popover.getProperty('open')).toBe(true);
                     expect(await getFocusedOptionValue(page)).toBe(options[1].getAttribute('value'));
                 });
                 it('focuses previous option on ArrowUp', async () => {
                     await popover.press('ArrowDown');
+                    await page.waitForChanges();
                     expect(options[1]).toHaveAttribute('active');
                     await popover.press('ArrowUp');
+                    await page.waitForChanges();
                     expect(await popover.getProperty('open')).toBe(true);
                     expect(options[0]).toHaveAttribute('active');
                     expect(await getFocusedOptionValue(page)).toBe(options[0].getAttribute('value'));
                 });
                 it('focuses first option on Home', async () => {
                     await popover.press('ArrowDown');
+                    await page.waitForChanges();
                     expect(options[1]).toHaveAttribute('active');
                     await popover.press('Home');
+                    await page.waitForChanges();
                     expect(await popover.getProperty('open')).toBe(true);
                     expect(options[0]).toHaveAttribute('active');
                     expect(await getFocusedOptionValue(page)).toBe(options[0].getAttribute('value'));
                 });
                 it('focuses last option on End', async () => {
                     await popover.press('ArrowDown');
+                    await page.waitForChanges();
                     expect(options[1]).toHaveAttribute('active');
                     await popover.press('End');
+                    await page.waitForChanges();
                     expect(await popover.getProperty('open')).toBe(true);
                     expect(options[14]).toHaveAttribute('active');
                     expect(await getFocusedOptionValue(page)).toBe(options[14].getAttribute('value'));
                 });
                 it('jumps focus forward 10 options on PageDown', async () => {
                     await popover.press('PageDown');
+                    await page.waitForChanges();
                     expect(options[10]).toHaveAttribute('active');
                     await popover.press('PageDown');
+                    await page.waitForChanges();
                     expect(options[14]).toHaveAttribute('active');
                 });
                 it('jumps focus back 10 options on PageUp', async () => {
                     await popover.press('End');
+                    await page.waitForChanges();
                     expect(options[14]).toHaveAttribute('active');
                     await popover.press('PageUp');
+                    await page.waitForChanges();
                     expect(options[4]).toHaveAttribute('active');
                     await popover.press('PageUp');
+                    await page.waitForChanges();
                     expect(options[0]).toHaveAttribute('active');
                 });
             });
@@ -2290,11 +2333,13 @@ describe('q2-select', () => {
                         await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
                             key: 'ArrowDown',
                         });
+                        await page.waitForChanges();
                         expect(await popover.getProperty('open')).toBe(true);
                         expect(options[1]).toHaveAttribute('active');
                     });
                     it('closes dropdown, maintains values, and focuses input on Escape', async () => {
                         await popover.press('Escape');
+                        await page.waitForChanges();
                         expect(await select.getProperty('value')).toEqual('2');
                         expect(await popover.getProperty('open')).toBe(false);
                         expect(await isInputFocused(page)).toBe(true);
@@ -2310,12 +2355,14 @@ describe('q2-select', () => {
                     it('ArrowDown: focuses first option in search results', async () => {
                         await input.press('3');
                         await input.press('ArrowDown');
+                        await page.waitForChanges();
                         expect(options[2]).toHaveAttribute('active');
                         expect(await getFocusedValue(page)).toBe(options[2].getAttribute('value'));
                     });
                     it('ArrowUp: focuses last option in search results', async () => {
                         await input.press('3');
                         await input.press('ArrowUp');
+                        await page.waitForChanges();
                         expect(options[12]).toHaveAttribute('active');
                         expect(await getFocusedValue(page)).toBe(options[12].getAttribute('value'));
                     });
@@ -2324,7 +2371,7 @@ describe('q2-select', () => {
                     beforeEach(async () => {
                         page = await setup({
                             html: `
-                                <q2-select searchable>
+                                <q2-select searchable multiline-options>
                                     <q2-option value="1">
                                         <q2-card title="Foo"></q2-card>
                                     </q2-option>
@@ -2339,7 +2386,7 @@ describe('q2-select', () => {
                         });
                         input = await page.find('q2-select >>> q2-input');
                     });
-                    it('can search based of the `q2-card` title attribute', async () => {
+                    it('can search based on the `q2-card` title attribute', async () => {
                         await input.focus();
                         await input.type('Bar');
                         options = await page.findAll('q2-option:not([hidden])');
@@ -2386,6 +2433,7 @@ describe('q2-select', () => {
                         });
                         it('opens the dropdown, and focuses next option on ArrowDown', async () => {
                             await input.press('ArrowDown');
+                            await page.waitForChanges();
                             expect(await popover.getProperty('open')).toBe(true);
                             const firstOption = options[1];
                             expect(firstOption).toHaveAttribute('active');
@@ -2393,6 +2441,7 @@ describe('q2-select', () => {
                         });
                         it('opens the dropdown, and focuses first option on ArrowUp', async () => {
                             await input.press('ArrowUp');
+                            await page.waitForChanges();
                             expect(await popover.getProperty('open')).toBe(true);
                             const firstOption = options[1];
                             expect(firstOption).toHaveAttribute('active');
@@ -2400,8 +2449,10 @@ describe('q2-select', () => {
                         });
                         it('closes dropdown if open on Escape', async () => {
                             await input.press('ArrowDown');
+                            await page.waitForChanges();
                             expect(await popover.getProperty('open')).toBe(true);
                             await input.press('Escape');
+                            await page.waitForChanges();
                             expect(await popover.getProperty('open')).toBe(false);
                         });
                     });
@@ -2487,6 +2538,7 @@ describe('q2-select', () => {
                         it('does not show an indicator of total selected options', async () => {
                             expect(await popover.getProperty('open')).toBe(false);
                             await input.press('ArrowDown');
+                            await page.waitForChanges();
                             expect(await popover.getProperty('open')).toBe(true);
                             input = await page.find('q2-select >>> q2-input');
                             expect(input).not.toHaveAttribute('badge-value');
@@ -2523,10 +2575,12 @@ describe('q2-select', () => {
                         });
                         it('moves focus to first option on ArrowDown', async () => {
                             await allOptionsRadio.press('ArrowDown');
+                            await page.waitForChanges();
                             expect(await selectedOptionsRadio.getProperty('checked')).toEqual(true);
                         });
                         it('moves focus to first option on ArrowUp', async () => {
                             await allOptionsRadio.press('ArrowUp');
+                            await page.waitForChanges();
                             expect(await selectedOptionsRadio.getProperty('checked')).toEqual(true);
                         });
                     });
@@ -2538,16 +2592,19 @@ describe('q2-select', () => {
                         });
                         it('moves focus to first option on ArrowDown', async () => {
                             await selectedOptionsRadio.press('ArrowDown');
+                            await page.waitForChanges();
                             expect(await allOptionsRadio.getProperty('checked')).toEqual(true);
                         });
                         it('moves focus to all options radio on ArrowUp', async () => {
                             await selectedOptionsRadio.press('ArrowUp');
+                            await page.waitForChanges();
                             expect(await allOptionsRadio.getProperty('checked')).toEqual(true);
                         });
                     });
                     it('selects on Click', async () => {
                         expect(await selectedOptionsRadio.getProperty('checked')).toEqual(false);
                         await selectedOptionsRadioLabel.click();
+                        await page.waitForChanges();
                         expect(await selectedOptionsRadio.getProperty('checked')).toEqual(true);
                         expect(options[0]).toHaveAttribute('active');
                     });
@@ -2575,9 +2632,11 @@ describe('q2-select', () => {
                         // Selecting fourth option
                         await popover.press('ArrowDown');
                         await popover.press('ArrowDown');
+                        await page.waitForChanges();
                         expect(options[3]).toHaveAttribute('active');
                         expect(options[3]).not.toHaveAttribute('selected');
                         await popover.press(key);
+                        await page.waitForChanges();
                         expect(options[3]).toHaveAttribute('selected');
                         expect(options[3]).toHaveAttribute('active');
                         expect(await popover.getProperty('open')).toBe(true);
@@ -2594,9 +2653,11 @@ describe('q2-select', () => {
                         expect(input).not.toHaveAttribute('badge-value');
                         // Selecting fifth option
                         await popover.press('ArrowDown');
+                        await page.waitForChanges();
                         expect(options[4]).toHaveAttribute('active');
                         expect(options[4]).not.toHaveAttribute('selected');
                         await popover.press(key);
+                        await page.waitForChanges();
                         expect(options[4]).toHaveAttribute('selected');
                         expect(await input.getProperty('value')).toEqual('Option 2');
                         expect(await select.getProperty('selectedOptions')).toEqual(['2', '5']);