diff --git a/src/test/bin/main.ts b/src/test/bin/main.ts index 9131f7fc..5f658dc6 100644 --- a/src/test/bin/main.ts +++ b/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"; diff --git a/src/test/bin/replaceImportFromStatic.ts b/src/test/bin/replaceImportFromStatic.ts index c033a2dc..f3613f30 100644 --- a/src/test/bin/replaceImportFromStatic.ts +++ b/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"); diff --git a/src/test/tools/assertIsSameCode.ts b/src/test/tools/assertIsSameCode.ts new file mode 100644 index 00000000..b63cb822 --- /dev/null +++ b/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); +}