chore: enhance unit tests

unit-tests/components.test.js

@@ -1,6 +1,78 @@
 const { testKendoComponent } = require("./utility");
 
 // AppBar
-testKendoComponent("appbar", "k-appbar", []);
+testKendoComponent("appbar", "k-appbar", [], []);
 
-//TODO: Add more components here
+// Avatar
+testKendoComponent("avatar", "k-avatar", [], []);
+
+// Badge
+testKendoComponent(
+    "badge",
+    "k-badge",
+    ["k-icon-wrap"],
+    [
+        // Expected
+        "kendo-badge-padding-x", // Variable is used by another variable.
+        "kendo-badge-padding-y", // Variable is used by another variable.
+        "kendo-badge-font-size", // Variable is used by another variable.
+        "kendo-badge-line-height", // Variable is used by another variable.
+        "kendo-badge-min-width", // Variable is used by another variable.
+
+        // Unexpected
+        "kendo-badge-border-radius", // Variable customizations does not work.
+    ]
+);
+
+// Avatar
+testKendoComponent("bottom-navigation", "k-bottom-nav", ["k-icon-wrap"], []);
+
+// Button
+testKendoComponent(
+    "button",
+    "k-button",
+    ["k-badge", "k-icon-wrap"],
+    [
+        // Expected
+        "kendo-button-padding-x", // Variable is used by another variable.
+        "kendo-button-padding-y", // Variable is used by another variable.
+        "kendo-button-font-size", // Variable is used by another variable.
+        "kendo-button-line-height", // Variable is used by another variable.
+        "kendo-button-calc-size", // Variable is used by another variable.
+        "kendo-button-inner-calc-size", // Variable is used by another variable.
+
+        // Unexpected
+        "kendo-button-focus-bg", // Variable customizations does not work.
+        "kendo-button-focus-text", // Variable customizations does not work.
+        "kendo-button-focus-border", // Variable customizations does not work.
+        "kendo-button-focus-gradient", // Variable customizations does not work.
+    ]
+);
+
+// Captcha
+testKendoComponent(
+    "captcha",
+    "k-captcha",
+    [
+        "k-input",
+        "k-button",
+        "k-icon-wrap",
+        // "k-textbox", - Fails as textbox has no selector.
+        "k-slider",
+    ],
+    [
+        // Expected
+        "kendo-captcha-spacer", // Variable is used by another variable.
+    ]
+);
+
+// Drawer
+testKendoComponent(
+    "drawer",
+    "k-drawer",
+    ["k-list", "k-toolbar", "k-overlay"],
+    [
+        // Expected
+        "kendo-drawer-item-level-count", // Variable is customized properly.
+    ]
+);

unit-tests/utility.js

@@ -9,6 +9,7 @@ const nodeModules = path.resolve("node_modules");
 const themeMetadata = path.resolve("packages", theme, "dist", "meta", "sassdoc-data.json");
 const data = JSON.parse(fs.readFileSync(themeMetadata));
 
