From d85f61a276f1588d6f50214fd589c72483e360d7 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Sat, 16 Nov 2024 00:11:15 -0800
Subject: [PATCH] test: stabilize tests by waiting for changes after innerHTML
 updates

---
 packages/calcite-components/src/components/flow/flow.e2e.ts    | 2 ++
 .../src/components/segmented-control/segmented-control.e2e.ts  | 2 ++
 .../calcite-components/src/components/select/select.e2e.ts     | 2 ++
 .../calcite-components/src/components/stepper/stepper.e2e.ts   | 2 ++
 packages/calcite-components/src/components/tabs/tabs.e2e.ts    | 3 +++
 5 files changed, 11 insertions(+)

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", () => {
       <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
index 86e6d2ec7b9..bd60f0c7194 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", () => {
           <calcite-segmented-control-item value="2">two</calcite-segmented-control-item>
         </calcite-segmented-control>
       `;
+      await page.waitForChanges();
 
       [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
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..7ad68d334bc 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 page.waitForChanges();
 
         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
index 13c2970d7e6..a8c3054686e 100644
--- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts
+++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts
@@ -223,6 +223,7 @@ describe("calcite-tabs", () => {
         );
 
         document.body.innerHTML = `<${wrapperName}></${wrapperName}>`;
+        await page.waitForChanges();
 
         const wrapper = document.querySelector(wrapperName);
 
@@ -249,6 +250,8 @@ describe("calcite-tabs", () => {
       },
       wrappedTabTemplateHTML,
     );
+    await page.waitForChanges();
+
     expect(finalSelectedItem.tabTitle).toBe("title-2");
     expect(finalSelectedItem.tab).toBe("tab-2");
   });