feat(dom): DOM - toHaveClass

packages/dom/src/lib/ElementAssertion.ts

@@ -90,4 +90,48 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
       invertedError,
     });
   }
+
+/**
+ * Check if the element has a specific class or classes.
+ *
+ * Validates that the provided element contains specified classes.
+ * Allows checking for one or more class names and supports exact matching.
+ *
+ * @param classNames - A single class name or an array of class names to check.
+ * @param options - Optional settings for matching:
+ *  - `exact` (boolean): When true, checks for an exact match of all classes.
+ * @returns the assertion instance.
+ */
+  public toHaveClass(classNames: string | string[], options: { exact?: boolean; } = {}): this {
+    const actualClassList = this.actual.className.split(/\s+/).filter(Boolean);
+    const expectedClassList = Array.isArray(classNames) ? classNames : [classNames];
+    const { exact = false } = options;
+
+    const error = new AssertionError({
+      actual: actualClassList,
+      expected: expectedClassList,
+      message: exact
+        ? `Expected the element to have exactly these classes: "${expectedClassList.join(" ")}"`
+        : `Expected the element to have class(es): "${expectedClassList.join(" ")}"`,
+    });
+
+    const invertedError = new AssertionError({
+      actual: actualClassList,
+      expected: expectedClassList,
+      message: exact
+        ? `Expected the element to NOT have exactly these classes: "${expectedClassList.join(" ")}"`
+        : `Expected the element to NOT have class(es): "${expectedClassList.join(" ")}"`,
+    });
+
+    const assertWhen = exact
+      ? actualClassList.length === expectedClassList.length
+      && expectedClassList.every(cls => actualClassList.includes(cls))
+      : expectedClassList.every(cls => actualClassList.includes(cls));
+
+    return this.execute({
+      assertWhen,
+      error,
+      invertedError,
+    });
+  }
 }

packages/dom/test/unit/lib/ElementAssertion.test.tsx

@@ -3,6 +3,7 @@ import { render } from "@testing-library/react";
 
 import { ElementAssertion } from "../../../src/lib/ElementAssertion";
 
+import { HaveClassTestComponent } from "./fixtures/haveClassTestComponent";
 import { NestedElementsTestComponent } from "./fixtures/nestedElementsTestComponent";
 import { SimpleTestComponent } from "./fixtures/simpleTestComponent";
 import { WithAttributesTestComponent } from "./fixtures/withAttributesTestComponent";
@@ -69,7 +70,7 @@ describe("[Unit] ElementAssertion.test.ts", () => {
 
       context("and it is an indirect child", () => {
         it("returns the assertion instance", async () => {
-          const { findByTestId } = render(<NestedElementsTestComponent/>);
+          const { findByTestId } = render(<NestedElementsTestComponent />);
           const grandparent = await findByTestId("grandparent");
           const child = await findByTestId("child");
           const grandparentTest = new ElementAssertion(grandparent);
@@ -84,7 +85,7 @@ describe("[Unit] ElementAssertion.test.ts", () => {
 
       context("and it is a deeply nested child", () => {
         it("returns the assertion instance", async () => {
-          const { findByTestId } = render(<NestedElementsTestComponent/>);
+          const { findByTestId } = render(<NestedElementsTestComponent />);
           const grandparent = await findByTestId("grandparent");
           const deepChild = await findByTestId("deep-child");
           const grandparentTest = new ElementAssertion(grandparent);
@@ -101,7 +102,7 @@ describe("[Unit] ElementAssertion.test.ts", () => {
     context("when element is NOT contained in ancestor element", () => {
       it("throws an assertion error", async () => {
         const notChildElement = document.createElement("span");
-        const { findByTestId } = render(<NestedElementsTestComponent/>);
+        const { findByTestId } = render(<NestedElementsTestComponent />);
         const grandparent = await findByTestId("grandparent");
         const grandparentTest = new ElementAssertion(grandparent);
 
@@ -172,4 +173,67 @@ describe("[Unit] ElementAssertion.test.ts", () => {
       });
     });
   });
+
+  describe(".toHaveClass", () => {
+    context("when the element has the the expected class", () => {
+      it("returns the assertion instance", async () => {
+        const { findByTestId } = render(<HaveClassTestComponent />);
+        const divTest = await findByTestId("classTest");
+        divTest.className = "foo bar";
+        const test = new ElementAssertion(divTest);
+
+        expect(test.toHaveClass("foo")).toBeEqual(test);
+
+        expect(() => test.not.toHaveClass("foo"))
+          .toThrowError(AssertionError)
+          .toHaveMessage("Expected the element to NOT have class(es): \"foo\"");
+      });
+    });
+
+    context("when the element does not have the expected class ", () => {
+      it("throws an assertion error", async () => {
+        const { findByTestId } = render(<HaveClassTestComponent />);
+        const divTest = await findByTestId("classTest");
+        divTest.className = "foo";
+        const test = new ElementAssertion(divTest);
+
+        expect(() => test.toHaveClass("bar"))
+          .toThrowError(AssertionError)
+          .toHaveMessage("Expected the element to have class(es): \"bar\"");
+
+        expect(test.not.toHaveClass("bar")).toBeEqual(test);
+      });
+    });
+
+    context("when the element element has the the exact matching expected class", () => {
+      it("returns the assertion instance", async () => {
+        const { findByTestId } = render(<HaveClassTestComponent />);
+        const divTest = await findByTestId("classTest");
+        divTest.className = "foo bar";
+        const test = new ElementAssertion(divTest);
+
+        expect(test.toHaveClass(["foo", "bar"], { exact: true })).toBeEqual(test);
+
+        expect(() => test.not.toHaveClass(["foo", "bar"], { exact: true }))
+          .toThrowError(AssertionError)
+          .toHaveMessage("Expected the element to NOT have exactly these classes: \"foo bar\"");
+      });
+    });
+
+    context("when the element does not have the exact matching expected class ", () => {
+      it("throws an assertion error", async () => {
+        const { findByTestId } = render(<HaveClassTestComponent />);
+        const divTest = await findByTestId("classTest");
+        divTest.className = "foo bar extra";
+        const test = new ElementAssertion(divTest);
+
+        expect(() => test.toHaveClass(["foo", "bar"], { exact: true }))
+          .toThrowError(AssertionError)
+          .toHaveMessage("Expected the element to have exactly these classes: \"foo bar\"");
+
+        expect(test.not.toHaveClass(["foo", "bar"], { exact: true })).toBeEqual(test);
+      });
+    });
+  });
+
 });

packages/dom/test/unit/lib/fixtures/haveClassTestComponent.tsx

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+
+export function HaveClassTestComponent(): ReactElement {
+    return (
+      <div data-testid="classTest">
+        Test text inside a div
+      </div>
+    );
+}