From 52208bc44dcd95a4c1520ca37b00dd369f4268e6 Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Fri, 15 Nov 2024 13:06:55 -0800
Subject: [PATCH] Combined test cases for disabled and hidden

---
 .../components/stepper-item/stepper-item.tsx  |   1 +
 .../src/components/stepper/stepper.e2e.ts     | 389 +++++++++---------
 2 files changed, 185 insertions(+), 205 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index 63a6a155da3..feb657a414c 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -391,6 +391,7 @@ export class StepperItem
   private handleItemClick = (event: MouseEvent): void => {
     if (
       this.disabled ||
+      this.hideItem ||
       (this.layout === "horizontal" &&
         event
           .composedPath()
diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
index 15efefea54e..1cf6a695e8e 100644
--- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -247,51 +247,60 @@ describe("calcite-stepper", () => {
     });
 
     it("navigates disabled and hidden items correctly with nextStep and prevStep methods", async () => {
-      for (const n of ["disabled", "hidden"]) {
-        const page = await newE2EPage();
-        await page.setContent(
-          html`<calcite-stepper>
-            <calcite-stepper-item heading="Step 1" id="step-1" selected>
-              <div>Step 1 content</div>
-            </calcite-stepper-item>
-            <calcite-stepper-item heading="Step 2" id="step-2" ${n}>
-              <div>Step 2 content</div>
-            </calcite-stepper-item>
-            <calcite-stepper-item heading="Step 3" id="step-3">
-              <div>Step 3 content</div>
-            </calcite-stepper-item>
-          </calcite-stepper>`,
-        );
-        const element = await page.find("calcite-stepper");
-        const step1 = await page.find("#step-1");
-        const step2 = await page.find("#step-2");
-        const step3 = await page.find("#step-3");
-        const step1Content = await page.find("#step-1 >>> .stepper-item-content");
-        const step2Content = await page.find("#step-2 >>> .stepper-item-content");
-        const step3Content = await page.find("#step-3 >>> .stepper-item-content");
-        expect(step1).toHaveAttribute("selected");
-        expect(step2).not.toHaveAttribute("selected");
-        expect(step3).not.toHaveAttribute("selected");
-        expect(await step1Content.isVisible()).toBe(true);
-        expect(await step2Content.isVisible()).toBe(false);
-        expect(await step3Content.isVisible()).toBe(false);
-        await element.callMethod("nextStep");
-        await page.waitForChanges();
-        expect(step1).not.toHaveAttribute("selected");
-        expect(step2).not.toHaveAttribute("selected");
-        expect(step3).toHaveAttribute("selected");
-        expect(await step1Content.isVisible()).toBe(false);
-        expect(await step2Content.isVisible()).toBe(false);
-        expect(await step3Content.isVisible()).toBe(true);
-        await element.callMethod("prevStep");
-        await page.waitForChanges();
-        expect(step1).toHaveAttribute("selected");
-        expect(step2).not.toHaveAttribute("selected");
-        expect(step3).not.toHaveAttribute("selected");
-        expect(await step1Content.isVisible()).toBe(true);
-        expect(await step2Content.isVisible()).toBe(false);
-        expect(await step3Content.isVisible()).toBe(false);
-      }
+      const page = await newE2EPage();
+      await page.setContent(
+        html`<calcite-stepper>
+          <calcite-stepper-item heading="Step 1" id="step-1" selected>
+            <div>Step 1 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2" id="step-2" disabled>
+            <div>Step 2 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 3" id="step-3">
+            <div>Step 3 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 4" id="step-4" hide-item>
+            <div>Step 4 content</div>
+          </calcite-stepper-item>
+        </calcite-stepper>`,
+      );
+      const element = await page.find("calcite-stepper");
+      const step1 = await page.find("#step-1");
+      const step2 = await page.find("#step-2");
+      const step3 = await page.find("#step-3");
+      const step4 = await page.find("#step-4");
+      const step1Content = await page.find("#step-1 >>> .stepper-item-content");
+      const step2Content = await page.find("#step-2 >>> .stepper-item-content");
+      const step3Content = await page.find("#step-3 >>> .stepper-item-content");
+      const step4Content = await page.find("#step-4 >>> .stepper-item-content");
+      expect(step1).toHaveAttribute("selected");
+      expect(step2).not.toHaveAttribute("selected");
+      expect(step3).not.toHaveAttribute("selected");
+      expect(step4).not.toHaveAttribute("selected");
+      expect(await step1Content.isVisible()).toBe(true);
+      expect(await step2Content.isVisible()).toBe(false);
+      expect(await step3Content.isVisible()).toBe(false);
+      expect(await step4Content.isVisible()).toBe(false);
+      await element.callMethod("nextStep");
+      await page.waitForChanges();
+      expect(step1).not.toHaveAttribute("selected");
+      expect(step2).not.toHaveAttribute("selected");
+      expect(step3).toHaveAttribute("selected");
+      expect(step4).not.toHaveAttribute("selected");
+      expect(await step1Content.isVisible()).toBe(false);
+      expect(await step2Content.isVisible()).toBe(false);
+      expect(await step3Content.isVisible()).toBe(true);
+      expect(await step4Content.isVisible()).toBe(false);
+      await element.callMethod("prevStep");
+      await page.waitForChanges();
+      expect(step1).toHaveAttribute("selected");
+      expect(step2).not.toHaveAttribute("selected");
+      expect(step3).not.toHaveAttribute("selected");
+      expect(step4).not.toHaveAttribute("selected");
+      expect(await step1Content.isVisible()).toBe(true);
+      expect(await step2Content.isVisible()).toBe(false);
+      expect(await step3Content.isVisible()).toBe(false);
+      expect(await step4Content.isVisible()).toBe(false);
     });
 
     it("navigates correctly with startStep and endStep methods", async () => {
@@ -344,54 +353,61 @@ describe("calcite-stepper", () => {
     });
 
     it("navigates disabled and hidden items correctly with startStep and endStep methods", async () => {
-      for (const n of ["disabled", "hidden"]) {
-        const page = await newE2EPage();
-        await page.setContent(
-          html`<calcite-stepper>
-            <calcite-stepper-item heading="Step 1" id="step-1" ${n}>
-              <div>Step 1 content</div>
-            </calcite-stepper-item>
-            <calcite-stepper-item heading="Step 2" id="step-2">
-              <div>Step 2 content</div>
-            </calcite-stepper-item>
-            <calcite-stepper-item heading="Step 3" id="step-3">
-              <div id="step-3 >>> .stepper-item-content">Step 3 content</div>
-            </calcite-stepper-item>
-            <calcite-stepper-item heading="Step 4" id="step-4" ${n}>
-              <div>Step 4 content</div>
-            </calcite-stepper-item>
-          </calcite-stepper>`,
-        );
-        const element = await page.find("calcite-stepper");
-        const step1 = await page.find("#step-1");
-        const step2 = await page.find("#step-2");
-        const step3 = await page.find("#step-3");
-        const step4 = await page.find("#step-4");
-        const step1Content = await page.find("#step-1 >>> .stepper-item-content");
-        const step2Content = await page.find("#step-2 >>> .stepper-item-content");
-        const step3Content = await page.find("#step-3 >>> .stepper-item-content");
-        const step4Content = await page.find("#step-4 >>> .stepper-item-content");
-        await element.callMethod("endStep");
-        await page.waitForChanges();
-        expect(step1).not.toHaveAttribute("selected");
-        expect(step2).not.toHaveAttribute("selected");
-        expect(step3).toHaveAttribute("selected");
-        expect(step4).not.toHaveAttribute("selected");
-        expect(await step1Content.isVisible()).toBe(false);
-        expect(await step2Content.isVisible()).toBe(false);
-        expect(await step3Content.isVisible()).toBe(true);
-        expect(await step4Content.isVisible()).toBe(false);
-        await element.callMethod("startStep");
-        await page.waitForChanges();
-        expect(step1).not.toHaveAttribute("selected");
-        expect(step2).toHaveAttribute("selected");
-        expect(step3).not.toHaveAttribute("selected");
-        expect(step4).not.toHaveAttribute("selected");
-        expect(await step1Content.isVisible()).toBe(false);
-        expect(await step2Content.isVisible()).toBe(true);
-        expect(await step3Content.isVisible()).toBe(false);
-        expect(await step4Content.isVisible()).toBe(false);
-      }
+      const page = await newE2EPage();
+      await page.setContent(
+        html`<calcite-stepper>
+          <calcite-stepper-item heading="Step 1" id="step-1" disabled>
+            <div>Step 1 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2" id="step-2">
+            <div>Step 2 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 3" id="step-3">
+            <div id="step-3 >>> .stepper-item-content">Step 3 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 4" id="step-4" disabled>
+            <div>Step 4 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 5" id="step-5" hide-item>
+            <div>Step 5 content</div>
+          </calcite-stepper-item>
+        </calcite-stepper>`,
+      );
+      const element = await page.find("calcite-stepper");
+      const step1 = await page.find("#step-1");
+      const step2 = await page.find("#step-2");
+      const step3 = await page.find("#step-3");
+      const step4 = await page.find("#step-4");
+      const step5 = await page.find("#step-5");
+      const step1Content = await page.find("#step-1 >>> .stepper-item-content");
+      const step2Content = await page.find("#step-2 >>> .stepper-item-content");
+      const step3Content = await page.find("#step-3 >>> .stepper-item-content");
+      const step4Content = await page.find("#step-4 >>> .stepper-item-content");
+      const step5Content = await page.find("#step-5 >>> .stepper-item-content");
+      await element.callMethod("endStep");
+      await page.waitForChanges();
+      expect(step1).not.toHaveAttribute("selected");
+      expect(step2).not.toHaveAttribute("selected");
+      expect(step3).toHaveAttribute("selected");
+      expect(step4).not.toHaveAttribute("selected");
+      expect(step5).not.toHaveAttribute("selected");
+      expect(await step1Content.isVisible()).toBe(false);
+      expect(await step2Content.isVisible()).toBe(false);
+      expect(await step3Content.isVisible()).toBe(true);
+      expect(await step4Content.isVisible()).toBe(false);
+      expect(await step5Content.isVisible()).toBe(false);
+      await element.callMethod("startStep");
+      await page.waitForChanges();
+      expect(step1).not.toHaveAttribute("selected");
+      expect(step2).toHaveAttribute("selected");
+      expect(step3).not.toHaveAttribute("selected");
+      expect(step4).not.toHaveAttribute("selected");
+      expect(step5).not.toHaveAttribute("selected");
+      expect(await step1Content.isVisible()).toBe(false);
+      expect(await step2Content.isVisible()).toBe(true);
+      expect(await step3Content.isVisible()).toBe(false);
+      expect(await step4Content.isVisible()).toBe(false);
+      expect(await step5Content.isVisible()).toBe(false);
     });
 
     it("navigates to requested step with goToStep method", async () => {
@@ -559,6 +575,10 @@ describe("calcite-stepper", () => {
       expect(changeSpy).toHaveReceivedEventTimes(expectedEvents);
       expect(await getSelectedItemId()).toBe("step-4");
 
+      await page.$eval("#step-5", itemClicker);
+      expect(itemChangeSpy).toHaveReceivedEventTimes(expectedEvents);
+      expect(changeSpy).toHaveReceivedEventTimes(expectedEvents);
+
       await element.callMethod("prevStep");
       await page.waitForChanges();
       expect(itemChangeSpy).toHaveReceivedEventTimes(expectedEvents);
@@ -576,43 +596,43 @@ describe("calcite-stepper", () => {
       });
 
       it("emits with content", async () => {
-        for (const n of ["disabled", "hidden"]) {
-          const page = await newE2EPage();
-          await page.setContent(
-            html`<calcite-stepper layout="${layout}">
-              <calcite-stepper-item heading="Step 1" id="step-1">
-                <div>Step 1 content</div>
-              </calcite-stepper-item>
-              <calcite-stepper-item heading="Step 2" id="step-2">
-                <div>Step 2 content</div>
-              </calcite-stepper-item>
-              <calcite-stepper-item heading="Step 3" id="step-3" ${n}>
-                <div>Step 3 content</div>
-              </calcite-stepper-item>
-              <calcite-stepper-item heading="Step 4" id="step-4">
-                <div>Step 4 content</div>
-              </calcite-stepper-item>
-            </calcite-stepper>`,
-          );
-
-          await assertEmitting(page, true);
-        }
+        const page = await newE2EPage();
+        await page.setContent(
+          html`<calcite-stepper layout="${layout}">
+            <calcite-stepper-item heading="Step 1" id="step-1">
+              <div>Step 1 content</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Step 2" id="step-2">
+              <div>Step 2 content</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Step 3" id="step-3" disabled>
+              <div>Step 3 content</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Step 4" id="step-4">
+              <div>Step 4 content</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Step 5" id="step-5" hide-item>
+              <div>Step 5 content</div>
+            </calcite-stepper-item>
+          </calcite-stepper>`,
+        );
+
+        await assertEmitting(page, true);
       });
 
       it("emits without content", async () => {
-        for (const n of ["disabled", "hidden"]) {
-          const page = await newE2EPage();
-          await page.setContent(
-            html`<calcite-stepper layout="${layout}">
-              <calcite-stepper-item heading="Step 1" id="step-1"></calcite-stepper-item>
-              <calcite-stepper-item heading="Step 2" id="step-2"></calcite-stepper-item>
-              <calcite-stepper-item heading="Step 3" id="step-3" ${n}></calcite-stepper-item>
-              <calcite-stepper-item heading="Step 4" id="step-4"></calcite-stepper-item>
-            </calcite-stepper>`,
-          );
-
-          await assertEmitting(page, false);
-        }
+        const page = await newE2EPage();
+        await page.setContent(
+          html`<calcite-stepper layout="${layout}">
+            <calcite-stepper-item heading="Step 1" id="step-1"></calcite-stepper-item>
+            <calcite-stepper-item heading="Step 2" id="step-2"></calcite-stepper-item>
+            <calcite-stepper-item heading="Step 3" id="step-3" disabled></calcite-stepper-item>
+            <calcite-stepper-item heading="Step 4" id="step-4"></calcite-stepper-item>
+            <calcite-stepper-item heading="Step 5" id="step-5" hide-item></calcite-stepper-item>
+          </calcite-stepper>`,
+        );
+
+        await assertEmitting(page, false);
       });
     });
 
@@ -622,43 +642,43 @@ describe("calcite-stepper", () => {
       });
 
       it("emits with content", async () => {
-        for (const n of ["disabled", "hidden"]) {
-          const page = await newE2EPage();
-          await page.setContent(
-            html`<calcite-stepper layout="${layout}">
-              <calcite-stepper-item heading="Step 1" id="step-1">
-                <div>Step 1 content</div>
-              </calcite-stepper-item>
-              <calcite-stepper-item heading="Step 2" id="step-2">
-                <div>Step 2 content</div>
-              </calcite-stepper-item>
-              <calcite-stepper-item heading="Step 3" id="step-3" ${n}>
-                <div>Step 3 content</div>
-              </calcite-stepper-item>
-              <calcite-stepper-item heading="Step 4" id="step-4">
-                <div>Step 4 content</div>
-              </calcite-stepper-item>
-            </calcite-stepper>`,
-          );
-
-          await assertEmitting(page, true);
-        }
+        const page = await newE2EPage();
+        await page.setContent(
+          html`<calcite-stepper layout="${layout}">
+            <calcite-stepper-item heading="Step 1" id="step-1">
+              <div>Step 1 content</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Step 2" id="step-2">
+              <div>Step 2 content</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Step 3" id="step-3" disabled>
+              <div>Step 3 content</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Step 4" id="step-4">
+              <div>Step 4 content</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Step 5" id="step-5" hide-item>
+              <div>Step 5 content</div>
+            </calcite-stepper-item>
+          </calcite-stepper>`,
+        );
+
+        await assertEmitting(page, true);
       });
 
       it("emits without content", async () => {
-        for (const n of ["disabled", "hidden"]) {
-          const page = await newE2EPage();
-          await page.setContent(
-            html`<calcite-stepper layout="${layout}">
-              <calcite-stepper-item heading="Step 1" id="step-1"></calcite-stepper-item>
-              <calcite-stepper-item heading="Step 2" id="step-2"></calcite-stepper-item>
-              <calcite-stepper-item heading="Step 3" id="step-3" ${n}></calcite-stepper-item>
-              <calcite-stepper-item heading="Step 4" id="step-4"></calcite-stepper-item>
-            </calcite-stepper>`,
-          );
-
-          await assertEmitting(page, false);
-        }
+        const page = await newE2EPage();
+        await page.setContent(
+          html`<calcite-stepper layout="${layout}">
+            <calcite-stepper-item heading="Step 1" id="step-1"></calcite-stepper-item>
+            <calcite-stepper-item heading="Step 2" id="step-2"></calcite-stepper-item>
+            <calcite-stepper-item heading="Step 3" id="step-3" disabled></calcite-stepper-item>
+            <calcite-stepper-item heading="Step 4" id="step-4"></calcite-stepper-item>
+            <calcite-stepper-item heading="Step 5" id="step-5" hide-item></calcite-stepper-item>
+          </calcite-stepper>`,
+        );
+
+        await assertEmitting(page, false);
       });
     });
   });
@@ -852,6 +872,9 @@ describe("calcite-stepper", () => {
           <calcite-stepper-item heading="Step 2" id="step-2" disabled>
             <div>Step 2 content</div>
           </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2.1" id="step-2.1" hide-item>
+            <div>Step 2.1 content</div>
+          </calcite-stepper-item>
           <calcite-stepper-item heading="Step 3" id="step-2">
             <div>Step 3 content</div>
           </calcite-stepper-item>
@@ -884,50 +907,6 @@ describe("calcite-stepper", () => {
       expect(itemChangeSpy).toHaveReceivedEventTimes(2);
     });
 
-    it("should emit calciteStepperItemChange on user interaction when item is hidden", async () => {
-      const page = await newE2EPage();
-      await page.setContent(
-        html`<calcite-stepper layout="horizontal-single">
-          <calcite-stepper-item heading="Step 1" id="step-1">
-            <div>Step 1 content</div>
-          </calcite-stepper-item>
-          <calcite-stepper-item heading="Step 2" id="step-2" hidden>
-            <div>Step 2 content</div>
-          </calcite-stepper-item>
-          <calcite-stepper-item heading="Step 3" id="step-2">
-            <div>Step 3 content</div>
-          </calcite-stepper-item>
-        </calcite-stepper>`,
-      );
-
-      const stepper = await page.find("calcite-stepper");
-      const [actionStart, actionEnd] = await page.findAll("calcite-stepper >>> calcite-action");
-      const changeSpy = await stepper.spyOnEvent("calciteStepperChange");
-      const itemChangeSpy = await stepper.spyOnEvent("calciteStepperItemChange");
-      expect(changeSpy).toHaveReceivedEventTimes(0);
-      expect(itemChangeSpy).toHaveReceivedEventTimes(0);
-
-      // hidden item is skipped
-      await actionEnd.click();
-      expect(changeSpy).toHaveReceivedEventTimes(1);
-      expect(itemChangeSpy).toHaveReceivedEventTimes(1);
-
-      // can't go beyond the end
-      await actionEnd.click();
-      expect(changeSpy).toHaveReceivedEventTimes(1);
-      expect(itemChangeSpy).toHaveReceivedEventTimes(1);
-
-      // hidden item is skipped
-      await actionStart.click();
-      expect(changeSpy).toHaveReceivedEventTimes(2);
-      expect(itemChangeSpy).toHaveReceivedEventTimes(2);
-
-      // can't go beyond the end
-      await actionStart.click();
-      expect(changeSpy).toHaveReceivedEventTimes(2);
-      expect(itemChangeSpy).toHaveReceivedEventTimes(2);
-    });
-
     it(`switching to layout="horizontal-single" dynamically from another option should display a single item (#8931)`, async () => {
       const page = await newE2EPage();
       await page.setContent(