Add: simplified logic and refactored functions

Author: SbsCruz

packages/dom/src/lib/ElementAssertion.ts

@@ -1,6 +1,7 @@
 import { Assertion, AssertionError } from "@assertive-ts/core";
-import { parse } from "@adobe/css-tools";
-import { CssAtRuleAST, getProps, isSameStyle, normalizeStylesObject, normalizeStylesString } from "./helpers/helpers";
+import equal from "fast-deep-equal";
+
+import { getReceivedStyle, normalizeStyles } from "./helpers/helpers";
 
 export class ElementAssertion<T extends Element> extends Assertion<T> {
 
@@ -144,59 +145,45 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
     );
   }
 
-  private getClassList(): string[] {
-    return this.actual.className.split(/\s+/).filter(Boolean);
-  }
-
   /**
    * Asserts that the element has the specified CSS styles.
    *
-   * @param css - The expected CSS styles.
+   * @param expected - The expected CSS styles.
    * @returns The assertion instance.
    */
 
-  public toHaveStyle(css: Object | string): this {
-    if (this.actual instanceof HTMLElement || this.actual["ownerDocument"]) {
-      const parsedCSS =
-        typeof css === "object"
-          ? css
-          : parse(`selector { ${css} }`, { silent: true }).stylesheet;
-
-      const window = this.actual.ownerDocument.defaultView;
-      const computedStyle = window?.getComputedStyle;
-
-      const expected = parsedCSS as CssAtRuleAST;
-      const received = computedStyle?.(this.actual) as CSSStyleDeclaration;
-      
-      
-      const { props, expectedStyle } =
-      typeof css === "object"
-      ? normalizeStylesObject(css, window!)
-      : normalizeStylesString(expected, window!);
-      
-      const receivedStyle = getProps(props, received);
-
-      const error = new AssertionError({
-        actual: this.actual,
-        message: `Expected the element to have ${JSON.stringify(expectedStyle
-        )} style`,
-        expected: expectedStyle,
-      });
-      const invertedError = new AssertionError({
-        actual: this.actual,
-        message: `Expected the element to NOT have ${JSON.stringify(
-          expectedStyle
-        )} style`,
-      });
-      return this.execute({
-        assertWhen: isSameStyle(expectedStyle, receivedStyle),
-        error,
-        invertedError,
-      });
+  public toHaveStyle(expected: Partial<CSSStyleDeclaration>): this {
+    if (!this.actual.ownerDocument.defaultView) {
+      throw new Error("The element is not attached to a document with a default view.");
+    }
+    if (!(this.actual instanceof HTMLElement)) {
+      throw new Error("The element is not an HTMLElement.");
     }
-    return this;
-  }
 
+    const window = this.actual.ownerDocument.defaultView;
+
+    const received = window.getComputedStyle(this.actual);
+
+    const { props, expectedStyle } = normalizeStyles(expected);
+
+    const receivedStyle = getReceivedStyle(props, received);
+
+    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,
+    });
+    }
 
   /**
    * Helper method to assert the presence or absence of class names.
@@ -233,4 +220,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

@@ -1,27 +1,30 @@
 export interface CssAtRuleAST {
-  rules: Rule[];
   declarations: StyleDeclaration[];
+  rules: Rule[];
 }
 
 interface Rule {
-  selectors: string[];
   declarations: StyleDeclaration[];
+  selectors: string[];
 }
 
 interface StyleDeclaration extends Record<string, string> {
   property: string;
   value: string;
 }
 
-export const normalizeStylesObject = (
-  css: Object,
-  window: Window
-): { props: string[]; expectedStyle: StyleDeclaration } => {
+export const normalizeStyles = (css: Partial<CSSStyleDeclaration>):
+{ expectedStyle: StyleDeclaration; props: string[]; } => {
   const normalizer = document.createElement("div");
   document.body.appendChild(normalizer);
 
   const { props, expectedStyle } = Object.entries(css).reduce(
     (acc, [property, value]) => {
+
+      if (typeof value !== "string") {
+        return acc;
+      }
+
       normalizer.style.setProperty(property, value);
 
       const normalizedValue = window
@@ -30,71 +33,24 @@ export const normalizeStylesObject = (
         .trim();
 
       return {
-        props: [...acc.props, property],
         expectedStyle: {
           ...acc.expectedStyle,
           [property]: normalizedValue,
         },
+        props: [...acc.props, property],
       };
     },
-    { props: [] as string[], expectedStyle: {} as StyleDeclaration }
+    { expectedStyle: {} as StyleDeclaration, props: [] as string[] },
   );
 
   document.body.removeChild(normalizer);
 
-  return { props, expectedStyle };
-};
-
-export const normalizeStylesString = (expectedRule: CssAtRuleAST, window: Window) => {
-  const normalizer = document.createElement("div");
-  document.body.appendChild(normalizer);
-
-  const rules = expectedRule?.rules[0] || { declarations: [] };
-  const { props, expectedStyle } = rules?.declarations.reduce(
-    (acc, { property, value }) => {
-      normalizer.style.setProperty(property, value);
-
-      const normalizedValue = window
-        .getComputedStyle(normalizer)
-        .getPropertyValue(property)
-        .trim();
-
-        return {
-          props: [...acc.props, property],
-          expectedStyle: {
-            ...acc.expectedStyle,
-            [property]: normalizedValue,
-          },
-        };
-      },
-      { props: [] as string[], expectedStyle: {} as StyleDeclaration }
-    );
-
-  document.body.removeChild(normalizer);
-
-  return { props, expectedStyle };
+  return { expectedStyle, props };
 };
 
-export const getProps = (props : string[], received: CSSStyleDeclaration) => {
+export const getReceivedStyle = (props: string[], received: CSSStyleDeclaration): StyleDeclaration => {
   return props.reduce((acc, prop) => {
     acc[prop] = received?.getPropertyValue(prop).trim();
     return acc;
   }, {} as StyleDeclaration);
-
 };
-
-export const isSameStyle = (expectedStyle: StyleDeclaration, receivedStyle: StyleDeclaration): boolean => {
-  return !!Object.keys(expectedStyle).length &&
-    Object.entries(expectedStyle).every(([expectedProp, expectedValue]) => {
-      const isCustomProperty = expectedProp.startsWith("--");
-      const spellingVariants = [expectedProp];
-      expectedProp !== null;
-
-      if (!isCustomProperty)
-        spellingVariants.push(expectedProp.toLowerCase());
-      return spellingVariants.some(
-        (searchProp) => receivedStyle[searchProp] === expectedValue
-      );
-    });
-}
-