vite-plugin-css-module-types 1.0.0

package/src/tests/generate-dts.spec.ts

@@ -0,0 +1,499 @@
+import { describe, it, expect } from "vitest";
+import type { ClassEntry } from "../lib/types.ts";
+import { generateDtsContent } from "../lib/generate-dts.ts";
+
+// ─── generateDtsContent (default mode) ─────────────────────────────────────
+
+describe("generateDtsContent", () => {
+  it("generates declaration for a single class without line info", () => {
+    const entries: ClassEntry[] = [
+      { rule: "button", value: "btn_hash", comment: "", cssBlock: "" },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "comp.module.css", "/abs/comp.module.css");
+
+    expect(dts).toContain("declare const styles: {");
+    expect(dts).toContain('readonly "button": "btn_hash";');
+    expect(dts).toContain("export default styles;");
+    expect(dts).toContain("comp.module.css");
+    expect(dts).toContain("file:///abs/comp.module.css");
+  });
+
+  it("includes line number in link when available", () => {
+    const entries: ClassEntry[] = [
+      { rule: "card", value: "card_hash", line: 15, comment: "", cssBlock: "" },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "card.module.css", "/abs/card.module.css");
+
+    expect(dts).toContain(":15");
+    expect(dts).toContain("#L15");
+  });
+
+  it("includes comment block when comment is present", () => {
+    const entries: ClassEntry[] = [
+      {
+        rule: "card",
+        value: "card_hash",
+        line: 5,
+        comment: "Card container style",
+        cssBlock: "",
+      },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "card.module.css", "/abs/card.module.css");
+
+    expect(dts).toContain("```txt");
+    expect(dts).toContain("Card container style");
+    expect(dts).toContain("```");
+  });
+
+  it("includes CSS rule block when cssBlock is present", () => {
+    const entries: ClassEntry[] = [
+      {
+        rule: "text-s",
+        value: "text-s_hash",
+        line: 5,
+        comment: "",
+        cssBlock: ".text-s {\n  font-size: var(--fs-s);\n  line-height: var(--lh-s);\n}",
+      },
+    ];
+
+    const { content: dts } = generateDtsContent(
+      entries,
+      "typography.module.css",
+      "/abs/typography.module.css",
+    );
+
+    expect(dts).toContain("```css");
+    expect(dts).toContain(".text-s {");
+    expect(dts).toContain("font-size: var(--fs-s);");
+    expect(dts).toContain("```");
+    // Horizontal rule separates CSS block from the file link
+    expect(dts).toContain("---");
+  });
+
+  it("includes both comment and CSS block when both present", () => {
+    const entries: ClassEntry[] = [
+      {
+        rule: "btn",
+        value: "btn_hash",
+        line: 3,
+        comment: "Primary action button",
+        cssBlock: ".btn {\n  color: blue;\n}",
+      },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "btn.module.css", "/abs/btn.module.css");
+
+    expect(dts).toContain("```txt");
+    expect(dts).toContain("Primary action button");
+    expect(dts).toContain("```css");
+    expect(dts).toContain(".btn {");
+  });
+
+  it("escapes CSS comment delimiters with look-alike characters", () => {
+    const entries: ClassEntry[] = [
+      {
+        rule: "gap",
+        value: "gap_hash",
+        line: 3,
+        comment: "",
+        cssBlock: ".gap {\n  gap: 0.25rem; /** 4px; */\n}",
+      },
+    ];
+
+    const { content: dts } = generateDtsContent(
+      entries,
+      "layout.module.css",
+      "/abs/layout.module.css",
+    );
+
+    // The literal CSS comment delimiters must not appear inside the fenced block
+    expect(dts).not.toContain("/** 4px; */");
+    // The original `/*` open delimiter is replaced with ASTERISK OPERATOR
+    expect(dts).not.toMatch(/```css[\s\S]*\/\*[\s\S]*```/);
+    // Comment content is preserved with ASTERISK OPERATOR (U+2217) look-alikes
+    expect(dts).toContain("/\u2217");
+    expect(dts).toContain("\u2217/");
+    expect(dts).toContain("4px;");
+    expect(dts).toContain("gap: 0.25rem;");
+    // Verify the JSDoc closes properly — the link should be present after the CSS block
+    expect(dts).toContain("layout.module.css:3");
+  });
+
+  it("handles multiple entries", () => {
+    const entries: ClassEntry[] = [
+      { rule: "a", value: "a_h", comment: "", cssBlock: "" },
+      { rule: "b", value: "b_h", comment: "", cssBlock: "" },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "f.module.css", "/abs/f.module.css");
+
+    expect(dts).toContain('readonly "a": "a_h";');
+    expect(dts).toContain('readonly "b": "b_h";');
+  });
+
+  it('generates "export {};" for empty entries (empty module)', () => {
+    const { content: dts, lineMappings } = generateDtsContent(
+      [],
+      "empty.module.css",
+      "/abs/empty.module.css",
+    );
+
+    expect(dts).toBe("export {};\n");
+    expect(lineMappings).toEqual([]);
+  });
+
+  it("properly escapes special characters in class and value names", () => {
+    const entries: ClassEntry[] = [
+      { rule: "my-class", value: "my-class_abc123", comment: "", cssBlock: "" },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "f.module.css", "/f.module.css");
+
+    expect(dts).toContain('readonly "my-class": "my-class_abc123";');
+  });
+});
+
+// ─── generateDtsContent: Vite-provided camelCase variants ─────────────────
+
+describe("generateDtsContent with Vite-provided variants", () => {
+  it("emits both kebab and camelCase entries from Vite localsConvention", () => {
+    // Vite `localsConvention: 'camelCase'` provides both variants
+    const entries: ClassEntry[] = [
+      { rule: "my-class", value: "my-class_hash", comment: "", cssBlock: "" },
+      { rule: "myClass", value: "my-class_hash", comment: "", cssBlock: "" },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "f.module.css", "/f.module.css");
+
+    expect(dts).toContain('readonly "my-class": "my-class_hash";');
+    expect(dts).toContain('readonly "myClass": "my-class_hash";');
+  });
+
+  it("does not duplicate when entry name has no variants", () => {
+    const entries: ClassEntry[] = [
+      { rule: "button", value: "button_hash", comment: "", cssBlock: "" },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "f.module.css", "/f.module.css");
+
+    const matches = dts.match(/readonly "button"/g);
+    expect(matches).toHaveLength(1);
+  });
+
+  it("emits entries exactly as provided — no extra aliases generated", () => {
+    // Only kebab-case entry, no camelCase — plugin should NOT generate one
+    const entries: ClassEntry[] = [
+      { rule: "my-cool-class", value: "hash", comment: "", cssBlock: "" },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "f.module.css", "/f.module.css");
+
+    expect(dts).toContain('readonly "my-cool-class": "hash";');
+    // No camelCase alias generated by the plugin
+    expect(dts).not.toContain("myCoolClass");
+  });
+});
+
+// ─── generateDtsContent: namedExports option ───────────────────────────────
+
+describe("generateDtsContent with namedExports", () => {
+  it("emits named exports only for valid JS identifiers", () => {
+    // Vite provides both kebab and camelCase entries
+    const entries: ClassEntry[] = [
+      { rule: "my-class", value: "my-class_hash", comment: "", cssBlock: "" },
+      { rule: "myClass", value: "my-class_hash", comment: "", cssBlock: "" },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "f.module.css", "/f.module.css", {
+      namedExports: true,
+    });
+
+    // Named export only for valid JS identifier
+    expect(dts).toContain("export declare const myClass: string;");
+    // Kebab-case does NOT get a named export
+    expect(dts).not.toMatch(/export declare const my-class/);
+    // Default export block includes both variants
+    expect(dts).toContain("declare const styles: {");
+    expect(dts).toContain("export default styles;");
+    expect(dts).not.toContain("export = styles");
+    expect(dts).toContain('readonly "my-class": "my-class_hash";');
+    expect(dts).toContain('readonly "myClass": "my-class_hash";');
+  });
+
+  it("skips named export for kebab-only entries without Vite camelCase", () => {
+    const entries: ClassEntry[] = [
+      { rule: "primary-button", value: "hash", comment: "", cssBlock: "" },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "f.module.css", "/f.module.css", {
+      namedExports: true,
+    });
+
+    // No named export — kebab-case is not a valid JS identifier
+    expect(dts).not.toContain("export declare const");
+    // Default export still has the entry
+    expect(dts).toContain('readonly "primary-button": "hash";');
+  });
+
+  it("handles multiple named exports with Vite-provided variants", () => {
+    const entries: ClassEntry[] = [
+      { rule: "btn", value: "btn_h", comment: "", cssBlock: "" },
+      { rule: "card-wrap", value: "card_h", comment: "", cssBlock: "" },
+      { rule: "cardWrap", value: "card_h", comment: "", cssBlock: "" },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "f.module.css", "/f.module.css", {
+      namedExports: true,
+    });
+
+    expect(dts).toContain("export declare const btn: string;");
+    expect(dts).toContain("export declare const cardWrap: string;");
+    // Default export includes all entries
+    expect(dts).toContain('readonly "btn": "btn_h";');
+    expect(dts).toContain('readonly "card-wrap": "card_h";');
+    expect(dts).toContain('readonly "cardWrap": "card_h";');
+    expect(dts).toContain("export default styles;");
+  });
+
+  it("includes JSDoc comments when line info available", () => {
+    const entries: ClassEntry[] = [
+      {
+        rule: "btn",
+        value: "hash",
+        line: 5,
+        comment: "Primary button",
+        cssBlock: "",
+      },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "f.module.css", "/abs/f.module.css", {
+      namedExports: true,
+    });
+
+    expect(dts).toContain("```txt");
+    expect(dts).toContain("Primary button");
+    expect(dts).toContain("#L5");
+    expect(dts).toContain("export declare const btn: string;");
+  });
+
+  it('emits "export {};" for empty entries', () => {
+    const { content: dts, lineMappings } = generateDtsContent([], "f.module.css", "/f.module.css", {
+      namedExports: true,
+    });
+
+    expect(dts).toBe("export {};\n");
+    expect(lineMappings).toEqual([]);
+  });
+
+  it("does not duplicate default export property when name has no dashes", () => {
+    const entries: ClassEntry[] = [
+      { rule: "button", value: "button_h", comment: "", cssBlock: "" },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "f.module.css", "/f.module.css", {
+      namedExports: true,
+    });
+
+    // Only one readonly "button" in the default export (no camelCase alias needed)
+    const matches = dts.match(/readonly "button"/g);
+    expect(matches).toHaveLength(1);
+    expect(dts).toContain("export default styles;");
+  });
+});
+
+// ─── generateDtsContent: lineMappings ──────────────────────────────────────
+
+describe("generateDtsContent lineMappings", () => {
+  it("returns empty lineMappings when entries have no line info", () => {
+    const entries: ClassEntry[] = [{ rule: "btn", value: "btn_h", comment: "", cssBlock: "" }];
+
+    const { lineMappings } = generateDtsContent(entries, "f.module.css", "/f.module.css");
+
+    expect(lineMappings).toEqual([]);
+  });
+
+  it("returns lineMappings for default mode entries with line info", () => {
+    const entries: ClassEntry[] = [
+      { rule: "card", value: "card_h", line: 5, comment: "", cssBlock: "" },
+    ];
+
+    const { content, lineMappings } = generateDtsContent(entries, "f.module.css", "/f.module.css");
+
+    expect(lineMappings.length).toBeGreaterThan(0);
+    // All mappings should reference CSS line 5
+    for (const m of lineMappings) {
+      expect(m.cssLine).toBe(5);
+      expect(m.cssColumn).toBe(0);
+    }
+    // At least one mapped .d.ts line should be the declaration line
+    const dtsLines = content.split("\n");
+    const hasDeclarationMapping = lineMappings.some((m) =>
+      dtsLines[m.dtsLine - 1]?.includes("card"),
+    );
+    expect(hasDeclarationMapping).toBe(true);
+  });
+
+  it("returns lineMappings for Vite-provided variants", () => {
+    // Vite provides both kebab and camelCase
+    const entries: ClassEntry[] = [
+      {
+        rule: "my-class",
+        value: "my-class_h",
+        line: 3,
+        comment: "",
+        cssBlock: "",
+      },
+      {
+        rule: "myClass",
+        value: "my-class_h",
+        line: 3,
+        comment: "",
+        cssBlock: "",
+      },
+    ];
+
+    const { lineMappings } = generateDtsContent(entries, "f.module.css", "/f.module.css");
+
+    // 6 mappings: JSDoc + declaration + guard for each of the 2 entries
+    expect(lineMappings).toHaveLength(6);
+    for (const m of lineMappings) {
+      expect(m.cssLine).toBe(3);
+    }
+  });
+
+  it("returns lineMappings for namedExports mode with Vite variants", () => {
+    // Vite provides kebab + camelCase
+    const entries: ClassEntry[] = [
+      {
+        rule: "my-class",
+        value: "my-class_h",
+        line: 1,
+        comment: "",
+        cssBlock: "",
+      },
+      {
+        rule: "myClass",
+        value: "my-class_h",
+        line: 1,
+        comment: "",
+        cssBlock: "",
+      },
+    ];
+
+    const { content, lineMappings } = generateDtsContent(entries, "f.module.css", "/f.module.css", {
+      namedExports: true,
+    });
+
+    // 9 mappings: JSDoc + declaration + guard for:
+    //   1 named export (myClass) + 2 default block props (my-class, myClass)
+    expect(lineMappings.length).toBe(9);
+    for (const m of lineMappings) {
+      expect(m.cssLine).toBe(1);
+    }
+
+    // Second mapping (declaration after single JSDoc line) should be the named export
+    const dtsLines = content.split("\n");
+    expect(dtsLines[lineMappings[1]!.dtsLine - 1]).toContain("export declare const");
+  });
+
+  it("maps multiple entries to their respective CSS lines", () => {
+    const entries: ClassEntry[] = [
+      { rule: "a", value: "a_h", line: 1, comment: "", cssBlock: "" },
+      { rule: "b", value: "b_h", line: 10, comment: "", cssBlock: "" },
+    ];
+
+    const { lineMappings } = generateDtsContent(entries, "f.module.css", "/f.module.css");
+
+    const cssLines = lineMappings.map((m) => m.cssLine);
+    expect(cssLines).toContain(1);
+    expect(cssLines).toContain(10);
+  });
+});
+
+// ─── deduplication with Vite localsConvention ───────────────────────────────
+
+describe("generateDtsContent deduplication", () => {
+  it("deduplicates when classMapping has both kebab and camelCase keys (default mode)", () => {
+    // Vite `localsConvention: 'camelCase'` provides both variants
+    const entries: ClassEntry[] = [
+      {
+        rule: "my-class",
+        value: "my-class_h",
+        line: 5,
+        comment: "",
+        cssBlock: "",
+      },
+      {
+        rule: "myClass",
+        value: "my-class_h",
+        line: 5,
+        comment: "",
+        cssBlock: "",
+      },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "f.module.css", "/f.module.css");
+
+    // Each variant appears exactly once
+    const kebabMatches = dts.match(/readonly "my-class"/g);
+    const camelMatches = dts.match(/readonly "myClass"/g);
+    expect(kebabMatches).toHaveLength(1);
+    expect(camelMatches).toHaveLength(1);
+  });
+
+  it("deduplicates named exports when classMapping has both kebab and camelCase keys", () => {
+    const entries: ClassEntry[] = [
+      {
+        rule: "my-class",
+        value: "my-class_h",
+        line: 3,
+        comment: "",
+        cssBlock: "",
+      },
+      {
+        rule: "myClass",
+        value: "my-class_h",
+        line: 3,
+        comment: "",
+        cssBlock: "",
+      },
+    ];
+
+    const { content: dts, lineMappings } = generateDtsContent(
+      entries,
+      "f.module.css",
+      "/f.module.css",
+      { namedExports: true },
+    );
+
+    // Named export: `export declare const myClass` should appear once
+    const namedExportMatches = dts.match(/export declare const myClass/g);
+    expect(namedExportMatches).toHaveLength(1);
+
+    // Default export properties: kebab + camel, each exactly once
+    const kebabMatches = dts.match(/readonly "my-class"/g);
+    const camelMatches = dts.match(/readonly "myClass"/g);
+    expect(kebabMatches).toHaveLength(1);
+    expect(camelMatches).toHaveLength(1);
+
+    // All lineMappings should point to CSS line 3
+    for (const m of lineMappings) {
+      expect(m.cssLine).toBe(3);
+    }
+  });
+
+  it("keeps distinct properties when names are genuinely different", () => {
+    const entries: ClassEntry[] = [
+      { rule: "alpha", value: "alpha_h", line: 1, comment: "", cssBlock: "" },
+      { rule: "beta", value: "beta_h", line: 5, comment: "", cssBlock: "" },
+    ];
+
+    const { content: dts } = generateDtsContent(entries, "f.module.css", "/f.module.css");
+
+    expect(dts).toContain('"alpha"');
+    expect(dts).toContain('"beta"');
+  });
+});

