chore: add scss unit tests

package.json

@@ -19,15 +19,20 @@
     "@eslint/js": "^9.6.0",
     "@progress/kendo-e2e": "^4.0.0",
     "@types/node": "^22.1.0",
+    "autoprefixer": "^10.4.20",
     "esbuild": "^0.24.0",
     "eslint": "^9.6.0",
     "glob": "^11.0.0",
     "gulp": "^5.0.0",
     "http-server": "^14.1.1",
     "husky": "^9.0.10",
+    "jest": "^29.7.0",
     "lerna": "^8.0.0",
     "lint-staged": "^15.0.2",
     "nunjucks": "^3.2.3",
+    "postcss": "^8.4.47",
+    "postcss-calc": "^10.0.2",
+    "postcss-cli": "^11.0.0",
     "sass": "1.83.0",
     "sass-embedded": "1.83.0",
     "sassdoc": "^2.7.4",
@@ -37,11 +42,7 @@
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-scss": "^6.5.0",
     "typescript": "^5.0.3",
-    "typescript-eslint": "^8.0.0",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.47",
-    "postcss-cli": "^11.0.0",
-    "postcss-calc": "^10.0.2"
+    "typescript-eslint": "^8.0.0"
   },
   "peerDependencies": {
     "sass": "^1.63.6",
@@ -68,7 +69,9 @@
     "render-test-pages": "node ./scripts/render-test-pages.mjs",
     "create-screenshots": "./build/create-screenshots.sh",
     "test-contrast": "node ./scripts/test-contrast.mjs",
-    "test:integrations": "npm run build --prefix integrations"
+    "test:integrations": "npm run build --prefix integrations",
+    "test:units": "jest unit-tests",
+    "test:units:watch": "jest --watch unit-tests"
   },
   "engines": {
     "node": "^20"

unit-tests/appbar.test.js

@@ -0,0 +1,3 @@
+const { testKendoComponent } = require("./utility");
+
+testKendoComponent("appbar", "k-appbar", []);

unit-tests/button.test.js

@@ -0,0 +1,3 @@
+// const { testKendoComponent } = require("./utility");
+
+// testKendoComponent("button", "k-button", []);

unit-tests/color.test.js

@@ -0,0 +1,20 @@
+// const { compileKendoTheme } = require("./utility");
+// const { describe, it, expect } = require('@jest/globals');
+
+// const customizedVariables = {
+//     "$kendo-colors": `(
+//         app-surface: red,
+//         primary: red,
+//         secondary: red,
+//     )`,
+// };
+
+// describe("Color System Module", () => {
+//     it("should return css variables with correct values", () => {
+//         const result = compileKendoTheme(customizedVariables);
+
+//         expect(result).toContain(`--kendo-color-app-surface: red;`);
+//         expect(result).toContain(`--kendo-color-primary: red;`);
+//         expect(result).toContain(`--kendo-color-secondary: red;`);
+//     });
+// });

unit-tests/grid.test.js

@@ -0,0 +1,3 @@
+// const { testKendoComponent } = require("./utility");
+
+// testKendoComponent("grid", "k-grid", ["k-button"]);

unit-tests/spacing.test.js

@@ -0,0 +1,18 @@
+// const { compileKendoTheme } = require("./utility");
+// const { describe, it, expect } = require('@jest/globals');
+
+// const customizedVariables = {
+//     "$kendo-spacing": `(
+//         2: 8px,
+//         6: 12px
+//     )`,
+// };
+
+// describe("Spacing Module", () => {
+//     it("should return css variables with correct values", () => {
+//         const result = compileKendoTheme(customizedVariables);
+
+//         expect(result).toContain(`--kendo-spacing-2: 8px;`);
+//         expect(result).toContain(`--kendo-spacing-6: 12px;`);
+//     });
+// });

unit-tests/utility.js

@@ -0,0 +1,86 @@
+const sass = require("sass");
+const fs = require("fs");
+const path = require("path");
+const { describe, it, expect } = require("@jest/globals");
+
+const theme = "default";
+const themeDir = path.resolve("packages", theme, "scss");
+const nodeModules = path.resolve("node_modules");
+const themeMetadata = path.resolve("packages", theme, "dist", "meta", "sassdoc-raw-data.json");
+const jsonData = fs.readFileSync(themeMetadata);
+const data = JSON.parse(jsonData);
+
+function fetchComponentVariables(component) {
+    return data.filter((item) => item.group[0] === component).map((item) => item.context.name);
+}
+
+function compileSassString(sassString) {
+    return sass.compileString(sassString, {
+        loadPaths: [themeDir, nodeModules],
+    }).css;
+}
+
+function compileKendoComponent(component, uniqueVariables = {}) {
+    const sassString = `
+        @use 'index.scss' as * with (${uniqueVariables});
+        @include kendo-${component}--styles();
+    `;
+
+    return compileSassString(sassString);
+}
+
+// function compileKendoTheme(customizedVariables = {}) {
+//     const sassString = `
+//         @use 'index.scss' as * with (${formatVariableString(customizedVariables)});
+//         @include kendo-theme--styles();
+//     `;
+
+//     return compileSassString(sassString);
+// }
+
+function testKendoModule(module) {
+    //TODO
+    //Here use the compileKendoTheme function to compile the module
+}
+
+function testKendoComponent(component, className, dependenciesClassNames = []) {
+    describe(component, () => {
+        const variables = fetchComponentVariables(component);
+        const uniqueValues = [];
+        const uniqueVariables = variables
+            .map((property, index) => {
+                const uniqueValue = `unique-value-${index}`; // TODO: modify the pattern for unique values
+                uniqueValues.push(uniqueValue);
+                return `$${property}: ${uniqueValue},`;
+            })
+            .join("\n");
+
+        const result = compileKendoComponent(component, uniqueVariables);
+
+        // it("should compile", () => {
+        //     const result = compileKendoComponent("appbar", customizedVariables);
+        // });
+        className &&
+            it("Should have component selector styles", () => {
+                expect(result).toContain(`.${className} {`);
+            });
+
+        it("It's variable customizations should work", () => {
+            uniqueValues.forEach((value) => {
+                expect(result).toContain(`${value};`);
+            });
+        });
+
+        dependenciesClassNames &&
+            it("Should have dependency selector styles", () => {
+                dependenciesClassNames.forEach((className) => {
+                    expect(result).toContain(`.${className} {`);
+                });
+            });
+    });
+}
+
+module.exports = {
+    testKendoComponent,
+    compileKendoComponent
+};