From 7103ceab03ef8e6b8a6ecd4e9be8a2aa249e898d Mon Sep 17 00:00:00 2001
From: Santino <santinopuleio@gmail.com>
Date: Sun, 11 Nov 2018 08:47:52 +0000
Subject: [PATCH] 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
---
 src/native/toHaveStyleRule.js       |  7 ++++---
 src/toHaveStyleRule.js              |  7 ++++---
 test/native/toHaveStyleRule.spec.js | 27 +++++++++++++++++++++++++++
 test/toHaveStyleRule.spec.js        | 12 ++++++++++++
 typings/index.d.ts                  |  4 ++--
 5 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/native/toHaveStyleRule.js b/src/native/toHaveStyleRule.js
index 9c076bd..b3a7cbf 100644
--- a/src/native/toHaveStyleRule.js
+++ b/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,
diff --git a/src/toHaveStyleRule.js b/src/toHaveStyleRule.js
index 9ff6d5e..5993fa6 100644
--- a/src/toHaveStyleRule.js
+++ b/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,
diff --git a/test/native/toHaveStyleRule.spec.js b/test/native/toHaveStyleRule.spec.js
index 379f571..26e53bf 100644
--- a/test/native/toHaveStyleRule.spec.js
+++ b/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 }) =>
diff --git a/test/toHaveStyleRule.spec.js b/test/toHaveStyleRule.spec.js
index 276ef82..d81ca78 100644
--- a/test/toHaveStyleRule.spec.js
+++ b/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
diff --git a/typings/index.d.ts b/typings/index.d.ts
index ec66e13..a921ed5 100644
--- a/typings/index.d.ts
+++ b/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;
   }
 }