From b12b4f41fab85a8c5aab95fa0aad2c212d612169 Mon Sep 17 00:00:00 2001 From: Paolo Priotto Date: Tue, 28 Nov 2023 16:19:16 +0100 Subject: [PATCH 1/4] fix: support uppercase custom props in toHaveStyle CSS custom properties are case sensitive fixes #551 --- this commit adds a failing test, the following one makes it pass please squash them together --- src/__tests__/to-have-style.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/__tests__/to-have-style.js b/src/__tests__/to-have-style.js index 0d94efaa..e9982e2a 100644 --- a/src/__tests__/to-have-style.js +++ b/src/__tests__/to-have-style.js @@ -121,9 +121,9 @@ describe('.toHaveStyle', () => { test('handles inline custom properties', () => { const {queryByTestId} = render(` - Hello World + Hello World `) - expect(queryByTestId('color-example')).toHaveStyle('--color: blue') + expect(queryByTestId('color-example')).toHaveStyle('--accentColor: blue') }) test('handles global custom properties', () => { From e7aee1846fc40f296f35de265085b14ca82d3b34 Mon Sep 17 00:00:00 2001 From: Paolo Priotto Date: Tue, 28 Nov 2023 16:24:55 +0100 Subject: [PATCH 2/4] fix: make the test pass please combine me with the previous commit using "squash+merge" --- src/to-have-style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/to-have-style.js b/src/to-have-style.js index f125450c..066a0c75 100644 --- a/src/to-have-style.js +++ b/src/to-have-style.js @@ -20,7 +20,7 @@ function isSubset(styles, computedStyle) { Object.entries(styles).every( ([prop, value]) => computedStyle[prop] === value || - computedStyle.getPropertyValue(prop.toLowerCase()) === value, + computedStyle.getPropertyValue(prop) === value, ) ) } From 118f29584857d2a3bf4b419af166b779973cb1ec Mon Sep 17 00:00:00 2001 From: Paolo Priotto Date: Wed, 29 Nov 2023 15:34:44 +0100 Subject: [PATCH 3/4] fix: handle different use cases --- src/__tests__/to-have-style.js | 6 +++--- src/to-have-style.js | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/__tests__/to-have-style.js b/src/__tests__/to-have-style.js index e9982e2a..b01dd858 100644 --- a/src/__tests__/to-have-style.js +++ b/src/__tests__/to-have-style.js @@ -119,7 +119,7 @@ describe('.toHaveStyle', () => { ) }) - test('handles inline custom properties', () => { + test('handles inline custom properties (with uppercase letters)', () => { const {queryByTestId} = render(` Hello World `) @@ -205,7 +205,7 @@ describe('.toHaveStyle', () => { Hello World `) expect(queryByTestId('color-example')).toHaveStyle({ - fontSize: 12 + fontSize: 12, }) }) @@ -214,7 +214,7 @@ describe('.toHaveStyle', () => { Hello World `) expect(() => { - expect(queryByTestId('color-example')).toHaveStyle({ fontSize: '12px' }) + expect(queryByTestId('color-example')).toHaveStyle({fontSize: '12px'}) }).toThrowError() }) diff --git a/src/to-have-style.js b/src/to-have-style.js index 066a0c75..aba3ce61 100644 --- a/src/to-have-style.js +++ b/src/to-have-style.js @@ -20,7 +20,8 @@ function isSubset(styles, computedStyle) { Object.entries(styles).every( ([prop, value]) => computedStyle[prop] === value || - computedStyle.getPropertyValue(prop) === value, + computedStyle.getPropertyValue(prop) === value || + computedStyle.getPropertyValue(prop.toLowerCase()) === value, ) ) } From 90296fc05608f5c5efe1eb3b784cdfb7a1dac84b Mon Sep 17 00:00:00 2001 From: Paolo Priotto Date: Thu, 30 Nov 2023 08:43:04 +0100 Subject: [PATCH 4/4] fix: turned out to be a little more complex --- src/__tests__/to-have-style.js | 6 ++++++ src/to-have-style.js | 17 +++++++++++------ 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/__tests__/to-have-style.js b/src/__tests__/to-have-style.js index b01dd858..5991a7e9 100644 --- a/src/__tests__/to-have-style.js +++ b/src/__tests__/to-have-style.js @@ -70,6 +70,7 @@ describe('.toHaveStyle', () => { background-color: black; color: white; float: left; + --var-name: 0px; transition: opacity 0.2s ease-out, top 0.3s cubic-bezier(1.175, 0.885, 0.32, 1.275); } ` @@ -92,6 +93,11 @@ describe('.toHaveStyle', () => { ), ).toThrowError() + // Custom property names are case sensitive + expect(() => + expect(container.querySelector('.label')).toHaveStyle('--VAR-NAME: 0px;'), + ).toThrowError() + // Make sure the test fails if the css syntax is not valid expect(() => expect(container.querySelector('.label')).not.toHaveStyle( diff --git a/src/to-have-style.js b/src/to-have-style.js index aba3ce61..010e2a5d 100644 --- a/src/to-have-style.js +++ b/src/to-have-style.js @@ -17,12 +17,17 @@ function getStyleDeclaration(document, css) { function isSubset(styles, computedStyle) { return ( !!Object.keys(styles).length && - Object.entries(styles).every( - ([prop, value]) => - computedStyle[prop] === value || - computedStyle.getPropertyValue(prop) === value || - computedStyle.getPropertyValue(prop.toLowerCase()) === value, - ) + Object.entries(styles).every(([prop, value]) => { + const isCustomProperty = prop.startsWith('--') + const spellingVariants = [prop] + if (!isCustomProperty) spellingVariants.push(prop.toLowerCase()) + + return spellingVariants.some( + name => + computedStyle[name] === value || + computedStyle.getPropertyValue(name) === value, + ) + }) ) }