Fix failing tests caused by diverging CSS formatting

styled-components · May 27, 2017 · 9894b74 · 9894b74
1 parent b14407b
commit 9894b74
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 15 deletions.
diff --git a/src/test/css.test.js b/src/test/css.test.js
@@ -29,7 +29,7 @@ describe('css features', () => {
     expectCSSMatches(`
       .sc-a {}
       .b {
-        display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+        display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
       }
     `)
   })

diff --git a/src/test/extending.test.js b/src/test/extending.test.js
@@ -76,8 +76,8 @@ describe('extending', () => {
 
     expectCSSMatches(`
       .sc-a {}
-      .c { color: blue; }
-      .c > h1 { font-size: 4rem; }
+      .c{ color: blue; }
+      .c > h1{ font-size: 4rem; }
       .sc-b {}
       .d { color: blue; }
       .d > h1 { font-size: 4rem; }

diff --git a/src/test/rehydration.test.js b/src/test/rehydration.test.js
@@ -188,7 +188,7 @@ describe('rehydration', () => {
       expect(getStyleTags()).toEqual([
         { isLocal: 'false', css: '/* sc-component-id: sc-global-557410406 */ body { background: papayawhip; }', },
         { isLocal: 'true', css: '/* sc-component-id: TWO */ .TWO {} .b { color: red; }', },
-        { isLocal: 'false', css: '/* sc-component-id: sc-global-2299393384 */ body {color: tomato;}', },
+        { isLocal: 'false', css: '/* sc-component-id: sc-global-2299393384 */ body{color: tomato;}', },
       ])
     })
 
@@ -203,8 +203,8 @@ describe('rehydration', () => {
       expect(getStyleTags()).toEqual([
         { isLocal: 'false', css: '/* sc-component-id: sc-global-557410406 */ body { background: papayawhip; }', },
         { isLocal: 'true', css: '/* sc-component-id: TWO */ .TWO {} .b { color: red; }', },
-        { isLocal: 'false', css: '/* sc-component-id: sc-global-2299393384 */ body {color: tomato;}', },
-        { isLocal: 'true', css: '/* sc-component-id: ONE */ .ONE {} .a {color: blue;}', },
+        { isLocal: 'false', css: '/* sc-component-id: sc-global-2299393384 */ body{color: tomato;}', },
+        { isLocal: 'true', css: '/* sc-component-id: ONE */ .ONE {} .a{color: blue;}', },
       ])
     })
   })
@@ -268,10 +268,10 @@ describe('rehydration', () => {
       /* But it is identical, except for... */
       expect(styleTagsAfterAddition[1].outerHTML).toEqual(
         styleTags[1].outerHTML
-        /* ...the new data attribute for the new classname "c"... */
+          /* ...the new data attribute for the new classname "c"... */
           .replace(new RegExp(`${SC_ATTR}="a b"`), `${SC_ATTR}="a b c"`)
           /* ...and the new CSS before the closing tag.  */
-          .replace(/(?=<\/style>)/, '\n/* sc-component-id: THREE */\n.THREE {}\n.c {color: green;}')
+          .replace(/(?=<\/style>)/, '\n/* sc-component-id: THREE */\n.THREE {}\n.c{color: green;}')
       )
 
       /* Note: any future additions don't replace the style tag */

diff --git a/src/test/ssr.test.js b/src/test/ssr.test.js
@@ -13,7 +13,10 @@ const keyframes = _keyframes(() => `keyframe_${index++}`, stringifyRules, css)
 
 let styled
 
-const format = css => stripWhitespace(css).replace(/(\*\/|[}>])/g, "$1\n").replace(/\n\s+/g, "\n")
+const format = css => stripWhitespace(css)
+  .replace(/ {/g, "{")
+  .replace(/(\*\/|[}>])/g, "$1\n")
+  .replace(/\n\s+/g, "\n")
 
 describe('ssr', () => {
   beforeEach(() => {
@@ -35,7 +38,7 @@ describe('ssr', () => {
       /* sc-component-id: sc-a */
       .sc-a {}
       .b { color: red; }
-      
+
       </style>
     `))
   })
@@ -57,13 +60,13 @@ describe('ssr', () => {
       <style type="text/css" data-styled-components="" data-styled-components-is-local="false">
       /* sc-component-id: sc-global-2303210225 */
       body { background: papayawhip; }
-      
+
       </style>
       <style type="text/css" data-styled-components="b" data-styled-components-is-local="true">
       /* sc-component-id: sc-a */
       .sc-a {}
       .b { color: red; }
-      
+
       </style>
     `))
   })
@@ -94,7 +97,7 @@ describe('ssr', () => {
       /* sc-component-id: TWO */
       .TWO {}
       .a {color: blue;}
-      
+
       </style>
     `))
   })

diff --git a/src/test/utils.js b/src/test/utils.js
@@ -54,8 +54,17 @@ const stripComments = (str: string) =>
 export const stripWhitespace = (str: string) =>
   str.trim().replace(/([;\{\}])/g, '$1  ').replace(/\s+/g, ' ')
 
-export const expectCSSMatches = (expectation: string, opts: { ignoreWhitespace: boolean } = { ignoreWhitespace: true }) => {
-  const css = Array.from(document.querySelectorAll('style')).map(tag => tag.innerHTML).join("\n")
+export const expectCSSMatches = (_expectation: string, opts: { ignoreWhitespace: boolean } = { ignoreWhitespace: true }) => {
+  // NOTE: This should normalise both CSS strings to make irrelevant mismatches less likely
+  const expectation = _expectation
+    .replace(/ {/g, '{')
+    .replace(/:\s+;/g, ':;')
+
+  const css = Array.from(document.querySelectorAll('style'))
+    .map(tag => tag.innerHTML)
+    .join('\n')
+    .replace(/ {/g, '{')
+    .replace(/:\s+;/g, ':;')
 
   if (opts.ignoreWhitespace) {
     const stripped = stripWhitespace(stripComments(css))