Add new matches based on the class input

Author: fonsiher

packages/dom/src/lib/ElementAssertion.ts

@@ -91,45 +91,92 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
     });
   }
 
-/**
- * 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;
+  /**
+   * Asserts that the element has the specified class.
+   *
+   * @param className - The class name to check.
+   * @returns the assertion instance.
+   */
+  public toHaveClass(className: string): this {
+    const actualClassList = this.getClassList();
+
+    return this.assertClassPresence(
+      actualClassList.includes(className),
+      [className],
+      `Expected the element to have class: "${className}"`,
+      `Expected the element to NOT have class: "${className}"`,
+    );
+  }
+
+  /**
+   * Asserts that the element has at least one of the specified classes.
+   *
+   * @param classNames - A variadic list of class names to check.
+   * @returns the assertion instance.
+   */
+  public toHaveAnyClass(...classNames: string[]): this {
+    const actualClassList = this.getClassList();
+
+    return this.assertClassPresence(
+      classNames.some(cls => actualClassList.includes(cls)),
+      classNames,
+      `Expected the element to have at least one of these classes: "${classNames.join(" ")}"`,
+      `Expected the element to NOT have any of these classes: "${classNames.join(" ")}"`,
+    );
+  }
+
+  /**
+   * Asserts that the element has all of the specified classes.
+   *
+   * @param classNames - A variadic list of class names to check.
+   * @returns the assertion instance.
+   */
+  public toHaveAllClasses(...classNames: string[]): this {
+    const actualClassList = this.getClassList();
+
+    return this.assertClassPresence(
+      classNames.every(cls => actualClassList.includes(cls)),
+      classNames,
+      `Expected the element to have all of these classes: "${classNames.join(" ")}"`,
+      `Expected the element to NOT have all of these classes: "${classNames.join(" ")}"`,
+    );
+  }
+
+  private getClassList(): string[] {
+    return this.actual.className.split(/\s+/).filter(Boolean);
+  }
+
+  /**
+   * Helper method to assert the presence or absence of class names.
+   *
+   * @param assertCondition - Boolean to determine assertion pass or fail.
+   * @param classNames - Array of class names involved in the assertion.
+   * @param message - Assertion error message.
+   * @param invertedMessage - Inverted assertion error message.
+   * @returns the assertion instance.
+   */
+  private assertClassPresence(
+    assertCondition: boolean,
+    classNames: string[],
+    message: string,
+    invertedMessage: string,
+  ): this {
+    const actualClassList = this.getClassList();
 
     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(" ")}"`,
+      expected: classNames,
+      message,
     });
 
     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(" ")}"`,
+      expected: classNames,
+      message: invertedMessage,
     });
 
-    const assertWhen = exact
-      ? actualClassList.length === expectedClassList.length
-      && expectedClassList.every(cls => actualClassList.includes(cls))
-      : expectedClassList.every(cls => actualClassList.includes(cls));
-
     return this.execute({
-      assertWhen,
+      assertWhen: assertCondition,
       error,
       invertedError,
     });

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

@@ -175,63 +175,97 @@ describe("[Unit] ElementAssertion.test.ts", () => {
   });
 
   describe(".toHaveClass", () => {
-    context("when the element has the the expected class", () => {
+    context("when the element has the expected class", () => {
       it("returns the assertion instance", async () => {
         const { findByTestId } = render(<HaveClassTestComponent />);
         const divTest = await findByTestId("classTest");
-        divTest.className = "foo bar";
+        divTest.classList.add("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\"");
+          .toHaveMessage('Expected the element to NOT have class: "foo"');
       });
     });
 
-    context("when the element does not have the expected class ", () => {
+    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.classList.add("foo", "bar");
+        const test = new ElementAssertion(divTest);
+
+        expect(() => test.toHaveClass("baz"))
+          .toThrowError(AssertionError)
+          .toHaveMessage('Expected the element to have class: "baz"');
+
+        expect(test.not.toHaveClass("baz")).toBeEqual(test);
+      });
+    });
+  });
+
+  describe(".toHaveAnyClass", () => {
+    context("when the element has at least one of the expected classes", () => {
+      it("returns the assertion instance", async () => {
+        const { findByTestId } = render(<HaveClassTestComponent />);
+        const divTest = await findByTestId("classTest");
+        divTest.classList.add("foo", "bar");
+        const test = new ElementAssertion(divTest);
+
+        expect(test.toHaveAnyClass("bar", "baz")).toBeEqual(test);
+
+        expect(() => test.not.toHaveAnyClass("bar", "baz"))
+          .toThrowError(AssertionError)
+          .toHaveMessage('Expected the element to NOT have any of these classes: "bar baz"');
+      });
+    });
+
+    context("when the element does not have any of the expected classes", () => {
       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"))
+        expect(() => test.toHaveAnyClass("bar", "baz"))
           .toThrowError(AssertionError)
-          .toHaveMessage("Expected the element to have class(es): \"bar\"");
+          .toHaveMessage('Expected the element to have at least one of these classes: "bar baz"');
 
-        expect(test.not.toHaveClass("bar")).toBeEqual(test);
+        expect(test.not.toHaveAnyClass("bar", "baz")).toBeEqual(test);
       });
     });
+  });
 
-    context("when the element element has the the exact matching expected class", () => {
+  describe(".toHaveAllClasses", () => {
+    context("when the element has all the expected classes", () => {
       it("returns the assertion instance", async () => {
         const { findByTestId } = render(<HaveClassTestComponent />);
         const divTest = await findByTestId("classTest");
-        divTest.className = "foo bar";
+        divTest.classList.add("foo", "bar", "baz");
         const test = new ElementAssertion(divTest);
 
-        expect(test.toHaveClass(["foo", "bar"], { exact: true })).toBeEqual(test);
+        expect(test.toHaveAllClasses("foo", "bar")).toBeEqual(test);
 
-        expect(() => test.not.toHaveClass(["foo", "bar"], { exact: true }))
+        expect(() => test.not.toHaveAllClasses("foo", "bar"))
           .toThrowError(AssertionError)
-          .toHaveMessage("Expected the element to NOT have exactly these classes: \"foo bar\"");
+          .toHaveMessage('Expected the element to NOT have all of these classes: "foo bar"');
       });
     });
 
-    context("when the element does not have the exact matching expected class ", () => {
+    context("when the element does not have all the expected classes", () => {
       it("throws an assertion error", async () => {
         const { findByTestId } = render(<HaveClassTestComponent />);
         const divTest = await findByTestId("classTest");
-        divTest.className = "foo bar extra";
+        divTest.classList.add("foo", "bar");
         const test = new ElementAssertion(divTest);
 
-        expect(() => test.toHaveClass(["foo", "bar"], { exact: true }))
+        expect(() => test.toHaveAllClasses("foo", "bar", "baz"))
           .toThrowError(AssertionError)
-          .toHaveMessage("Expected the element to have exactly these classes: \"foo bar\"");
+          .toHaveMessage('Expected the element to have all of these classes: "foo bar baz"');
 
-        expect(test.not.toHaveClass(["foo", "bar"], { exact: true })).toBeEqual(test);
+        expect(test.not.toHaveAllClasses("foo", "bar", "baz")).toBeEqual(test);
       });
     });
   });

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

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