Add integration test that checks styled-components renders successfully and no incorrect unicode characters are present in the style tag

Jarred-Sumner · Jarred-Sumner · commit 20e2040e7e8c · 2021-09-25T02:06:06.000-07:00
diff --git a/integration/scripts/browser.js b/integration/scripts/browser.js
@@ -118,6 +118,7 @@ async function main() {
     "/forbid-in-is-correct.js",
     "/code-simplification-neql-define.js",
     "/spread_with_key.tsx",
+    "/styledcomponents-output.js",
   ];
   tests.reverse();
 
diff --git a/integration/snippets/package.json b/integration/snippets/package.json
@@ -6,6 +6,8 @@
   "dependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
-    "redux": "^4.1.1"
+    "react-dom": "^17.0.2",
+    "redux": "^4.1.1",
+    "styled-components": "^5.3.1"
   }
 }
diff --git a/integration/snippets/public/index.html b/integration/snippets/public/index.html
@@ -7,6 +7,12 @@
   </head>
   <body>
     <script type="module">
+      globalThis.console.assert = (condition, ...content) => {
+        if (!condition) {
+          throw new Error(content.join(" "));
+          
+        }
+      };
       globalThis.getModuleScriptSrc = async (name) => {
         const response = await fetch(name, {
           cache: "force-cache",
diff --git a/integration/snippets/styledcomponents-output.js b/integration/snippets/styledcomponents-output.js
@@ -0,0 +1,58 @@
+import styled from "styled-components";
+import React from "react";
+import ReactDOM from "react-dom";
+
+const ErrorScreenRoot = styled.div`
+  font-family: "Muli", -apple-system, BlinkMacSystemFont, Helvetica, Arial,
+    sans-serif;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+  text-align: center;
+  background-color: #0b2988;
+  color: #fff;
+  font-family: "Muli", -apple-system, BlinkMacSystemFont, Helvetica, Arial,
+    sans-serif;
+  line-height: 1.5em;
+
+  & > p {
+    margin-top: 10px;
+  }
+
+  & a {
+    color: inherit;
+  }
+`;
+
+export function test() {
+  const reactEl = document.createElement("div");
+  document.body.appendChild(reactEl);
+  ReactDOM.render(
+    <ErrorScreenRoot id="error-el">
+      This is an error! Look for the string
+    </ErrorScreenRoot>,
+    reactEl
+  );
+
+  const style = document.querySelector("style[data-styled]");
+  console.assert(style, "style tag should exist");
+  console.assert(
+    style.textContent.split("").every((a) => a.codePointAt(0) < 128),
+    "style tag should not contain invalid unicode codepoints"
+  );
+  console.assert(
+    document.querySelector("#error-el").textContent ===
+      "This is an error! Look for the string"
+  );
+
+  ReactDOM.unmountComponentAtNode(reactEl);
+  reactEl.remove();
+  testDone(import.meta.url);
+}

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,8 @@`
`6`	`6`	`"dependencies": {`
`7`	`7`	`"lodash": "^4.17.21",`
`8`	`8`	`"react": "^17.0.2",`
`9`		`- "redux": "^4.1.1"`
	`9`	`+ "react-dom": "^17.0.2",`
	`10`	`+ "redux": "^4.1.1",`
	`11`	`+ "styled-components": "^5.3.1"`
`10`	`12`	`}`
`11`	`13`	`}`