@esri/calcite-components 1.0.0-next.591 → 1.0.0-next.593

package/dist/collection/tests/commonTests.js

@@ -1,596 +0,0 @@
-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);
-}