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, }