Add: tests for toHaveSomeStyles

Author: SbsCruz

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

@@ -351,7 +351,33 @@ describe("[Unit] ElementAssertion.test.ts", () => {
         const divTest = getByTestId("test-div");
         const test = new ElementAssertion(divTest);
 
-        expect(test.toHaveSomeStyle({ color: "red", display: "block" })).toBeEqual(test);
+        expect(test.toHaveSomeStyle({ color: "blue", display: "flex" })).toBeEqual(test);
+
+        expect(() => test.not.toHaveSomeStyle({ color: "blue" }))
+        .toThrowError(AssertionError)
+        // eslint-disable-next-line max-len
+        .toHaveMessage("Expected the element NOT to match some of the following styles:\n{\n  \"color\": \"rgb(0, 0, 255)\"\n}");
+      });
+    });
+
+    context("when the element does not contain any of the expected styles", () => {
+      it("throws an assertion error", () => {
+        const { getByTestId } = render(
+            <div
+              className="foo bar test"
+              style={{ border: "1px solid black", color: "blue", display: "block" }}
+              data-testid="test-div"
+            />,
+          );
+        const divTest = getByTestId("test-div");
+        const test = new ElementAssertion(divTest);
+
+        expect(() => test.toHaveSomeStyle({ color: "red", display: "flex" }))
+        .toThrowError(AssertionError)
+        // eslint-disable-next-line max-len
+        .toHaveMessage("Expected the element to match some of the following styles:\n{\n  \"color\": \"rgb(255, 0, 0)\",\n  \"display\": \"flex\"\n}");
+
+        expect(test.not.toHaveSomeStyle({ border: "1px solid blue", color: "red", display: "flex" })).toBeEqual(test);
       });
     });
   });