refactor: logic improved

Author: SbsCruz

packages/dom/src/lib/ElementAssertion.ts

@@ -1,7 +1,7 @@
 import { Assertion, AssertionError } from "@assertive-ts/core";
 import equal from "fast-deep-equal";
 
-import { getReceivedStyle, normalizeStyles } from "./helpers/helpers";
+import { getExpectedAndReceivedStyles } from "./helpers/helpers";
 
 export class ElementAssertion<T extends Element> extends Assertion<T> {
 
@@ -196,20 +196,12 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
    */
 
   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.");
-    }
-
-    const window = this.actual.ownerDocument.defaultView;
 
-    const received = window.getComputedStyle(this.actual);
+    const [expectedStyle, receivedStyle] = getExpectedAndReceivedStyles(this.actual, expected);
 
-    const { props, expectedStyle } = normalizeStyles(expected);
-
-    const receivedStyle = getReceivedStyle(props, received);
+    if (!expectedStyle || !receivedStyle) {
+      throw new Error("Currently there are no available styles.");
+    }
 
     const error = new AssertionError({
       actual: this.actual,

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

@@ -1,24 +1,13 @@
-export interface CssAtRuleAST {
-  declarations: StyleDeclaration[];
-  rules: Rule[];
-}
-
-interface Rule {
-  declarations: StyleDeclaration[];
-  selectors: string[];
-}
-
 interface StyleDeclaration extends Record<string, string> {
   property: string;
   value: string;
 }
 
-export const normalizeStyles = (css: Partial<CSSStyleDeclaration>):
-{ expectedStyle: StyleDeclaration; props: string[]; } => {
+function normalizeStyles(css: Partial<CSSStyleDeclaration>): StyleDeclaration {
   const normalizer = document.createElement("div");
   document.body.appendChild(normalizer);
 
-  const { props, expectedStyle } = Object.entries(css).reduce(
+  const { expectedStyle } = Object.entries(css).reduce(
     (acc, [property, value]) => {
 
       if (typeof value !== "string") {
@@ -37,20 +26,50 @@ export const normalizeStyles = (css: Partial<CSSStyleDeclaration>):
           ...acc.expectedStyle,
           [property]: normalizedValue,
         },
-        props: [...acc.props, property],
       };
     },
-    { expectedStyle: {} as StyleDeclaration, props: [] as string[] },
+    { expectedStyle: {} as StyleDeclaration },
   );
 
   document.body.removeChild(normalizer);
 
-  return { expectedStyle, props };
-};
+  return expectedStyle;
+}
+
+function getReceivedStyle (props: string[], received: CSSStyleDeclaration): StyleDeclaration {
 
-export const getReceivedStyle = (props: string[], received: CSSStyleDeclaration): StyleDeclaration => {
   return props.reduce((acc, prop) => {
-    acc[prop] = received?.getPropertyValue(prop).trim();
-    return acc;
+
+    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,
+    ];
 };