chore: add modules unit-tests

unit-tests/appbar.test.js → unit-tests/components.test.js

@@ -1,3 +1,6 @@
 const { testKendoComponent } = require("./utility");
 
+// AppBar
 testKendoComponent("appbar", "k-appbar", []);
+
+//TODO: Add more components here

unit-tests/modules.test.js

@@ -0,0 +1,20 @@
+const { testKendoModule } = require("./utility");
+
+// Color System
+testKendoModule("color-system", "kendo-colors", "--kendo-color");
+
+// Spacing
+testKendoModule("spacing", "kendo-spacing", "--kendo-spacing");
+
+// Elevation
+testKendoModule("elevation", "kendo-elevation", "--kendo-elevation");
+
+// Radii
+testKendoModule("radii", "kendo-border-radii", "--kendo-border-radius");
+
+// Typography
+testKendoModule("font-size", "kendo-font-sizes", "--kendo-font-size");
+testKendoModule("font-weight", "kendo-font-weights", "--kendo-font-weight");
+testKendoModule("font-family", "kendo-font-families", "--kendo-font-family");
+testKendoModule("line-height", "kendo-line-heights", "--kendo-line-height");
+testKendoModule("letter-spacing", "kendo-letter-spacings", "--kendo-letter-spacing");

unit-tests/utility.js

@@ -6,11 +6,19 @@ const { describe, it, expect } = require("@jest/globals");
 const theme = process.env.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 themeMetadata = path.resolve("packages", theme, "dist", "meta", "sassdoc-data.json");
 const data = JSON.parse(fs.readFileSync(themeMetadata));
 
+function writeResultToDist(result, file) {
+    const outputPath = path.join(__dirname, "dist", `${file}.css`);
+    if (!fs.existsSync(path.join(__dirname, "dist"))) {
+        fs.mkdirSync(path.join(__dirname, "dist"));
+    }
+    fs.writeFileSync(outputPath, result);
+}
+
 function fetchComponentVariables(component) {
-    return data.filter((item) => item.group[0] === component).map((item) => item.context.name);
+    return data.variables.filter((item) => item.group[0] === component).map((item) => item.context.name);
 }
 
 function compileSassString(sassString) {
@@ -40,21 +48,40 @@ function compileKendoCore(configurations) {
 /**
  * Tests a kendo module using a jest testing template.
  * @param {string} module - The module name.
- * @param {string} cssVariablesPrefix - The module css variables prefix.
- * @param {string[]} dependencyClassNames - The component dependencies classNames.
+ * @param {string} mapName - The module map name.
+ * @param {string} cssVariablePrefix - The module css variables prefix.
  */
-function testKendoModule(module, cssVariablesPrefix = []) {
+function testKendoModule(module, mapName, cssVariablePrefix) {
     describe(module, () => {
-        const result = compileKendoCore();
+        const prettyValue = data.variables.filter((item) => item.context.name === mapName)[0].prettyValue;
+        const uniqueValues = [];
+        const configurations = `
+            $${mapName}: (
+                ${Object.keys(prettyValue)
+                    .map((property, index) => {
+                        const uniqueValue = `value-${index + 1}`;
+                        uniqueValues.push(uniqueValue);
+                        return `${property}: ${uniqueValue},`;
+                    })
+                    .join("\n")}
+            )`;
+
+        const result = compileKendoCore(configurations);
+        writeResultToDist(result, module);
+
         it("should compile", () => {
             expect(result).toBeDefined();
         });
 
-        cssVariablesPrefix &&
+        it("should compile with variable customizations", () => {
+            uniqueValues.forEach((value) => {
+                expect(result).toContain(`${value};`);
+            });
+        });
+
+        cssVariablePrefix &&
             it("should compile with all css variables", () => {
-                cssVariablesPrefix.forEach((className) => {
-                    expect(result).toContain(`${className}`);
-                });
+                expect(result).toContain(`${cssVariablePrefix}`);
             });
     });
 }
@@ -71,13 +98,14 @@ function testKendoComponent(component, className, dependencyClassNames) {
         const uniqueValues = [];
         const configurations = variables
             .map((property, index) => {
-                const uniqueValue = `value-${index}`; // TODO: modify the pattern for unique values
+                const uniqueValue = `value-${index + 1}`;
                 uniqueValues.push(uniqueValue);
                 return `$${property}: ${uniqueValue},`;
             })
             .join("\n");
 
         const result = compileKendoComponent(component, configurations);
+        writeResultToDist(result, component);
 
         it("should compile", () => {
             expect(result).toBeDefined();