@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.597

package/dist/collection/tests/commonTests.js

@@ -0,0 +1,596 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { toHaveNoViolations } from "jest-axe";
+import { config } from "../../stencil.config";
+import { skipAnimations } from "./utils";
+import { hiddenFormInputSlotName } from "../utils/form";
+import { html } from "../../support/formatting";
+expect.extend(toHaveNoViolations);
+export const HYDRATED_ATTR = config.hydratedFlag.name;
+function isHTML(tagOrHTML) {
+    return tagOrHTML.trim().startsWith("<");
+}
+function getTag(tagOrHTML) {
+    if (isHTML(tagOrHTML)) {
+        const regex = /[>\s]/;
+        const trimmedTag = tagOrHTML.trim();
+        return trimmedTag.substring(1, trimmedTag.search(regex));
+    }
+    return tagOrHTML;
+}
+async function simplePageSetup(componentTagOrHTML) {
+    const componentTag = getTag(componentTagOrHTML);
+    const page = await newE2EPage({
+        html: isHTML(componentTagOrHTML) ? componentTagOrHTML : `<${componentTag}></${componentTag}>`,
+        failOnConsoleError: true
+    });
+    await page.waitForChanges();
+    return page;
+}
+/**
+ * Helper for asserting that a component is accessible.
+ *
+ * @param {string} componentTagOrHTML - the component tag or HTML markup to test against
+ * @param {E2EPage} [page] - an e2e page
+ */
+export async function accessible(componentTagOrHTML, page) {
+    if (!page) {
+        page = await simplePageSetup(componentTagOrHTML);
+    }
+    await page.addScriptTag({ path: require.resolve("axe-core") });
+    await page.waitForFunction(() => window.axe);
+    expect(await page.evaluate(async (componentTag) => window.axe.run(componentTag), getTag(componentTagOrHTML))).toHaveNoViolations();
+}
+/**
+ * Helper for asserting that a component renders and is hydrated
+ *
+ * @param {string} componentTagOrHTML - the component tag or HTML markup to test against
+ * @param {object} options - additional options to assert
+ * @param {string} employee.visible - is the component visible
+ * @param {string} employee.display - is the component's display "inline"
+ * @param options.visible
+ * @param options.display
+ */
+export async function renders(componentTagOrHTML, options) {
+    var _a, _b;
+    const page = await simplePageSetup(componentTagOrHTML);
+    const element = await page.find(getTag(componentTagOrHTML));
+    expect(element).toHaveAttribute(HYDRATED_ATTR);
+    expect(await element.isVisible()).toBe((_a = options === null || options === void 0 ? void 0 : options.visible) !== null && _a !== void 0 ? _a : true);
+    expect((await element.getComputedStyle()).display).toBe((_b = options === null || options === void 0 ? void 0 : options.display) !== null && _b !== void 0 ? _b : "inline");
+}
+/**
+ * Helper for asserting that a component reflects
+ *
+ * @param {string} componentTagOrHTML - the component tag or HTML markup to test against
+ * @param {object[]} propsToTest - the properties to test
+ * @param {string} propsToTest.propertyName - the property name
+ * @param {any} propsToTest.value - the property value
+ */
+export async function reflects(componentTagOrHTML, propsToTest) {
+    const page = await simplePageSetup(componentTagOrHTML);
+    const componentTag = getTag(componentTagOrHTML);
+    const element = await page.find(componentTag);
+    for (const propAndValue of propsToTest) {
+        const { propertyName, value } = propAndValue;
+        const attrName = propToAttr(propertyName);
+        const componentAttributeSelector = `${componentTag}[${attrName}]`;
+        element.setProperty(propertyName, value);
+        await page.waitForChanges();
+        expect(await page.find(componentAttributeSelector)).toBeTruthy();
+        if (typeof value === "boolean") {
+            const getExpectedValue = (propValue) => (propValue ? "" : null);
+            const negated = !value;
+            element.setProperty(propertyName, negated);
+            await page.waitForChanges();
+            expect(element.getAttribute(attrName)).toBe(getExpectedValue(negated));
+            element.setProperty(propertyName, value);
+            await page.waitForChanges();
+            expect(element.getAttribute(attrName)).toBe(getExpectedValue(value));
+        }
+    }
+}
+function propToAttr(name) {
+    return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+/**
+ * Helper for asserting that a property's value is its default
+ *
+ * @param {string} componentTagOrHTML - the component tag or HTML markup to test against
+ * @param {object[]} propsToTest - the properties to test
+ * @param {string} propsToTest.propertyName - the property name
+ * @param {any} propsToTest.value - the property value
+ */
+export async function defaults(componentTagOrHTML, propsToTest) {
+    const page = await simplePageSetup(componentTagOrHTML);
+    const element = await page.find(getTag(componentTagOrHTML));
+    for (const propAndValue of propsToTest) {
+        const { propertyName, defaultValue } = propAndValue;
+        const prop = await element.getProperty(propertyName);
+        expect(prop).toEqual(defaultValue);
+    }
+}
+/**
+ * Helper for asserting that a component is not visible when hidden
+ *
+ * @param {string} componentTagOrHTML - the component tag or HTML markup to test against
+ */
+export async function hidden(componentTagOrHTML) {
+    const page = await simplePageSetup(componentTagOrHTML);
+    const element = await page.find(getTag(componentTagOrHTML));
+    element.setAttribute("hidden", "");
+    await page.waitForChanges();
+    expect(await element.isVisible()).toBe(false);
+}
+/**
+ * Helper for asserting that a component is focusable
+ *
+ * @param {string} componentTagOrHTML - the component tag or HTML markup to test against
+ * @param {FocusableOptions} [options] - additional options for asserting focus
+ */
+export async function focusable(componentTagOrHTML, options) {
+    const page = await simplePageSetup(componentTagOrHTML);
+    const tag = getTag(componentTagOrHTML);
+    const element = await page.find(tag);
+    const focusTargetSelector = (options === null || options === void 0 ? void 0 : options.focusTargetSelector) || tag;
+    await element.callMethod("setFocus", options === null || options === void 0 ? void 0 : options.focusId); // assumes element is FocusableElement
+    if (options === null || options === void 0 ? void 0 : options.shadowFocusTargetSelector) {
+        expect(await page.$eval(tag, (element, selector) => element.shadowRoot.activeElement.matches(selector), options === null || options === void 0 ? void 0 : options.shadowFocusTargetSelector)).toBe(true);
+    }
+    expect(await page.evaluate((selector) => document.activeElement.matches(selector), focusTargetSelector)).toBe(true);
+}
+/**
+ * Helper for asserting slots.
+ *
+ * @param {string} componentTagOrHTML - the component tag or HTML markup to test against
+ * @param slots - a component's SLOTS resource object or an array of slot names
+ * @param includeDefaultSlot - when true, it will run assertions on the default slot
+ */
+export async function slots(componentTagOrHTML, slots, includeDefaultSlot = false) {
+    const page = await simplePageSetup(componentTagOrHTML);
+    const tag = getTag(componentTagOrHTML);
+    const slotNames = Array.isArray(slots) ? slots : Object.values(slots);
+    await page.$eval(tag, async (component, slotNames, includeDefaultSlot) => {
+        async function slotTestElement(testClass, slotName) {
+            const el = document.createElement("div"); // slotting a <div> will suffice for our purposes
+            el.classList.add(testClass);
+            if (slotName) {
+                el.slot = slotName;
+            }
+            component.append(el);
+            await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+        }
+        for (let i = 0; i < slotNames.length; i++) {
+            await slotTestElement("slotted-into-named-slot", slotNames[i]);
+        }
+        if (includeDefaultSlot) {
+            await slotTestElement("slotted-into-default-slot");
+        }
+    }, slotNames, includeDefaultSlot);
+    await page.waitForChanges();
+    const slotted = await page.evaluate(() => Array.from(document.querySelectorAll(".slotted-into-named-slot"))
+        .filter((slotted) => slotted.assignedSlot)
+        .map((slotted) => slotted.slot));
+    expect(slotNames).toEqual(slotted);
+    if (includeDefaultSlot) {
+        const hasDefaultSlotted = await page.evaluate(() => {
+            var _a;
+            const defaultSlotted = document.querySelector(".slotted-into-default-slot");
+            return ((_a = defaultSlotted.assignedSlot) === null || _a === void 0 ? void 0 : _a.name) === "" && defaultSlotted.slot === "";
+        });
+        expect(hasDefaultSlotted).toBe(true);
+    }
+}
+async function assertLabelable({ page, componentTag, propertyToToggle, focusTargetSelector = componentTag, shadowFocusTargetSelector }) {
+    let component;
+    let initialPropertyValue;
+    if (propertyToToggle) {
+        component = await page.find(componentTag);
+        initialPropertyValue = await component.getProperty(propertyToToggle);
+    }
+    const label = await page.find("calcite-label");
+    await label.callMethod("click"); // we call the method to avoid clicking the child element
+    await page.waitForChanges();
+    expect(await page.evaluate((focusTargetSelector) => { var _a; return !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(focusTargetSelector)); }, focusTargetSelector)).toBe(true);
+    if (shadowFocusTargetSelector) {
+        expect(await page.$eval(componentTag, (element, selector) => element.shadowRoot.activeElement.matches(selector), shadowFocusTargetSelector)).toBe(true);
+    }
+    if (propertyToToggle) {
+        const toggledPropertyValue = !initialPropertyValue;
+        expect(await component.getProperty(propertyToToggle)).toBe(toggledPropertyValue);
+        // assert that direct clicks on component toggle property correctly
+        await component.setProperty(propertyToToggle, initialPropertyValue); // we reset as not all components toggle when clicked
+        await page.waitForChanges();
+        await component.click();
+        await page.waitForChanges();
+        expect(await component.getProperty(propertyToToggle)).toBe(toggledPropertyValue);
+    }
+}
+/**
+ * Helper for asserting label clicking functionality works.
+ *
+ * @param {string} componentTagOrHtml - the component tag or HTML used to test label support
+ * @param {LabelableOptions} [options] - labelable options
+ */
+export async function labelable(componentTagOrHtml, options) {
+    const id = "labelable-id";
+    const labelTitle = "My Component";
+    const propertyToToggle = options === null || options === void 0 ? void 0 : options.propertyToToggle;
+    const focusTargetSelector = (options === null || options === void 0 ? void 0 : options.focusTargetSelector) || `#${id}`;
+    const shadowFocusTargetSelector = options === null || options === void 0 ? void 0 : options.shadowFocusTargetSelector;
+    const componentTag = getTag(componentTagOrHtml);
+    const componentHtml = isHTML(componentTagOrHtml)
+        ? ensureId(componentTagOrHtml)
+        : `<${componentTag} id="${id}"></${componentTag}>`;
+    function ensureId(html) {
+        return html.includes("id=") ? html : html.replace(componentTag, `${componentTag} id="${id}" `);
+    }
+    const wrappedHtml = html `<calcite-label> ${labelTitle} ${componentHtml} </calcite-label>`;
+    const wrappedPage = await newE2EPage({ html: wrappedHtml });
+    await wrappedPage.waitForChanges();
+    await assertLabelable({
+        page: wrappedPage,
+        componentTag,
+        propertyToToggle,
+        focusTargetSelector,
+        shadowFocusTargetSelector
+    });
+    const siblingHtml = html `
+    <calcite-label for="${id}">${labelTitle}</calcite-label>
+    ${componentHtml}
+  `;
+    const siblingPage = await newE2EPage({ html: siblingHtml });
+    await siblingPage.waitForChanges();
+    await assertLabelable({
+        page: siblingPage,
+        componentTag,
+        propertyToToggle,
+        focusTargetSelector,
+        shadowFocusTargetSelector
+    });
+    const labelFirstSiblingPage = await newE2EPage();
+    await labelFirstSiblingPage.setContent(`<calcite-label for="${id}"></calcite-label>`);
+    await labelFirstSiblingPage.waitForChanges();
+    await labelFirstSiblingPage.evaluate((componentHtml) => {
+        const template = document.createElement("template");
+        template.innerHTML = `${componentHtml}`.trim();
+        const componentNode = template.content.firstChild;
+        document.body.append(componentNode);
+    }, componentHtml);
+    await labelFirstSiblingPage.waitForChanges();
+    await assertLabelable({
+        page: labelFirstSiblingPage,
+        componentTag,
+        propertyToToggle,
+        focusTargetSelector,
+        shadowFocusTargetSelector
+    });
+    const labelFirstWrappedPage = await newE2EPage();
+    await labelFirstWrappedPage.setContent(`<calcite-label for="${id}"></calcite-label>`);
+    await labelFirstWrappedPage.waitForChanges();
+    await labelFirstWrappedPage.evaluate((componentHtml) => {
+        const template = document.createElement("template");
+        template.innerHTML = `${componentHtml}`.trim();
+        const componentNode = template.content.firstChild;
+        const labelEl = document.querySelector("calcite-label");
+        labelEl.append(componentNode);
+    }, componentHtml);
+    await labelFirstWrappedPage.waitForChanges();
+    await assertLabelable({
+        page: labelFirstWrappedPage,
+        componentTag,
+        propertyToToggle,
+        focusTargetSelector,
+        shadowFocusTargetSelector
+    });
+    const componentFirstSiblingPage = await newE2EPage({ html: componentHtml });
+    await componentFirstSiblingPage.waitForChanges();
+    await componentFirstSiblingPage.evaluate((id) => {
+        const label = document.createElement("calcite-label");
+        label.setAttribute("for", `${id}`);
+        document.body.append(label);
+    }, id);
+    await componentFirstSiblingPage.waitForChanges();
+    await assertLabelable({
+        page: componentFirstSiblingPage,
+        componentTag,
+        propertyToToggle,
+        focusTargetSelector,
+        shadowFocusTargetSelector
+    });
+    const componentFirstWrappedPage = await newE2EPage();
+    await componentFirstWrappedPage.setContent(`${componentHtml}`);
+    await componentFirstWrappedPage.waitForChanges();
+    await componentFirstWrappedPage.evaluate((id) => {
+        const componentEl = document.querySelector(`[id='${id}']`);
+        const labelEl = document.createElement("calcite-label");
+        labelEl.setAttribute("for", `${id}`);
+        document.body.append(labelEl);
+        labelEl.append(componentEl);
+    }, id);
+    await componentFirstWrappedPage.waitForChanges();
+    await assertLabelable({
+        page: componentFirstWrappedPage,
+        componentTag,
+        propertyToToggle,
+        focusTargetSelector,
+        shadowFocusTargetSelector
+    });
+}
+/**
+ * Helper for testing form-associated components; specifically form submitting and resetting.
+ *
+ * @param {string} componentTagOrHtml - the component tag or HTML markup to test against
+ * @param {FormAssociatedOptions} options - form associated options
+ */
+export async function formAssociated(componentTagOrHtml, options) {
+    const componentTag = getTag(componentTagOrHtml);
+    const componentHtml = ensureName(isHTML(componentTagOrHtml) ? componentTagOrHtml : `<${componentTag}></${componentTag}>`);
+    function ensureName(html) {
+        return html.includes("name=") ? html : html.replace(componentTag, `${componentTag} name="testName" `);
+    }
+    const page = await newE2EPage({
+        html: html `<form>
+      ${componentHtml}
+      <!--
+      keeping things simple by using submit-type input
+      this should cover button and calcite-button submit cases
+      -->
+      <input id="submitter" type="submit" />
+    </form>`
+    });
+    await page.waitForChanges();
+    const component = await page.find(componentTag);
+    const checkable = typeof options.testValue === "boolean" && (await page.$eval(componentTag, (component) => "checked" in component));
+    const resettablePropName = checkable ? "checked" : "value";
+    const initialValue = await component.getProperty(resettablePropName);
+    await assertValueResetOnFormReset();
+    await assertValueSubmittedOnFormSubmit();
+    if (options.submitsOnEnter) {
+        await assertFormSubmitOnEnter();
+    }
+    async function assertValueResetOnFormReset() {
+        component.setProperty(resettablePropName, options.testValue);
+        await page.waitForChanges();
+        await page.$eval("form", (form) => form.reset());
+        await page.waitForChanges();
+        expect(await component.getProperty(resettablePropName)).toBe(initialValue);
+    }
+    async function assertValueSubmittedOnFormSubmit() {
+        const inputName = await component.getProperty("name");
+        const stringifiedTestValue = stringifyTestValue(options.testValue);
+        if (checkable) {
+            component.setProperty("checked", true);
+            await page.waitForChanges();
+            expect(await submitAndGetValue()).toEqual("on");
+            component.setProperty("value", options.testValue);
+            await page.waitForChanges();
+            expect(await submitAndGetValue()).toEqual(stringifiedTestValue);
+            component.setProperty("disabled", true);
+            await page.waitForChanges();
+            expect(await submitAndGetValue()).toBe(null);
+            component.setProperty("checked", true);
+            component.setProperty("disabled", false);
+            await page.waitForChanges();
+            expect(await submitAndGetValue()).toEqual(stringifiedTestValue);
+            component.setProperty("checked", false);
+            await page.waitForChanges();
+            expect(await submitAndGetValue()).toBe(null);
+        }
+        else {
+            component.setProperty("required", true);
+            component.setProperty("value", null);
+            await page.waitForChanges();
+            expect(await submitAndGetValue()).toBeUndefined();
+            component.setProperty("required", false);
+            component.setProperty("value", options.testValue);
+            await page.waitForChanges();
+            expect(await submitAndGetValue()).toEqual((options === null || options === void 0 ? void 0 : options.expectedSubmitValue) || stringifiedTestValue);
+            component.setProperty("disabled", true);
+            await page.waitForChanges();
+            expect(await submitAndGetValue()).toBe(null);
+            component.setProperty("disabled", false);
+            component.setProperty("value", options.testValue);
+            await page.waitForChanges();
+            expect(await submitAndGetValue()).toEqual((options === null || options === void 0 ? void 0 : options.expectedSubmitValue) || stringifiedTestValue);
+            component.setProperty("value", options.testValue);
+            await page.waitForChanges();
+            expect(await submitAndGetValue()).toEqual((options === null || options === void 0 ? void 0 : options.expectedSubmitValue) || stringifiedTestValue);
+        }
+        /**
+         * This method will submit the form and return the submitted value:
+         *
+         * For single-value components, it will return a string or null if the value was not submitted
+         * For multi-value components, it will return an array of strings
+         *
+         * If the input cannot be submitted because it is invalid, undefined will be returned
+         */
+        async function submitAndGetValue() {
+            return page.$eval("form", async (form, inputName, hiddenFormInputSlotName) => {
+                const hiddenFormInput = document.querySelector(`[name="${inputName}"] input[slot=${hiddenFormInputSlotName}]`);
+                let resolve;
+                const submitPromise = new Promise((yes) => (resolve = yes));
+                function handleFormSubmit(event) {
+                    event.preventDefault();
+                    const formData = new FormData(form);
+                    const values = formData.getAll(inputName);
+                    if (values.length > 1) {
+                        resolve(values);
+                        return;
+                    }
+                    resolve(formData.get(inputName));
+                    hiddenFormInput.removeEventListener("invalid", handleInvalidInput);
+                }
+                function handleInvalidInput() {
+                    resolve(undefined);
+                    form.removeEventListener("submit", handleFormSubmit);
+                }
+                form.addEventListener("submit", handleFormSubmit, { once: true });
+                hiddenFormInput.addEventListener("invalid", handleInvalidInput, { once: true });
+                document.querySelector("#submitter").click();
+                return submitPromise;
+            }, inputName, hiddenFormInputSlotName);
+        }
+    }
+    async function assertFormSubmitOnEnter() {
+        await page.$eval("form", (form) => {
+            form.addEventListener("submit", (event) => {
+                event.preventDefault();
+                window.called = true;
+            });
+        });
+        const stringifiedTestValue = stringifyTestValue(options.testValue);
+        await component.setProperty("value", stringifiedTestValue);
+        await component.callMethod("setFocus");
+        await page.keyboard.press("Enter");
+        const called = await page.evaluate(() => window.called);
+        expect(called).toBe(true);
+    }
+    function stringifyTestValue(value) {
+        return Array.isArray(value) ? value.map((value) => value.toString()) : value.toString();
+    }
+}
+async function getTagAndPage(componentSetup) {
+    if (typeof componentSetup === "string") {
+        const page = await simplePageSetup(componentSetup);
+        const tag = getTag(componentSetup);
+        return { page, tag };
+    }
+    return componentSetup;
+}
+/**
+ * Helper to test the disabled prop disabling user interaction.
+ *
+ * @param {TagOrHTML|TagAndPage} componentSetup - A component tag, html, or an e2e page for setting up a test
+ * @param {DisabledOptions} [options={ focusTarget: "host" }] - disabled options
+ */
+export async function disabled(componentSetup, options = { focusTarget: "host" }) {
+    const { page, tag } = await getTagAndPage(componentSetup);
+    const component = await page.find(tag);
+    const enabledComponentClickSpy = await component.spyOnEvent("click");
+    await skipAnimations(page);
+    await page.$eval(tag, (el) => {
+        el.addEventListener("click", (event) => {
+            const path = event.composedPath();
+            const anchor = path.find((el) => (el === null || el === void 0 ? void 0 : el.tagName) === "A");
+            if (anchor) {
+                // we prevent the default behavior to avoid a page redirect
+                anchor.addEventListener("click", (event) => event.preventDefault(), { once: true });
+            }
+        }, true);
+    });
+    async function expectToBeFocused(tag) {
+        const focusedTag = await page.evaluate(() => { var _a; return (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase(); });
+        expect(focusedTag).toBe(tag);
+    }
+    expect(component.getAttribute("aria-disabled")).toBeNull();
+    if (options.focusTarget === "none") {
+        await page.click(tag);
+        await expectToBeFocused("body");
+        expect(enabledComponentClickSpy).toHaveReceivedEventTimes(1);
+        component.setProperty("disabled", true);
+        await page.waitForChanges();
+        const disabledComponentClickSpy = await component.spyOnEvent("click");
+        expect(component.getAttribute("aria-disabled")).toBe("true");
+        await page.click(tag);
+        await expectToBeFocused("body");
+        await component.callMethod("click");
+        await expectToBeFocused("body");
+        expect(disabledComponentClickSpy).toHaveReceivedEventTimes(0);
+        return;
+    }
+    async function getFocusTarget(focusTarget) {
+        return focusTarget === "host" ? tag : await page.evaluate(() => { var _a; return (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase(); });
+    }
+    await page.keyboard.press("Tab");
+    let tabFocusTarget;
+    let clickFocusTarget;
+    if (typeof options.focusTarget === "object") {
+        tabFocusTarget = options.focusTarget.tab;
+        clickFocusTarget = options.focusTarget.click;
+    }
+    else {
+        tabFocusTarget = clickFocusTarget = await getFocusTarget(options.focusTarget);
+    }
+    expect(tabFocusTarget).not.toBe("body");
+    await expectToBeFocused(tabFocusTarget);
+    const [shadowFocusableCenterX, shadowFocusableCenterY] = await page.$eval(tabFocusTarget, (element) => {
+        const focusTarget = element.shadowRoot.activeElement || element;
+        const rect = focusTarget.getBoundingClientRect();
+        return [rect.x + rect.width / 2, rect.y + rect.height / 2];
+    });
+    async function resetFocusOrder() {
+        // test page has default margin, so clicking on 0,0 will not hit the test element
+        await page.mouse.click(0, 0);
+    }
+    await resetFocusOrder();
+    await expectToBeFocused("body");
+    await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY);
+    await expectToBeFocused(clickFocusTarget);
+    await component.callMethod("click");
+    await expectToBeFocused(clickFocusTarget);
+    // some components emit more than one click event,
+    // so we check if at least one event is received
+    expect(enabledComponentClickSpy.length).toBeGreaterThanOrEqual(2);
+    component.setProperty("disabled", true);
+    await page.waitForChanges();
+    const disabledComponentClickSpy = await component.spyOnEvent("click");
+    expect(component.getAttribute("aria-disabled")).toBe("true");
+    await resetFocusOrder();
+    await page.keyboard.press("Tab");
+    await expectToBeFocused("body");
+    await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY);
+    await expectToBeFocused("body");
+    expect(disabledComponentClickSpy).toHaveReceivedEventTimes(0);
+}
+/**
+ * This helper will test if a floating-ui-owning component has configured the floating-ui correctly.
+ * At the moment, this only tests if the scroll event listeners are only active when the floating-ui is displayed.
+ *
+ * @param componentTagOrHTML - the component tag or HTML markup to test against
+ * @param togglePropName - the component property that toggles the floating-ui
+ * @param options - the floating-ui owner test configuration
+ * @param options.shadowSelector
+ */
+export async function floatingUIOwner(componentTagOrHTML, togglePropName, options) {
+    const page = await simplePageSetup(componentTagOrHTML);
+    const scrollablePageSizeInPx = 2400;
+    await page.addStyleTag({
+        content: `body {
+      height: ${scrollablePageSizeInPx}px;
+      width: ${scrollablePageSizeInPx}px;
+    }`
+    });
+    await page.waitForChanges();
+    const tag = getTag(componentTagOrHTML);
+    const component = await page.find(tag);
+    async function getTransform() {
+        // need to get the style attribute from the browser context since the E2E element returns null
+        return page.$eval(tag, (component, shadowSelector) => {
+            const floatingUIEl = shadowSelector
+                ? component.shadowRoot.querySelector(shadowSelector)
+                : component;
+            return floatingUIEl.getAttribute("style");
+        }, options === null || options === void 0 ? void 0 : options.shadowSelector);
+    }
+    async function scrollTo(x, y) {
+        await page.evaluate((x, y) => document.firstElementChild.scrollTo(x, y), x, y);
+    }
+    component.setProperty(togglePropName, false);
+    await page.waitForChanges();
+    const initialClosedTransform = await getTransform();
+    await scrollTo(scrollablePageSizeInPx, scrollablePageSizeInPx);
+    await page.waitForChanges();
+    expect(await getTransform()).toBe(initialClosedTransform);
+    await scrollTo(0, 0);
+    await page.waitForChanges();
+    expect(await getTransform()).toBe(initialClosedTransform);
+    component.setProperty(togglePropName, true);
+    await page.waitForChanges();
+    const initialOpenTransform = await getTransform();
+    await scrollTo(scrollablePageSizeInPx, scrollablePageSizeInPx);
+    await page.waitForChanges();
+    expect(await getTransform()).not.toBe(initialOpenTransform);
+    await scrollTo(0, 0);
+    await page.waitForChanges();
+    expect(await getTransform()).toBe(initialOpenTransform);
+}