test: stabilize tests by waiting for changes after innerHTML updates (#…

…10748) **Related Issue:** N/A ## Summary ✨🧪✨
Esri · Nov 19, 2024 · f2c6c69 · f2c6c69
1 parent 4961e61
commit f2c6c69
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 33 deletions.
diff --git 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", () => {
       <calcite-flow-item></calcite-flow-item>
       `;
       });
+      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
@@ -253,6 +253,7 @@ describe("calcite-segmented-control", () => {
           <calcite-segmented-control-item value="2">two</calcite-segmented-control-item>
         </calcite-segmented-control>
       `;
+      await waitForFrame();
 
       [first, second] = Array.from(document.querySelectorAll("calcite-segmented-control-item"));
 
@@ -353,6 +354,7 @@ describe("calcite-segmented-control", () => {
           <calcite-segmented-control-item value="2">two</calcite-segmented-control-item>
           <calcite-segmented-control-item value="3">three</calcite-segmented-control-item>`;
       });
+      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
@@ -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
@@ -486,6 +486,7 @@ describe("calcite-stepper", () => {
         );
 
         document.body.innerHTML = `<${wrapperName}></${wrapperName}>`;
+        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
 
         const wrapper = document.querySelector(wrapperName);
         await new Promise<void>((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
@@ -205,52 +205,34 @@ 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<void> => {
         customElements.define(
           wrapperName,
           class extends HTMLElement {
-            constructor() {
-              super();
-            }
-
             connectedCallback(): void {
               this.attachShadow({ mode: "open" }).innerHTML = templateHTML;
             }
           },
         );
 
         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<HTMLElement>("#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 () => {