Skip to content

Commit 4f64120

Browse files
phoenisxphoenisx
committed
[#27] feat: add template literal pre-processing tests
1 parent 419f0e3 commit 4f64120

File tree

9 files changed

+218
-17
lines changed

9 files changed

+218
-17
lines changed

‎examples/js-parser/src/global/Layout.tsx

-9
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,6 @@ export default styled.div`
1616
export const RandomComponent = () => {
1717
const classes = ["foo", "bar"];
1818

19-
// All the below console.logs causes issue, but for now let's neglect it unless someone raises any issue
20-
// This is because, I don't want to officially support JS/TS parsing, as it's a lot of overhead.
21-
console.log(`--random: error`);
22-
console.log(`-- foo: ${"foo"}`);
23-
console.log(`--fuzz: ${"fuzz"}`);
24-
console.log(`--flex: `, "flex");
25-
26-
console.log(`>>> bob--flex: `, "flex");
27-
2819
return (
2920
<div className={`${classes[0]}`}>
3021
<p className={`baz ${classes[1] === "bar" ? "bizz" : "fizz"}`}>

‎jest-global-setup.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* eslint-disable no-console */
2+
module.exports = async function (_globalConfig, _projectConfig) {
3+
// console.log(globalConfig.testPathPattern);
4+
// console.log(projectConfig.cache);
5+
};

‎jest.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ module.exports = {
5454
// forceCoverageMatch: [],
5555

5656
// A path to a module which exports an async function that is triggered once before all test suites
57-
// globalSetup: undefined,
57+
globalSetup: "<rootDir>/jest-global-setup.js",
5858

5959
// A path to a module which exports an async function that is triggered once after all test suites
6060
// globalTeardown: undefined,

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@
324324
"@types/glob": "^7.2.0",
325325
"@types/jest": "^26.0.24",
326326
"@types/lodash": "^4.14.180",
327-
"@types/node": "^12.20.47",
327+
"@types/node": "^18.6.5",
328328
"@types/postcss-less": "^4.0.2",
329329
"@types/postcss-safe-parser": "^5.0.1",
330330
"@types/vscode": "1.46.0",

‎src/test/fixtures/edge-cases.jsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
// ES6 imports
2+
import styled from 'styled';
3+
import { mod2 } from 'm2';
4+
5+
// CJS
6+
const mod3 = require('m3');
7+
8+
import { styled } from "@linaria/react";
9+
10+
const StyledContainer = styled.div`
11+
:root {
12+
--h1: 44px;
13+
--h2: 32px;
14+
--h3: 24px;
15+
16+
--color-red: red;
17+
--color-green: green;
18+
--color-blue: blue;
19+
}
20+
`;
21+
22+
const baseClass = styled.css`
23+
--base-var-1: #333;
24+
25+
.child {
26+
--child-var-1: #222;
27+
}
28+
`;
29+
30+
export const RandomComponent = () => {
31+
const classes = [baseClass, "bar"];
32+
33+
//#region Possible Edge cases for Template Literal Parsing
34+
/**
35+
* All the below console.logs causes issue, but for now let's neglect it unless someone raises any issue
36+
* This is because, I don't want to officially support JS/TS parsing, as it's a lot of overhead.
37+
*/
38+
// If Ever it comes to fix the below template literal, one of the solution could be to:
39+
// To have a counter for colon and semi-colon, and there count should be at-least one at the
40+
// end of parsing a template literal, to make sure the template-literal is possibly a CSS string.
41+
console.log(`--random: error`);
42+
console.log(`-- foo: ${"foo"}`);
43+
console.log(`--fuzz: ${"fuzz"}`);
44+
console.log(`--flex: `, "flex");
45+
//#endregion
46+
47+
console.log(`>>> bob--flex: `, "flex");
48+
49+
return (
50+
<StyledContainer className={`${classes[0]}`}>
51+
<p className={`--baz ${classes[1] === "bar" ? "bizz" : "fizz"}`}>
52+
Hell World
53+
</p>
54+
</StyledContainer>
55+
);
56+
};
57+
58+
59+
export {
60+
StyledContainer
61+
};

‎src/test/main.test.ts

+4
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,15 @@ describe("Test Extension Main", () => {
3030
const cssVars: CSSVarRecord = {
3131
"./src/01.css": [
3232
{
33+
type: "css",
3334
property: "--red-A100",
3435
value: "red",
3536
theme: "",
3637
},
3738
],
3839
"./src/02.css": [
3940
{
41+
type: "css",
4042
property: "--red-500",
4143
value: "red",
4244
theme: "",
@@ -62,13 +64,15 @@ describe("Test Extension Main", () => {
6264
const cssVars: CSSVarRecord = {
6365
"./src/01.css": [
6466
{
67+
type: "css",
6568
property: "--red-A100",
6669
value: "red",
6770
theme: "",
6871
},
6972
],
7073
"./src/02.css": [
7174
{
75+
type: "css",
7276
property: "--red-500",
7377
value: "red",
7478
theme: "",

‎src/test/parser.test.ts

-2
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,6 @@ describe("Test Parser", () => {
173173
const scssConfig: ConfigRecord = {
174174
[CACHE.activeRootPath]: {
175175
...EXTENSION_CONFIG[CACHE.activeRootPath],
176-
postcssSyntax: ["postcss-scss"],
177176
files: [IMPORT_SCSS_FILE],
178177
},
179178
};
@@ -229,7 +228,6 @@ describe("Multi Root", () => {
229228
[rootPath1]: {
230229
// This config will test SCSS files
231230
...DEFAULT_CONFIG,
232-
postcssSyntax: ["postcss-scss"],
233231
files: [IMPORT_SCSS_FILE],
234232
},
235233
[rootPath2]: {

‎src/test/pre-processors/template-literals.test.ts

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import { resolve } from "path";
2+
import fs from "fs";
3+
import preProcessContent, { JS_BLOCK } from "../../pre-processors";
4+
import { parseFiles } from "../../parser";
5+
import { CACHE, Config, CSSVarRecord, DEFAULT_CONFIG } from "../../constants";
6+
7+
jest.mock("../../constants", () => {
8+
const CONSTANTS = jest.requireActual("../../constants");
9+
const activeRootPath = "foo";
10+
return {
11+
__esModule: true,
12+
...CONSTANTS,
13+
CACHE: {
14+
...CONSTANTS.CACHE,
15+
activeRootPath,
16+
config: { [activeRootPath]: CONSTANTS.DEFAULT_CONFIG },
17+
},
18+
};
19+
});
20+
21+
type ConfigRecord = { [rootPath: string]: Config };
22+
23+
const MODIFIED_DATE = new Date("2021-04-12T08:58:58.676Z");
24+
const JSX_FILE_PATH = resolve(__dirname, "..", "fixtures", "edge-cases.jsx");
25+
const MOCK_CONFIG: ConfigRecord = {
26+
[CACHE.activeRootPath]: {
27+
...DEFAULT_CONFIG,
28+
files: [JSX_FILE_PATH],
29+
},
30+
};
31+
32+
const RESULTS = [
33+
{
34+
type: "css",
35+
property: "--h1",
36+
value: "44px",
37+
theme: "",
38+
},
39+
{
40+
type: "css",
41+
property: "--h2",
42+
value: "32px",
43+
theme: "",
44+
},
45+
{
46+
type: "css",
47+
property: "--h3",
48+
value: "24px",
49+
theme: "",
50+
},
51+
{
52+
type: "css",
53+
property: "--color-red",
54+
value: "red",
55+
theme: "",
56+
color: "rgb(255, 0, 0)",
57+
},
58+
{
59+
type: "css",
60+
property: "--color-green",
61+
value: "green",
62+
theme: "",
63+
color: "rgb(0, 128, 0)",
64+
},
65+
{
66+
type: "css",
67+
property: "--color-blue",
68+
value: "blue",
69+
theme: "",
70+
color: "rgb(0, 0, 255)",
71+
},
72+
{
73+
type: "css",
74+
property: "--base-var-1",
75+
value: "#333",
76+
theme: "",
77+
color: "rgb(51, 51, 51)",
78+
},
79+
{
80+
type: "css",
81+
property: "--child-var-1",
82+
value: "#222",
83+
theme: "",
84+
color: "rgb(34, 34, 34)",
85+
},
86+
87+
// This should belong in WRONG_RESULTS, but for now
88+
// it's fine
89+
{
90+
type: "css",
91+
property: "--random",
92+
value: "error",
93+
theme: "",
94+
},
95+
];
96+
97+
const WRONG_RESULTS = [
98+
{
99+
type: "css",
100+
property: "--",
101+
value: JS_BLOCK,
102+
},
103+
{
104+
type: "css",
105+
property: "--fuzz",
106+
value: JS_BLOCK,
107+
},
108+
{
109+
type: "css",
110+
property: "--flex",
111+
},
112+
{
113+
type: "css",
114+
property: "--baz",
115+
},
116+
];
117+
118+
let globalVarRecord: CSSVarRecord;
119+
beforeAll(() => {
120+
CACHE.filesToWatch[CACHE.activeRootPath] = new Set();
121+
CACHE.fileMetas = {};
122+
CACHE.fileMetas[JSX_FILE_PATH] = {
123+
path: JSX_FILE_PATH,
124+
lastModified: +MODIFIED_DATE,
125+
};
126+
return parseFiles(MOCK_CONFIG).then(([varRecord, _]) => {
127+
globalVarRecord = varRecord;
128+
return varRecord;
129+
});
130+
});
131+
132+
test("should have proper variables present", () => {
133+
for (const result of RESULTS) {
134+
expect(globalVarRecord[JSX_FILE_PATH]).toContainEqual(expect.objectContaining(result));
135+
}
136+
});
137+
138+
test("should not have improper variables", () => {
139+
for (const wrong of WRONG_RESULTS) {
140+
expect(globalVarRecord[JSX_FILE_PATH]).not.toContainEqual(expect.objectContaining(wrong));
141+
}
142+
});

‎yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -1413,10 +1413,10 @@
14131413
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.0.6.tgz#0ba49ac517ad69abe7a1508bc9b3a5483df9d5d7"
14141414
integrity sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw==
14151415

1416-
"@types/node@^12.20.47":
1417-
version "12.20.55"
1418-
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
1419-
integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
1416+
"@types/node@^18.6.5":
1417+
version "18.6.5"
1418+
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.6.5.tgz#06caea822caf9e59d5034b695186ee74154d2802"
1419+
integrity sha512-Xjt5ZGUa5WusGZJ4WJPbOT8QOqp6nDynVFRKcUt32bOgvXEoc6o085WNkYTMO7ifAj2isEfQQ2cseE+wT6jsRw==
14201420

14211421
"@types/normalize-package-data@^2.4.0":
14221422
version "2.4.1"

0 commit comments

Comments
 (0)