restructure tabs shadow DOM test to separate browser and test concerns

Esri · Nov 19, 2024 · f892a48 · f892a48
1 parent 85ca57f
commit f892a48
Showing 1 changed file with 13 additions and 33 deletions.
diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts
@@ -205,54 +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";
-
-        async function waitForAnimationFrames(count: number): Promise<void> {
-          async function frame() {
-            if (count > 0) {
-              await new Promise((resolve) => requestAnimationFrame(resolve));
-              count--;
-              await frame();
-            }
-          }
-
-          await frame();
-        }
-
+    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}>`;
-        await waitForAnimationFrames(2);
-
-        const wrapper = document.querySelector(wrapperName);
-
-        wrapper.shadowRoot.querySelector<HTMLElement>("#title-2").click();
-
-        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,
     );
     await page.waitForChanges();
 
-    expect(finalSelectedItem.tabTitle).toBe("title-2");
-    expect(finalSelectedItem.tab).toBe("tab-2");
+    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 () => {