diff options
| author |  Jarred Sumner <jarred@jarredsumner.com>
| 2021-09-25 02:06:06 -0700 |
|---|---|---|
| committer | Jarred Sumner <jarred@jarredsumner.com>
| 2021-09-25 02:06:06 -0700 |
| commit | 20e2040e7e8cf2cd1ac2607f97fab8fd52193529 (patch) | |
| tree | 784e858c5c050970bb0d1e7ca11e70f2d20ceb44 | |
| parent | 538f73b2fa3a112111e6500a30f6a065914bd2f7 (diff) | |
| download | bun-v0.0.24.tar.gz bun-v0.0.24.tar.zst bun-v0.0.24.zip | |
Add integration test that checks styled-components renders successfully and no incorrect unicode characters are present in the `style` tagbun-v0.0.24
| -rw-r--r-- | integration/scripts/browser.js | 1 | ||||
| -rw-r--r-- | integration/snippets/package.json | 4 | ||||
| -rw-r--r-- | integration/snippets/public/index.html | 6 | ||||
| -rw-r--r-- | integration/snippets/styledcomponents-output.js | 58 |
4 files changed, 68 insertions, 1 deletions
diff --git a/integration/scripts/browser.js b/integration/scripts/browser.js index 9cd23e4ee..05473c249 100644 --- 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 index 1c0cb8b7b..1e9e250b3 100644 --- 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 index 5358fa423..2c3804a04 100644 --- 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 new file mode 100644 index 000000000..898223c3e --- /dev/null +++ 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); +} |