Add: Funcionality for object cases

Author: SbsCruz

packages/dom/src/lib/ElementAssertion.ts

@@ -148,14 +148,10 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
   }
 
   public toHaveStyle(css: Object|string): this {
-    const styleTest = document.createElement("div");
-    styleTest.style.color = "red";
-    styleTest.style.display = "flex";
     if (
       this.actual instanceof HTMLElement ||
       this.actual['ownerDocument']
     ) {
-
 
       const parsedCSS = typeof css === 'object' 
       ? css 
@@ -166,8 +162,8 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
       const computedStyle = window?.getComputedStyle;
 
       const expected = parsedCSS
+      console.log("expected: ", expected);
       const received = computedStyle?.(this.actual);
-      const expectedRule = expected.rules[0];
 
       interface StyleDeclaration {
         property: string;
@@ -181,7 +177,23 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
       const normalizer = document.createElement("div");
       document.body.appendChild(normalizer);
 
+      if (typeof css === 'object') {
+        Object.entries(css).map(([property, value]) => {
+          props = [...props, property];
+
+          normalizer.style[property] = value;
+          const normalizedValue = window?.getComputedStyle(normalizer).getPropertyValue(property);
+
+        expectedStyle = {
+          ...expectedStyle,
+          [property]: normalizedValue?.trim(),
 
+        };
+
+      });
+      console.log("EXPECTED STYLE: ", expectedStyle);
+    } else {
+      const expectedRule = expected.rules[0];
       expectedRule.declarations.map((declaration: StyleDeclaration) => {
         const property = declaration.property;
         const value = declaration.value;
@@ -198,6 +210,7 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
 
         return expectedStyle;
       });
+      }
 
       document.body.removeChild(normalizer);