From 1f930bfbd85428cb6b6446939a2180ba8c1e2f35 Mon Sep 17 00:00:00 2001 From: Santino Puleio Date: Thu, 6 Sep 2018 20:48:37 +0100 Subject: [PATCH 1/3] Fix mediaRegex to allow dot special character to add compatibility with decimal values in media queries --- src/toHaveStyleRule.js | 2 +- test/toHaveStyleRule.spec.js | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/toHaveStyleRule.js b/src/toHaveStyleRule.js index f40207c..ff28cd6 100644 --- a/src/toHaveStyleRule.js +++ b/src/toHaveStyleRule.js @@ -30,7 +30,7 @@ const hasAtRule = options => Object.keys(options).some(option => ['media', 'supports'].includes(option)) const getAtRules = (ast, options) => { - const mediaRegex = /(\([a-z-]+:)\s?([a-z0-9]+\))/g + const mediaRegex = /(\([a-z-]+:)\s?([a-z0-9.]+\))/g return Object.keys(options) .map(option => diff --git a/test/toHaveStyleRule.spec.js b/test/toHaveStyleRule.spec.js index 0b220eb..714d6bb 100644 --- a/test/toHaveStyleRule.spec.js +++ b/test/toHaveStyleRule.spec.js @@ -259,6 +259,9 @@ test('at rules', () => { @media (min-width: 200px) and (max-width: 640px) { color: blue; } + @media (min-width: 576px) and (max-width: 767.98px) { + color: red; + } ` toHaveStyleRule(, 'color', 'red') @@ -280,6 +283,9 @@ test('at rules', () => { toHaveStyleRule(, 'color', 'blue', { media: '(min-width:200px) and (max-width: 640px)', }) + toHaveStyleRule(, 'color', 'red', { + media: '(min-width: 576px) and (max-width: 767.98px)', + }) }) test('selector modifiers', () => { From ab36ea2d5373df7c1011d3fa09b39d600f2e0346 Mon Sep 17 00:00:00 2001 From: Santino Puleio Date: Sun, 4 Nov 2018 19:37:11 +0000 Subject: [PATCH 2/3] toHaveStyleRule to work with not passed expected value and negated ".not" modifier --- src/native/toHaveStyleRule.js | 4 +++- src/toHaveStyleRule.js | 16 +++++++++------- test/native/toHaveStyleRule.spec.js | 14 ++++++++++++++ test/toHaveStyleRule.spec.js | 9 +++++++++ 4 files changed, 35 insertions(+), 8 deletions(-) diff --git a/src/native/toHaveStyleRule.js b/src/native/toHaveStyleRule.js index 73da958..9c076bd 100644 --- a/src/native/toHaveStyleRule.js +++ b/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, diff --git a/src/toHaveStyleRule.js b/src/toHaveStyleRule.js index 5fbf30a..9ff6d5e 100644 --- a/src/toHaveStyleRule.js +++ b/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, diff --git a/test/native/toHaveStyleRule.spec.js b/test/native/toHaveStyleRule.spec.js index 8d55603..379f571 100644 --- a/test/native/toHaveStyleRule.spec.js +++ b/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(