Add: function getExepectedAndReceivedStyles refactored and included on matchers

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> {
 
@@ -158,20 +158,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 { props, expectedStyle } = normalizeStyles(expected);
+    const [expectedStyle, receivedStyle] = getExpectedAndReceivedStyles(this.actual, expected);
 
-    const receivedStyle = getReceivedStyle(props, received);
+    if (!expectedStyle || !receivedStyle) {
+      throw new Error("No available styles.");
+    }
 
     const error = new AssertionError({
       actual: this.actual,
@@ -191,51 +183,43 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
     }
 
   /**
-   * Asserts that the element has the one of the specified CSS style.
+   * Asserts that the element has one or more of the specified CSS style.
    *
    * @example
    * ```
-   * expect(component).toHaveStyle({ color: 'green', display: 'block' });
+   * expect(component).toHaveSomeStyle({ color: 'green', display: 'block' });
    * ```
    *
-   * @param expected the expected CSS styles.
+   * @param expected the expected CSS style/s.
    * @returns the assertion instance.
    */
 
   public toHaveSomeStyle(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 [expectedStyle, receivedStyle] = getExpectedAndReceivedStyles(this.actual, expected);
 
-    const received = window.getComputedStyle(this.actual);
-
-    const { props, expectedStyle } = normalizeStyles(expected);
-
-    const receivedStyle = getReceivedStyle(props, received);
+    if (!expectedStyle || !receivedStyle) {
+      throw new Error("No available styles.");
+    }
 
-    const a = Object.values(receivedStyle).some((receivedItem, idx) => {
+    const hasSomeStyle = Object.values(receivedStyle).some((receivedItem, idx) => {
       const expectedItem = Object.values(expectedStyle)[idx];
       return equal(expectedItem, receivedItem);
     });
 
     const error = new AssertionError({
       actual: this.actual,
-      message: "Error",
+      message: `Expected the element to match some of the following styles:\n${JSON.stringify(expectedStyle, null, 2)}`,
     });
 
     const invertedError = new AssertionError({
       actual: this.actual,
-      message: "Inverted Error",
+      // 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: a,
+      assertWhen: hasSomeStyle,
       error,
       invertedError,
     });

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

@@ -13,7 +13,7 @@ interface StyleDeclaration extends Record<string, string> {
   value: string;
 }
 
-export const normalizeStyles = (css: Partial<CSSStyleDeclaration>):
+const normalizeStyles = (css: Partial<CSSStyleDeclaration>):
 { expectedStyle: StyleDeclaration; props: string[]; } => {
   const normalizer = document.createElement("div");
   document.body.appendChild(normalizer);
@@ -48,9 +48,32 @@ export const normalizeStyles = (css: Partial<CSSStyleDeclaration>):
   return { expectedStyle, props };
 };
 
-export const getReceivedStyle = (props: string[], received: CSSStyleDeclaration): StyleDeclaration => {
+const getReceivedStyle = (props: string[], received: CSSStyleDeclaration): StyleDeclaration => {
   return props.reduce((acc, prop) => {
     acc[prop] = received?.getPropertyValue(prop).trim();
     return 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 received = window.getComputedStyle(actual);
+
+    const { props, expectedStyle } = normalizeStyles(expected);
+
+    const receivedStyle = getReceivedStyle(props, received);
+
+    return [
+      expectedStyle,
+      receivedStyle,
+    ];
+};