From 4f64120097807a30bd17b0ecc7e36f0cd7b502cf Mon Sep 17 00:00:00 2001 From: Shub Date: Tue, 9 Aug 2022 22:31:05 +0530 Subject: [PATCH] [#27] feat: add template literal pre-processing tests --- examples/js-parser/src/global/Layout.tsx | 9 -- jest-global-setup.js | 5 + jest.config.js | 2 +- package.json | 2 +- src/test/fixtures/edge-cases.jsx | 61 ++++++++ src/test/main.test.ts | 4 + src/test/parser.test.ts | 2 - .../pre-processors/template-literals.test.ts | 142 ++++++++++++++++++ yarn.lock | 8 +- 9 files changed, 218 insertions(+), 17 deletions(-) create mode 100644 jest-global-setup.js create mode 100644 src/test/fixtures/edge-cases.jsx create mode 100644 src/test/pre-processors/template-literals.test.ts diff --git a/examples/js-parser/src/global/Layout.tsx b/examples/js-parser/src/global/Layout.tsx index 787d4a3..e4b4211 100644 --- a/examples/js-parser/src/global/Layout.tsx +++ b/examples/js-parser/src/global/Layout.tsx @@ -16,15 +16,6 @@ export default styled.div` export const RandomComponent = () => { const classes = ["foo", "bar"]; - // All the below console.logs causes issue, but for now let's neglect it unless someone raises any issue - // This is because, I don't want to officially support JS/TS parsing, as it's a lot of overhead. - console.log(`--random: error`); - console.log(`-- foo: ${"foo"}`); - console.log(`--fuzz: ${"fuzz"}`); - console.log(`--flex: `, "flex"); - - console.log(`>>> bob--flex: `, "flex"); - return (

diff --git a/jest-global-setup.js b/jest-global-setup.js new file mode 100644 index 0000000..c865d1d --- /dev/null +++ b/jest-global-setup.js @@ -0,0 +1,5 @@ +/* eslint-disable no-console */ +module.exports = async function (_globalConfig, _projectConfig) { + // console.log(globalConfig.testPathPattern); + // console.log(projectConfig.cache); +}; diff --git a/jest.config.js b/jest.config.js index 80e9e8a..dcec484 100644 --- a/jest.config.js +++ b/jest.config.js @@ -54,7 +54,7 @@ module.exports = { // forceCoverageMatch: [], // A path to a module which exports an async function that is triggered once before all test suites - // globalSetup: undefined, + globalSetup: "/jest-global-setup.js", // A path to a module which exports an async function that is triggered once after all test suites // globalTeardown: undefined, diff --git a/package.json b/package.json index 7cd0905..ad3cf4e 100644 --- a/package.json +++ b/package.json @@ -324,7 +324,7 @@ "@types/glob": "^7.2.0", "@types/jest": "^26.0.24", "@types/lodash": "^4.14.180", - "@types/node": "^12.20.47", + "@types/node": "^18.6.5", "@types/postcss-less": "^4.0.2", "@types/postcss-safe-parser": "^5.0.1", "@types/vscode": "1.46.0", diff --git a/src/test/fixtures/edge-cases.jsx b/src/test/fixtures/edge-cases.jsx new file mode 100644 index 0000000..f5b8813 --- /dev/null +++ b/src/test/fixtures/edge-cases.jsx @@ -0,0 +1,61 @@ +// ES6 imports +import styled from 'styled'; +import { mod2 } from 'm2'; + +// CJS +const mod3 = require('m3'); + +import { styled } from "@linaria/react"; + +const StyledContainer = styled.div` + :root { + --h1: 44px; + --h2: 32px; + --h3: 24px; + + --color-red: red; + --color-green: green; + --color-blue: blue; + } +`; + +const baseClass = styled.css` + --base-var-1: #333; + + .child { + --child-var-1: #222; + } +`; + +export const RandomComponent = () => { + const classes = [baseClass, "bar"]; + + //#region Possible Edge cases for Template Literal Parsing + /** + * All the below console.logs causes issue, but for now let's neglect it unless someone raises any issue + * This is because, I don't want to officially support JS/TS parsing, as it's a lot of overhead. + */ + // If Ever it comes to fix the below template literal, one of the solution could be to: + // To have a counter for colon and semi-colon, and there count should be at-least one at the + // end of parsing a template literal, to make sure the template-literal is possibly a CSS string. + console.log(`--random: error`); + console.log(`-- foo: ${"foo"}`); + console.log(`--fuzz: ${"fuzz"}`); + console.log(`--flex: `, "flex"); + //#endregion + + console.log(`>>> bob--flex: `, "flex"); + + return ( + +

+ Hell World +

+ + ); +}; + + +export { + StyledContainer +}; diff --git a/src/test/main.test.ts b/src/test/main.test.ts index bbdeaf7..c96d803 100644 --- a/src/test/main.test.ts +++ b/src/test/main.test.ts @@ -30,6 +30,7 @@ describe("Test Extension Main", () => { const cssVars: CSSVarRecord = { "./src/01.css": [ { + type: "css", property: "--red-A100", value: "red", theme: "", @@ -37,6 +38,7 @@ describe("Test Extension Main", () => { ], "./src/02.css": [ { + type: "css", property: "--red-500", value: "red", theme: "", @@ -62,6 +64,7 @@ describe("Test Extension Main", () => { const cssVars: CSSVarRecord = { "./src/01.css": [ { + type: "css", property: "--red-A100", value: "red", theme: "", @@ -69,6 +72,7 @@ describe("Test Extension Main", () => { ], "./src/02.css": [ { + type: "css", property: "--red-500", value: "red", theme: "", diff --git a/src/test/parser.test.ts b/src/test/parser.test.ts index ee0d25b..06c498b 100644 --- a/src/test/parser.test.ts +++ b/src/test/parser.test.ts @@ -173,7 +173,6 @@ describe("Test Parser", () => { const scssConfig: ConfigRecord = { [CACHE.activeRootPath]: { ...EXTENSION_CONFIG[CACHE.activeRootPath], - postcssSyntax: ["postcss-scss"], files: [IMPORT_SCSS_FILE], }, }; @@ -229,7 +228,6 @@ describe("Multi Root", () => { [rootPath1]: { // This config will test SCSS files ...DEFAULT_CONFIG, - postcssSyntax: ["postcss-scss"], files: [IMPORT_SCSS_FILE], }, [rootPath2]: { diff --git a/src/test/pre-processors/template-literals.test.ts b/src/test/pre-processors/template-literals.test.ts new file mode 100644 index 0000000..79ecc49 --- /dev/null +++ b/src/test/pre-processors/template-literals.test.ts @@ -0,0 +1,142 @@ +import { resolve } from "path"; +import fs from "fs"; +import preProcessContent, { JS_BLOCK } from "../../pre-processors"; +import { parseFiles } from "../../parser"; +import { CACHE, Config, CSSVarRecord, DEFAULT_CONFIG } from "../../constants"; + +jest.mock("../../constants", () => { + const CONSTANTS = jest.requireActual("../../constants"); + const activeRootPath = "foo"; + return { + __esModule: true, + ...CONSTANTS, + CACHE: { + ...CONSTANTS.CACHE, + activeRootPath, + config: { [activeRootPath]: CONSTANTS.DEFAULT_CONFIG }, + }, + }; +}); + +type ConfigRecord = { [rootPath: string]: Config }; + +const MODIFIED_DATE = new Date("2021-04-12T08:58:58.676Z"); +const JSX_FILE_PATH = resolve(__dirname, "..", "fixtures", "edge-cases.jsx"); +const MOCK_CONFIG: ConfigRecord = { + [CACHE.activeRootPath]: { + ...DEFAULT_CONFIG, + files: [JSX_FILE_PATH], + }, +}; + +const RESULTS = [ + { + type: "css", + property: "--h1", + value: "44px", + theme: "", + }, + { + type: "css", + property: "--h2", + value: "32px", + theme: "", + }, + { + type: "css", + property: "--h3", + value: "24px", + theme: "", + }, + { + type: "css", + property: "--color-red", + value: "red", + theme: "", + color: "rgb(255, 0, 0)", + }, + { + type: "css", + property: "--color-green", + value: "green", + theme: "", + color: "rgb(0, 128, 0)", + }, + { + type: "css", + property: "--color-blue", + value: "blue", + theme: "", + color: "rgb(0, 0, 255)", + }, + { + type: "css", + property: "--base-var-1", + value: "#333", + theme: "", + color: "rgb(51, 51, 51)", + }, + { + type: "css", + property: "--child-var-1", + value: "#222", + theme: "", + color: "rgb(34, 34, 34)", + }, + + // This should belong in WRONG_RESULTS, but for now + // it's fine + { + type: "css", + property: "--random", + value: "error", + theme: "", + }, +]; + +const WRONG_RESULTS = [ + { + type: "css", + property: "--", + value: JS_BLOCK, + }, + { + type: "css", + property: "--fuzz", + value: JS_BLOCK, + }, + { + type: "css", + property: "--flex", + }, + { + type: "css", + property: "--baz", + }, +]; + +let globalVarRecord: CSSVarRecord; +beforeAll(() => { + CACHE.filesToWatch[CACHE.activeRootPath] = new Set(); + CACHE.fileMetas = {}; + CACHE.fileMetas[JSX_FILE_PATH] = { + path: JSX_FILE_PATH, + lastModified: +MODIFIED_DATE, + }; + return parseFiles(MOCK_CONFIG).then(([varRecord, _]) => { + globalVarRecord = varRecord; + return varRecord; + }); +}); + +test("should have proper variables present", () => { + for (const result of RESULTS) { + expect(globalVarRecord[JSX_FILE_PATH]).toContainEqual(expect.objectContaining(result)); + } +}); + +test("should not have improper variables", () => { + for (const wrong of WRONG_RESULTS) { + expect(globalVarRecord[JSX_FILE_PATH]).not.toContainEqual(expect.objectContaining(wrong)); + } +}); diff --git a/yarn.lock b/yarn.lock index adba090..edd9537 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1413,10 +1413,10 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-18.0.6.tgz#0ba49ac517ad69abe7a1508bc9b3a5483df9d5d7" integrity sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw== -"@types/node@^12.20.47": - version "12.20.55" - resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240" - integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ== +"@types/node@^18.6.5": + version "18.6.5" + resolved "https://registry.yarnpkg.com/@types/node/-/node-18.6.5.tgz#06caea822caf9e59d5034b695186ee74154d2802" + integrity sha512-Xjt5ZGUa5WusGZJ4WJPbOT8QOqp6nDynVFRKcUt32bOgvXEoc6o085WNkYTMO7ifAj2isEfQQ2cseE+wT6jsRw== "@types/normalize-package-data@^2.4.0": version "2.4.1"