diff --git a/src/__tests__/to-have-style.js b/src/__tests__/to-have-style.js
index 0c313550..6a636f95 100644
--- a/src/__tests__/to-have-style.js
+++ b/src/__tests__/to-have-style.js
@@ -146,26 +146,55 @@ describe('.toHaveStyle', () => {
)
})
- test('handles styles as object', () => {
- const {container} = render(`
-
- Hello World
-
- `)
+ describe('object syntax', () => {
+ test('handles styles as object', () => {
+ const {container} = render(`
+
+ Hello World
+
+ `)
- expect(container.querySelector('.label')).toHaveStyle({
- backgroundColor: 'blue',
- })
- expect(container.querySelector('.label')).toHaveStyle({
- backgroundColor: 'blue',
- height: '100%',
+ expect(container.querySelector('.label')).toHaveStyle({
+ backgroundColor: 'blue',
+ })
+ expect(container.querySelector('.label')).toHaveStyle({
+ backgroundColor: 'blue',
+ height: '100%',
+ })
+ expect(container.querySelector('.label')).not.toHaveStyle({
+ backgroundColor: 'red',
+ height: '100%',
+ })
+ expect(container.querySelector('.label')).not.toHaveStyle({
+ whatever: 'anything',
+ })
})
- expect(container.querySelector('.label')).not.toHaveStyle({
- backgroundColor: 'red',
- height: '100%',
+
+ test('supports dash-cased property names', () => {
+ const {container} = render(`
+
+ Hello World
+
+ `)
+ expect(container.querySelector('.label')).toHaveStyle({
+ 'background-color': 'blue',
+ })
})
- expect(container.querySelector('.label')).not.toHaveStyle({
- whatever: 'anything',
+
+ test('requires strict empty properties matching', () => {
+ const {container} = render(`
+
+ Hello World
+
+ `)
+ expect(container.querySelector('.label')).not.toHaveStyle({
+ width: '100%',
+ height: '',
+ })
+ expect(container.querySelector('.label')).not.toHaveStyle({
+ width: '',
+ height: '',
+ })
})
})
})
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
index 58733365..ec67a43a 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.js
@@ -2,7 +2,6 @@ import {
deprecate,
checkHtmlElement,
HtmlElementTypeError,
- parseJStoCSS,
toSentence,
} from '../utils'
import document from './helpers/document'
@@ -84,40 +83,6 @@ describe('checkHtmlElement', () => {
})
})
-describe('parseJStoCSS', () => {
- describe('when all the styles are valid', () => {
- it('returns the JS parsed as CSS text', () => {
- expect(
- parseJStoCSS(document, {
- backgroundColor: 'blue',
- height: '100%',
- }),
- ).toBe('background-color: blue; height: 100%;')
- })
- })
-
- describe('when some style is invalid', () => {
- it('returns the JS parsed as CSS text without the invalid style', () => {
- expect(
- parseJStoCSS(document, {
- backgroundColor: 'blue',
- whatever: 'anything',
- }),
- ).toBe('background-color: blue;')
- })
- })
-
- describe('when all the styles are invalid', () => {
- it('returns an empty string', () => {
- expect(
- parseJStoCSS(document, {
- whatever: 'anything',
- }),
- ).toBe('')
- })
- })
-})
-
describe('toSentence', () => {
it('turns array into string of comma separated list with default last word connector', () => {
expect(toSentence(['one', 'two', 'three'])).toBe('one, two and three')
diff --git a/src/to-have-style.js b/src/to-have-style.js
index 3e8a155b..a404c40a 100644
--- a/src/to-have-style.js
+++ b/src/to-have-style.js
@@ -1,7 +1,7 @@
import {matcherHint} from 'jest-matcher-utils'
import jestDiff from 'jest-diff'
import chalk from 'chalk'
-import {checkHtmlElement, parseCSS, parseJStoCSS} from './utils'
+import {checkHtmlElement, parseCSS} from './utils'
function getStyleDeclaration(document, css) {
const styles = {}
@@ -21,7 +21,8 @@ function isSubset(styles, computedStyle) {
!!Object.keys(styles).length &&
Object.entries(styles).every(
([prop, value]) =>
- computedStyle.getPropertyValue(prop.toLowerCase()) === value,
+ computedStyle[prop] === value ||
+ computedStyle[prop.toLowerCase()] === value,
)
)
}
@@ -37,7 +38,7 @@ function printoutStyles(styles) {
// received computed styles
function expectedDiff(expected, computedStyles) {
const received = Array.from(computedStyles)
- .filter(prop => expected[prop])
+ .filter(prop => expected[prop] !== undefined)
.reduce(
(obj, prop) =>
Object.assign(obj, {[prop]: computedStyles.getPropertyValue(prop)}),
@@ -51,14 +52,10 @@ function expectedDiff(expected, computedStyles) {
return diffOutput.replace(`${chalk.red('+ Received')}\n`, '')
}
-function getCSStoParse(document, css) {
- return typeof css === 'object' ? parseJStoCSS(document, css) : css
-}
-
export function toHaveStyle(htmlElement, css) {
checkHtmlElement(htmlElement, toHaveStyle, this)
- const cssToParse = getCSStoParse(htmlElement.ownerDocument, css)
- const parsedCSS = parseCSS(cssToParse, toHaveStyle, this)
+ const parsedCSS =
+ typeof css === 'object' ? css : parseCSS(css, toHaveStyle, this)
const {getComputedStyle} = htmlElement.ownerDocument.defaultView
const expected = getStyleDeclaration(htmlElement.ownerDocument, parsedCSS)
diff --git a/src/utils.js b/src/utils.js
index c4fac2cb..b19c581f 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -192,12 +192,6 @@ function compareArraysAsSet(a, b) {
return undefined
}
-function parseJStoCSS(document, css) {
- const sandboxElement = document.createElement('div')
- Object.assign(sandboxElement.style, css)
- return sandboxElement.style.cssText
-}
-
function toSentence(
array,
{wordConnector = ', ', lastWordConnector = ' and '} = {},
@@ -218,6 +212,5 @@ export {
getTag,
getSingleElementValue,
compareArraysAsSet,
- parseJStoCSS,
toSentence,
}