Update snapshots and node env for some tests

atlassian-labs · Feb 14, 2023 · 451e3f7 · 451e3f7
1 parent 999b394
commit 451e3f7
Show file tree

Hide file tree

Showing 22 changed files with 1,311 additions and 965 deletions.
diff --git a/package.json b/package.json
@@ -92,6 +92,7 @@
     "flowgen": "^1.20.1",
     "husky": "^4.3.8",
     "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "jest-extended": "^0.11.5",
     "jest-watch-typeahead": "^0.6.5",
     "loki": "^0.31.0",

diff --git a/packages/babel-plugin/src/__tests__/css-builder.test.ts b/packages/babel-plugin/src/__tests__/css-builder.test.ts
@@ -28,20 +28,20 @@ describe('css builder', () => {
     expect(actual).toIncludeMultiple(['{color:var(--_1ylxx6h)}', '"--_1ylxx6h": ix(color)']);
 
     expect(actual).toMatchInlineSnapshot(`
-      "import * as React from \\"react\\";
-      import { ax, ix, CC, CS } from \\"@compiled/react/runtime\\";
-      const _2 = \\"._syaz1aj3{color:var(--_1ylxx6h)}\\";
-      const _ = \\"._bfhk8ruw{background-color:var(--_agotg1)}\\";
+      "import * as React from "react";
+      import { ax, ix, CC, CS } from "@compiled/react/runtime";
+      const _2 = "._syaz1aj3{color:var(--_1ylxx6h)}";
+      const _ = "._bfhk8ruw{background-color:var(--_agotg1)}";
       const getBackgroundColor = (color) => color;
       const color = baseColor;
       <CC>
         <CS>{[_, _2]}</CS>
         {
           <div
-            className={ax([\\"_bfhk8ruw _syaz1aj3\\"])}
+            className={ax(["_bfhk8ruw _syaz1aj3"])}
             style={{
-              \\"--_agotg1\\": ix(getBackgroundColor(customBackgroundColor)),
-              \\"--_1ylxx6h\\": ix(color),
+              "--_agotg1": ix(getBackgroundColor(customBackgroundColor)),
+              "--_1ylxx6h": ix(color),
             }}
           />
         }

diff --git a/packages/babel-plugin/src/__tests__/index.test.ts b/packages/babel-plugin/src/__tests__/index.test.ts
@@ -17,7 +17,7 @@ describe('babel plugin', () => {
     `);
 
     expect(actual).toMatchInlineSnapshot(`
-      "import { ClassNames } from \\"@compiled/react/runtime\\";
+      "import { ClassNames } from "@compiled/react/runtime";
       "
     `);
   });
