q2-tecton-elements 1.54.3 → 1.55.0

package/dist/collection/components/q2-action-group/q2-action-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-action-group.js","sourceRoot":"","sources":["../../../src/components/q2-action-group/q2-action-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Q2ResizeObserverCustomEvent } from '@/components';\nimport { nextPaint } from '@/utils';\nimport { Component, ComponentInterface, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'q2-action-group',\n    styleUrl: 'q2-action-group.scss',\n    shadow: true,\n})\nexport class Q2ActionGroup implements ComponentInterface {\n    // #region Own Properties\n\n    container: HTMLDivElement;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    autoOrientation: 'vertical' | 'horizontal' = 'vertical';\n\n    @State()\n    hasQ2Link: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Whether the buttons should take up the full width of the container when in horizontal orientation.\n     *\n     * @warning\n     * This will prevent the buttons from wrapping when the container is too small to fit all buttons.\n     */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /**\n     * The orientation of the buttons, which will override the auto orientation.\n     *\n     * @info\n     * This will override and disable the auto determination of the orientation.\n     */\n    @Prop({ reflect: true })\n    orientation: 'auto' | 'vertical' | 'horizontal' = 'auto';\n\n    /**\n     * The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation\n     *\n     * @info\n     * The component determines this based on the width of the element itself, not the browser window.\n     */\n    @Prop({ reflect: false })\n    orientationThreshold: number = 440;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentDidLoad() {\n        this.checkForQ2Link();\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('orientation')\n    toggleHiddenForOneFrame() {\n        const { container } = this;\n        container.style.display = 'none';\n        // Fixes Safari not making the buttons fill the container when going from horizontal and full-width to vertical\n        nextPaint(() =>\n            nextPaint(() => {\n                container.style.display = null;\n            })\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedOrientation(): 'vertical' | 'horizontal' {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation === 'auto' ? this.autoOrientation : orientation;\n    }\n\n    get shouldDisableResizeObserver(): boolean {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation !== 'auto';\n    }\n\n    checkForQ2Link = () => {\n        const links = this.hostElement.querySelectorAll('q2-link');\n        this.hasQ2Link = links.length > 0;\n    };\n\n    handleResize = (\n        event: Q2ResizeObserverCustomEvent<{\n            entries: ResizeObserverEntry[];\n        }>\n    ) => {\n        const width = event.detail.entries[0].contentRect.width;\n        const shouldBeVertical = this.orientationThreshold > width;\n        this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n    };\n\n    onMutationObserved = () => {\n        this.checkForQ2Link();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { shouldDisableResizeObserver, computedOrientation, fullWidth, hasQ2Link } = this;\n        const containerClassNames = ['container'];\n        if (fullWidth && computedOrientation === 'horizontal') containerClassNames.push('full-width');\n        if (hasQ2Link) containerClassNames.push('has-q2-link');\n        containerClassNames.push(computedOrientation);\n\n        return (\n            <q2-resize-observer\n                onTctResize={this.handleResize}\n                disabled={shouldDisableResizeObserver}\n            >\n                <div\n                    ref={el => (this.container = el)}\n                    class={containerClassNames.join(' ')}\n                    role=\"group\"\n                >\n                    <slot />\n                </div>\n            </q2-resize-observer>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-action-group.js","sourceRoot":"","sources":["../../../../src/components/q2-action-group/q2-action-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO9F,MAAM,OAAO,aAAa;;QAsGtB,0BAAqB,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,CAAC,iBAAiB,IAAI,MAAM,CAAC;gBAAE,OAAO;YAC3C,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC;YACrC,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC/D,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YAC/E,IAAI,CAAC,gBAAgB,CAAC,MAAM;gBAAE,OAAO;YAErC,qDAAqD;YACrD,MAAM,gBAAgB,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;YAC/C,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,gBAAgB,CAAC,MAAM,CACrD,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE;gBACR,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC;oBACxD,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC;oBACzB,GAAG,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,MAAM,CAAC;gBAC5D,CAAC;gBACD,MAAM,MAAM,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBACzC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,KAAK,EAAE,CAAC,OAAO,CAAC;gBACnD,MAAM,kBAAkB,GAAG,GAAG,CAAC,YAAY,IAAI,MAAM,KAAK,MAAM,CAAC;gBAEjE,IAAI,eAAe,IAAI,kBAAkB;oBAAE,EAAE,CAAC,MAAM,EAAE,CAAC;gBAEvD,OAAO,GAAG,CAAC;YACf,CAAC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,CACzC,CAAC;YAEF,MAAM,uBAAuB,GAAG,mBAAmB,KAAK,UAAU,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,YAAY,CAAC,CAAC;YAC9G,IAAI,uBAAuB,EAAE,CAAC;gBAC1B,OAAO,CAAC,IAAI,CACR,6IAA6I,CAChJ,CAAC;gBACF,IAAI,CAAC,WAAW,GAAG,YAAY,CAAC;YACpC,CAAC;YACD,MAAM,eAAe,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;YACnE,IAAI,CAAC,cAAc,GAAG,eAAe,CAAC,WAAW,EAAE,CAAC;QACxD,CAAC,CAAC;QAEF,iBAAY,GAAG,CACX,KAEE,EACJ,EAAE;YACA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;YACxD,MAAM,gBAAgB,GAAG,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;YAC3D,IAAI,CAAC,eAAe,GAAG,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC;QACxE,CAAC,CAAC;QAEF,yBAAoB,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,CAAC,kBAAkB,IAAI,MAAM,CAAC;gBAAE,OAAO;YAC5C,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC/D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YACvE,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACrC,CAAC,CAAC;QAEF,uBAAkB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACjC,CAAC,CAAC;+BA9I2C,UAAU;;;2BA2BL,MAAM;oCASzB,GAAG;;IAElC,aAAa;IACb,qCAAqC;IAErC,oBAAoB;QAChB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;YACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QACjC,CAAC;IACL,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAChC,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,uBAAuB;QACnB,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACjC,+GAA+G;QAC/G,SAAS,CAAC,GAAG,EAAE,CACX,SAAS,CAAC,GAAG,EAAE;YACX,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;YAC/B,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACjC,CAAC,CAAC,CACL,CAAC;IACN,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,mBAAmB;QACnB,IAAI,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACnC,IAAI,CAAC,WAAW;YAAE,WAAW,GAAG,MAAM,CAAC;QACvC,OAAO,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC;IACvE,CAAC;IAED,IAAI,2BAA2B;QAC3B,IAAI,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACnC,IAAI,CAAC,WAAW;YAAE,WAAW,GAAG,MAAM,CAAC;QACvC,mFAAmF;QACnF,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC;YAAE,OAAO,IAAI,CAAC;QAC1E,OAAO,WAAW,KAAK,MAAM,CAAC;IAClC,CAAC;IA4DD,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,MAAM,EAAE,2BAA2B,EAAE,mBAAmB,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAC7F,MAAM,mBAAmB,GAAG,CAAC,WAAW,CAAC,CAAC;QAC1C,IAAI,SAAS,IAAI,mBAAmB,KAAK,YAAY;YAAE,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9F,IAAI,cAAc;YAAE,mBAAmB,CAAC,IAAI,CAAC,OAAO,cAAc,EAAE,CAAC,CAAC;QACtE,mBAAmB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAE9C,OAAO,CACH,2EACI,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,QAAQ,EAAE,2BAA2B;YAErC,4DACI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAE,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,EACpC,IAAI,EAAC,OAAO;gBAEZ,8DAAQ,CACN,CACW,CACxB,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Q2ResizeObserverCustomEvent } from '@/components';\nimport { nextPaint } from '@/utils';\nimport { Component, ComponentInterface, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'q2-action-group',\n    styleUrl: 'q2-action-group.scss',\n    shadow: true,\n})\nexport class Q2ActionGroup implements ComponentInterface {\n    // #region Own Properties\n\n    container: HTMLDivElement;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    autoOrientation: 'vertical' | 'horizontal' = 'vertical';\n\n    @State()\n    slottedTagName: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Whether the buttons should take up the full width of the container when in horizontal orientation.\n     *\n     * @warning\n     * This will prevent the buttons from wrapping when the container is too small to fit all buttons.\n     */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /**\n     * The orientation of the buttons, which will override the auto orientation.\n     *\n     * @info\n     * This will override and disable the auto determination of the orientation.\n     * @warning\n     * Vertical orientation is not supported for [Links](https://tecton.q2developer.com/design-system/q2-link/)\n     * or `\"coin\"` [Buttons](https://tecton.q2developer.com/design-system/q2-btn/), and will be set to \"horizontal\".\n     */\n    @Prop({ reflect: true })\n    orientation: 'auto' | 'vertical' | 'horizontal' = 'auto';\n\n    /**\n     * The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation\n     *\n     * @info\n     * The component determines this based on the width of the element itself, not the browser window.\n     */\n    @Prop({ reflect: false })\n    orientationThreshold: number = 440;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentDidLoad() {\n        this.filterSlottedElements();\n        this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('orientation')\n    toggleHiddenForOneFrame() {\n        const { container } = this;\n        container.style.display = 'none';\n        // Fixes Safari not making the buttons fill the container when going from horizontal and full-width to vertical\n        nextPaint(() =>\n            nextPaint(() => {\n                container.style.display = null;\n                this.filterSlottedElements();\n            })\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedOrientation(): 'vertical' | 'horizontal' {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation === 'auto' ? this.autoOrientation : orientation;\n    }\n\n    get shouldDisableResizeObserver(): boolean {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        // these are not supported in a 'vertical' orientation, so we will disable resizing\n        if (['q2-btn-coin', 'q2-link'].includes(this.slottedTagName)) return true;\n        return orientation !== 'auto';\n    }\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const { computedOrientation } = this;\n        const slot = this.hostElement.shadowRoot.querySelector('slot');\n        const assignedElements = Array.from(slot?.assignedElements({ flatten: true }));\n        if (!assignedElements.length) return;\n\n        // Remove all elements that are not Q2-BTN or Q2-LINK\n        const approvedElements = ['Q2-BTN', 'Q2-LINK'];\n        const { tagName, isCoinIntent } = assignedElements.reduce(\n            (acc, el) => {\n                if (!acc.tagName && approvedElements.includes(el.tagName)) {\n                    acc.tagName = el.tagName;\n                    acc.isCoinIntent = el.getAttribute('intent') === 'coin';\n                }\n                const intent = el.getAttribute('intent');\n                const tagNameMismatch = acc.tagName !== el.tagName;\n                const coinIntentMismatch = acc.isCoinIntent && intent !== 'coin';\n\n                if (tagNameMismatch || coinIntentMismatch) el.remove();\n\n                return acc;\n            },\n            { tagName: null, isCoinIntent: false }\n        );\n\n        const incompatibleOrientation = computedOrientation === 'vertical' && (tagName === 'Q2-LINK' || isCoinIntent);\n        if (incompatibleOrientation) {\n            console.warn(\n                'Q2-ACTION-GROUP: \"Vertical\" orientation is not supported for Q2-LINK or Q2-BTN with intent=\"coin\". Orientation will be set to \"horizontal\".'\n            );\n            this.orientation = 'horizontal';\n        }\n        const combinedTagName = isCoinIntent ? `${tagName}-coin` : tagName;\n        this.slottedTagName = combinedTagName.toLowerCase();\n    };\n\n    handleResize = (\n        event: Q2ResizeObserverCustomEvent<{\n            entries: ResizeObserverEntry[];\n        }>\n    ) => {\n        const width = event.detail.entries[0].contentRect.width;\n        const shouldBeVertical = this.orientationThreshold > width;\n        this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n    };\n\n    onMutationObserved = () => {\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { shouldDisableResizeObserver, computedOrientation, fullWidth, slottedTagName } = this;\n        const containerClassNames = ['container'];\n        if (fullWidth && computedOrientation === 'horizontal') containerClassNames.push('full-width');\n        if (slottedTagName) containerClassNames.push(`has-${slottedTagName}`);\n        containerClassNames.push(computedOrientation);\n\n        return (\n            <q2-resize-observer\n                onTctResize={this.handleResize}\n                disabled={shouldDisableResizeObserver}\n            >\n                <div\n                    ref={el => (this.container = el)}\n                    class={containerClassNames.join(' ')}\n                    role=\"group\"\n                >\n                    <slot />\n                </div>\n            </q2-resize-observer>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-action-group/test/q2-action-group-test.e2e.js

@@ -0,0 +1,365 @@
+import { setup } from "../../../utils/helpers";
+describe('q2-action-group', () => {
+    let page;
+    let container;
+    const pseudoElementExists = async () => {
+        return page.evaluate(() => {
+            const element = document.querySelector('q2-link:not(:last-child)');
+            if (!element)
+                return false;
+            const beforeStyle = window.getComputedStyle(element, ':before');
+            return beforeStyle.height === '28px' && beforeStyle.width === '0px' && beforeStyle.position === 'absolute';
+        });
+    };
+    const pseudoElementStyles = async () => {
+        return page.evaluate(() => {
+            const element = document.querySelector('q2-link:not(:last-child)');
+            if (!element)
+                return null;
+            const styles = window.getComputedStyle(element, ':before');
+            return Array.from(styles).reduce((acc, key) => {
+                acc[key] = styles.getPropertyValue(key);
+                return acc;
+            }, {});
+        });
+    };
+    const getAssignedElements = async () => {
+        return page.evaluate(() => {
+            var _a, _b;
+            const actionGroup = document.querySelector('q2-action-group');
+            if (!actionGroup)
+                return [];
+            const assignedElements = (_b = (_a = actionGroup.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedElements();
+            return Array.from(assignedElements) || [];
+        });
+    };
+    describe('Methods', () => {
+        describe('filterSlottedElements', () => {
+            describe('className updates', () => {
+                it('does not add has-"tagName" classes if nothing is slotted', async () => {
+                    page = await setup({
+                        html: `<q2-action-group></q2-action-group>`,
+                    });
+                    container = await page.find('q2-action-group >>> .container');
+                    expect(container).not.toHaveClass('has-q2-btn');
+                    expect(container).not.toHaveClass('has-q2-btn-coin');
+                    expect(container).not.toHaveClass('has-q2-link');
+                });
+                it('adds the has-q2-btn class if q2-btn is first element', async () => {
+                    page = await setup({
+                        html: `
+                        <q2-action-group>
+                            <q2-btn label="My Button"></q2-btn>
+                        </q2-action-group>
+                    `,
+                    });
+                    container = await page.find('q2-action-group >>> .container');
+                    expect(container).toHaveClass('has-q2-btn');
+                });
+                it('adds the has-q2-btn-coin class if "coin" q2-btn is first element', async () => {
+                    page = await setup({
+                        html: `
+                        <q2-action-group>
+                            <q2-btn label="My Button" intent="coin"></q2-btn>
+                        </q2-action-group>
+                    `,
+                    });
+                    container = await page.find('q2-action-group >>> .container');
+                    expect(container).toHaveClass('has-q2-btn-coin');
+                });
+                it('adds the has-q2-link class if q2-link is first element', async () => {
+                    page = await setup({
+                        html: `
+                        <q2-action-group>
+                            <q2-link label="My Link"></q2-link>
+                        </q2-action-group>
+                    `,
+                    });
+                    container = await page.find('q2-action-group >>> .container');
+                    expect(container).toHaveClass('has-q2-link');
+                });
+            });
+            describe('DOM Manipulation', () => {
+                it('does not render non-Tecton components', async () => {
+                    page = await setup({
+                        html: `
+                        <q2-action-group>
+                            <div>My Button</div>
+                        </q2-action-group>
+                    `,
+                    });
+                    container = await page.find('q2-action-group >>> .container');
+                    expect(container).not.toHaveClass('has-q2-btn');
+                    expect(container).not.toHaveClass('has-q2-btn-coin');
+                    expect(container).not.toHaveClass('has-q2-link');
+                    const assignedElements = await getAssignedElements();
+                    expect(assignedElements.length).toBe(0);
+                });
+                it('removes any element that does not match the first element tagName', async () => {
+                    page = await setup({
+                        html: `
+                        <q2-action-group>
+                            <q2-btn label="My Button"></q2-btn>
+                            <q2-link label="My Link"></q2-link>
+                        </q2-action-group>
+                    `,
+                    });
+                    container = await page.find('q2-action-group >>> .container');
+                    expect(container).toHaveClass('has-q2-btn');
+                    const assignedElements = await getAssignedElements();
+                    expect(assignedElements.length).toBe(1);
+                });
+                it('when first element is a "coin" q2-btn, removes any non-"coin" q2-btn elements', async () => {
+                    page = await setup({
+                        html: `
+                        <q2-action-group>
+                            <q2-btn label="My Button" intent="coin"></q2-btn>
+                            <q2-btn label="My Button"></q2-btn>
+                            <q2-link label="My Link"></q2-link>
+                        </q2-action-group>
+                    `,
+                    });
+                    container = await page.find('q2-action-group >>> .container');
+                    expect(container).toHaveClass('has-q2-btn-coin');
+                    const assignedElements = await getAssignedElements();
+                    expect(assignedElements.length).toBe(1);
+                });
+                it('removes non-Tecton elements', async () => {
+                    page = await setup({
+                        html: `
+                        <q2-action-group>
+                            <div>My Button</div>
+                            <q2-btn label="My Button"></q2-btn>
+                        </q2-action-group>
+                    `,
+                    });
+                    container = await page.find('q2-action-group >>> .container');
+                    const assignedElements = await getAssignedElements();
+                    expect(container).toHaveClass('has-q2-btn');
+                    expect(assignedElements.length).toBe(1);
+                });
+            });
+            describe('"orientation" prop updates', () => {
+                it('sets "orientation" to horizontal when used with "coin" q2-btn', async () => {
+                    page = await setup({
+                        html: `
+                        <q2-action-group>
+                            <q2-btn label="My Button" intent="coin"></q2-btn>
+                            <q2-btn label="My Button" intent="coin"></q2-btn>
+                        </q2-action-group>
+                    `,
+                    });
+                    container = await page.find('q2-action-group >>> .container');
+                    const actionGroup = await page.find('q2-action-group');
+                    const orientation = await actionGroup.getProperty('orientation');
+                    expect(orientation).toBe('horizontal');
+                });
+                it('sets "orientation" to horizontal when used with q2-link', async () => {
+                    page = await setup({
+                        html: `
+                        <q2-action-group>
+                            <q2-link label="My Link"></q2-link>
+                            <q2-link label="My Link"></q2-link>
+                        </q2-action-group>
+                    `,
+                    });
+                    container = await page.find('q2-action-group >>> .container');
+                    const actionGroup = await page.find('q2-action-group');
+                    const orientation = await actionGroup.getProperty('orientation');
+                    expect(orientation).toBe('horizontal');
+                });
+                describe('when "orientation" evaluates to "vertical"', () => {
+                    describe('when used with "coin" q2-btn', () => {
+                        it('changes "orientation" to horizontal', async () => {
+                            page = await setup({
+                                html: `
+                                <q2-action-group orientation="vertical">
+                                    <q2-btn label="My Button" intent="coin"></q2-btn>
+                                    <q2-btn label="My Button" intent="coin"></q2-btn>
+                                </q2-action-group>
+                            `,
+                            });
+                            container = await page.find('q2-action-group >>> .container');
+                            const actionGroup = await page.find('q2-action-group');
+                            const orientation = await actionGroup.getProperty('orientation');
+                            expect(container).toHaveClass('horizontal');
+                            expect(orientation).toBe('horizontal');
+                        });
+                        it('emits a console warning', async () => {
+                            const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+                            page = await setup({
+                                html: `
+                                <q2-action-group orientation="vertical">
+                                    <q2-btn label="My Button" intent="coin"></q2-btn>
+                                    <q2-btn label="My Button" intent="coin"></q2-btn>
+                                </q2-action-group>
+                            `,
+                            });
+                            expect(consoleSpy).toHaveBeenCalled();
+                            consoleSpy.mockRestore();
+                        });
+                    });
+                    describe('when used with q2-link', () => {
+                        it('changes "orientation" to "horizontal"', async () => {
+                            page = await setup({
+                                html: `
+                                <q2-action-group orientation="vertical">
+                                    <q2-link label="My Link"></q2-link>
+                                    <q2-link label="My Link"></q2-link>
+                                </q2-action-group>
+                            `,
+                            });
+                            container = await page.find('q2-action-group >>> .container');
+                            const actionGroup = await page.find('q2-action-group');
+                            const orientation = await actionGroup.getProperty('orientation');
+                            expect(container).toHaveClass('horizontal');
+                            expect(orientation).toBe('horizontal');
+                        });
+                        it('emits a console warning', async () => {
+                            const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+                            page = await setup({
+                                html: `
+                                <q2-action-group orientation="vertical">
+                                    <q2-link label="My Button"></q2-link>
+                                    <q2-link label="My Button"></q2-link>
+                                </q2-action-group>
+                            `,
+                            });
+                            expect(consoleSpy).toHaveBeenCalled();
+                            consoleSpy.mockRestore();
+                        });
+                    });
+                });
+            });
+        });
+    });
+    describe('q2-link interactions', () => {
+        let hasPseudoElement;
+        describe('when q2-link elements are not present', () => {
+            it('does not add :before pseudo-elements', async () => {
+                page = await setup({
+                    html: `
+                    <q2-action-group>
+                        <q2-btn label="My Button"></q2-btn>
+                        <q2-btn label="My Button"></q2-btn>
+                    </q2-action-group>
+                `,
+                });
+                hasPseudoElement = await pseudoElementExists();
+                expect(hasPseudoElement).toBe(false);
+            });
+            it('keeps the container gap value at default 10px', async () => {
+                page = await setup({ html: `<q2-action-group></q2-action-group>` });
+                const container = await page.find('q2-action-group >>> .container');
+                const computedStyle = await container.getComputedStyle();
+                expect(computedStyle.gap).toBe('10px');
+            });
+        });
+        describe('when q2-link elements are present', () => {
+            it('updates the container gap value to 20px', async () => {
+                page = await setup({
+                    html: `
+                            <q2-action-group>
+                                <q2-link label="My Link"></q2-link>
+                                <q2-link label="My Link"></q2-link>
+                            </q2-action-group>
+                        `,
+                });
+                const container = await page.find('q2-action-group >>> .container');
+                const computedStyle = await container.getComputedStyle();
+                expect(computedStyle.gap).toBe('20px');
+            });
+        });
+        describe(':before pseudo-element', () => {
+            it('does not exist if only 1 q2-link is provided', async () => {
+                page = await setup({
+                    html: `
+                        <q2-action-group>
+                            <q2-link label="My Link"></q2-link>
+                        </q2-action-group>
+                    `,
+                });
+                hasPseudoElement = await pseudoElementExists();
+                expect(hasPseudoElement).toBe(false);
+            });
+            it('does exist if orientation is "horizontal"', async () => {
+                page = await setup({
+                    html: `
+                        <q2-action-group orientation="horizontal">
+                            <q2-link label="My Link"></q2-link>
+                            <q2-link label="My Link"></q2-link>
+                        </q2-action-group>
+                    `,
+                });
+                hasPseudoElement = await pseudoElementExists();
+                expect(hasPseudoElement).toBe(true);
+            });
+            it('sets the pseudo-element styles correctly', async () => {
+                page = await setup({
+                    html: `
+                        <q2-action-group>
+                            <q2-link label="My Link"></q2-link>
+                            <q2-link label="My Link"></q2-link>
+                        </q2-action-group>
+                    `,
+                });
+                const expectedPseudoStyles = {
+                    content: '""',
+                    width: '0px',
+                    height: '28px',
+                    'border-left-width': '1px',
+                    'border-left-style': 'solid',
+                    'border-left-color': 'rgb(217, 217, 217)',
+                    position: 'absolute',
+                    left: '-10px',
+                };
+                const pseudoStyles = await pseudoElementStyles();
+                Object.entries(expectedPseudoStyles).forEach(([cssProp, value]) => {
+                    expect(pseudoStyles[cssProp]).toBe(value);
+                });
+            });
+        });
+    });
+    describe('q2-btn coin intent styles', () => {
+        it('sets column-gap to 5px', async () => {
+            page = await setup({
+                html: `
+                    <q2-action-group>
+                        <q2-btn label="My Button" intent="coin"></q2-btn>
+                        <q2-btn label="My Button" intent="coin"></q2-btn>
+                    </q2-action-group>
+                `,
+            });
+            const container = await page.find('q2-action-group >>> .container');
+            const computedStyle = await container.getComputedStyle();
+            expect(computedStyle.columnGap).toBe('5px');
+        });
+        it('sets row-gap to 25px', async () => {
+            page = await setup({
+                html: `
+                    <q2-action-group orientation="vertical">
+                        <q2-btn label="My Button" intent="coin"></q2-btn>
+                        <q2-btn label="My Button" intent="coin"></q2-btn>
+                    </q2-action-group>
+                `,
+            });
+            const container = await page.find('q2-action-group >>> .container');
+            const computedStyle = await container.getComputedStyle();
+            expect(computedStyle.rowGap).toBe('25px');
+        });
+        it('sets justify-content to center', async () => {
+            page = await setup({
+                html: `
+                    <q2-action-group>
+                        <q2-btn label="My Button" intent="coin"></q2-btn>
+                        <q2-btn label="My Button" intent="coin"></q2-btn>
+                    </q2-action-group>
+                `,
+            });
+            const container = await page.find('q2-action-group >>> .container');
+            const computedStyle = await container.getComputedStyle();
+            expect(computedStyle.justifyContent).toBe('center');
+        });
+    });
+});
+//# sourceMappingURL=q2-action-group-test.e2e.js.map

package/dist/collection/components/q2-action-group/test/q2-action-group-test.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-action-group-test.e2e.js","sourceRoot":"","sources":["../../../../../src/components/q2-action-group/test/q2-action-group-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EPage } from '@stencil/core/testing';\nimport { setup } from '@/utils/helpers';\n\ndescribe('q2-action-group', () => {\n    let page: E2EPage;\n    let container;\n\n    const pseudoElementExists = async (): Promise<boolean> => {\n        return page.evaluate(() => {\n            const element = document.querySelector('q2-link:not(:last-child)');\n            if (!element) return false;\n            const beforeStyle = window.getComputedStyle(element, ':before');\n            return beforeStyle.height === '28px' && beforeStyle.width === '0px' && beforeStyle.position === 'absolute';\n        });\n    };\n\n    const pseudoElementStyles = async (): Promise<Record<string, string> | null> => {\n        return page.evaluate(() => {\n            const element = document.querySelector('q2-link:not(:last-child)');\n            if (!element) return null;\n            const styles = window.getComputedStyle(element, ':before');\n            return Array.from(styles).reduce(\n                (acc, key) => {\n                    acc[key] = styles.getPropertyValue(key);\n                    return acc;\n                },\n                {} as Record<string, string>\n            );\n        });\n    };\n\n    const getAssignedElements = async (): Promise<Element[]> => {\n        return page.evaluate(() => {\n            const actionGroup = document.querySelector('q2-action-group');\n            if (!actionGroup) return [];\n            const assignedElements = actionGroup.shadowRoot?.querySelector('slot')?.assignedElements();\n            return Array.from(assignedElements) || [];\n        });\n    };\n\n    describe('Methods', () => {\n        describe('filterSlottedElements', () => {\n            describe('className updates', () => {\n                it('does not add has-\"tagName\" classes if nothing is slotted', async () => {\n                    page = await setup({\n                        html: `<q2-action-group></q2-action-group>`,\n                    });\n                    container = await page.find('q2-action-group >>> .container');\n                    expect(container).not.toHaveClass('has-q2-btn');\n                    expect(container).not.toHaveClass('has-q2-btn-coin');\n                    expect(container).not.toHaveClass('has-q2-link');\n                });\n\n                it('adds the has-q2-btn class if q2-btn is first element', async () => {\n                    page = await setup({\n                        html: `\n                        <q2-action-group>\n                            <q2-btn label=\"My Button\"></q2-btn>\n                        </q2-action-group>\n                    `,\n                    });\n                    container = await page.find('q2-action-group >>> .container');\n                    expect(container).toHaveClass('has-q2-btn');\n                });\n\n                it('adds the has-q2-btn-coin class if \"coin\" q2-btn is first element', async () => {\n                    page = await setup({\n                        html: `\n                        <q2-action-group>\n                            <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                        </q2-action-group>\n                    `,\n                    });\n                    container = await page.find('q2-action-group >>> .container');\n                    expect(container).toHaveClass('has-q2-btn-coin');\n                });\n\n                it('adds the has-q2-link class if q2-link is first element', async () => {\n                    page = await setup({\n                        html: `\n                        <q2-action-group>\n                            <q2-link label=\"My Link\"></q2-link>\n                        </q2-action-group>\n                    `,\n                    });\n                    container = await page.find('q2-action-group >>> .container');\n                    expect(container).toHaveClass('has-q2-link');\n                });\n            });\n            describe('DOM Manipulation', () => {\n                it('does not render non-Tecton components', async () => {\n                    page = await setup({\n                        html: `\n                        <q2-action-group>\n                            <div>My Button</div>\n                        </q2-action-group>\n                    `,\n                    });\n                    container = await page.find('q2-action-group >>> .container');\n                    expect(container).not.toHaveClass('has-q2-btn');\n                    expect(container).not.toHaveClass('has-q2-btn-coin');\n                    expect(container).not.toHaveClass('has-q2-link');\n                    const assignedElements = await getAssignedElements();\n                    expect(assignedElements.length).toBe(0);\n                });\n\n                it('removes any element that does not match the first element tagName', async () => {\n                    page = await setup({\n                        html: `\n                        <q2-action-group>\n                            <q2-btn label=\"My Button\"></q2-btn>\n                            <q2-link label=\"My Link\"></q2-link>\n                        </q2-action-group>\n                    `,\n                    });\n                    container = await page.find('q2-action-group >>> .container');\n                    expect(container).toHaveClass('has-q2-btn');\n                    const assignedElements = await getAssignedElements();\n                    expect(assignedElements.length).toBe(1);\n                });\n\n                it('when first element is a \"coin\" q2-btn, removes any non-\"coin\" q2-btn elements', async () => {\n                    page = await setup({\n                        html: `\n                        <q2-action-group>\n                            <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                            <q2-btn label=\"My Button\"></q2-btn>\n                            <q2-link label=\"My Link\"></q2-link>\n                        </q2-action-group>\n                    `,\n                    });\n                    container = await page.find('q2-action-group >>> .container');\n                    expect(container).toHaveClass('has-q2-btn-coin');\n                    const assignedElements = await getAssignedElements();\n                    expect(assignedElements.length).toBe(1);\n                });\n\n                it('removes non-Tecton elements', async () => {\n                    page = await setup({\n                        html: `\n                        <q2-action-group>\n                            <div>My Button</div>\n                            <q2-btn label=\"My Button\"></q2-btn>\n                        </q2-action-group>\n                    `,\n                    });\n                    container = await page.find('q2-action-group >>> .container');\n                    const assignedElements = await getAssignedElements();\n                    expect(container).toHaveClass('has-q2-btn');\n                    expect(assignedElements.length).toBe(1);\n                });\n            });\n\n            describe('\"orientation\" prop updates', () => {\n                it('sets \"orientation\" to horizontal when used with \"coin\" q2-btn', async () => {\n                    page = await setup({\n                        html: `\n                        <q2-action-group>\n                            <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                            <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                        </q2-action-group>\n                    `,\n                    });\n                    container = await page.find('q2-action-group >>> .container');\n                    const actionGroup = await page.find('q2-action-group');\n                    const orientation = await actionGroup.getProperty('orientation');\n                    expect(orientation).toBe('horizontal');\n                });\n\n                it('sets \"orientation\" to horizontal when used with q2-link', async () => {\n                    page = await setup({\n                        html: `\n                        <q2-action-group>\n                            <q2-link label=\"My Link\"></q2-link>\n                            <q2-link label=\"My Link\"></q2-link>\n                        </q2-action-group>\n                    `,\n                    });\n                    container = await page.find('q2-action-group >>> .container');\n                    const actionGroup = await page.find('q2-action-group');\n                    const orientation = await actionGroup.getProperty('orientation');\n                    expect(orientation).toBe('horizontal');\n                });\n\n                describe('when \"orientation\" evaluates to \"vertical\"', () => {\n                    describe('when used with \"coin\" q2-btn', () => {\n                        it('changes \"orientation\" to horizontal', async () => {\n                            page = await setup({\n                                html: `\n                                <q2-action-group orientation=\"vertical\">\n                                    <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                                    <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                                </q2-action-group>\n                            `,\n                            });\n                            container = await page.find('q2-action-group >>> .container');\n                            const actionGroup = await page.find('q2-action-group');\n                            const orientation = await actionGroup.getProperty('orientation');\n                            expect(container).toHaveClass('horizontal');\n                            expect(orientation).toBe('horizontal');\n                        });\n\n                        it('emits a console warning', async () => {\n                            const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();\n                            page = await setup({\n                                html: `\n                                <q2-action-group orientation=\"vertical\">\n                                    <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                                    <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                                </q2-action-group>\n                            `,\n                            });\n                            expect(consoleSpy).toHaveBeenCalled();\n                            consoleSpy.mockRestore();\n                        });\n                    });\n\n                    describe('when used with q2-link', () => {\n                        it('changes \"orientation\" to \"horizontal\"', async () => {\n                            page = await setup({\n                                html: `\n                                <q2-action-group orientation=\"vertical\">\n                                    <q2-link label=\"My Link\"></q2-link>\n                                    <q2-link label=\"My Link\"></q2-link>\n                                </q2-action-group>\n                            `,\n                            });\n                            container = await page.find('q2-action-group >>> .container');\n                            const actionGroup = await page.find('q2-action-group');\n                            const orientation = await actionGroup.getProperty('orientation');\n                            expect(container).toHaveClass('horizontal');\n                            expect(orientation).toBe('horizontal');\n                        });\n\n                        it('emits a console warning', async () => {\n                            const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();\n                            page = await setup({\n                                html: `\n                                <q2-action-group orientation=\"vertical\">\n                                    <q2-link label=\"My Button\"></q2-link>\n                                    <q2-link label=\"My Button\"></q2-link>\n                                </q2-action-group>\n                            `,\n                            });\n                            expect(consoleSpy).toHaveBeenCalled();\n                            consoleSpy.mockRestore();\n                        });\n                    });\n                });\n            });\n        });\n    });\n\n    describe('q2-link interactions', () => {\n        let hasPseudoElement: boolean;\n        describe('when q2-link elements are not present', () => {\n            it('does not add :before pseudo-elements', async () => {\n                page = await setup({\n                    html: `\n                    <q2-action-group>\n                        <q2-btn label=\"My Button\"></q2-btn>\n                        <q2-btn label=\"My Button\"></q2-btn>\n                    </q2-action-group>\n                `,\n                });\n                hasPseudoElement = await pseudoElementExists();\n                expect(hasPseudoElement).toBe(false);\n            });\n\n            it('keeps the container gap value at default 10px', async () => {\n                page = await setup({ html: `<q2-action-group></q2-action-group>` });\n                const container = await page.find('q2-action-group >>> .container');\n                const computedStyle = await container.getComputedStyle();\n                expect(computedStyle.gap).toBe('10px');\n            });\n        });\n\n        describe('when q2-link elements are present', () => {\n            it('updates the container gap value to 20px', async () => {\n                page = await setup({\n                    html: `\n                            <q2-action-group>\n                                <q2-link label=\"My Link\"></q2-link>\n                                <q2-link label=\"My Link\"></q2-link>\n                            </q2-action-group>\n                        `,\n                });\n                const container = await page.find('q2-action-group >>> .container');\n                const computedStyle = await container.getComputedStyle();\n                expect(computedStyle.gap).toBe('20px');\n            });\n        });\n\n        describe(':before pseudo-element', () => {\n            it('does not exist if only 1 q2-link is provided', async () => {\n                page = await setup({\n                    html: `\n                        <q2-action-group>\n                            <q2-link label=\"My Link\"></q2-link>\n                        </q2-action-group>\n                    `,\n                });\n                hasPseudoElement = await pseudoElementExists();\n                expect(hasPseudoElement).toBe(false);\n            });\n\n            it('does exist if orientation is \"horizontal\"', async () => {\n                page = await setup({\n                    html: `\n                        <q2-action-group orientation=\"horizontal\">\n                            <q2-link label=\"My Link\"></q2-link>\n                            <q2-link label=\"My Link\"></q2-link>\n                        </q2-action-group>\n                    `,\n                });\n                hasPseudoElement = await pseudoElementExists();\n                expect(hasPseudoElement).toBe(true);\n            });\n\n            it('sets the pseudo-element styles correctly', async () => {\n                page = await setup({\n                    html: `\n                        <q2-action-group>\n                            <q2-link label=\"My Link\"></q2-link>\n                            <q2-link label=\"My Link\"></q2-link>\n                        </q2-action-group>\n                    `,\n                });\n                const expectedPseudoStyles = {\n                    content: '\"\"',\n                    width: '0px',\n                    height: '28px',\n                    'border-left-width': '1px',\n                    'border-left-style': 'solid',\n                    'border-left-color': 'rgb(217, 217, 217)',\n                    position: 'absolute',\n                    left: '-10px',\n                };\n                const pseudoStyles = await pseudoElementStyles();\n                Object.entries(expectedPseudoStyles).forEach(([cssProp, value]) => {\n                    expect(pseudoStyles[cssProp]).toBe(value);\n                });\n            });\n        });\n    });\n\n    describe('q2-btn coin intent styles', () => {\n        it('sets column-gap to 5px', async () => {\n            page = await setup({\n                html: `\n                    <q2-action-group>\n                        <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                        <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                    </q2-action-group>\n                `,\n            });\n            const container = await page.find('q2-action-group >>> .container');\n            const computedStyle = await container.getComputedStyle();\n            expect(computedStyle.columnGap).toBe('5px');\n        });\n\n        it('sets row-gap to 25px', async () => {\n            page = await setup({\n                html: `\n                    <q2-action-group orientation=\"vertical\">\n                        <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                        <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                    </q2-action-group>\n                `,\n            });\n            const container = await page.find('q2-action-group >>> .container');\n            const computedStyle = await container.getComputedStyle();\n            expect(computedStyle.rowGap).toBe('25px');\n        });\n\n        it('sets justify-content to center', async () => {\n            page = await setup({\n                html: `\n                    <q2-action-group>\n                        <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                        <q2-btn label=\"My Button\" intent=\"coin\"></q2-btn>\n                    </q2-action-group>\n                `,\n            });\n            const container = await page.find('q2-action-group >>> .container');\n            const computedStyle = await container.getComputedStyle();\n            expect(computedStyle.justifyContent).toBe('center');\n        });\n    });\n});\n"]}

package/dist/collection/components/q2-action-group/test/{q2-action-group.spec.js → q2-action-group-test.spec.js}

@@ -10,6 +10,26 @@ describe('q2-action-group', () => {
             },
         });
     };
