Fix negated ".not" modifier usage edge case (#210)

* Fix edge case with negated ".not" modifier and undefined expected value

* Update TS definitions to make expected value optional

* Adding more extensive tests for negated ".not" modifier

Author: santino

src/native/toHaveStyleRule.js

@@ -16,9 +16,10 @@ function toHaveStyleRule(component, property, expected) {
    */
   const mergedStyles = styles.reduce((acc, item) => ({ ...acc, ...item }), {})
   const received = mergedStyles[camelCasedProperty]
-  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
+  const pass =
+    !received && !expected && this.isNot
+      ? false
+      : matcherTest(received, expected)
 
   return {
     pass,

src/toHaveStyleRule.js

@@ -123,9 +123,10 @@ function toHaveStyleRule(component, property, expected, options = {}) {
   const declarations = getDeclarations(rules, property)
   const declaration = declarations.pop() || {}
   const received = declaration.value
-  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
+  const pass =
+    !received && !expected && this.isNot
+      ? false
+      : matcherTest(received, expected)
 
   return {
     pass,

test/native/toHaveStyleRule.spec.js

@@ -92,6 +92,33 @@ test('negated ".not" modifier with no value', () => {
   )
 })
 
+test('negated ".not" modifier with value', () => {
+  const Button = styled.Text`
+    padding: 4px;
+  `
+
+  expect(renderer.create(<Button />).toJSON()).not.toHaveStyleRule(
+    'padding',
+    '2px'
+  )
+  expect(renderer.create(<Button />).toJSON()).not.toHaveStyleRule(
+    'padding',
+    ''
+  )
+  expect(renderer.create(<Button />).toJSON()).not.toHaveStyleRule(
+    'padding',
+    null
+  )
+  expect(renderer.create(<Button />).toJSON()).not.toHaveStyleRule(
+    'padding',
+    false
+  )
+  expect(renderer.create(<Button />).toJSON()).not.toHaveStyleRule(
+    'padding',
+    undefined
+  )
+})
+
 test('jest asymmetric matchers', () => {
   const Button = styled.Text`
     background-color: ${({ transparent }) =>

test/toHaveStyleRule.spec.js

@@ -152,6 +152,18 @@ test('negated ".not" modifier with no value', () => {
   toHaveStyleRule(<Button disabled />, 'opacity', '.65')
 })
 
+test('negated ".not" modifier with value', () => {
+  const Button = styled.button`
+    opacity: 0.65;
+  `
+
+  notToHaveStyleRule(<Button />, 'opacity', '0.50')
+  notToHaveStyleRule(<Button />, 'opacity', '')
+  notToHaveStyleRule(<Button />, 'opacity', null)
+  notToHaveStyleRule(<Button />, 'opacity', false)
+  notToHaveStyleRule(<Button />, 'opacity', undefined)
+})
+
 test('jest asymmetric matchers', () => {
   const Button = styled.button`
     border: 0.1em solid

typings/index.d.ts

@@ -3,7 +3,7 @@ interface AsymmetricMatcher {
   sample?: string | RegExp | object | Array<any> | Function;
 }
 
-type Value = string | number | RegExp | AsymmetricMatcher | undefined
+type Value = string | number | RegExp | AsymmetricMatcher | undefined;
 
 interface Options {
   media?: string;
@@ -14,6 +14,6 @@ interface Options {
 declare namespace jest {
 
   interface Matchers<R> {
-    toHaveStyleRule(property: string, value: Value, options?: Options): R;
+    toHaveStyleRule(property: string, value?: Value, options?: Options): R;
   }
 }