Add: test for when styles are the same and the opposite case

Author: SbsCruz

packages/dom/test/unit/lib/ElementAssertion.test.tsx

@@ -266,16 +266,41 @@ describe("[Unit] ElementAssertion.test.ts", () => {
   });
 
   describe(".toHaveStyle", () => {
+    context("when the element has the expected style when passed as string", () => {
+      it("returns the assertion instance when the styles are the same", () => {
+        const { getByTestId } = render(<div className="foo bar test" style={{ display: "flex", color: "red", border: "1px solid black" }} data-testid="test-div" />);
+        const divTest = getByTestId("test-div");
+        const test = new ElementAssertion(divTest);
+
+        expect(test.toHaveStyle("color: red; display: flex; border: 1px solid black")).toBeEqual(test);
+
+    });
+     it("fails the assertion when the styles are not the same", () => {
+        const { getByTestId } = render(<div className="foo bar test" style={{ display: "flex", color: "red" }} data-testid="test-div" />);
+        const divTest = getByTestId("test-div");
+        const test = new ElementAssertion(divTest);
+
+        expect(test.toHaveStyle("color: red; display: flex; border: 1px solid black;")).toBeEqual(test);
+
+    });
     context("when the element has the expected style when passed as object", () => {
-      it("returns the assertion instance when it receives an object", () => {
+      it("returns the assertion instance when the styles are the same", () => {
+        const { getByTestId } = render(<div className="foo bar test" style={{ display: "flex", color: "red", border: "1px solid black" }} data-testid="test-div" />);
+        const divTest = getByTestId("test-div");
+        const test = new ElementAssertion(divTest);
+
+        expect(test.toHaveStyle({color: "red", display: "flex", border: "1px solid black"})).toBeEqual(test);
+
+    });
+     it("fails the assertion when the styles are not the same", () => {
         const { getByTestId } = render(<div className="foo bar test" style={{ display: "flex", color: "red" }} data-testid="test-div" />);
         const divTest = getByTestId("test-div");
         const test = new ElementAssertion(divTest);
 
-        expect(test.toHaveStyle("display: flex; color: red")).toBeEqual(test);
+        expect(test.toHaveStyle({color: "red", display: "flex", border: "1px solid black"})).toBeEqual(test);
 
     });
   });
 })
-
+})
 })