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}>${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}>${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 () => {