Add: test for partial match

Author: SbsCruz

packages/dom/src/lib/ElementAssertion.ts

@@ -148,8 +148,13 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
   /**
    * Asserts that the element has the specified CSS styles.
    *
-   * @param expected - The expected CSS styles.
-   * @returns The assertion instance.
+   * @example
+   * ```
+   * expect(component).toHaveStyle({ color: 'green', display: 'block' });
+   * ```
+   *
+   * @param expected the expected CSS styles.
+   * @returns the assertion instance.
    */
 
   public toHaveStyle(expected: Partial<CSSStyleDeclaration>): this {

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

@@ -259,68 +259,82 @@ describe("[Unit] ElementAssertion.test.ts", () => {
         expect(() => test.toHaveAllClasses("foo", "bar", "baz"))
         .toThrowError(AssertionError)
         .toHaveMessage('Expected the element to have all of these classes: "foo bar baz"');
-        
+
         expect(test.not.toHaveAllClasses("foo", "bar", "baz")).toBeEqual(test);
       });
     });
   });
-  
+
   describe(".toHaveStyle", () => {
-    context("when the style is passed as a string", () => {
-      context("and the element has the expected style", () => {
-        it("returns the assertion instance", () => {
-          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("display: flex; color: red; border: 1px solid black")).toBeEqual(test);
-          
-          expect(() => test.not.toHaveStyle("display: flex; color: red; border: 1px solid black"))
-            .toThrowError(AssertionError)
-            .toHaveMessage('Expected the element to NOT have {"display":"flex","color":"rgb(255, 0, 0)","border":"1px solid black"} style');
-        });
+    context("when the element has the expected style", () => {
+      it("returns the assertion instance", () => {
+        const { getByTestId } = render(
+        <div
+          className="foo bar test"
+          style={{ border: "1px solid black", color: "red", display: "flex" }}
+          data-testid="test-div"
+        />);
+        const divTest = getByTestId("test-div");
+        const test = new ElementAssertion(divTest);
+
+        expect(test.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" })).toBeEqual(test);
+
+        expect(() => test.not.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" }))
+          .toThrowError(AssertionError)
+          .toHaveMessage(
+            // eslint-disable-next-line max-len
+            'Expected the element to NOT match the following style:\n{\n  "border": "1px solid black",\n  "color": "rgb(255, 0, 0)",\n  "display": "flex"\n}',
+          );
       });
+    });
 
-      context("and the element does not have the expected style", () => {
+    context("when the element does not have the expected style", () => {
         it("throws an assertion error", () => {
-          const { getByTestId } = render(<div className="foo bar test" style={{ display: "flex", color: "red" }} data-testid="test-div" />);
+          const { getByTestId } = render(
+            <div
+              className="foo bar test"
+              style={{ color: "blue", display: "block" }}
+              data-testid="test-div"
+            />,
+          );
+
           const divTest = getByTestId("test-div");
           const test = new ElementAssertion(divTest);
-          
-          expect(test.not.toHaveStyle("color: red; display: flex; border: 1px solid black;")).toBeEqual(test);
+
+          expect(() => test.toHaveStyle(({ border: "1px solid black", color: "red", display: "flex" })))
+            .toThrowError(AssertionError)
+            .toHaveMessage(
+            // eslint-disable-next-line max-len
+            'Expected the element to match the following style:\n{\n  "border": "1px solid black",\n  "color": "rgb(255, 0, 0)",\n  "display": "flex"\n}',
+          );
+
+          expect(test.not.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" })).toBeEqual(test);
 
         });
-      });
     });
+    context("when the element partially match the style", () => {
+        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"
+            />,
+          );
 
-    context("when the style is passed as an object", () => {
-      context("and the element has the expected style", () => {
-        it("returns the assertion instance", () => {
-          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);
 
-          expect(() => test.not.toHaveStyle({color: "red", display: "flex", border: "1px solid black"}))
+          expect(() => test.toHaveStyle(({ color: "red", display: "flex" })))
             .toThrowError(AssertionError)
-            .toHaveMessage('Expected the element to NOT have {"color":"rgb(255, 0, 0)","display":"flex","border":"1px solid black"} style');
-          
-        });
-      });
+            .toHaveMessage(
+            // eslint-disable-next-line max-len
+          'Expected the element to match the following style:\n{\n  "color": "rgb(255, 0, 0)",\n  "display": "flex"\n}',
+          );
+
+          expect(test.not.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" })).toBeEqual(test);
 
-      context("and the element does not have the expected style", () => {
-          it("throws an assertion error", () => {
-            const { getByTestId } = render(<div className="foo bar test" style={{ display: "block", color: "blue" }} 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" })))
-            .toThrowError(AssertionError)
-            .toHaveMessage("Expected the element to have {\"color\":\"rgb(255, 0, 0)\",\"display\":\"flex\",\"border\":\"1px solid black\"} style");
-            
-          });
         });
-      });
+    });
   });
-})
+});