q2-tecton-elements 1.50.1 → 1.51.0

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

@@ -12,48 +12,6 @@ describe('q2-pill', () => {
         const page = await setup({ html: `<q2-pill></q2-pill>` });
         expect(await getListOfStyleCompilationIssues(page, 'q2-pill')).toHaveLength(0);
     });
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations with only label', async () => {
-            page = await setup({ html: `<q2-pill label="My pill"></q2-pill>` });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-        it('Does not have accessibility violations when has options', async () => {
-            page = await setup({
-                html: `
-                    <q2-pill label="My pill">
-                        <q2-option value="1">Option 1</q2-option>
-                        <q2-option value="2">Option 2</q2-option>
-                        <q2-option value="3">Option 3</q2-option>
-                    </q2-pill>
-                `,
-            });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-        it("option-list should have a role of 'listbox' and the options a role of 'option'", async () => {
-            page = await setup({
-                html: `
-                        <q2-pill label="My pill" open>
-                            <q2-option value="1">Option 1</q2-option>
-                            <q2-option value="2">Option 2</q2-option>
-                            <q2-option value="3">Option 3</q2-option>
-                        </q2-pill>
-                    `,
-            });
-            await page.waitForChanges();
-            const snapshot = await page.accessibility.snapshot();
-            const button = snapshot.children[0].children[0];
-            const optionList = snapshot.children[1];
-            expect(button.role).toEqual('combobox');
-            expect(optionList.role).toEqual('listbox');
-            expect(optionList.children).toHaveLength(3);
-            optionList.children.forEach(child => {
-                expect(child.role).toEqual('option');
-                expect(child.name).toBeTruthy();
-            });
-        });
-    });
     describe('Props', () => {
         describe('hoist', () => {
             const runHoistSetup = async (action, hoistEnabled = false, defineShowActionSheet = false, isCancelled = false) => {
@@ -432,6 +390,21 @@ describe('q2-pill', () => {
                 });
             });
         });
+        describe('popoverMaxHeight', () => {
+            it('when provided, passes the value to q2-popover', async () => {
+                page = await setup({
+                    html: `
+                            <q2-pill label="My pill" popover-max-height="600">
+                                <q2-option value="1">Option 1</q2-option>
+                                <q2-option value="2">Option 2</q2-option>
+                                <q2-option value="3">Option 3</q2-option>
+                            </q2-pill>
+                        `,
+                });
+                popover = await page.find('q2-pill >>> q2-popover');
+                expect(await popover.getProperty('maxHeight')).toEqual(600);
+            });
+        });
         describe('popoverDirection', () => {
             describe('when not provided', () => {
                 it('does not default and does not pass a value to q2-popover', async () => {
@@ -762,119 +735,348 @@ describe('q2-pill', () => {
             });
         });
     });
-    describe('Keyboard', () => {
+    describe('Focus', () => {
+        let page;
+        let pill;
         beforeEach(async () => {
             page = await setup({
                 html: `
-                    <q2-pill label="My pill">
-                        <q2-option value="1">Option 1</q2-option>
-                        <q2-option value="2">Option 2</q2-option>
-                        <q2-option value="3">Option 3</q2-option>
-                    </q2-pill>
-                `,
+                        <q2-pill label="My pill" value="my-pill-value">
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                        </q2-pill>
+                    `,
             });
             pill = await page.find('q2-pill');
-            allOptions = await page.findAll('q2-option');
-            optionList = await page.find('q2-pill >>> q2-option-list');
-            popover = await page.find('q2-pill >>> q2-popover');
-            optionContainer = await page.find('q2-pill >>> q2-option-list >>> .options');
-            controlBtn = await page.find('q2-pill >>> .btn-primary');
-            changeSpy = await pill.spyOnEvent('change');
         });
-        describe('pill button interactions', () => {
-            it('opens list and focuses first option on ArrowDown', async () => {
-                await controlBtn.press('ArrowDown');
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(pill).toHaveAttribute('open');
-                expect(await getFocusedAttribute(page, 'value')).toEqual('1');
+        it('focuses the <button> element when focus event is dispatched', async function () {
+            pill.triggerEvent('focus');
+            await page.waitForChanges();
+            expect(await getFocusedAttribute(page, 'test-id')).toEqual('btn-control');
+        });
+    });
+    describe('Slot content', () => {
+        describe('popover-top', () => {
+            it('renders the provided content in the popover-top slot', async () => {
+                page = await setup({
+                    html: `
+                        <q2-pill label="My pill" value="my-pill-value">
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                            <div slot='popover-top'>Popover Slot Top</div>
+                        </q2-pill>
+                    `,
+                });
+                const slotContainer = await page.find('q2-pill >>> .popover-top-container');
+                const slotData = await page.$eval('q2-pill', element => {
+                    const nodes = element.shadowRoot
+                        .querySelector('slot[name="popover-top"]')
+                        .assignedElements();
+                    return {
+                        childCount: nodes.length,
+                        slot: nodes[0].getAttribute('slot'),
+                        text: nodes[0].textContent,
+                    };
+                });
+                expect(slotContainer).not.toHaveAttribute('hidden');
+                expect(slotData.childCount).toEqual(1);
+                expect(slotData.slot).toEqual('popover-top');
+                expect(slotData.text).toEqual('Popover Slot Top');
             });
-            it('opens list and focuses last option on ArrowUp', async () => {
-                await controlBtn.press('ArrowUp');
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(pill).toHaveAttribute('open');
-                expect(await getFocusedAttribute(page, 'value')).toEqual('3');
+            it('hides the container if no content provided', async () => {
+                page = await setup({
+                    html: `
+                        <q2-pill label="My pill" value="my-pill-value">
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                        </q2-pill>
+                    `,
+                });
+                const slotContainer = await page.find('q2-pill >>> .popover-top-container');
+                expect(slotContainer).toHaveAttribute('hidden');
             });
-            it('opens list and does not focus first option on Enter', async () => {
-                await controlBtn.press('Enter');
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(pill).toHaveAttribute('open');
-                expect(await getActiveElementTestId(page)).toEqual('btn-control');
+        });
+        describe('popover-bottom', () => {
+            it('renders the provided content in the popover-bottom slot', async () => {
+                page = await setup({
+                    html: `
+                        <q2-pill label="My pill" value="my-pill-value">
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                            <div slot='popover-bottom'>Popover Slot Bottom</div>
+                        </q2-pill>
+                    `,
+                });
+                const slotContainer = await page.find('q2-pill >>> .popover-bottom-container');
+                const slotData = await page.$eval('q2-pill', element => {
+                    const nodes = element.shadowRoot
+                        .querySelector('slot[name="popover-bottom"]')
+                        .assignedElements();
+                    return {
+                        childCount: nodes.length,
+                        slot: nodes[0].getAttribute('slot'),
+                        text: nodes[0].textContent,
+                    };
+                });
+                expect(slotContainer).not.toHaveAttribute('hidden');
+                expect(slotData.childCount).toEqual(1);
+                expect(slotData.slot).toEqual('popover-bottom');
+                expect(slotData.text).toEqual('Popover Slot Bottom');
             });
-            it('opens list and does not focus first option on Space', async () => {
-                await controlBtn.press(' ');
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(pill).toHaveAttribute('open');
-                expect(await getActiveElementTestId(page)).toEqual('btn-control');
+            it('hides the container if no content provided', async () => {
+                page = await setup({
+                    html: `
+                        <q2-pill label="My pill" value="my-pill-value">
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                        </q2-pill>
+                    `,
+                });
+                const slotContainer = await page.find('q2-pill >>> .popover-bottom-container');
+                expect(slotContainer).toHaveAttribute('hidden');
             });
-            it('opens list and focuses last option on Home', async () => {
-                await controlBtn.press('Home');
+        });
+    });
+    describe('Mutation Observer', () => {
+        describe('Popover Slots', () => {
+            it('updates the component when popover-top slot is added', async () => {
+                page = await setup({
+                    html: `
+                        <q2-pill label="My pill" value="my-pill-value">
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                        </q2-pill>
+                    `,
+                });
+                const slotContainer = await page.find('q2-pill >>> .popover-top-container');
+                expect(slotContainer).toHaveAttribute('hidden');
+                await page.evaluate(() => {
+                    const slot = document.createElement('div');
+                    slot.setAttribute('slot', 'popover-top');
+                    slot.textContent = 'Popover Slot Top';
+                    document.querySelector('q2-pill').appendChild(slot);
+                });
                 await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(pill).toHaveAttribute('open');
-                expect(await getFocusedOptionValue(page)).toEqual('1');
+                expect(slotContainer).not.toHaveAttribute('hidden');
             });
-            it('opens list and focuses last option on End', async () => {
-                await controlBtn.press('End');
+            it('updates the component when popover-bottom slot is added', async () => {
+                page = await setup({
+                    html: `
+                        <q2-pill label="My pill" value="my-pill-value">
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                        </q2-pill>
+                    `,
+                });
+                const slotContainer = await page.find('q2-pill >>> .popover-bottom-container');
+                expect(slotContainer).toHaveAttribute('hidden');
+                await page.evaluate(() => {
+                    const slot = document.createElement('div');
+                    slot.setAttribute('slot', 'popover-bottom');
+                    slot.textContent = 'Popover Slot Bottom';
+                    document.querySelector('q2-pill').appendChild(slot);
+                });
                 await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(pill).toHaveAttribute('open');
-                expect(await getFocusedAttribute(page, 'value')).toEqual('3');
+                expect(slotContainer).not.toHaveAttribute('hidden');
             });
         });
-        describe('option list interactions', () => {
-            it('can select options via keyboard', async () => {
-                let closeBtn = await page.find('q2-pill >>> .btn-close');
-                let closeIcon = await page.find('q2-pill >>> q2-icon');
-                const btnWrapper = await page.find('q2-pill >>> .btn-wrapper');
-                expect(pill).not.toHaveAttribute('active');
-                expect(await closeBtn.isVisible()).toBe(true);
-                expect(closeIcon).toEqualAttribute('type', 'chevron-down');
-                expect(btnWrapper.classList.contains('has-icon')).toBe(true);
-                expect(btnWrapper.classList.contains('has-options')).toBe(true);
-                expect(popover).not.toHaveAttribute('open');
-                expect(closeBtn.tagName).toEqual('DIV');
-                await controlBtn.press('ArrowDown');
+        describe('Option Count', () => {
+            it('updates the option count when options are added', async () => {
+                page = await setup({ html: `` });
+                await setTestStrings(page, {
+                    'tecton.element.optionList.optionCount': 'This option list has {0} options.',
+                });
+                page.setContent(`
+                    <q2-pill label="My pill" value="my-pill-value">
+                        <q2-option value="1">Option 1</q2-option>
+                    </q2-pill>`);
                 await page.waitForChanges();
-                expect(pill).not.toHaveAttribute('active');
-                expect(pill).toHaveAttribute('open');
-                expect(popover).toHaveAttribute('open');
-                expect(await getFocusedOptionValue(page)).toEqual('1');
-                await optionContainer.press('ArrowDown');
+                pill = await page.find('q2-pill');
+                const optionDescription = await page.find('q2-pill >>> #option-description');
+                expect(optionDescription).toEqualText('This option list has 1 options.');
+                await page.evaluate(() => {
+                    const option = document.createElement('q2-option');
+                    option.setAttribute('value', '2');
+                    option.textContent = 'Option 2';
+                    document.querySelector('q2-pill').appendChild(option);
+                });
                 await page.waitForChanges();
-                expect(await getFocusedOptionValue(page)).toEqual('2');
-                await allOptions[1].press(' ');
+                const updatedOptionDescription = await page.find('q2-pill >>> #option-description');
+                expect(updatedOptionDescription).toEqualText('This option list has 2 options.');
+            });
+            it('updates the option count when options are removed', async () => {
+                page = await setup({ html: `` });
+                await setTestStrings(page, {
+                    'tecton.element.optionList.optionCount': 'This option list has {0} options.',
+                });
+                page.setContent(`
+                    <q2-pill label="My pill" value="my-pill-value">
+                        <q2-option value="1">Option 1</q2-option>
+                        <q2-option value="2">Option 2</q2-option>
+                    </q2-pill>`);
                 await page.waitForChanges();
-                expect(pill).toHaveAttribute('active');
-                expect(pill).not.toHaveAttribute('open');
-                expect(popover).not.toHaveAttribute('open');
-                expect(changeSpy).toHaveReceivedEventDetail({
-                    active: true,
-                    value: '2',
-                    values: [{ display: 'Option 2', value: '2' }],
+                pill = await page.find('q2-pill');
+                const optionDescription = await page.find('q2-pill >>> #option-description');
+                expect(optionDescription).toEqualText('This option list has 2 options.');
+                await page.evaluate(() => {
+                    const option = document.querySelector('q2-option');
+                    document.querySelector('q2-pill').removeChild(option);
                 });
-                expect(await optionList.getProperty('selectedOptions')).toEqual([{ display: 'Option 2', value: '2' }]);
-                closeBtn = await page.find('q2-pill >>> .btn-close');
-                closeIcon = await page.find('q2-pill >>> q2-icon');
-                expect(closeBtn.tagName).toEqual('BUTTON');
-                expect(closeIcon).toEqualAttribute('type', 'close');
-                await closeBtn.press(' ');
                 await page.waitForChanges();
-                expect(pill).not.toHaveAttribute('active');
-                expect(changeSpy).toHaveReceivedEventDetail({
-                    active: false,
-                    value: null,
-                    values: [],
+                const updatedOptionDescription = await page.find('q2-pill >>> #option-description');
+                expect(updatedOptionDescription).toEqualText('This option list has 1 options.');
+            });
+        });
+    });
+    describe('Regressions', () => {
+        describe('TCT-2161', () => {
+            it('leaves the element when Tab is pressed', async function () {
+                page = await setup({
+                    html: `
+                            <q2-pill label="My pill">
+                                <q2-option value="1">Option 1</q2-option>
+                                <q2-option value="2">Option 2</q2-option>
+                                <q2-option value="3">Option 3</q2-option>
+                            </q2-pill>
+                            <button test-id="btn-next">Test</button>
+                        `,
                 });
-                expect(await optionList.getProperty('selectedOptions')).toEqual([]);
+                pill = await page.find('q2-pill');
+                await pill.focus();
+                expect(await getActiveElementTestId(page)).toEqual('btn-control');
+                await pill.press('Tab');
+                await page.waitForChanges();
+                expect(await getActiveElementTestId(page)).toEqual('btn-next');
             });
-            describe('when multiple', () => {
-                it('can select multiple options via keyboard', async () => {
-                    pill.setProperty('multiple', true);
+        });
+        describe('TCT-2433', () => {
+            it('zero is not rendered inside the click-elsewhere element', async () => {
+                page = await setup({
+                    html: `<q2-pill label="My Pill"></q2-pill>`,
+                });
+                pill = await page.find('q2-pill');
+                const clickElsewhere = await page.find('q2-pill >>> click-elsewhere');
+                expect(await pill.getProperty('label')).toBe('My Pill');
+                expect(clickElsewhere.textContent.slice(-1)).not.toBe('0');
+            });
+        });
+    });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations with only label', async () => {
+                page = await setup({ html: `<q2-pill label="My pill"></q2-pill>` });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+            it('does not have accessibility violations when options are present', async () => {
+                page = await setup({
+                    html: `
+                        <q2-pill label="My pill">
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                        </q2-pill>
+                    `,
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+            it("option-list should have a role of 'listbox' and the options a role of 'option'", async () => {
+                page = await setup({
+                    html: `
+                        <q2-pill label="My pill" open>
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                        </q2-pill>
+                    `,
+                });
+                await page.waitForChanges();
+                const snapshot = await page.accessibility.snapshot();
+                const button = snapshot.children[0].children[0];
+                const optionList = snapshot.children[1];
+                expect(button.role).toEqual('combobox');
+                expect(optionList.role).toEqual('listbox');
+                expect(optionList.children).toHaveLength(3);
+                optionList.children.forEach(child => {
+                    expect(child.role).toEqual('option');
+                    expect(child.name).toBeTruthy();
+                });
+            });
+        });
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => {
+            beforeEach(async () => {
+                page = await setup({
+                    html: `
+                        <q2-pill label="My pill">
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                        </q2-pill>
+                    `,
+                });
+                pill = await page.find('q2-pill');
+                allOptions = await page.findAll('q2-option');
+                optionList = await page.find('q2-pill >>> q2-option-list');
+                popover = await page.find('q2-pill >>> q2-popover');
+                optionContainer = await page.find('q2-pill >>> q2-option-list >>> .options');
+                controlBtn = await page.find('q2-pill >>> .btn-primary');
+                changeSpy = await pill.spyOnEvent('change');
+            });
+            describe('pill button interactions', () => {
+                it('opens list and focuses first option on ArrowDown', async () => {
+                    await controlBtn.press('ArrowDown');
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    expect(pill).toHaveAttribute('open');
+                    expect(await getFocusedAttribute(page, 'value')).toEqual('1');
+                });
+                it('opens list and focuses last option on ArrowUp', async () => {
+                    await controlBtn.press('ArrowUp');
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    expect(pill).toHaveAttribute('open');
+                    expect(await getFocusedAttribute(page, 'value')).toEqual('3');
+                });
+                it('opens list and does not focus first option on Enter', async () => {
+                    await controlBtn.press('Enter');
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    expect(pill).toHaveAttribute('open');
+                    expect(await getActiveElementTestId(page)).toEqual('btn-control');
+                });
+                it('opens list and does not focus first option on Space', async () => {
+                    await controlBtn.press(' ');
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    expect(pill).toHaveAttribute('open');
+                    expect(await getActiveElementTestId(page)).toEqual('btn-control');
+                });
+                it('opens list and focuses last option on Home', async () => {
+                    await controlBtn.press('Home');
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    expect(pill).toHaveAttribute('open');
+                    expect(await getFocusedOptionValue(page)).toEqual('1');
+                });
+                it('opens list and focuses last option on End', async () => {
+                    await controlBtn.press('End');
                     await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    expect(pill).toHaveAttribute('open');
+                    expect(await getFocusedAttribute(page, 'value')).toEqual('3');
+                });
+            });
+            describe('option list interactions', () => {
+                it('can select options via keyboard', async () => {
                     let closeBtn = await page.find('q2-pill >>> .btn-close');
                     let closeIcon = await page.find('q2-pill >>> q2-icon');
                     const btnWrapper = await page.find('q2-pill >>> .btn-wrapper');
@@ -897,10 +1099,11 @@ describe('q2-pill', () => {
                     await allOptions[1].press(' ');
                     await page.waitForChanges();
                     expect(pill).toHaveAttribute('active');
-                    expect(pill).toHaveAttribute('open');
-                    expect(popover).toHaveAttribute('open');
+                    expect(pill).not.toHaveAttribute('open');
+                    expect(popover).not.toHaveAttribute('open');
                     expect(changeSpy).toHaveReceivedEventDetail({
                         active: true,
+                        value: '2',
                         values: [{ display: 'Option 2', value: '2' }],
                     });
                     expect(await optionList.getProperty('selectedOptions')).toEqual([
@@ -910,31 +1113,7 @@ describe('q2-pill', () => {
                     closeIcon = await page.find('q2-pill >>> q2-icon');
                     expect(closeBtn.tagName).toEqual('BUTTON');
                     expect(closeIcon).toEqualAttribute('type', 'close');
-                    await optionContainer.press('ArrowDown');
-                    await page.waitForChanges();
-                    expect(await getFocusedOptionValue(page)).toEqual('3');
-                    await allOptions[2].press(' ');
-                    await page.waitForChanges();
-                    expect(changeSpy).toHaveReceivedEventDetail({
-                        active: true,
-                        values: [
-                            { display: 'Option 2', value: '2' },
-                            { display: 'Option 3', value: '3' },
-                        ],
-                    });
-                    expect(await optionList.getProperty('selectedOptions')).toEqual([
-                        { display: 'Option 2', value: '2' },
-                        { display: 'Option 3', value: '3' },
-                    ]);
-                    expect(pill).toHaveAttribute('active');
-                    expect(pill).toHaveAttribute('open');
-                    expect(popover).toHaveAttribute('open');
-                    await btnWrapper.click();
-                    await page.waitForChanges();
-                    expect(pill).toHaveAttribute('active');
-                    expect(pill).not.toHaveAttribute('open');
-                    expect(optionList).not.toHaveAttribute('open');
-                    await closeBtn.click();
+                    await closeBtn.press(' ');
                     await page.waitForChanges();
                     expect(pill).not.toHaveAttribute('active');
                     expect(changeSpy).toHaveReceivedEventDetail({
@@ -944,62 +1123,83 @@ describe('q2-pill', () => {
                     });
                     expect(await optionList.getProperty('selectedOptions')).toEqual([]);
                 });
-            });
-        });
-    });
-    describe('Focus', () => {
-        let page;
-        let pill;
-        beforeEach(async () => {
-            page = await setup({
-                html: `
-                        <q2-pill label="My pill" value="my-pill-value">
-                            <q2-option value="1">Option 1</q2-option>
-                            <q2-option value="2">Option 2</q2-option>
-                            <q2-option value="3">Option 3</q2-option>
-                        </q2-pill>
-                    `,
-            });
-            pill = await page.find('q2-pill');
-        });
-        it('focuses the <button> element when focus event is dispatched', async function () {
-            pill.triggerEvent('focus');
-            await page.waitForChanges();
-            expect(await getFocusedAttribute(page, 'test-id')).toEqual('btn-control');
-        });
-    });
-    describe('Regressions', () => {
-        describe('TCT-2161', () => {
-            it('leaves the element when Tab is pressed', async function () {
-                page = await setup({
-                    html: `
-                            <q2-pill label="My pill">
-                                <q2-option value="1">Option 1</q2-option>
-                                <q2-option value="2">Option 2</q2-option>
-                                <q2-option value="3">Option 3</q2-option>
-                            </q2-pill>
-                            <button test-id="btn-next">Test</button>
-                        `,
-                });
-                pill = await page.find('q2-pill');
-                await pill.focus();
-                expect(await getActiveElementTestId(page)).toEqual('btn-control');
-                await pill.press('Tab');
-                await page.waitForChanges();
-                expect(await getActiveElementTestId(page)).toEqual('btn-next');
-            });
-        });
-        describe('TCT-2433', () => {
-            it('zero is not rendered inside the click-elsewhere element', async () => {
-                page = await setup({
-                    html: `<q2-pill label="My Pill"></q2-pill>`,
+                describe('when multiple', () => {
+                    it('can select multiple options via keyboard', async () => {
+                        pill.setProperty('multiple', true);
+                        await page.waitForChanges();
+                        let closeBtn = await page.find('q2-pill >>> .btn-close');
+                        let closeIcon = await page.find('q2-pill >>> q2-icon');
+                        const btnWrapper = await page.find('q2-pill >>> .btn-wrapper');
+                        expect(pill).not.toHaveAttribute('active');
+                        expect(await closeBtn.isVisible()).toBe(true);
+                        expect(closeIcon).toEqualAttribute('type', 'chevron-down');
+                        expect(btnWrapper.classList.contains('has-icon')).toBe(true);
+                        expect(btnWrapper.classList.contains('has-options')).toBe(true);
+                        expect(popover).not.toHaveAttribute('open');
+                        expect(closeBtn.tagName).toEqual('DIV');
+                        await controlBtn.press('ArrowDown');
+                        await page.waitForChanges();
+                        expect(pill).not.toHaveAttribute('active');
+                        expect(pill).toHaveAttribute('open');
+                        expect(popover).toHaveAttribute('open');
+                        expect(await getFocusedOptionValue(page)).toEqual('1');
+                        await optionContainer.press('ArrowDown');
+                        await page.waitForChanges();
+                        expect(await getFocusedOptionValue(page)).toEqual('2');
+                        await allOptions[1].press(' ');
+                        await page.waitForChanges();
+                        expect(pill).toHaveAttribute('active');
+                        expect(pill).toHaveAttribute('open');
+                        expect(popover).toHaveAttribute('open');
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            active: true,
+                            values: [{ display: 'Option 2', value: '2' }],
+                        });
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([
+                            { display: 'Option 2', value: '2' },
+                        ]);
+                        closeBtn = await page.find('q2-pill >>> .btn-close');
+                        closeIcon = await page.find('q2-pill >>> q2-icon');
+                        expect(closeBtn.tagName).toEqual('BUTTON');
+                        expect(closeIcon).toEqualAttribute('type', 'close');
+                        await optionContainer.press('ArrowDown');
+                        await page.waitForChanges();
+                        expect(await getFocusedOptionValue(page)).toEqual('3');
+                        await allOptions[2].press(' ');
+                        await page.waitForChanges();
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            active: true,
+                            values: [
+                                { display: 'Option 2', value: '2' },
+                                { display: 'Option 3', value: '3' },
+                            ],
+                        });
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([
+                            { display: 'Option 2', value: '2' },
+                            { display: 'Option 3', value: '3' },
+                        ]);
+                        expect(pill).toHaveAttribute('active');
+                        expect(pill).toHaveAttribute('open');
+                        expect(popover).toHaveAttribute('open');
+                        await btnWrapper.click();
+                        await page.waitForChanges();
+                        expect(pill).toHaveAttribute('active');
+                        expect(pill).not.toHaveAttribute('open');
+                        expect(optionList).not.toHaveAttribute('open');
+                        await closeBtn.click();
+                        await page.waitForChanges();
+                        expect(pill).not.toHaveAttribute('active');
+                        expect(changeSpy).toHaveReceivedEventDetail({
+                            active: false,
+                            value: null,
+                            values: [],
+                        });
+                        expect(await optionList.getProperty('selectedOptions')).toEqual([]);
+                    });
                 });
-                pill = await page.find('q2-pill');
-                const clickElsewhere = await page.find('q2-pill >>> click-elsewhere');
-                expect(await pill.getProperty('label')).toBe('My Pill');
-                expect(clickElsewhere.textContent.slice(-1)).not.toBe('0');
             });
         });
+        describe('Other', () => { });
     });
 });
 //# sourceMappingURL=q2-pill-test.e2e.js.map