Merge branch 'main' into feat/upgrade-nodejs

Author: JDOM10

packages/dom/src/lib/ElementAssertion.ts

@@ -1,4 +1,7 @@
 import { Assertion, AssertionError } from "@assertive-ts/core";
+import equal from "fast-deep-equal";
+
+import { getExpectedAndReceivedStyles } from "./helpers/helpers";
 
 export class ElementAssertion<T extends Element> extends Assertion<T> {
   public constructor(actual: T) {
@@ -141,8 +144,119 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
     );
   }
 
-  private getClassList(): string[] {
-    return this.actual.className.split(/\s+/).filter(Boolean);
+  /**
+   * Check if the provided element is currently focused in the document.
+   *
+   * @example
+   * const userNameInput = document.querySelector('#username');
+   * userNameInput.focus();
+   * expect(userNameInput).toHaveFocus(); // passes
+   * expect(userNameInput).not.toHaveFocus(); // fails
+   *
+   * @returns The assertion instance.
+   */
+    public toHaveFocus(): this {
+
+      const hasFocus = this.actual === document.activeElement;
+
+      const error = new AssertionError({
+        actual: this.actual,
+        expected: document.activeElement,
+        message: "Expected the element to be focused",
+      });
+
+      const invertedError = new AssertionError({
+        actual: this.actual,
+        expected: document.activeElement,
+        message: "Expected the element NOT to be focused",
+      });
+
+      return this.execute({
+        assertWhen: hasFocus,
+        error,
+        invertedError,
+      });
+    }
+
+  /**
+   * Asserts that the element has the specified CSS styles.
+   *
+   * @example
+   * ```
+   * expect(component).toHaveStyle({ color: 'green', display: 'block' });
+   * ```
+   *
+   * @param expected the expected CSS styles.
+   * @returns the assertion instance.
+   */
+
+  public toHaveStyle(expected: Partial<CSSStyleDeclaration>): this {
+
+    const [expectedStyle, receivedStyle] = getExpectedAndReceivedStyles(this.actual, expected);
+
+    if (!expectedStyle || !receivedStyle) {
+      throw new Error("Currently there are no available styles.");
+    }
+
+    const error = new AssertionError({
+      actual: this.actual,
+      expected: expectedStyle,
+      message: `Expected the element to match the following style:\n${JSON.stringify(expectedStyle, null, 2)}`,
+    });
+    const invertedError = new AssertionError({
+      actual: this.actual,
+      message: `Expected the element to NOT match the following style:\n${JSON.stringify(expectedStyle, null, 2)}`,
+    });
+
+    return this.execute({
+      assertWhen: equal(expectedStyle, receivedStyle),
+      error,
+      invertedError,
+    });
+    }
+
+  /**
+   * Asserts that the element has one or more of the specified CSS styles.
+   *
+   * @example
+   * ```
+   * expect(component).toHaveSomeStyle({ color: 'green', display: 'block' });
+   * ```
+   *
+   * @param expected the expected CSS style/s.
+   * @returns the assertion instance.
+   */
+
+  public toHaveSomeStyle(expected: Partial<CSSStyleDeclaration>): this {
+
+    const [expectedStyle, elementProcessedStyle] = getExpectedAndReceivedStyles(this.actual, expected);
+
+    if (!expectedStyle || !elementProcessedStyle) {
+      throw new Error("No available styles.");
+    }
+
+    const hasSomeStyle = Object.entries(expectedStyle).some(([expectedProp, expectedValue]) => {
+      return Object.entries(elementProcessedStyle).some(([receivedProp, receivedValue]) => {
+        return equal(expectedProp, receivedProp) && equal(expectedValue, receivedValue);
+      });
+    });
+
+    const error = new AssertionError({
+      actual: this.actual,
+      message: `Expected the element to match some of the following styles:\n${JSON.stringify(expectedStyle, null, 2)}`,
+    });
+
+    const invertedError = new AssertionError({
+      actual: this.actual,
+      // eslint-disable-next-line max-len
+      message: `Expected the element NOT to match some of the following styles:\n${JSON.stringify(expectedStyle, null, 2)}`,
+    });
+
+    return this.execute({
+      assertWhen: hasSomeStyle,
+      error,
+      invertedError,
+    });
   }
 
   /**
@@ -180,4 +294,8 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
       invertedError,
     });
   }
+
+  private getClassList(): string[] {
+    return this.actual.className.split(/\s+/).filter(Boolean);
+  }
 }

packages/dom/src/lib/helpers/helpers.ts

@@ -0,0 +1,75 @@
+interface StyleDeclaration extends Record<string, string> {
+  property: string;
+  value: string;
+}
+
+function normalizeStyles(css: Partial<CSSStyleDeclaration>): StyleDeclaration {
+  const normalizer = document.createElement("div");
+  document.body.appendChild(normalizer);
+
+  const { expectedStyle } = Object.entries(css).reduce(
+    (acc, [property, value]) => {
+
+      if (typeof value !== "string") {
+        return acc;
+      }
+
+      normalizer.style.setProperty(property, value);
+
+      const normalizedValue = window
+        .getComputedStyle(normalizer)
+        .getPropertyValue(property)
+        .trim();
+
+      return {
+        expectedStyle: {
+          ...acc.expectedStyle,
+          [property]: normalizedValue,
+        },
+      };
+    },
+    { expectedStyle: {} as StyleDeclaration },
+  );
+
+  document.body.removeChild(normalizer);
+
+  return expectedStyle;
+}
+
+function getReceivedStyle (props: string[], received: CSSStyleDeclaration): StyleDeclaration {
+
+  return props.reduce((acc, prop) => {
+
+    const actualStyle = received.getPropertyValue(prop).trim();
+
+    return actualStyle
+    ? { ...acc, [prop]: actualStyle }
+    : acc;
+
+  }, {} as StyleDeclaration);
+}
+
+export const getExpectedAndReceivedStyles =
+(actual: Element, expected: Partial<CSSStyleDeclaration>): StyleDeclaration[] => {
+    if (!actual.ownerDocument.defaultView) {
+      throw new Error("The element is not attached to a document with a default view.");
+    }
+    if (!(actual instanceof HTMLElement)) {
+      throw new Error("The element is not an HTMLElement.");
+    }
+
+    const window = actual.ownerDocument.defaultView;
+
+    const rawElementStyles = window.getComputedStyle(actual);
+
+    const expectedStyle = normalizeStyles(expected);
+
+    const styleKeys = Object.keys(expectedStyle);
+
+    const elementProcessedStyle = getReceivedStyle(styleKeys, rawElementStyles);
+
+    return [
+      expectedStyle,
+      elementProcessedStyle,
+    ];
+};

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 { FocusTestComponent } from "./fixtures/focusTestComponent";
 import { HaveClassTest } from "./fixtures/HaveClassTest";
 import { NestedElementsTest } from "./fixtures/NestedElementsTest";
 import { SimpleTest } from "./fixtures/SimpleTest";
@@ -257,11 +258,157 @@ describe("[Unit] ElementAssertion.test.ts", () => {
         const test = new ElementAssertion(divTest);
 
         expect(() => test.toHaveAllClasses("foo", "bar", "baz"))
-          .toThrowError(AssertionError)
-          .toHaveMessage('Expected the element to have all of these classes: "foo bar baz"');
+        .toThrowError(AssertionError)
+        .toHaveMessage('Expected the element to have all of these classes: "foo bar baz"');
 
         expect(test.not.toHaveAllClasses("foo", "bar", "baz")).toBeEqual(test);
       });
     });
   });
+
+  describe(".toHaveFocus", () => {
+    context("when the element has focus", () => {
+      it("returns the assertion instance", () => {
+        const { getByTestId } = render(<FocusTestComponent />);
+        const input1 = getByTestId("input1");
+        input1.focus();
+        const test = new ElementAssertion(input1);
+
+        expect(test.toHaveFocus()).toBeEqual(test);
+
+        expect(() => test.not.toHaveFocus())
+          .toThrowError(AssertionError)
+          .toHaveMessage("Expected the element NOT to be focused");
+      });
+    });
+
+    context("when the element does not have focus", () => {
+      it("throws an assertion error", () => {
+        const { getByTestId } = render(<FocusTestComponent />);
+        const input1 = getByTestId("input1");
+        const test = new ElementAssertion(input1);
+
+        expect(() => test.toHaveFocus())
+          .toThrowError(AssertionError)
+          .toHaveMessage("Expected the element to be focused");
+
+        expect(test.not.toHaveFocus()).toBeEqual(test);
+      });
+    });
+  });
+  describe(".toHaveStyle", () => {
+    context("when the element has the expected style", () => {
+      it("returns the assertion instance", () => {
+        const { getByTestId } = render(
+        <div
+          className="foo bar test"
+          style={{ border: "1px solid black", color: "red", display: "flex" }}
+          data-testid="test-div"
+        />);
+        const divTest = getByTestId("test-div");
+        const test = new ElementAssertion(divTest);
+
+        expect(test.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" })).toBeEqual(test);
+
+        expect(() => test.not.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" }))
+          .toThrowError(AssertionError)
+          .toHaveMessage(
+            // eslint-disable-next-line max-len
+            'Expected the element to NOT match the following style:\n{\n  "border": "1px solid black",\n  "color": "rgb(255, 0, 0)",\n  "display": "flex"\n}',
+          );
+      });
+    });
+
+    context("when the element does not have the expected style", () => {
+        it("throws an assertion error", () => {
+          const { getByTestId } = render(
+            <div
+              className="foo bar test"
+              style={{ color: "blue", display: "block" }}
+              data-testid="test-div"
+            />,
+          );
+
+          const divTest = getByTestId("test-div");
+          const test = new ElementAssertion(divTest);
+
+          expect(() => test.toHaveStyle(({ border: "1px solid black", color: "red", display: "flex" })))
+            .toThrowError(AssertionError)
+            .toHaveMessage(
+            // eslint-disable-next-line max-len
+            'Expected the element to match the following style:\n{\n  "border": "1px solid black",\n  "color": "rgb(255, 0, 0)",\n  "display": "flex"\n}',
+          );
+
+          expect(test.not.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" })).toBeEqual(test);
+
+        });
+    });
+    context("when the element partially match the style", () => {
+        it("throws an assertion error", () => {
+          const { getByTestId } = render(
+            <div
+              className="foo bar test"
+              style={{ border: "1px solid black", color: "blue", display: "block" }}
+              data-testid="test-div"
+            />,
+          );
+
+          const divTest = getByTestId("test-div");
+          const test = new ElementAssertion(divTest);
+
+          expect(() => test.toHaveStyle(({ color: "red", display: "flex" })))
+            .toThrowError(AssertionError)
+            .toHaveMessage(
+            // eslint-disable-next-line max-len
+          'Expected the element to match the following style:\n{\n  "color": "rgb(255, 0, 0)",\n  "display": "flex"\n}',
+          );
+
+          expect(test.not.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" })).toBeEqual(test);
+
+        });
+    });
+  });
+
+  describe(".toHaveSomeStyle", () => {
+    context("when the element contains one or more expected styles", () => {
+      it("returns the assertion instance", () => {
+        const { getByTestId } = render(
+            <div
+              style={{ color: "blue", maxHeight: "3rem", width: "2rem" }}
+              data-testid="test-div"
+            />,
+          );
+        const divTest = getByTestId("test-div");
+        const test = new ElementAssertion(divTest);
+
+        expect(test.toHaveSomeStyle({ color: "red", display: "flex", height: "3rem", width: "2rem" })).toBeEqual(test);
+
+        expect(() => test.not.toHaveSomeStyle({ color: "blue" }))
+        .toThrowError(AssertionError)
+        // eslint-disable-next-line max-len
+        .toHaveMessage("Expected the element NOT to match some of the following styles:\n{\n  \"color\": \"rgb(0, 0, 255)\"\n}");
+      });
+    });
+
+    context("when the element does not contain any of the expected styles", () => {
+      it("throws an assertion error", () => {
+        const { getByTestId } = render(
+            <div
+              className="foo bar test"
+              style={{ border: "1px solid black", color: "blue", display: "block" }}
+              data-testid="test-div"
+            />,
+          );
+        const divTest = getByTestId("test-div");
+        const test = new ElementAssertion(divTest);
+
+        expect(() => test.toHaveSomeStyle({ color: "red", display: "flex" }))
+        .toThrowError(AssertionError)
+        // eslint-disable-next-line max-len
+        .toHaveMessage("Expected the element to match some of the following styles:\n{\n  \"color\": \"rgb(255, 0, 0)\",\n  \"display\": \"flex\"\n}");
+
+        expect(test.not.toHaveSomeStyle({ border: "1px solid blue", color: "red", display: "flex" })).toBeEqual(test);
+      });
+    });
+  });
 });

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

@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+
+export function FocusTestComponent(): ReactElement {
+  return (
+    <div>
+      <input data-testid="input1" />
+      <input data-testid="input2" />
+    </div>
+  );
+}