From 37aeab02c9cb71810a1419f6b9f91a3c1677da31 Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Fri, 1 Aug 2025 14:04:57 -0500 Subject: [PATCH 01/15] Chore: added parse lib from adobe --- packages/dom/package.json | 1 + yarn.lock | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/packages/dom/package.json b/packages/dom/package.json index db420e8..cd59763 100644 --- a/packages/dom/package.json +++ b/packages/dom/package.json @@ -35,6 +35,7 @@ "test": "NODE_ENV=test mocha" }, "dependencies": { + "@adobe/css-tools": "^4.4.3", "fast-deep-equal": "^3.1.3", "tslib": "^2.6.2" }, diff --git a/yarn.lock b/yarn.lock index 12ff163..a2fc3e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12,6 +12,13 @@ __metadata: languageName: node linkType: hard +"@adobe/css-tools@npm:^4.4.3": + version: 4.4.3 + resolution: "@adobe/css-tools@npm:4.4.3" + checksum: 10/701379c514b7a43ca6681705a93cd57ad79565cfef9591122e9499897550cf324a5e5bb1bc51df0e7433cf0e91b962c90f18ac459dcc98b2431daa04aa63cb20 + languageName: node + linkType: hard + "@ampproject/remapping@npm:^2.2.0": version: 2.2.1 resolution: "@ampproject/remapping@npm:2.2.1" @@ -49,6 +56,7 @@ __metadata: version: 0.0.0-use.local resolution: "@assertive-ts/dom@workspace:packages/dom" dependencies: + "@adobe/css-tools": "npm:^4.4.3" "@assertive-ts/core": "workspace:^" "@testing-library/dom": "npm:^10.1.0" "@testing-library/react": "npm:^16.0.0" From 2aa17b4404b8da2c6cba3183dffff2e58c39b3b4 Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Fri, 1 Aug 2025 14:08:16 -0500 Subject: [PATCH 02/15] Add: toHaveStyle tests first approach --- packages/dom/test/unit/lib/ElementAssertion.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dom/test/unit/lib/ElementAssertion.test.tsx b/packages/dom/test/unit/lib/ElementAssertion.test.tsx index 1a77fe2..5b2ada1 100644 --- a/packages/dom/test/unit/lib/ElementAssertion.test.tsx +++ b/packages/dom/test/unit/lib/ElementAssertion.test.tsx @@ -1,5 +1,5 @@ import { AssertionError, expect } from "@assertive-ts/core"; -import { render } from "@testing-library/react"; +import { getByTestId, render } from "@testing-library/react"; import { ElementAssertion } from "../../../src/lib/ElementAssertion"; From 98b1535d188c80a7c42181d1ac2a22ec18174624 Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Wed, 27 Aug 2025 13:37:18 -0500 Subject: [PATCH 03/15] Add: refactored test --- packages/dom/test/unit/lib/ElementAssertion.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dom/test/unit/lib/ElementAssertion.test.tsx b/packages/dom/test/unit/lib/ElementAssertion.test.tsx index 5b2ada1..1a77fe2 100644 --- a/packages/dom/test/unit/lib/ElementAssertion.test.tsx +++ b/packages/dom/test/unit/lib/ElementAssertion.test.tsx @@ -1,5 +1,5 @@ import { AssertionError, expect } from "@assertive-ts/core"; -import { getByTestId, render } from "@testing-library/react"; +import { render } from "@testing-library/react"; import { ElementAssertion } from "../../../src/lib/ElementAssertion"; From fc770a7f45df627ed7d7e87b0bfba6f6c7553da5 Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Mon, 1 Sep 2025 15:36:31 -0500 Subject: [PATCH 04/15] Add: simplified logic and refactored functions --- packages/dom/src/lib/helpers/helpers.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/dom/src/lib/helpers/helpers.ts b/packages/dom/src/lib/helpers/helpers.ts index e8eaab8..de94f06 100644 --- a/packages/dom/src/lib/helpers/helpers.ts +++ b/packages/dom/src/lib/helpers/helpers.ts @@ -26,6 +26,7 @@ function normalizeStyles(css: Partial): StyleDeclaration { ...acc.expectedStyle, [property]: normalizedValue, }, + props: [...acc.props, property], }; }, { expectedStyle: {} as StyleDeclaration }, From 542383850323c22761ac8a779d329a993911c2d6 Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Fri, 19 Dec 2025 12:49:17 -0500 Subject: [PATCH 05/15] refactor: logic improved --- packages/dom/src/lib/helpers/helpers.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/dom/src/lib/helpers/helpers.ts b/packages/dom/src/lib/helpers/helpers.ts index de94f06..e8eaab8 100644 --- a/packages/dom/src/lib/helpers/helpers.ts +++ b/packages/dom/src/lib/helpers/helpers.ts @@ -26,7 +26,6 @@ function normalizeStyles(css: Partial): StyleDeclaration { ...acc.expectedStyle, [property]: normalizedValue, }, - props: [...acc.props, property], }; }, { expectedStyle: {} as StyleDeclaration }, From 31c7b5e762a8b1e4d71ad7854510f9f7cf2dedd1 Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Fri, 19 Dec 2025 12:49:51 -0500 Subject: [PATCH 06/15] chore: removed @adobe/css-tools since it's not longer used --- packages/dom/package.json | 1 - yarn.lock | 8 -------- 2 files changed, 9 deletions(-) diff --git a/packages/dom/package.json b/packages/dom/package.json index cd59763..db420e8 100644 --- a/packages/dom/package.json +++ b/packages/dom/package.json @@ -35,7 +35,6 @@ "test": "NODE_ENV=test mocha" }, "dependencies": { - "@adobe/css-tools": "^4.4.3", "fast-deep-equal": "^3.1.3", "tslib": "^2.6.2" }, diff --git a/yarn.lock b/yarn.lock index a2fc3e6..12ff163 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12,13 +12,6 @@ __metadata: languageName: node linkType: hard -"@adobe/css-tools@npm:^4.4.3": - version: 4.4.3 - resolution: "@adobe/css-tools@npm:4.4.3" - checksum: 10/701379c514b7a43ca6681705a93cd57ad79565cfef9591122e9499897550cf324a5e5bb1bc51df0e7433cf0e91b962c90f18ac459dcc98b2431daa04aa63cb20 - languageName: node - linkType: hard - "@ampproject/remapping@npm:^2.2.0": version: 2.2.1 resolution: "@ampproject/remapping@npm:2.2.1" @@ -56,7 +49,6 @@ __metadata: version: 0.0.0-use.local resolution: "@assertive-ts/dom@workspace:packages/dom" dependencies: - "@adobe/css-tools": "npm:^4.4.3" "@assertive-ts/core": "workspace:^" "@testing-library/dom": "npm:^10.1.0" "@testing-library/react": "npm:^16.0.0" From b3a2cfd0bba0ce9e3e3a49052cb54451be8d03e3 Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Fri, 1 Aug 2025 14:08:16 -0500 Subject: [PATCH 07/15] Add: toHaveStyle tests first approach --- packages/dom/test/unit/lib/ElementAssertion.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dom/test/unit/lib/ElementAssertion.test.tsx b/packages/dom/test/unit/lib/ElementAssertion.test.tsx index 1a77fe2..5b2ada1 100644 --- a/packages/dom/test/unit/lib/ElementAssertion.test.tsx +++ b/packages/dom/test/unit/lib/ElementAssertion.test.tsx @@ -1,5 +1,5 @@ import { AssertionError, expect } from "@assertive-ts/core"; -import { render } from "@testing-library/react"; +import { getByTestId, render } from "@testing-library/react"; import { ElementAssertion } from "../../../src/lib/ElementAssertion"; From d930814b641c414613d5c7eeb5102391956bcb7a Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Wed, 27 Aug 2025 13:37:18 -0500 Subject: [PATCH 08/15] Add: refactored test --- packages/dom/test/unit/lib/ElementAssertion.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dom/test/unit/lib/ElementAssertion.test.tsx b/packages/dom/test/unit/lib/ElementAssertion.test.tsx index 5b2ada1..1a77fe2 100644 --- a/packages/dom/test/unit/lib/ElementAssertion.test.tsx +++ b/packages/dom/test/unit/lib/ElementAssertion.test.tsx @@ -1,5 +1,5 @@ import { AssertionError, expect } from "@assertive-ts/core"; -import { getByTestId, render } from "@testing-library/react"; +import { render } from "@testing-library/react"; import { ElementAssertion } from "../../../src/lib/ElementAssertion"; From 6b714217a1a91d927d25d9dfa2540d83df74028f Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Mon, 1 Sep 2025 15:36:31 -0500 Subject: [PATCH 09/15] Add: simplified logic and refactored functions --- packages/dom/src/lib/helpers/helpers.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/dom/src/lib/helpers/helpers.ts b/packages/dom/src/lib/helpers/helpers.ts index e8eaab8..de94f06 100644 --- a/packages/dom/src/lib/helpers/helpers.ts +++ b/packages/dom/src/lib/helpers/helpers.ts @@ -26,6 +26,7 @@ function normalizeStyles(css: Partial): StyleDeclaration { ...acc.expectedStyle, [property]: normalizedValue, }, + props: [...acc.props, property], }; }, { expectedStyle: {} as StyleDeclaration }, From 8e8e5eb79ec321c92eb6d13291b9e2b8da0fb4a5 Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Mon, 6 Oct 2025 15:48:16 -0500 Subject: [PATCH 10/15] Add: toHaveSomeStyle matcher and tests first approach --- packages/dom/src/lib/ElementAssertion.ts | 51 +++++++++++++++++++ .../test/unit/lib/ElementAssertion.test.tsx | 18 +++++++ 2 files changed, 69 insertions(+) diff --git a/packages/dom/src/lib/ElementAssertion.ts b/packages/dom/src/lib/ElementAssertion.ts index 2ae9b29..a0ecca7 100644 --- a/packages/dom/src/lib/ElementAssertion.ts +++ b/packages/dom/src/lib/ElementAssertion.ts @@ -216,6 +216,57 @@ export class ElementAssertion extends Assertion { }); } + /** + * Asserts that the element has the one of the specified CSS style. + * + * @example + * ``` + * expect(component).toHaveStyle({ color: 'green', display: 'block' }); + * ``` + * + * @param expected the expected CSS styles. + * @returns the assertion instance. + */ + + public toHaveSomeStyle(expected: Partial): 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 receivedStyle = getReceivedStyle(props, received); + + const a = 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", + }); + + const invertedError = new AssertionError({ + actual: this.actual, + message: "Inverted Error", + }); + + return this.execute({ + assertWhen: a, + error, + invertedError, + }); + } + /** * Helper method to assert the presence or absence of class names. * diff --git a/packages/dom/test/unit/lib/ElementAssertion.test.tsx b/packages/dom/test/unit/lib/ElementAssertion.test.tsx index 1a77fe2..133a4ec 100644 --- a/packages/dom/test/unit/lib/ElementAssertion.test.tsx +++ b/packages/dom/test/unit/lib/ElementAssertion.test.tsx @@ -368,4 +368,22 @@ describe("[Unit] ElementAssertion.test.ts", () => { }); }); }); + + describe(".toHaveSomeStyle", () => { + context("when the element contains one or more expected styles", () => { + it("returns the assertion instance", () => { + const { getByTestId } = render( +
, + ); + const divTest = getByTestId("test-div"); + const test = new ElementAssertion(divTest); + + expect(test.toHaveSomeStyle({ color: "red", display: "block" })).toBeEqual(test); + }); + }); + }); }); From 03dfe78aa50b279c6b76cec06b243b14ecc4a038 Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Tue, 7 Oct 2025 11:30:36 -0500 Subject: [PATCH 11/15] Add: function getExepectedAndReceivedStyles refactored and included on matchers --- packages/dom/src/lib/ElementAssertion.ts | 32 +++++++++--------------- 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/packages/dom/src/lib/ElementAssertion.ts b/packages/dom/src/lib/ElementAssertion.ts index a0ecca7..b9de310 100644 --- a/packages/dom/src/lib/ElementAssertion.ts +++ b/packages/dom/src/lib/ElementAssertion.ts @@ -217,51 +217,43 @@ export class ElementAssertion extends Assertion { } /** - * 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): 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 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, }); From 06d217c083a2e45c91087cb2d0cc26ba77282938 Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Tue, 7 Oct 2025 11:31:15 -0500 Subject: [PATCH 12/15] Add: tests for toHaveSomeStyles --- .../test/unit/lib/ElementAssertion.test.tsx | 28 ++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/packages/dom/test/unit/lib/ElementAssertion.test.tsx b/packages/dom/test/unit/lib/ElementAssertion.test.tsx index 133a4ec..e277521 100644 --- a/packages/dom/test/unit/lib/ElementAssertion.test.tsx +++ b/packages/dom/test/unit/lib/ElementAssertion.test.tsx @@ -382,7 +382,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( +
, + ); + 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); }); }); }); From de5c440963940cce50df8d23db028fc2f3b38c30 Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Mon, 20 Oct 2025 13:41:58 -0500 Subject: [PATCH 13/15] Add: properties to test --- packages/dom/test/unit/lib/ElementAssertion.test.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/dom/test/unit/lib/ElementAssertion.test.tsx b/packages/dom/test/unit/lib/ElementAssertion.test.tsx index e277521..182ea34 100644 --- a/packages/dom/test/unit/lib/ElementAssertion.test.tsx +++ b/packages/dom/test/unit/lib/ElementAssertion.test.tsx @@ -374,15 +374,14 @@ describe("[Unit] ElementAssertion.test.ts", () => { it("returns the assertion instance", () => { const { getByTestId } = render(
, ); const divTest = getByTestId("test-div"); const test = new ElementAssertion(divTest); - expect(test.toHaveSomeStyle({ color: "blue", display: "flex" })).toBeEqual(test); + expect(test.toHaveSomeStyle({ color: "red", display: "flex", height: "3rem", width: "2rem" })).toBeEqual(test); expect(() => test.not.toHaveSomeStyle({ color: "blue" })) .toThrowError(AssertionError) From 95c33c3f06392bd65104dfa4d43d1ac9b2cdd6b3 Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Mon, 20 Oct 2025 13:43:08 -0500 Subject: [PATCH 14/15] Add: getReceivedStyle function enhanced --- packages/dom/src/lib/ElementAssertion.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/dom/src/lib/ElementAssertion.ts b/packages/dom/src/lib/ElementAssertion.ts index b9de310..3b9bdc6 100644 --- a/packages/dom/src/lib/ElementAssertion.ts +++ b/packages/dom/src/lib/ElementAssertion.ts @@ -217,7 +217,7 @@ export class ElementAssertion extends Assertion { } /** - * Asserts that the element has one or more of the specified CSS style. + * Asserts that the element has one or more of the specified CSS styles. * * @example * ``` @@ -230,15 +230,16 @@ export class ElementAssertion extends Assertion { public toHaveSomeStyle(expected: Partial): this { - const [expectedStyle, receivedStyle] = getExpectedAndReceivedStyles(this.actual, expected); + const [expectedStyle, elementProcessedStyle] = getExpectedAndReceivedStyles(this.actual, expected); - if (!expectedStyle || !receivedStyle) { + if (!expectedStyle || !elementProcessedStyle) { throw new Error("No available styles."); } - const hasSomeStyle = Object.values(receivedStyle).some((receivedItem, idx) => { - const expectedItem = Object.values(expectedStyle)[idx]; - return equal(expectedItem, receivedItem); + const hasSomeStyle = Object.entries(expectedStyle).some(([expectedProp, expectedValue]) => { + return Object.entries(elementProcessedStyle).some(([receivedProp, receivedValue]) => { + return equal(expectedProp, receivedProp) && equal(expectedValue, receivedValue); + }); }); const error = new AssertionError({ From 2024909cb0e58ee6f37703cf054be6b724d3df69 Mon Sep 17 00:00:00 2001 From: Sebas Cruz Date: Tue, 30 Dec 2025 11:58:20 -0500 Subject: [PATCH 15/15] Feat: removed unnecessary line --- packages/dom/src/lib/helpers/helpers.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/dom/src/lib/helpers/helpers.ts b/packages/dom/src/lib/helpers/helpers.ts index de94f06..e8eaab8 100644 --- a/packages/dom/src/lib/helpers/helpers.ts +++ b/packages/dom/src/lib/helpers/helpers.ts @@ -26,7 +26,6 @@ function normalizeStyles(css: Partial): StyleDeclaration { ...acc.expectedStyle, [property]: normalizedValue, }, - props: [...acc.props, property], }; }, { expectedStyle: {} as StyleDeclaration },