package/src/tests/integration.spec.ts

@@ -0,0 +1,175 @@
+import { describe, it, expect } from "vitest";
+import type { LineMapping } from "../lib/sourcemap.ts";
+import { patchViteModuleCode, evaluateModuleExports } from "../lib/transform.ts";
+import { extractCssComments } from "../lib/css-comments.ts";
+import { resolveClassEntries, buildOriginalClassLineMap } from "../lib/class-index.ts";
+
+// ─── patchViteModuleCode + evaluateModuleExports ────────────────────────────
+
+describe("patchViteModuleCode + evaluateModuleExports integration", () => {
+  it("processes a realistic Vite CSS module transform output", async () => {
+    const viteOutput = [
+      'import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from "/@vite/client"',
+      'const __vite__id = "src/button.module.css"',
+      'const __vite__css = ".btn_x1y2z { color: red; }\\n.icon_a3b4c { width: 24px; }"',
+      "__vite__updateStyle(__vite__id, __vite__css)",
+      'export default { "btn": "btn_x1y2z", "icon": "icon_a3b4c" }',
+      "if (import.meta.hot) {",
+      "  import.meta.hot.accept()",
+      "}",
+    ].join("\n");
+
+    const patched = patchViteModuleCode(viteOutput);
+    const { classMapping, cssText } = await evaluateModuleExports(patched);
+
+    expect(classMapping).toEqual({
+      btn: "btn_x1y2z",
+      icon: "icon_a3b4c",
+    });
+    expect(cssText).toContain(".btn_x1y2z");
+    expect(cssText).toContain(".icon_a3b4c");
+  });
+});
+
+// ─── extractCssComments + resolveClassEntries ───────────────────────────────
+
+describe("extractCssComments + resolveClassEntries integration", () => {
+  it("links comments to classes via line numbers", () => {
+    const css = [
+      "/** Primary action button */",
+      ".button { color: blue; }",
+      "",
+      "/** Card wrapper */",
+      ".card { padding: 16px; }",
+    ].join("\n");
+
+    const comments = extractCssComments(css);
+
+    const buttonMapping: LineMapping = {
+      generatedLine: 1,
+      generatedContent: ".button_hash { color: blue; }",
+      originalLine: 2,
+    };
+    const cardMapping: LineMapping = {
+      generatedLine: 2,
+      generatedContent: ".card_hash { padding: 16px; }",
+      originalLine: 5,
+    };
+
+    const classIndex = new Map<string, LineMapping>([
+      ["button_hash", buttonMapping],
+      ["card_hash", cardMapping],
+    ]);
+
+    const entries = resolveClassEntries(
+      { button: "button_hash", card: "card_hash" },
+      classIndex,
+      comments,
+    );
+
+    expect(entries[0]?.comment).toBe("Primary action button");
+    expect(entries[1]?.comment).toBe("Card wrapper");
+  });
+});
+
+// ─── buildOriginalClassLineMap + resolveClassEntries ────────────────────────
+
+describe("buildOriginalClassLineMap + resolveClassEntries integration", () => {
+  it("resolves composes classes that fail sourcemap lookup via original CSS scan", () => {
+    const originalCss = [
+      ".hrbp-filter {",
+      "  position: relative;",
+      "}",
+      "",
+      "/** Controlled counter badge */",
+      ".hrbp-controlled-counter {",
+      '  composes: text-s_bold from "@app/styles/typography.module.css";',
+      "  margin-right: 0.25rem;",
+      "}",
+      "",
+      ".hrbp-state-filter {",
+      "  display: flex;",
+      "}",
+    ].join("\n");
+
+    const comments = extractCssComments(originalCss);
+    const originalClassLines = buildOriginalClassLineMap(originalCss);
+
+    // Simulate what Vite produces: composes creates multi-class hash values
+    const classMapping = {
+      "hrbp-filter": "_hrbp-filter_abc12_1",
+      "hrbp-controlled-counter": "_hrbp-controlled-counter_abc12_6 _text-s_bold_xyz_22",
+      "hrbp-state-filter": "_hrbp-state-filter_abc12_11",
+    };
+
+    // classIndex only has single-class hashes — the composed value won't match
+    const filterMapping: LineMapping = {
+      generatedLine: 1,
+      generatedContent: "._hrbp-filter_abc12_1 { }",
+      originalLine: 1,
+    };
+    const stateMapping: LineMapping = {
+      generatedLine: 3,
+      generatedContent: "._hrbp-state-filter_abc12_11 { }",
+      originalLine: 11,
+    };
+    const classIndex = new Map<string, LineMapping>([
+      ["_hrbp-filter_abc12_1", filterMapping],
+      ["_hrbp-state-filter_abc12_11", stateMapping],
+    ]);
+
+    const entries = resolveClassEntries(classMapping, classIndex, comments, originalClassLines);
+
+    const filterEntry = entries.find((e) => e.rule === "hrbp-filter");
+    const counterEntry = entries.find((e) => e.rule === "hrbp-controlled-counter");
+    const stateEntry = entries.find((e) => e.rule === "hrbp-state-filter");
+
+    // All classes resolve to correct lines
+    expect(filterEntry?.line).toBe(1);
+    expect(counterEntry?.line).toBe(6); // was broken before — would have been undefined
+    expect(stateEntry?.line).toBe(11);
+
+    // Comment from the line above .hrbp-controlled-counter
+    expect(counterEntry?.comment).toBe("Controlled counter badge");
+  });
+});
+
+// ─── Vite localsConvention camelCase mismatch ───────────────────────────────
+
+describe("Vite localsConvention camelCase + plugin camelCase integration", () => {
+  it("resolves all camelCase variants including lodash-style deep camelCase", () => {
+    // CSS has `.text_c-disabled` at line 169.
+    // Vite localsConvention: 'camelCase' (lodash) produces:
+    //   'text_c-disabled' → hash, 'textCDisabled' → hash
+    // Our toCamelCase only converts hyphens → 'text_cDisabled'.
+    // So 'textCDisabled' (Vite's variant) won't be in originalClassLines.
+    const originalCss = [
+      "/** Disabled text color */",
+      ".text_c-disabled {",
+      "  color: var(--c-text-disabled);",
+      "}",
+    ].join("\n");
+
+    const comments = extractCssComments(originalCss);
+    const originalClassLines = buildOriginalClassLineMap(originalCss);
+
+    const hash = "_text_c-disabled_wt63m_169";
+    const classMapping = {
+      "text_c-disabled": hash,
+      textCDisabled: hash, // Vite's lodash-style camelCase
+    };
+
+    const entries = resolveClassEntries(classMapping, null, comments, originalClassLines);
+
+    const original = entries.find((e) => e.rule === "text_c-disabled");
+    const lodashCamel = entries.find((e) => e.rule === "textCDisabled");
+
+    // Both resolve to line 2 (the CSS selector line)
+    expect(original?.line).toBe(2);
+    expect(lodashCamel?.line).toBe(2);
+
+    // Both get the comment from the preceding line
+    expect(original?.comment).toBe("Disabled text color");
+    expect(lodashCamel?.comment).toBe("Disabled text color");
+  });
+});