feat: add color-provider tests

__mocks__/vscode.js

@@ -54,6 +54,15 @@ class Range {
   }
 }
 
+class Color {
+  constructor(red, green, blue, alpha) {
+    this.red = red;
+    this.green = green;
+    this.blue = blue;
+    this.alpha = alpha;
+  }
+}
+
 const workspace = {
   getConfiguration: jest.fn(),
   workspaceFolders: [],
@@ -79,4 +88,9 @@ module.exports = {
   window,
   Position,
   Range,
+  Color,
+  EndOfLine: {
+    LF: 1,
+    CRLF: 2,
+  },
 };

src/color-provider.ts

@@ -8,12 +8,12 @@ import {
   EndOfLine,
   Position,
 } from "vscode";
+import { parseToRgb } from "polished";
+import type { RgbaColor } from "polished/lib/types/color";
 import { CACHE } from "./constants";
 import { isObjectEmpty } from "./utils";
 import { setup } from "./main";
 import { parseFiles } from "./parser";
-import { parseToRgb } from "polished";
-import type { RgbaColor } from "polished/lib/types/color";
 
 const getChunkRange = (startLineNumber: number, endLineNumber: number): Range =>
   new Range(new Position(startLineNumber, 0), new Position(endLineNumber, 0));

src/constants.ts

@@ -225,7 +225,7 @@ export const CSS3Colors = [
 ];
 
 export type CSSVarRecord = { [path: string]: CSSVarDeclarations[] };
-export const CACHE: {
+export type CacheType = {
   cssVars: CSSVarRecord;
   cssVarsMap: { [varName: string]: CSSVarDeclarations };
   fileMetas: {
@@ -235,7 +235,8 @@ export const CACHE: {
     };
   };
   config: Config;
-} = {
+};
+export const CACHE: CacheType = {
   cssVars: {},
   cssVarsMap: {},
   fileMetas: {},

src/test/color-provider/color-provider.test.ts

@@ -0,0 +1,122 @@
+import { EndOfLine, TextDocument } from "vscode";
+import { parseToRgb } from "polished";
+import { RgbaColor } from "polished/lib/types/color";
+
+import { CssColorProvider } from "../../color-provider";
+import { CSSVarDeclarations } from "../../main";
+
+jest.mock("../../constants", () => {
+  const CONSTANTS = jest.requireActual("../../constants");
+  const VARIABLES_FILE = "path";
+  const cssVariables = [
+    {
+      property: "--color-red-300",
+      value: "#fc8181",
+      color: "#fc8181",
+    } as CSSVarDeclarations,
+    {
+      property: "--color-red-500",
+      value: "#e53e3e",
+      color: "#e53e3e",
+    } as CSSVarDeclarations,
+    {
+      property: "--color-red-700",
+      value: "#c53030",
+      color: "#c53030",
+    } as CSSVarDeclarations,
+  ];
+
+  return {
+    __esModule: true,
+    ...CONSTANTS,
+    CACHE: {
+      ...CONSTANTS.CACHE,
+      cssVars: { [VARIABLES_FILE]: cssVariables },
+      cssVarsMap: cssVariables.reduce(
+        (map, css) => ({ ...map, [css.property]: css }),
+        {}
+      ),
+      config: {
+        ...CONSTANTS.DEFAULT_CONFIG,
+        files: [VARIABLES_FILE],
+      },
+    },
+  };
+});
+
+jest.mock("../../main", () => {
+  return {
+    __esModule: true,
+    setup: jest.fn().mockResolvedValue({}),
+  };
+});
+
+jest.mock("../../parser", () => {
+  return {
+    __esModule: true,
+    parseFiles: jest.fn().mockResolvedValue([]),
+  };
+});
+
+const getDocumentFromText = (text: string) => {
+  let called = false;
+  return {
+    eol: EndOfLine.LF,
+    getText() {
+      if (!called) {
+        called = true;
+        return `${text}\n\n`;
+      }
+      return null;
+    },
+  } as TextDocument
+};
+
+describe("Test Color Provider", () => {
+  let provider: CssColorProvider;
+  const red300 = parseToRgb("#fc8181") as RgbaColor;
+  const red500 = parseToRgb("#e53e3e") as RgbaColor;
+
+  beforeAll(() => {
+    provider = new CssColorProvider();
+  });
+
+  it("should provide color for single var()", async () => {
+    const colorInfos = await provider.provideDocumentColors(
+      getDocumentFromText("color: var(--color-red-300)")
+    );
+    expect(colorInfos.length).toBe(1);
+    expect(colorInfos[0].color).toMatchObject({
+      red: red300.red / 255,
+      green: red300.green / 255,
+      blue: red300.blue / 255,
+      alpha: red300.alpha ?? 1,
+    });
+    expect(colorInfos[0].range.start.character).toBe(7);
+    expect(colorInfos[0].range.end.character).toBe(27);
+  });
+  it("should provide color for multi-line var()", async () => {
+    const colorInfos = await provider.provideDocumentColors(
+      getDocumentFromText("color: var(--color-red-300)\ncolor: var(--color-red-500)\ncolor: var(--color-red-700)")
+    );
+    expect(colorInfos.length).toBe(3);
+    expect(colorInfos[1].color).toMatchObject({
+      red: red500.red / 255,
+      green: red500.green / 255,
+      blue: red500.blue / 255,
+      alpha: red500.alpha ?? 1,
+    });
+    expect(colorInfos[1].range).toEqual(
+      expect.objectContaining({
+        start: expect.objectContaining({
+          line: 1,
+          character: 7
+        }),
+        end: expect.objectContaining({
+          line: 1,
+          character: 27
+        })
+      })
+    );
+  });
+});