diff --git a/packages/calcite-components/src/components/flow/flow.e2e.ts b/packages/calcite-components/src/components/flow/flow.e2e.ts index 206b705c2e5..612fdf7dee5 100755 --- a/packages/calcite-components/src/components/flow/flow.e2e.ts +++ b/packages/calcite-components/src/components/flow/flow.e2e.ts @@ -321,6 +321,7 @@ describe("calcite-flow", () => { `; }); + await page.waitForChanges(); const items = await page.findAll("calcite-flow-item"); @@ -501,6 +502,7 @@ describe("calcite-flow", () => { customElements.define("custom-flow-item", CustomFlowItem); }); + await page.waitForChanges(); const flow = await page.find("calcite-flow"); const displayedItemSelector = "calcite-flow > [selected]"; diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts b/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts index 86e6d2ec7b9..3d10e64aa5f 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts @@ -253,6 +253,7 @@ describe("calcite-segmented-control", () => { two `; + await waitForFrame(); [first, second] = Array.from(document.querySelectorAll("calcite-segmented-control-item")); @@ -353,6 +354,7 @@ describe("calcite-segmented-control", () => { two three`; }); + await page.waitForChanges(); await assertArrowSelection(page); }); diff --git a/packages/calcite-components/src/components/select/select.e2e.ts b/packages/calcite-components/src/components/select/select.e2e.ts index fe84a829322..8f4d93e0ffd 100644 --- a/packages/calcite-components/src/components/select/select.e2e.ts +++ b/packages/calcite-components/src/components/select/select.e2e.ts @@ -189,6 +189,7 @@ describe("calcite-select", () => { select.append(number); }); + await page.waitForChanges(); expect(await internalSelect.findAll("option")).toHaveLength(1); }); @@ -333,6 +334,7 @@ describe("calcite-select", () => { select.append(letters, numbers); }); + await page.waitForChanges(); expect(await internalSelect.findAll("option")).toHaveLength(2); expect(await internalSelect.findAll("optgroup")).toHaveLength(2); diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts index 268830d109d..c56d6045298 100644 --- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts +++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts @@ -486,6 +486,7 @@ describe("calcite-stepper", () => { ); document.body.innerHTML = `<${wrapperName}>`; + await new Promise((resolve) => requestAnimationFrame(() => resolve())); const wrapper = document.querySelector(wrapperName); await new Promise((resolve) => requestAnimationFrame(() => resolve())); @@ -499,6 +500,7 @@ describe("calcite-stepper", () => { return wrapper.shadowRoot.querySelector("calcite-stepper-item[selected]").id; }, templateHTML); + await page.waitForChanges(); expect(finalSelectedItem).toBe("item-3"); }); diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts index 13c2970d7e6..28b7021897b 100644 --- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts +++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts @@ -205,17 +205,12 @@ describe("calcite-tabs", () => { await page.waitForChanges(); - const finalSelectedItem = await page.evaluate( - async (templateHTML: string): Promise<{ tabTitle: string; tab: string }> => { - const wrapperName = "tab-wrapping-component"; - + const wrapperName = "tab-wrapping-component"; + await page.evaluate( + async (wrapperName, templateHTML: string): Promise => { customElements.define( wrapperName, class extends HTMLElement { - constructor() { - super(); - } - connectedCallback(): void { this.attachShadow({ mode: "open" }).innerHTML = templateHTML; } @@ -223,34 +218,21 @@ describe("calcite-tabs", () => { ); document.body.innerHTML = `<${wrapperName}>`; - - const wrapper = document.querySelector(wrapperName); - - async function waitForAnimationFrames(count) { - async function frame() { - if (count > 0) { - await new Promise((resolve) => requestAnimationFrame(resolve)); - count--; - await frame(); - } - } - - await frame(); - } - - wrapper.shadowRoot.querySelector("#title-2").click(); - await waitForAnimationFrames(4); - - const tabTitle = wrapper.shadowRoot.querySelector("calcite-tab-title[selected]").id; - await waitForAnimationFrames(2); - - const tab = wrapper.shadowRoot.querySelector("calcite-tab[selected]").id; - return { tabTitle, tab }; }, + wrapperName, wrappedTabTemplateHTML, ); - expect(finalSelectedItem.tabTitle).toBe("title-2"); - expect(finalSelectedItem.tab).toBe("tab-2"); + await page.waitForChanges(); + + const nestedTabTitle2 = await page.find(`${wrapperName} >>> #title-2`); + await nestedTabTitle2.click(); + await page.waitForChanges(); + + const nestedSelectedTabTitle = await page.find(`${wrapperName} >>> calcite-tab-title[selected]`); + const nestedSelectedTab = await page.find(`${wrapperName} >>> calcite-tab[selected]`); + + expect(nestedSelectedTabTitle.id).toBe("title-2"); + expect(nestedSelectedTab.id).toBe("tab-2"); }); it("item selection should work with nested tabs", async () => {