Improve unit test (changelog ignore)

src/test/bin/main.ts

@@ -1,3 +1,4 @@
+import "./replaceImportFromStatic";
 import { setupSampleReactProject, sampleReactProjectDirPath } from "./setupSampleReactProject";
 import * as st from "scripting-tools";
 import { join as pathJoin } from "path";

src/test/bin/replaceImportFromStatic.ts

@@ -3,65 +3,127 @@ import {
     replaceImportsInCssCode,
     generateCssCodeToDefineGlobals,
 } from "../../bin/build-keycloak-theme/replaceImportFromStatic";
+import { assert } from "tsafe/assert";
+import { same } from "evt/tools/inDepth/same";
+import { assetIsSameCode } from "../tools/assertIsSameCode";
 
-const { fixedJsCode } = replaceImportsFromStaticInJsCode({
-    "jsCode": `
+{
+    const jsCodeUntransformed = `
         function f() {
             return a.p+"static/js/" + ({}[e] || e) + "." + {
                 3: "0664cdc0"
             }[e] + ".chunk.js"
         }
-
+        
         function f2() {
             return a.p+"static/js/" + ({}[e] || e) + "." + {
                 3: "0664cdc0"
             }[e] + ".chunk.js"
         }
-    `,
-    "urlOrigin": undefined,
-});
+    `;
 
-const { fixedJsCode: fixedJsCodeExternal } = replaceImportsFromStaticInJsCode({
-    "jsCode": `
-        function f() {
-            return a.p+"static/js/" + ({}[e] || e) + "." + {
-                3: "0664cdc0"
-            }[e] + ".chunk.js"
+    {
+        const { fixedJsCode } = replaceImportsFromStaticInJsCode({
+            "jsCode": jsCodeUntransformed,
+            "urlOrigin": undefined,
+        });
+
+        const fixedJsCodeExpected = `
+            function f() {
+                return window.kcContext.url.resourcesPath + "/build/static/js/" + ({}[e] || e) + "." + {
+                    3: "0664cdc0"
+                }[e] + ".chunk.js"
+            }
+
+            function f2() {
+                return window.kcContext.url.resourcesPath + "/build/static/js/" + ({}[e] || e) + "." + {
+                    3: "0664cdc0"
+                }[e] + ".chunk.js"
+            }
+        `;
+
+        assetIsSameCode(fixedJsCode, fixedJsCodeExpected);
+    }
+
+    {
+        const urlOrigin = "https://example.com";
+
+        const { fixedJsCode } = replaceImportsFromStaticInJsCode({
+            "jsCode": jsCodeUntransformed,
+            urlOrigin,
+        });
+
+        const fixedJsCodeExpected = `
+            function f() {
+                return ("kcContext" in window ? "${urlOrigin}" : "") + a.p + "static/js/" + ({}[e] || e) + "." + {
+                    3: "0664cdc0"
+                }[e] + ".chunk.js"
+            }
+
+            function f2() {
+                return ("kcContext" in window ? "${urlOrigin}" : "") + a.p + "static/js/" + ({}[e] || e) + "." + {
+                    3: "0664cdc0"
+                }[e] + ".chunk.js"
+            }
+        `;
+
+        assetIsSameCode(fixedJsCode, fixedJsCodeExpected);
+    }
+}
+
+{
+    const { fixedCssCode, cssGlobalsToDefine } = replaceImportsInCssCode({
+        "cssCode": `
+            .my-div {
+                background: url(/logo192.png) no-repeat center center;
+            }
+
+            .my-div2 {
+                background: url(/logo192.png) no-repeat center center;
+            }
+
+            .my-div {
+                background-image: url(/static/media/something.svg);
+            }
+        `,
+    });
+
+    const fixedCssCodeExpected = `
+        .my-div {
+            background: var(--url1f9ef5a892c104c);
         }
 
-        function f2() {
-            return a.p+"static/js/" + ({}[e] || e) + "." + {
-                3: "0664cdc0"
-            }[e] + ".chunk.js"
+        .my-div2 {
+            background: var(--url1f9ef5a892c104c);
         }
-    `,
-    "urlOrigin": "https://www.example.com",
-});
 
-console.log({ fixedJsCode, fixedJsCodeExternal });
+        .my-div {
+            background-image: var(--urldd75cab58377c19);
+        }
+    `;
 
-const { fixedCssCode, cssGlobalsToDefine } = replaceImportsInCssCode({
-    "cssCode": `
+    assetIsSameCode(fixedCssCode, fixedCssCodeExpected);
 
-    .my-div {
-        background: url(/logo192.png) no-repeat center center;
-    }
+    const cssGlobalsToDefineExpected = {
+        "url1f9ef5a892c104c": "url(/logo192.png) no-repeat center center",
+        "urldd75cab58377c19": "url(/static/media/something.svg)",
+    };
 
-    .my-div2 {
-        background: url(/logo192.png) no-repeat center center;
-    }
+    assert(same(cssGlobalsToDefine, cssGlobalsToDefineExpected));
 
-    .my-div {
-        background-image: url(/static/media/something.svg);
-    }
-    `,
-});
+    const { cssCodeToPrependInHead } = generateCssCodeToDefineGlobals({
+        cssGlobalsToDefine,
+        "urlPathname": "/",
+    });
 
-console.log({ fixedCssCode, cssGlobalsToDefine });
+    const cssCodeToPrependInHeadExpected = `
+        :root {
+            --url1f9ef5a892c104c: url(\${url.resourcesPath}/build/logo192.png) no-repeat center center;
+            --urldd75cab58377c19: url(\${url.resourcesPath}/build/static/media/something.svg);
+        }
+    `;
 
-const { cssCodeToPrependInHead } = generateCssCodeToDefineGlobals({
-    cssGlobalsToDefine,
-    "urlPathname": "/",
-});
+    assetIsSameCode(cssCodeToPrependInHead, cssCodeToPrependInHeadExpected);
+}
 
-console.log({ cssCodeToPrependInHead });
+console.log("PASS replace import from static");

src/test/tools/assertIsSameCode.ts

@@ -0,0 +1,7 @@
+import { assert } from "tsafe/assert";
+
+export function assetIsSameCode(code1: string, code2: string, message?: string): void {
+    const removeSpacesAndNewLines = (code: string) => code.replace(/\s/g, "").replace(/\n/g, "");
+
+    assert(removeSpacesAndNewLines(code1) === removeSpacesAndNewLines(code2), message);
+}