toHaveStyleRule to work with not passed expected value and negated "…

….not" modifier (#206)

* Fix mediaRegex to allow dot special character

to add compatibility with decimal values in media queries

* toHaveStyleRule to work with not passed expected value and negated ".not" modifier

* Updating documentation of `toHaveStyleRule` for negated ".not" modifier usage

README.md

@@ -348,6 +348,7 @@ test('it works', () => {
 
 The `toHaveStyleRule` matcher is useful to test if a given rule is applied to a component.
 The first argument is the expected property, the second is the expected value which can be a String, RegExp, Jest asymmetric matcher or `undefined`.
+When used with a negated ".not" modifier the second argument is optional and can be omitted.
 
 ```js
 const Button = styled.button`
@@ -362,8 +363,9 @@ test('it applies default styles', () => {
   expect(tree).toHaveStyleRule('color', 'red')
   expect(tree).toHaveStyleRule('border', '0.05em solid black')
   expect(tree).toHaveStyleRule('cursor', 'pointer')
-  expect(tree).toHaveStyleRule('opacity', undefined) // equivalent of the following
+  expect(tree).not.toHaveStyleRule('opacity') // equivalent of the following two
   expect(tree).not.toHaveStyleRule('opacity', expect.any(String))
+  expect(tree).toHaveStyleRule('opacity', undefined)
 })
 
 test('it applies styles according to passed props', () => {

src/native/toHaveStyleRule.js

@@ -16,7 +16,9 @@ function toHaveStyleRule(component, property, expected) {
    */
   const mergedStyles = styles.reduce((acc, item) => ({ ...acc, ...item }), {})
   const received = mergedStyles[camelCasedProperty]
-  const pass = matcherTest(received, expected)
+  const matches = matcherTest(received, expected)
+  // if expected value is not passed and we have a negated ".not" modifier we need to flip our assertion
+  const pass = !expected && this.isNot ? !matches : matches
 
   return {
     pass,

src/toHaveStyleRule.js

@@ -101,13 +101,13 @@ const getDeclaration = (rule, property) =>
 const getDeclarations = (rules, property) =>
   rules.map(rule => getDeclaration(rule, property)).filter(Boolean)
 
-const normalizeOptions = (options) =>
+const normalizeOptions = options =>
   options.modifier
-    ? Object.assign(
-        {},
-        options,
-        { modifier: Array.isArray(options.modifier) ? options.modifier.join('') : options.modifier },
-      )
+    ? Object.assign({}, options, {
+        modifier: Array.isArray(options.modifier)
+          ? options.modifier.join('')
+          : options.modifier,
+      })
     : options
 
 function toHaveStyleRule(component, property, expected, options = {}) {
@@ -123,7 +123,9 @@ function toHaveStyleRule(component, property, expected, options = {}) {
   const declarations = getDeclarations(rules, property)
   const declaration = declarations.pop() || {}
   const received = declaration.value
-  const pass = matcherTest(received, expected)
+  const matches = matcherTest(received, expected)
+  // if expected value is not passed and we have a negated ".not" modifier we need to flip our assertion
+  const pass = !expected && this.isNot ? !matches : matches
 
   return {
     pass,

test/native/toHaveStyleRule.spec.js

@@ -78,6 +78,20 @@ test('undefined', () => {
   )
 })
 
+test('negated ".not" modifier with no value', () => {
+  const Button = styled.Text`
+    ${({ transparent }) => !transparent && 'background-color: papayawhip;'};
+  `
+
+  expect(renderer.create(<Button />).toJSON()).toHaveStyleRule(
+    'background-color',
+    'papayawhip'
+  )
+  expect(renderer.create(<Button transparent />).toJSON()).not.toHaveStyleRule(
+    'background-color'
+  )
+})
+
 test('jest asymmetric matchers', () => {
   const Button = styled.Text`
     background-color: ${({ transparent }) =>

test/toHaveStyleRule.spec.js

@@ -143,6 +143,15 @@ test('undefined', () => {
   toHaveStyleRule(<Button disabled />, 'cursor', undefined)
 })
 
+test('negated ".not" modifier with no value', () => {
+  const Button = styled.button`
+    opacity: ${({ disabled }) => disabled && '.65'};
+  `
+
+  notToHaveStyleRule(<Button />, 'opacity')
+  toHaveStyleRule(<Button disabled />, 'opacity', '.65')
+})
+
 test('jest asymmetric matchers', () => {
   const Button = styled.button`
     border: 0.1em solid