+// #region helpers
 function writeResultToDist(result, file) {
     const outputPath = path.join(__dirname, "dist", `${file}.css`);
     if (!fs.existsSync(path.join(__dirname, "dist"))) {
@@ -17,33 +18,12 @@ function writeResultToDist(result, file) {
     fs.writeFileSync(outputPath, result);
 }
 
-function fetchComponentVariables(component) {
-    return data.variables.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, configurations) {
-    const sassString = `
-        @use 'index.scss' as * ${configurations ? `with (${configurations})` : ""};
-        @include kendo-${component}--styles();
-    `;
-
-    return compileSassString(sassString);
-}
-
-function compileKendoCore(configurations) {
-    const sassString = `
-        @use 'index.scss' as * ${configurations ? `with (${configurations})` : ""};
-        @include core-styles();
-    `;
-
-    return compileSassString(sassString);
-}
+// #endregion
 
 /**
  * Tests a kendo module using a jest testing template.
@@ -52,36 +32,47 @@ function compileKendoCore(configurations) {
  * @param {string} cssVariablePrefix - The module css variables prefix.
  */
 function testKendoModule(module, mapName, cssVariablePrefix) {
-    describe(module, () => {
-        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);
+    const prettyValue = data.variables.filter((item) => item.context.name === mapName)[0].prettyValue;
 
+    const uniqueValues = Object.fromEntries(Object.entries(prettyValue).map(([key]) => [key, `test-${module}-${key.toString()}`]));
+
+    const configuration = `
+        $${mapName}: (
+            ${Object.entries(uniqueValues)
+                .map(([key, value]) => `${key}: '${value}',`)
+                .join("\n")}
+        )`;
+
+    const result = compileSassString(`
+        @use 'index.scss' as * with (${configuration});
+        @include core-styles();
+    `);
+
+    writeResultToDist(result, module);
+
+    // Module Testing Template
+    describe(module, () => {
         it("should compile", () => {
             expect(result).toBeDefined();
         });
 
-        it("should compile with variable customizations", () => {
-            uniqueValues.forEach((value) => {
-                expect(result).toContain(`${value};`);
+        it("should compile with map customizations", () => {
+            Object.entries(uniqueValues).forEach(([property, value]) => {
+                try {
+                    expect(result).toContain(`${value};`);
+                } catch {
+                    throw new Error(`Missing value for "$${property}": expected "${value}" in the result.`);
+                }
             });
         });
 
         cssVariablePrefix &&
-            it("should compile with all css variables", () => {
-                expect(result).toContain(`${cssVariablePrefix}`);
+            it("should compile with css variables", () => {
+                try {
+                    expect(result).toContain(`${cssVariablePrefix}`);
+                } catch {
+                    throw new Error(`Expected css variable prefix "${cssVariablePrefix}" in the result.`);
+                }
             });
     });
 }
@@ -91,47 +82,66 @@ function testKendoModule(module, mapName, cssVariablePrefix) {
  * @param {string} component - The component name.
  * @param {string} className - The component className.
  * @param {string[]} dependencyClassNames - The component dependencies classNames.
+ * @param {string[]} variableExceptions - The component variable exceptions.
  */
-function testKendoComponent(component, className, dependencyClassNames) {
-    describe(component, () => {
-        const variables = fetchComponentVariables(component);
-        const uniqueValues = [];
-        const configurations = variables
-            .map((property, index) => {
-                const uniqueValue = `value-${index + 1}`;
-                uniqueValues.push(uniqueValue);
-                return `$${property}: ${uniqueValue},`;
-            })
-            .join("\n");
-
-        const result = compileKendoComponent(component, configurations);
-        writeResultToDist(result, component);
+function testKendoComponent(component, className, dependencyClassNames, variableExceptions) {
+    const variables = data.variables
+        .filter((item) => item.group[0] === component && item.resolvedType !== "Map")
+        .map((item) => item.context.name)
+        .filter((item) => !variableExceptions?.includes(item));
+
+    const uniqueValues = Object.fromEntries(variables.map((item) => [item, `test-${item}`]));
+
+    const configuration = Object.entries(uniqueValues)
+        .map(([key, value]) => `$${key}: ${value},`)
+        .join("\n");
 
+    const result = compileSassString(`
+        @use 'index.scss' as * with (${configuration});
+        @include kendo-${component}--styles();
+    `);
+
+    writeResultToDist(result, component);
+
+    // Component Testing Template
+    describe(component, () => {
         it("should compile", () => {
             expect(result).toBeDefined();
         });
 
         className &&
-            it("should compile with a selector styles", () => {
-                expect(result).toContain(`.${className} {`);
+            it("should compile with component selector styles", () => {
+                try {
+                    expect(result).toContain(`.${className} {`);
+                } catch {
+                    throw new Error(`Expected ".${className}" selector in the result.`);
+                }
             });
 
         it("should compile with variable customizations", () => {
-            uniqueValues.forEach((value) => {
-                expect(result).toContain(`${value};`);
+            Object.entries(uniqueValues).forEach(([property, value]) => {
+                try {
+                    expect(result).toContain(value);
+                } catch {
+                    throw new Error(`Missing value for "$${property}": expected "${value}" in the result.`);
+                }
             });
         });
 
         dependencyClassNames &&
-            it("should compile with dependency selectors styles", () => {
+            it("should compile with component dependency selectors styles", () => {
                 dependencyClassNames.forEach((className) => {
-                    expect(result).toContain(`.${className} {`);
+                    try {
+                        expect(result).toContain(`.${className} {`);
+                    } catch {
+                        throw new Error(`Expected ".${className}" dependency selector in the result.`);
+                    }
                 });
             });
     });
 }
 
 module.exports = {
     testKendoModule,
-    testKendoComponent
+    testKendoComponent,
 };