test: Fix status label test groups

Author: thelukewalton

src/test/badges/status-label/status-label.test.ts

@@ -36,163 +36,150 @@ describe("zeta-status-label", () => {
     });
   });
   describe("Content", () => {
-    describe("status prop", () => {
-      it("sets default status to neutral", () => {
-        expect(subject.status).to.equal("neutral");
-      });
+    it("sets default status to neutral", () => {
+      expect(subject.status).to.equal("neutral");
+    });
 
-      ["info", "positive", "warning", "negative", "neutral"].forEach(status => {
-        it(`can set status to ${status}`, async () => {
-          subject.status = status as any;
-          await elementUpdated(subject);
-          expect(subject.status).to.equal(status);
-          expect(subject.getAttribute("status")).to.equal(status);
-        });
+    ["info", "positive", "warning", "negative", "neutral"].forEach(status => {
+      it(`can set status to ${status}`, async () => {
+        subject.status = status as any;
+        await elementUpdated(subject);
+        expect(subject.status).to.equal(status);
+        expect(subject.getAttribute("status")).to.equal(status);
       });
     });
 
-    describe("label prop", () => {
-      it("renders label text when label prop is set", async () => {
-        subject.label = "Test Label";
-        await elementUpdated(subject);
+    it("renders label text when label prop is set", async () => {
+      subject.label = "Test Label";
+      await elementUpdated(subject);
 
-        const textPart = subject.shadowRoot?.querySelector("[part='text']");
-        expect(textPart?.textContent).to.equal("Test Label");
-      });
+      const textPart = subject.shadowRoot?.querySelector("[part='text']");
+      expect(textPart?.textContent).to.equal("Test Label");
+    });
 
-      it("should be undefined by default", () => {
-        expect(subject.label).to.be.undefined;
-      });
+    it("should be undefined by default", () => {
+      expect(subject.label).to.be.undefined;
+    });
 
-      it("overrides slot content when label prop is set", async () => {
-        const componentWithSlot = await createComponent(`<zeta-status-label>Slot Text</zeta-status-label>`);
-        expect(componentWithSlot.textContent).to.include("Slot Text");
+    it("overrides slot content when label prop is set", async () => {
+      const componentWithSlot = await createComponent(`<zeta-status-label>Slot Text</zeta-status-label>`);
+      expect(componentWithSlot.textContent).to.include("Slot Text");
 
-        componentWithSlot.label = "Label Text";
-        await elementUpdated(componentWithSlot);
-        const textPart = componentWithSlot.shadowRoot?.querySelector("[part='text']");
-        expect(textPart?.textContent).to.equal("Label Text");
-      });
+      componentWithSlot.label = "Label Text";
+      await elementUpdated(componentWithSlot);
+      const textPart = componentWithSlot.shadowRoot?.querySelector("[part='text']");
+      expect(textPart?.textContent).to.equal("Label Text");
     });
 
-    describe("icon prop", () => {
-      it("should be undefined by default", () => {
-        expect(subject.icon).to.be.undefined;
-      });
+    it("should be undefined by default", () => {
+      expect(subject.icon).to.be.undefined;
+    });
 
-      it("renders a zeta-icon when icon prop is set", async () => {
-        subject.icon = "star";
-        subject.label = "Test";
-        await elementUpdated(subject);
+    it("renders a zeta-icon when icon prop is set", async () => {
+      subject.icon = "star";
+      subject.label = "Test";
+      await elementUpdated(subject);
 
-        const icon = subject.shadowRoot?.querySelector("zeta-icon");
-        expect(icon).to.exist;
-        expect(icon?.textContent).to.equal("star");
-      });
+      const icon = subject.shadowRoot?.querySelector("zeta-icon");
+      expect(icon).to.exist;
+      expect(icon?.textContent).to.equal("star");
+    });
 
-      it("renders an indicator circle when icon is not set", async () => {
-        subject.label = "Test";
-        await elementUpdated(subject);
+    it("renders an indicator circle when icon is not set", async () => {
+      subject.label = "Test";
+      await elementUpdated(subject);
 
-        const circle = subject.shadowRoot?.querySelector("svg circle");
-        expect(circle).to.exist;
-      });
+      const circle = subject.shadowRoot?.querySelector("svg circle");
+      expect(circle).to.exist;
+    });
 
-      it("renders zeta-icon instead of indicator circle when icon is provided", async () => {
-        subject.icon = "star";
-        subject.label = "Test";
-        await elementUpdated(subject);
+    it("renders zeta-icon instead of indicator circle when icon is provided", async () => {
+      subject.icon = "star";
+      subject.label = "Test";
+      await elementUpdated(subject);
 
-        const icon = subject.shadowRoot?.querySelector("zeta-icon");
-        const circle = subject.shadowRoot?.querySelector("svg circle");
-        expect(icon).to.exist;
-        expect(circle).to.not.exist;
-      });
+      const icon = subject.shadowRoot?.querySelector("zeta-icon");
+      const circle = subject.shadowRoot?.querySelector("svg circle");
+      expect(icon).to.exist;
+      expect(circle).to.not.exist;
     });
 
-    describe("showIcon prop", () => {
-      it("defaults to true", () => {
-        expect(subject.showIcon).to.be.true;
-      });
+    it("defaults to true", () => {
+      expect(subject.showIcon).to.be.true;
+    });
 
-      it("renders icon container when showIcon is true", async () => {
-        subject.label = "Test";
-        subject.showIcon = true;
-        await elementUpdated(subject);
+    it("renders icon container when showIcon is true", async () => {
+      subject.label = "Test";
+      subject.showIcon = true;
+      await elementUpdated(subject);
 
-        const iconContainer = subject.shadowRoot?.querySelector("[part='icon-container']");
-        expect(iconContainer).to.exist;
-      });
+      const iconContainer = subject.shadowRoot?.querySelector("[part='icon-container']");
+      expect(iconContainer).to.exist;
+    });
 
-      it("hides icon container when showIcon is false", async () => {
-        subject.label = "Test";
-        subject.showIcon = false;
-        await elementUpdated(subject);
+    it("hides icon container when showIcon is false", async () => {
+      subject.label = "Test";
+      subject.showIcon = false;
+      await elementUpdated(subject);
 
-        const iconContainer = subject.shadowRoot?.querySelector("[part='icon-container']");
-        expect(iconContainer).to.not.exist;
-      });
+      const iconContainer = subject.shadowRoot?.querySelector("[part='icon-container']");
+      expect(iconContainer).to.not.exist;
+    });
 
-      it("removes icon when showIcon is toggled from true to false", async () => {
-        subject.label = "Test";
-        subject.showIcon = true;
-        await elementUpdated(subject);
-        expect(subject.shadowRoot?.querySelector("[part='icon-container']")).to.exist;
+    it("removes icon when showIcon is toggled from true to false", async () => {
+      subject.label = "Test";
+      subject.showIcon = true;
+      await elementUpdated(subject);
+      expect(subject.shadowRoot?.querySelector("[part='icon-container']")).to.exist;
 
-        subject.showIcon = false;
-        await elementUpdated(subject);
-        expect(subject.shadowRoot?.querySelector("[part='icon-container']")).to.not.exist;
-      });
+      subject.showIcon = false;
+      await elementUpdated(subject);
+      expect(subject.shadowRoot?.querySelector("[part='icon-container']")).to.not.exist;
     });
 
-    describe("slot", () => {
-      it("renders slot content when no label prop is set", async () => {
-        const componentWithSlot = await createComponent(`<zeta-status-label>Slotted Text Content</zeta-status-label>`);
+    it("renders slot content when no label prop is set", async () => {
+      const componentWithSlot = await createComponent(`<zeta-status-label>Slotted Text Content</zeta-status-label>`);
 
-        expect(componentWithSlot.textContent).to.include("Slotted Text Content");
-      });
+      expect(componentWithSlot.textContent).to.include("Slotted Text Content");
+    });
 
-      it("does not render slot when label prop is set", async () => {
-        const componentWithSlot = await createComponent(`<zeta-status-label label="Label Text">Slotted Text</zeta-status-label>`);
+    it("does not render slot when label prop is set", async () => {
+      const componentWithSlot = await createComponent(`<zeta-status-label label="Label Text">Slotted Text</zeta-status-label>`);
 
-        const textPart = componentWithSlot.shadowRoot?.querySelector("[part='text']");
-        expect(textPart?.textContent).to.equal("Label Text");
-        expect(textPart?.textContent).to.not.include("Slotted Text");
-      });
+      const textPart = componentWithSlot.shadowRoot?.querySelector("[part='text']");
+      expect(textPart?.textContent).to.equal("Label Text");
+      expect(textPart?.textContent).to.not.include("Slotted Text");
+    });
 
-      it("supports multiple elements in slot", async () => {
-        const componentWithSlot = await createComponent(`<zeta-status-label><span>Span Text</span> Extra Text</zeta-status-label>`);
+    it("supports multiple elements in slot", async () => {
+      const componentWithSlot = await createComponent(`<zeta-status-label><span>Span Text</span> Extra Text</zeta-status-label>`);
 
-        expect(componentWithSlot.textContent).to.include("Span Text");
-        expect(componentWithSlot.textContent).to.include("Extra Text");
-      });
+      expect(componentWithSlot.textContent).to.include("Span Text");
+      expect(componentWithSlot.textContent).to.include("Extra Text");
     });
 
-    describe("combination of props", () => {
-      it("renders correctly with status, label, and icon", async () => {
-        subject.status = "positive";
-        subject.label = "Success";
-        subject.icon = "star";
-        await elementUpdated(subject);
+    it("renders correctly with status, label, and icon", async () => {
+      subject.status = "positive";
+      subject.label = "Success";
+      subject.icon = "star";
+      await elementUpdated(subject);
 
-        expect(subject.status).to.equal("positive");
-        expect(subject.shadowRoot?.querySelector("[part='text']")?.textContent).to.equal("Success");
-        expect(subject.shadowRoot?.querySelector("zeta-icon")).to.exist;
-      });
+      expect(subject.status).to.equal("positive");
+      expect(subject.shadowRoot?.querySelector("[part='text']")?.textContent).to.equal("Success");
+      expect(subject.shadowRoot?.querySelector("zeta-icon")).to.exist;
+    });
 
-      it("renders correctly with status and label without icon", async () => {
-        subject.status = "warning";
-        subject.label = "Warning";
-        subject.showIcon = false;
-        await elementUpdated(subject);
+    it("renders correctly with status and label without icon", async () => {
+      subject.status = "warning";
+      subject.label = "Warning";
+      subject.showIcon = false;
+      await elementUpdated(subject);
 
-        expect(subject.status).to.equal("warning");
-        expect(subject.shadowRoot?.querySelector("[part='text']")?.textContent).to.equal("Warning");
-        expect(subject.shadowRoot?.querySelector("[part='icon-container']")).to.not.exist;
-      });
+      expect(subject.status).to.equal("warning");
+      expect(subject.shadowRoot?.querySelector("[part='text']")?.textContent).to.equal("Warning");
+      expect(subject.shadowRoot?.querySelector("[part='icon-container']")).to.not.exist;
     });
   });
-
   describe("Dimensions", () => {
     it("sets the default dimensions correctly", async () => {
       subject.setAttribute("label", `Label`);