+    describe('State', () => {
+        describe('autoOrientation', () => {
+            it('defaults to "vertical"', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2ActionGroup],
+                    html: `<q2-action-group></q2-action-group>`,
+                });
+                expect(specPage.rootInstance.autoOrientation).toEqual('vertical');
+            });
+        });
+        describe('slottedTagName', () => {
+            it('defaults to "null"', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2ActionGroup],
+                    html: `<q2-action-group></q2-action-group>`,
+                });
+                expect(specPage.rootInstance.slottedTagName).toBeUndefined();
+            });
+        });
+    });
     describe('Props', () => {
         describe('orientationThreshold', () => {
             beforeEach(async () => {
@@ -112,14 +132,27 @@ describe('q2-action-group', () => {
             });
         });
     });
-    describe('State', () => {
-        describe('autoOrientation', () => {
-            it('defaults to "vertical"', async () => {
+    describe('Lifecycle Methods', () => {
+        describe('componentDidLoad', () => {
+            it('calls filterSlottedElements', async () => {
                 specPage = await newSpecPage({
                     components: [Q2ActionGroup],
                     html: `<q2-action-group></q2-action-group>`,
                 });
-                expect(specPage.rootInstance.autoOrientation).toEqual('vertical');
+                groupClass = specPage.rootInstance;
+                const filterSlottedElementsSpy = jest.spyOn(groupClass, 'filterSlottedElements');
+                groupClass.componentDidLoad();
+                expect(filterSlottedElementsSpy).toHaveBeenCalled();
+            });
+            it('calls initMutationObserver', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2ActionGroup],
+                    html: `<q2-action-group></q2-action-group>`,
+                });
+                groupClass = specPage.rootInstance;
+                const initMutationObserverSpy = jest.spyOn(groupClass, 'initMutationObserver');
+                groupClass.componentDidLoad();
+                expect(initMutationObserverSpy).toHaveBeenCalled();
             });
         });
     });
@@ -209,44 +242,52 @@ describe('q2-action-group', () => {
                     expect(specPage.rootInstance.orientation).toEqual('vertical');
                     expect(specPage.rootInstance.shouldDisableResizeObserver).toEqual(true);
                 });
-            });
-        });
-        describe('Methods', () => {
-            describe('checkForQ2Link()', () => {
-                it('sets hasLinkElement to true when q2-link elements are present', async () => {
-                    specPage = await newSpecPage({
-                        components: [Q2ActionGroup],
-                        html: `<q2-action-group><q2-link></q2-link></q2-action-group>`,
-                    });
-                    expect(specPage.rootInstance.hasQ2Link).toBe(true);
-                });
-                it('sets hasQ2Link to false when no q2-link elements are present', async () => {
+                it('returns true when the slottedTagName is "q2-btn-coin"', async () => {
                     specPage = await newSpecPage({
                         components: [Q2ActionGroup],
                         html: `<q2-action-group></q2-action-group>`,
                     });
-                    expect(specPage.rootInstance.hasQ2Link).toBe(false);
+                    specPage.rootInstance.slottedTagName = 'q2-btn-coin';
+                    expect(specPage.rootInstance.shouldDisableResizeObserver).toEqual(true);
                 });
-                it('is called in componentDidLoad()', async () => {
+                it('returns true when the slottedTagName is "q2-link"', async () => {
                     specPage = await newSpecPage({
                         components: [Q2ActionGroup],
                         html: `<q2-action-group></q2-action-group>`,
                     });
-                    const checkForQ2LinkSpy = jest.spyOn(specPage.rootInstance, 'checkForQ2Link');
-                    specPage.rootInstance.componentDidLoad();
-                    expect(checkForQ2LinkSpy).toHaveBeenCalled();
+                    specPage.rootInstance.slottedTagName = 'q2-link';
+                    expect(specPage.rootInstance.shouldDisableResizeObserver).toEqual(true);
                 });
-                it('is called in onMutationObserved()', async () => {
+            });
+        });
+        describe('Methods', () => {
+            describe('handleResize', () => {
+                beforeEach(async () => {
                     specPage = await newSpecPage({
                         components: [Q2ActionGroup],
                         html: `<q2-action-group></q2-action-group>`,
                     });
-                    const checkForQ2LinkSpy = jest.spyOn(specPage.rootInstance, 'checkForQ2Link');
-                    specPage.rootInstance.onMutationObserved();
-                    expect(checkForQ2LinkSpy).toHaveBeenCalled();
+                    groupClass = specPage.rootInstance;
+                });
+                it('sets autoOrientation to "horizontal" when a resize event reports a width greater than 440', async () => {
+                    groupClass.handleResize(generateResizeEvent(441));
+                    await specPage.waitForChanges();
+                    expect(groupClass.autoOrientation).toEqual('horizontal');
+                });
+                it('sets autoOrientation to "vertical" when a resize event reports a width less than 440', async () => {
+                    groupClass.handleResize(generateResizeEvent(439));
+                    await specPage.waitForChanges();
+                    expect(groupClass.autoOrientation).toEqual('vertical');
+                });
+            });
+            describe('onMutationObserved', () => {
+                it('calls filterSlottedElements', async () => {
+                    const filterSlottedElementsMock = jest.spyOn(groupClass, 'filterSlottedElements');
+                    groupClass.onMutationObserved();
+                    expect(filterSlottedElementsMock).toHaveBeenCalled();
                 });
             });
         });
     });
 });
-//# sourceMappingURL=q2-action-group.spec.js.map
+//# sourceMappingURL=q2-action-group-test.spec.js.map