@@ -59,27 +59,27 @@ describe('babel plugin', () => {
 
     expect(actual).toMatchInlineSnapshot(`
       "/* File generated by @compiled/babel-plugin v0.0.0 */
-      import { forwardRef } from \\"react\\";
-      import * as React from \\"react\\";
-      import { ax, ix, CC, CS } from \\"@compiled/react/runtime\\";
-      const _ = \\"._1wyb1fwx{font-size:12px}\\";
+      import { forwardRef } from "react";
+      import * as React from "react";
+      import { ax, ix, CC, CS } from "@compiled/react/runtime";
+      const _ = "._1wyb1fwx{font-size:12px}";
       const MyDiv = forwardRef(
-        ({ as: C = \\"div\\", style: __cmpls, ...__cmplp }, __cmplr) => {
+        ({ as: C = "div", style: __cmpls, ...__cmplp }, __cmplr) => {
           return (
             <CC>
               <CS>{[_]}</CS>
               <C
                 {...__cmplp}
                 style={__cmpls}
                 ref={__cmplr}
-                className={ax([\\"_1wyb1fwx\\", __cmplp.className])}
+                className={ax(["_1wyb1fwx", __cmplp.className])}
               />
             </CC>
           );
         }
       );
-      if (process.env.NODE_ENV !== \\"production\\") {
-        MyDiv.displayName = \\"MyDiv\\";
+      if (process.env.NODE_ENV !== "production") {
+        MyDiv.displayName = "MyDiv";
       }
       "
     `);
@@ -96,14 +96,14 @@ describe('babel plugin', () => {
 
     expect(actual).toMatchInlineSnapshot(`
       "/* File generated by @compiled/babel-plugin v0.0.0 */
-      import * as React from \\"react\\";
-      import { ax, ix, CC, CS } from \\"@compiled/react/runtime\\";
-      const _ = \\"._1wyb1fwx{font-size:12px}\\";
+      import * as React from "react";
+      import { ax, ix, CC, CS } from "@compiled/react/runtime";
+      const _ = "._1wyb1fwx{font-size:12px}";
       const MyDiv = () => {
         return (
           <CC>
             <CS>{[_]}</CS>
-            {<div className={ax([\\"_1wyb1fwx\\"])}>hello</div>}
+            {<div className={ax(["_1wyb1fwx"])}>hello</div>}
           </CC>
         );
       };
@@ -126,14 +126,14 @@ describe('babel plugin', () => {
     expect(actual).toMatchInlineSnapshot(`
       "/* File generated by @compiled/babel-plugin v0.0.0 */
       // @flow strict-local
-      import { ax, ix, CC, CS } from \\"@compiled/react/runtime\\";
-      import React from \\"react\\";
-      const _ = \\"._1wyb1fwx{font-size:12px}\\";
+      import { ax, ix, CC, CS } from "@compiled/react/runtime";
+      import React from "react";
+      const _ = "._1wyb1fwx{font-size:12px}";
       const MyDiv = () => {
         return (
           <CC>
             <CS>{[_]}</CS>
-            {<div className={ax([\\"_1wyb1fwx\\"])}>hello</div>}
+            {<div className={ax(["_1wyb1fwx"])}>hello</div>}
           </CC>
         );
       };
@@ -151,7 +151,7 @@ describe('babel plugin', () => {
     `);
 
     expect(actual).toMatchInlineSnapshot(`
-      "import { CC } from \\"@compiled/react/runtime\\";
+      "import { CC } from "@compiled/react/runtime";
       <CC>
         <div />
       </CC>;
@@ -173,14 +173,14 @@ describe('babel plugin', () => {
 
     expect(actual).toMatchInlineSnapshot(`
       "/* File generated by @compiled/babel-plugin v0.0.0 */
-      import * as React from \\"react\\";
-      import { CC as CompiledRoot, ax, ix, CC, CS } from \\"@compiled/react/runtime\\";
-      const _ = \\"._1e0c1ule{display:block}\\";
-      const classes = ax([\\"1\\", \\"2\\"]);
+      import * as React from "react";
+      import { CC as CompiledRoot, ax, ix, CC, CS } from "@compiled/react/runtime";
+      const _ = "._1e0c1ule{display:block}";
+      const classes = ax(["1", "2"]);
       <CompiledRoot>
         <CC>
           <CS>{[_]}</CS>
-          {<div className={ax([\\"_1e0c1ule\\"])} />}
+          {<div className={ax(["_1e0c1ule"])} />}
         </CC>
       </CompiledRoot>;
       "

diff --git a/packages/babel-plugin/src/__tests__/jsx-automatic.test.ts b/packages/babel-plugin/src/__tests__/jsx-automatic.test.ts
@@ -11,17 +11,17 @@ describe('jsx automatic', () => {
     `);
 
     expect(actual).toMatchInlineSnapshot(`
-      "import { ax, ix, CC, CS } from \\"@compiled/react/runtime\\";
-      import { jsxs as _jsxs } from \\"react/jsx-runtime\\";
-      import { jsx as _jsx } from \\"react/jsx-runtime\\";
-      const _ = \\"._syaz13q2{color:blue}\\";
+      "import { ax, ix, CC, CS } from "@compiled/react/runtime";
+      import { jsxs as _jsxs } from "react/jsx-runtime";
+      import { jsx as _jsx } from "react/jsx-runtime";
+      const _ = "._syaz13q2{color:blue}";
       _jsxs(CC, {
         children: [
           _jsx(CS, {
             children: [_],
           }),
-          _jsx(\\"div\\", {
-            className: ax([\\"_syaz13q2\\"]),
+          _jsx("div", {
+            className: ax(["_syaz13q2"]),
           }),
         ],
       });
@@ -39,17 +39,17 @@ describe('jsx automatic', () => {
     `);
 
     expect(actual).toMatchInlineSnapshot(`
-      "import { ax, ix, CC, CS } from \\"@compiled/react/runtime\\";
-      import { jsx as _jsx } from \\"react/jsx-runtime\\";
-      import { jsxs as _jsxs } from \\"react/jsx-runtime\\";
-      const _ = \\"._syaz13q2{color:blue}\\";
+      "import { ax, ix, CC, CS } from "@compiled/react/runtime";
+      import { jsx as _jsx } from "react/jsx-runtime";
+      import { jsxs as _jsxs } from "react/jsx-runtime";
+      const _ = "._syaz13q2{color:blue}";
       _jsxs(CC, {
         children: [
           _jsx(CS, {
             children: [_],
           }),
-          _jsx(\\"div\\", {
-            className: \\"_syaz13q2\\",
+          _jsx("div", {
+            className: "_syaz13q2",
           }),
         ],
       });
@@ -67,12 +67,12 @@ describe('jsx automatic', () => {
     `);
 
     expect(actual).toMatchInlineSnapshot(`
-      "import { forwardRef } from \\"react\\";
-      import { ax, ix, CC, CS } from \\"@compiled/react/runtime\\";
-      import { jsx as _jsx } from \\"react/jsx-runtime\\";
-      import { jsxs as _jsxs } from \\"react/jsx-runtime\\";
-      const _ = \\"._syaz13q2{color:blue}\\";
-      forwardRef(({ as: C = \\"div\\", style: __cmpls, ...__cmplp }, __cmplr) => {
+      "import { forwardRef } from "react";
+      import { ax, ix, CC, CS } from "@compiled/react/runtime";
+      import { jsx as _jsx } from "react/jsx-runtime";
+      import { jsxs as _jsxs } from "react/jsx-runtime";
+      const _ = "._syaz13q2{color:blue}";
+      forwardRef(({ as: C = "div", style: __cmpls, ...__cmplp }, __cmplr) => {
         return _jsxs(CC, {
           children: [
             _jsx(CS, {
@@ -82,7 +82,7 @@ describe('jsx automatic', () => {
               ...__cmplp,
               style: __cmpls,
               ref: __cmplr,
-              className: ax([\\"_syaz13q2\\", __cmplp.className]),
+              className: ax(["_syaz13q2", __cmplp.className]),
             }),
           ],
         });

diff --git a/packages/babel-plugin/src/__tests__/module-imports.test.ts b/packages/babel-plugin/src/__tests__/module-imports.test.ts
@@ -72,27 +72,27 @@ describe('import specifiers', () => {
     `);
 
     expect(actual).toMatchInlineSnapshot(`
-      "import { forwardRef } from \\"react\\";
-      import * as React from \\"react\\";
-      import { ax, ix, CC, CS } from \\"@compiled/react/runtime\\";
-      const _ = \\"._1wybgktf{font-size:20px}\\";
+      "import { forwardRef } from "react";
+      import * as React from "react";
+      import { ax, ix, CC, CS } from "@compiled/react/runtime";
+      const _ = "._1wybgktf{font-size:20px}";
       const ListItem = forwardRef(
-        ({ as: C = \\"div\\", style: __cmpls, ...__cmplp }, __cmplr) => {
+        ({ as: C = "div", style: __cmpls, ...__cmplp }, __cmplr) => {
           return (
             <CC>
               <CS>{[_]}</CS>
               <C
                 {...__cmplp}
                 style={__cmpls}
                 ref={__cmplr}
-                className={ax([\\"_1wybgktf\\", __cmplp.className])}
+                className={ax(["_1wybgktf", __cmplp.className])}
               />
             </CC>
           );
         }
       );
-      if (process.env.NODE_ENV !== \\"production\\") {
-        ListItem.displayName = \\"ListItem\\";
+      if (process.env.NODE_ENV !== "production") {
+        ListItem.displayName = "ListItem";
       }
       "
     `);

diff --git a/packages/babel-plugin/src/__tests__/rule-hoisting.test.ts b/packages/babel-plugin/src/__tests__/rule-hoisting.test.ts
@@ -14,19 +14,19 @@ describe('rule hoisting', () => {
     `);
 
     expect(actual).toMatchInlineSnapshot(`
-      "import * as React from \\"react\\";
-      import { ax, ix, CC, CS } from \\"@compiled/react/runtime\\";
-      const _2 = \\"._1wyb1tcg{font-size:24px}\\";
-      const _ = \\"._1wyb1fwx{font-size:12px}\\";
+      "import * as React from "react";
+      import { ax, ix, CC, CS } from "@compiled/react/runtime";
+      const _2 = "._1wyb1tcg{font-size:24px}";
+      const _ = "._1wyb1fwx{font-size:12px}";
       const Component = () => (
         <>
           <CC>
             <CS>{[_]}</CS>
-            {<div className={ax([\\"_1wyb1fwx\\"])}>hello world</div>}
+            {<div className={ax(["_1wyb1fwx"])}>hello world</div>}
           </CC>
           <CC>
             <CS>{[_2]}</CS>
-            {<div className={ax([\\"_1wyb1tcg\\"])}>hello world</div>}
+            {<div className={ax(["_1wyb1tcg"])}>hello world</div>}
           </CC>
         </>
       );
@@ -47,18 +47,18 @@ describe('rule hoisting', () => {
     `);
 
     expect(actual).toMatchInlineSnapshot(`
-      "import * as React from \\"react\\";
-      import { ax, ix, CC, CS } from \\"@compiled/react/runtime\\";
-      const _ = \\"._1wyb1fwx{font-size:12px}\\";
+      "import * as React from "react";
+      import { ax, ix, CC, CS } from "@compiled/react/runtime";
+      const _ = "._1wyb1fwx{font-size:12px}";
       const Component = () => (
         <>
           <CC>
             <CS>{[_]}</CS>
-            {<div className={ax([\\"_1wyb1fwx\\"])}>hello world</div>}
+            {<div className={ax(["_1wyb1fwx"])}>hello world</div>}
           </CC>
           <CC>
             <CS>{[_]}</CS>
-            {<div className={ax([\\"_1wyb1fwx\\"])}>hello world</div>}
+            {<div className={ax(["_1wyb1fwx"])}>hello world</div>}
           </CC>
         </>
       );