Added initial logic structure

Author: fonsiher

packages/dom/src/lib/ElementAssertion.ts

@@ -90,4 +90,36 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
       invertedError,
     });
   }
+
+  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

@@ -6,6 +6,7 @@ import { ElementAssertion } from "../../../src/lib/ElementAssertion";
 import { NestedElementsTestComponent } from "./fixtures/nestedElementsTestComponent";
 import { SimpleTestComponent } from "./fixtures/simpleTestComponent";
 import { WithAttributesTestComponent } from "./fixtures/withAttributesTestComponent";
+import { HaveClassTestComponent } from "./fixtures/haveClassTestComponent";
 
 describe("[Unit] ElementAssertion.test.ts", () => {
   describe(".toBeInTheDocument", () => {
@@ -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,51 @@ 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);
+      });
+    });
+
+    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"`);
+      });
+    });
+
+    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);
+      });
+    });
+
+    context("when the element does not have the exact matching expected class ", async () => {
+      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"`);
+      });
+    });
+  });
+
 });

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>
+    );
+}