test: stabilize tests by waiting for changes after innerHTML updates

Esri · Nov 16, 2024 · d85f61a · d85f61a
1 parent 08a2064
commit d85f61a
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 0 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 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
@@ -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 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
@@ -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");
   });