q2-tecton-elements 1.54.5 → 1.55.1

package/dist/collection/components/q2-tag/test/q2-tag-test.spec.js

@@ -0,0 +1,719 @@
+import { Q2Tag } from "../q2-tag";
+import { setupSpecPageWithLoc } from "../../../utils/helpers";
+import { overrideFocus, isEventFromElement } from "../../../utils/index";
+import { shouldShowActionSheet, showActionSheetList } from "../../../utils/action-sheet";
+import { Q2Popover } from "../../q2-popover/q2-popover";
+const overrideFocusMock = jest.fn();
+const isEventFromElementMock = jest.fn();
+const shouldShowActionSheetMock = jest.fn();
+const showActionSheetListMock = jest.fn();
+const originalOverrideFocus = overrideFocus;
+const originalIsEventFromElement = isEventFromElement;
+const originalShouldShowActionSheet = shouldShowActionSheet;
+const originalShowActionSheetList = showActionSheetList;
+overrideFocus = overrideFocusMock;
+isEventFromElement = isEventFromElementMock;
+shouldShowActionSheet = shouldShowActionSheetMock;
+showActionSheetList = showActionSheetListMock;
+describe('q2-tag', () => {
+    let specPage;
+    let tagClass;
+    let tagElement;
+    let option;
+    let button;
+    let event;
+    let spy;
+    const testStringsDict = {
+        'tecton.element.tag.test': 'Test String',
+        'tecton.element.tag.changed': 'Changed String',
+        'tecton.element.optionList.optionCount': 'This option list has {0} options.',
+    };
+    afterEach(() => {
+        overrideFocusMock.mockClear();
+        isEventFromElementMock.mockClear();
+        shouldShowActionSheetMock.mockClear();
+        showActionSheetListMock.mockClear();
+    });
+    afterAll(() => {
+        // this is to stop typescript from complaining about the functions
+        overrideFocus = originalOverrideFocus;
+        isEventFromElement = originalIsEventFromElement;
+        shouldShowActionSheet = originalShouldShowActionSheet;
+        showActionSheetList = originalShowActionSheetList;
+    });
+    describe('Props', () => {
+        describe('hoist', () => {
+            it('is false by default', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.hoist).toBe(false);
+            });
+        });
+        describe('optionListLabel', () => {
+            it('defaults to "options"', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.optionListLabel).toBe('options');
+            });
+        });
+        describe('popoverAlignment', () => {
+            it('defaults to "right"', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag, Q2Popover],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.popoverAlignment).toBe('right');
+            });
+            it('gets passed to the <q2-popover> when provided', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag, Q2Popover],
+                    html: `<q2-tag popover-alignment="left"><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.popoverElement.align).toBe('left');
+            });
+        });
+        describe('popoverDirection', () => {
+            it('defaults to undefined', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag, Q2Popover],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.popoverDirection).toBeUndefined();
+            });
+            it('gets passed to the <q2-popover> when provided', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag, Q2Popover],
+                    html: `<q2-tag popover-direction="up"><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.popoverElement.direction).toBe('up');
+            });
+        });
+        describe('popoverMaxheight', () => {
+            it('defaults to undefined', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag, Q2Popover],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.popoverMaxheight).toBeUndefined();
+            });
+            it('gets passed to the <q2-popover> when provided', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag, Q2Popover],
+                    html: `<q2-tag popover-max-height="400"><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.popoverElement.maxHeight).toBe(400);
+            });
+        });
+        describe('popoverMinHeight', () => {
+            it('defaults to undefined', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag, Q2Popover],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.popoverMinHeight).toBeUndefined();
+            });
+            it('gets passed to the <q2-popover> when provided', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag, Q2Popover],
+                    html: `<q2-tag popover-min-height="200"><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.popoverElement.minHeight).toBe(200);
+            });
+        });
+        describe('theme', () => {
+            it('defaults to undefined', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.theme).toBeUndefined();
+            });
+        });
+    });
+    describe('Lifecycle Methods', () => {
+        describe('componentWillLoad', () => {
+            it('fires initMutationObserver', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                spy = jest.spyOn(tagClass, 'initMutationObserver');
+                tagClass.componentWillLoad();
+                expect(spy).toHaveBeenCalled();
+            });
+            it('fires determineOptionCount', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                spy = jest.spyOn(tagClass, 'determineOptionCount');
+                tagClass.componentWillLoad();
+                expect(spy).toHaveBeenCalled();
+            });
+        });
+        describe('componentDidLoad', () => {
+            it('fires overrideFocus', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                expect(overrideFocusMock).toHaveBeenCalled();
+            });
+            it('fires filterSlottedElements', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                spy = jest.spyOn(tagClass, 'filterSlottedElements');
+                tagClass.componentDidLoad();
+                expect(spy).toHaveBeenCalled();
+            });
+        });
+    });
+    describe('Methods', () => {
+        describe('delegateFocus', () => {
+            it('calls focus on the optionList element', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                button = tagClass.dropdownBtn;
+                spy = jest.spyOn(button, 'focus');
+                isEventFromElementMock.mockReturnValue(true);
+                tagClass.delegateFocus(new FocusEvent('focus'));
+                expect(spy).toHaveBeenCalled();
+            });
+            it('fails when isEventFromElement is false', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                button = tagClass.dropdownBtn;
+                spy = jest.spyOn(button, 'focus');
+                isEventFromElementMock.mockReturnValue(false);
+                tagClass.delegateFocus(new FocusEvent('focus'));
+                expect(spy).not.toHaveBeenCalled();
+            });
+            it('fails when there are no options provided', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                button = tagClass.dropdownBtn;
+                expect(button).toBeUndefined();
+            });
+        });
+        describe('popoverStateHandler', () => {
+            it('updates the "open" property with the new state', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.open).toBeUndefined();
+                tagClass.popoverStateHandler({ detail: { open: true } });
+                expect(tagClass.open).toBe(true);
+            });
+            it('does not update the "open" property when the state is unchanged', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagClass.optionList.setActiveElement = jest.fn();
+                expect(tagClass.open).toBeUndefined();
+                tagClass.popoverStateHandler({ detail: { open: false } });
+                expect(tagClass.open).toBe(false);
+            });
+            it('calls setActiveElement and sets to "null" when popovers is closed', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagClass.optionList.setActiveElement = jest.fn();
+                tagClass.popoverStateHandler({ detail: { open: false } });
+                expect(tagClass.optionList.setActiveElement).toHaveBeenCalledWith(null);
+            });
+        });
+    });
+    describe('Public Methods API', () => {
+        describe('closePopover', () => {
+            it('calls _togglePopover when open and provided options', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagClass.open = true;
+                tagClass._togglePopover = jest.fn();
+                await tagClass.closePopover();
+                expect(tagClass._togglePopover).toHaveBeenCalled();
+            });
+            it('does not call _togglePopover when open', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagClass._togglePopover = jest.fn();
+                await tagClass.closePopover();
+                expect(tagClass._togglePopover).not.toHaveBeenCalled();
+            });
+            it('does not call _togglePopover when no options provided', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagClass._togglePopover = jest.fn();
+                await tagClass.closePopover();
+                expect(tagClass._togglePopover).not.toHaveBeenCalled();
+            });
+        });
+        describe('openPopover', () => {
+            it('calls _togglePopover when not open and provided options', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagClass._togglePopover = jest.fn();
+                await tagClass.openPopover();
+                expect(tagClass._togglePopover).toHaveBeenCalled();
+            });
+            it('does not call _togglePopover when open', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagClass.open = true;
+                tagClass._togglePopover = jest.fn();
+                await tagClass.openPopover();
+                expect(tagClass._togglePopover).not.toHaveBeenCalled();
+            });
+            it('does not call _togglePopover when no options provided', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagClass._togglePopover = jest.fn();
+                await tagClass.openPopover();
+                expect(tagClass._togglePopover).not.toHaveBeenCalled();
+            });
+        });
+        describe('selectOption', () => {
+            beforeEach(async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                option = specPage.root.querySelector('q2-option');
+                tagClass.openPopover = jest.fn();
+                tagClass.optionList.getOptions = jest.fn();
+                tagClass.optionList.getOptions.mockReturnValue([option]);
+            });
+            it('calls openPopover', async () => {
+                await tagClass.selectOption();
+                expect(tagClass.openPopover).toHaveBeenCalled();
+            });
+            it('calls getOptions', async () => {
+                await tagClass.selectOption();
+                expect(tagClass.optionList.getOptions).toHaveBeenCalled();
+            });
+            it('calls "click" on the option element', async () => {
+                spy = jest.spyOn(option, 'click');
+                await tagClass.selectOption();
+                expect(spy).toHaveBeenCalled();
+            });
+            it('does nothing if no options are provided', async () => {
+                tagClass.optionCount = 0;
+                await tagClass.selectOption();
+                expect(tagClass.openPopover).not.toHaveBeenCalled();
+            });
+        });
+    });
+    describe('Local Methods', () => {
+        describe('onMutationObserved', () => {
+            it('calls determineOptionCount', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                spy = jest.spyOn(tagClass, 'determineOptionCount');
+                tagClass.onMutationObserved();
+                expect(spy).toHaveBeenCalled();
+            });
+            it('calls filterSlottedElements', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                spy = jest.spyOn(tagClass, 'filterSlottedElements');
+                tagClass.onMutationObserved();
+                expect(spy).toHaveBeenCalled();
+            });
+        });
+        describe('_togglePopover', () => {
+            beforeEach(async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagElement = specPage.root;
+                button = tagClass.dropdownBtn;
+                tagClass.handleClick = jest.fn();
+                tagClass.popoverElement.toggle = jest.fn();
+            });
+            it('clicks the dropdown button', async () => {
+                spy = jest.spyOn(button, 'click');
+                tagClass._togglePopover();
+                expect(spy).toHaveBeenCalled();
+            });
+            it('calls focus() on the dropdown button', async () => {
+                spy = jest.spyOn(button, 'focus');
+                tagClass._togglePopover();
+                expect(spy).toHaveBeenCalled();
+            });
+            it('dispatches a FocusEvent on the button', async () => {
+                spy = jest.spyOn(button, 'dispatchEvent');
+                tagClass._togglePopover();
+                expect(spy).toHaveBeenCalledWith(expect.objectContaining({ type: 'focus' }));
+            });
+        });
+        describe('determineOptionCount', () => {
+            it('sets optionCount to the number of q2-options found', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagClass.optionCount = 0;
+                expect(tagClass.optionCount).toBe(0);
+                tagClass.determineOptionCount();
+                expect(tagClass.optionCount).toBe(2);
+            });
+        });
+        describe('handleButtonFocusout', () => {
+            it('sets open to false', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagClass.open = true;
+                tagClass.handleButtonFocusout(new FocusEvent('focusout'));
+                expect(tagClass.open).toBe(false);
+            });
+            it('does not set open to false when the event is from the popover', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagClass.open = true;
+                tagClass.handleButtonFocusout(new FocusEvent('focusout', { relatedTarget: tagClass.popoverElement }));
+                expect(tagClass.open).toBe(true);
+            });
+            it('does not set open to false when the event is from the an option', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagClass.open = true;
+                option = specPage.root.querySelector('q2-option');
+                tagClass.handleButtonFocusout(new FocusEvent('focusout', { relatedTarget: option }));
+                expect(tagClass.open).toBe(true);
+            });
+        });
+        describe('handleChange', () => {
+            it('emits a click event', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                event = new CustomEvent('click', { detail: { value: 'foo' } });
+                spy = jest.spyOn(tagClass.click, 'emit');
+                tagClass.handleChange(event);
+                expect(spy).toHaveBeenCalled();
+                expect(spy).toHaveBeenCalledWith({ value: 'foo' });
+            });
+            it('calls stopPropagation', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                event = new CustomEvent('click', { detail: { value: 'foo' } });
+                spy = jest.spyOn(event, 'stopPropagation');
+                tagClass.handleChange(event);
+                expect(spy).toHaveBeenCalled();
+            });
+        });
+        describe('handleClick', () => {
+            beforeEach(async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                shouldShowActionSheetMock.mockReturnValue(true);
+                showActionSheetListMock.mockReturnValue({ value: 'foo' });
+                tagClass.popoverElement.toggle = jest.fn();
+                event = new CustomEvent('click', { detail: { value: 'foo' } });
+            });
+            it('calls stopPropagation', async () => {
+                const stopSpy = jest.spyOn(event, 'stopPropagation');
+                await tagClass.handleClick(event);
+                expect(stopSpy).toHaveBeenCalled();
+            });
+            it('assigns popover controlElement to dropdownBtn', async () => {
+                tagClass.popoverElement.controlElement = null;
+                await tagClass.handleClick(event);
+                expect(tagClass.popoverElement.controlElement).toBe(tagClass.dropdownBtn);
+            });
+            it('calls shouldShowActionSheet with "this"', async () => {
+                await tagClass.handleClick(event);
+                expect(shouldShowActionSheetMock).toHaveBeenCalledWith(tagClass);
+            });
+            describe('when shouldShowActionSheet is true', () => {
+                it('calls showActionSheetList with "this" and "event', async () => {
+                    await tagClass.handleClick(event);
+                    expect(showActionSheetListMock).toHaveBeenCalledWith(tagClass, event);
+                });
+                it('emits a click event with the value from showActionSheetList', async () => {
+                    const clickSpy = jest.spyOn(tagClass.click, 'emit');
+                    await tagClass.handleClick(event);
+                    expect(clickSpy).toHaveBeenCalledWith({ value: 'foo' });
+                });
+            });
+            describe('when shouldShowActionSheet is false', () => {
+                it('toggles the popover element', async () => {
+                    shouldShowActionSheetMock.mockReturnValue(false);
+                    const toggleSpy = jest.spyOn(tagClass.popoverElement, 'toggle');
+                    await tagClass.handleClick(event);
+                    expect(toggleSpy).toHaveBeenCalled();
+                });
+            });
+        });
+        describe('handleKeydown', () => {
+            beforeEach(async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                showActionSheetListMock.mockReturnValue({ value: 'foo' });
+                tagClass.open = true;
+                tagClass.optionList.handleExternalKeydown = jest.fn();
+                event = new KeyboardEvent('keydown', { key: 'Enter' });
+            });
+            it('calls preventDefault', async () => {
+                const preventSpy = jest.spyOn(event, 'preventDefault');
+                tagClass.handleKeydown(event);
+                expect(preventSpy).toHaveBeenCalled();
+            });
+            it('assigns popover controlElement to dropdownBtn', async () => {
+                tagClass.popoverElement.controlElement = null;
+                await tagClass.handleKeydown(event);
+                expect(tagClass.popoverElement.controlElement).toBe(tagClass.dropdownBtn);
+            });
+            describe('when shouldShowActionSheet is true', () => {
+                it('calls showActionSheetList with "this" and "event"', async () => {
+                    shouldShowActionSheetMock.mockReturnValue(true);
+                    await tagClass.handleKeydown(event);
+                    expect(showActionSheetListMock).toHaveBeenCalledWith(tagClass, event);
+                });
+                it('calls focus() on the dropdown button', async () => {
+                    shouldShowActionSheetMock.mockReturnValue(true);
+                    spy = jest.spyOn(tagClass.dropdownBtn, 'focus');
+                    await tagClass.handleKeydown(event);
+                    expect(spy).toHaveBeenCalled();
+                });
+                it('emits a click event with the value from showActionSheetList', async () => {
+                    shouldShowActionSheetMock.mockReturnValue(true);
+                    spy = jest.spyOn(tagClass.click, 'emit');
+                    await tagClass.handleKeydown(event);
+                    expect(spy).toHaveBeenCalledWith({ value: 'foo' });
+                });
+            });
+            describe('when shouldShowActionSheet is false', () => {
+                it('calls optionList.handleExternalKeydown with the event', async () => {
+                    shouldShowActionSheetMock.mockReturnValue(false);
+                    await tagClass.handleKeydown(event);
+                    expect(tagClass.optionList.handleExternalKeydown).toHaveBeenCalledWith(event);
+                });
+            });
+        });
+        describe('handleWrapperClick', () => {
+            beforeEach(async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                tagClass.handleClick = jest.fn();
+                tagClass.popoverElement.toggle = jest.fn();
+                button = tagClass.dropdownBtn;
+            });
+            it('calls focus() on the dropdown button', async () => {
+                spy = jest.spyOn(button, 'focus');
+                tagClass.handleWrapperClick();
+                expect(spy).toHaveBeenCalled();
+            });
+            it('calls click() on the dropdown button', async () => {
+                spy = jest.spyOn(button, 'click');
+                tagClass.handleWrapperClick();
+                expect(spy).toHaveBeenCalled();
+            });
+        });
+        describe('onClickElsewhere', () => {
+            describe('when the target is click-elsewhere', () => {
+                beforeEach(async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Tag],
+                        html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                    }, testStringsDict);
+                    tagClass = specPage.rootInstance;
+                    event = new CustomEvent('click');
+                    event.target = { localName: 'click-elsewhere' };
+                });
+                it('calls stopPropagation', async () => {
+                    spy = jest.spyOn(event, 'stopPropagation');
+                    tagClass.onClickElsewhere(event);
+                    expect(spy).toHaveBeenCalled();
+                });
+                it('sets popoverElement "open" prop to false when element is present', async () => {
+                    tagClass.open = true;
+                    tagClass.popoverElement = { open: true };
+                    tagClass.onClickElsewhere(event);
+                    expect(tagClass.popoverElement.open).toBe(false);
+                });
+                it('does not change popoverElement "open" prop when element is not present', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Tag],
+                        html: `<q2-tag></q2-tag>`,
+                    }, testStringsDict);
+                    tagClass = specPage.rootInstance;
+                    event = new CustomEvent('click');
+                    event.target = { localName: 'click-elsewhere' };
+                    tagClass.onClickElsewhere(event);
+                    expect(tagClass.popoverElement).toBeUndefined();
+                });
+            });
+            describe('when the target is not click-elsewhere', () => {
+                it('does nothing', async () => {
+                    event.target = { localName: 'not-click-elsewhere' };
+                    spy = jest.spyOn(event, 'stopPropagation');
+                    tagClass.onClickElsewhere(event);
+                    expect(spy).not.toHaveBeenCalled();
+                });
+            });
+        });
+    });
+    describe('Render Methods', () => {
+        describe('renderHiddenElement', () => {
+            it('fires when options are provided', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.optionCount).toBeGreaterThan(0);
+                spy = jest.spyOn(tagClass, 'renderHiddenElement');
+                tagClass.render();
+                expect(spy).toHaveBeenCalled();
+            });
+            it('does not fire when no options are provided', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Tag],
+                    html: `<q2-tag></q2-tag>`,
+                }, testStringsDict);
+                tagClass = specPage.rootInstance;
+                expect(tagClass.optionCount).toBe(0);
+                spy = jest.spyOn(tagClass, 'renderHiddenElement');
+                tagClass.render();
+                expect(spy).not.toHaveBeenCalled();
+            });
+        });
+        describe('render', () => {
+            describe('when options are NOT provided', () => {
+                beforeEach(async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Tag],
+                        html: `<q2-tag></q2-tag>`,
+                    }, testStringsDict);
+                    tagClass = specPage.rootInstance;
+                    tagElement = specPage.root;
+                });
+                it('renders the tag-wrapper as a div', async () => {
+                    const tagWrapper = tagElement.shadowRoot.querySelector('.tag-wrapper');
+                    expect(tagWrapper.tagName).toBe('DIV');
+                });
+                it('zero does not render inside the click-elsewhere element', async () => {
+                    tagClass.label = 'My Tag';
+                    const clickElsewhere = tagElement.shadowRoot.querySelector('click-elsewhere');
+                    expect(clickElsewhere.textContent.slice(-1)).not.toBe('0');
+                });
+                it('does not render button by default', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Tag],
+                        html: `<q2-tag></q2-tag>`,
+                    }, testStringsDict);
+                    tagClass = specPage.rootInstance;
+                    expect(tagClass.dropdownBtn).toBeUndefined();
+                });
+                it('does not render the option list by default', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Tag],
+                        html: `<q2-tag></q2-tag>`,
+                    }, testStringsDict);
+                    tagClass = specPage.rootInstance;
+                    expect(tagClass.optionList).toBeUndefined();
+                });
+            });
+            describe('when options are provided', () => {
+                it('renders the tag-wrapper as a button', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Tag],
+                        html: `<q2-tag><q2-option></q2-option></q2-tag>`,
+                    }, testStringsDict);
+                    tagClass = specPage.rootInstance;
+                    tagElement = specPage.root;
+                    const tagWrapper = tagElement.shadowRoot.querySelector('.tag-wrapper');
+                    expect(tagWrapper.tagName).toBe('BUTTON');
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=q2-tag-test.spec.js.map