@fibery/ui-kit 1.40.3 → 1.40.4

package/src/design-system.test.ts

@@ -1,4 +1,6 @@
-import {getLightColors, getDarkColors, getLight2Colors} from "./design-system";
+import * as ds from "./design-system";
+import {makeThemeDefs, pickDarkColors, pickLight2Colors, pickLightColors} from "./design-system.colors";
+import {makeDefaultPalette} from "./palette-generator";
 
 function getKeys(colors: Record<string, string | Record<string, string>>) {
   const keys = [];
@@ -15,10 +17,288 @@ function getKeys(colors: Record<string, string | Record<string, string>>) {
   }
   return keys.sort();
 }
-it("dark and light color should have the same keys", () => {
-  const lKeys = getKeys(getLightColors());
-  const dKeys = getKeys(getDarkColors());
-  const l2Keys = getKeys(getLight2Colors());
-  expect(lKeys).toEqual(dKeys);
-  expect(l2Keys).toEqual(dKeys);
+
+const {
+  themeVars,
+  createInlineTheme,
+  getDarkenColor,
+  getEnumTextColor,
+  getLinearGradient,
+  getObjectColorMemoized,
+  getOpacities,
+  getTextColor,
+  getThemeColors,
+  getThemeValue,
+  ...rest
+} = ds;
+
+test("getThemeColors memoization", () => {
+  const modes = ["light", "dark", "light2"] as const;
+  const themes = modes.map((mode) => getThemeColors(null, mode));
+
+  // same input → same reference
+  modes.forEach((mode, i) => {
+    expect(getThemeColors("_", mode)).toBe(themes[i]);
+  });
+
+  // different modes → different references
+  expect(new Set(themes)).toMatchObject({size: modes.length});
+
+  // different modes → same keys
+  expect(new Set(themes.map(({fns: _, key: _k, ...colors}) => getKeys(colors).join(",")))).toMatchObject({size: 1});
+});
+
+test("snapshot rest", () => {
+  expect(rest).toMatchSnapshot();
+});
+
+test("snapshot themeColors", () => {
+  const {colors, ...rest} = makeThemeDefs(makeDefaultPalette());
+  expect({...colors, ...rest}).toMatchSnapshot();
+});
+
+test("snapshot themeVars", () => {
+  expect(themeVars).toMatchSnapshot();
+});
+
+const testColors = [
+  "#FF5400", // brand red
+  "#4978D4", // brand blue
+  "#08BD9F", // brand green
+  "#000000", // black
+  "#FFFFFF", // white
+  "rgb(73, 120, 212)", // rgb format
+  "hsl(220, 62%, 56%)", // hsl format
+];
+
+const testColorsForThemed = [
+  "#FF5400", // red
+  "#4978D4", // blue
+  "#08BD9F", // green
+  "#FBA32F", // yellow/orange
+  "#673DB6", // purple
+  "#000000", // black
+  "#FFFFFF", // white
+];
+
+describe("getOpacities", () => {
+  test.each(testColors)("snapshot for %s", (color) => {
+    expect(getOpacities(color)).toMatchSnapshot();
+  });
+
+  test("transparent color", () => {
+    expect(getOpacities("rgba(255, 255, 255, 0)")).toMatchSnapshot();
+  });
+});
+
+describe("getDarkenColor", () => {
+  test.each(testColors)("snapshot for %s", (color) => {
+    expect(getDarkenColor(color)).toMatchSnapshot();
+  });
+});
+
+describe("getTextColor", () => {
+  test.each(testColors)("snapshot for %s", (color) => {
+    expect(getTextColor(color)).toMatchSnapshot();
+  });
+});
+
+describe("getLinearGradient", () => {
+  test("single color", () => {
+    expect(getLinearGradient(["#FF5400"])).toMatchSnapshot();
+  });
+
+  test("two colors", () => {
+    expect(getLinearGradient(["#FF5400", "#4978D4"])).toMatchSnapshot();
+  });
+
+  test("three colors", () => {
+    expect(getLinearGradient(["#FF5400", "#4978D4", "#08BD9F"])).toMatchSnapshot();
+  });
+
+  test("four colors", () => {
+    expect(getLinearGradient(["#FF5400", "#4978D4", "#08BD9F", "#FFFFFF"])).toMatchSnapshot();
+  });
+
+  test("card type colors subset", () => {
+    expect(getLinearGradient(["#4A4A4A", "#6A849B", "#99A2AB", "#D40915", "#E72065"])).toMatchSnapshot();
+  });
+});
+
+describe("getThemeColors", () => {
+  test("light theme", () => {
+    expect(getThemeColors("#4978D4", "light")).toMatchSnapshot();
+  });
+
+  test("dark theme", () => {
+    expect(getThemeColors("#4978D4", "dark")).toMatchSnapshot();
+  });
+
+  test("light2 theme", () => {
+    expect(getThemeColors("#4978D4", "light2")).toMatchSnapshot();
+  });
+});
+
+describe("getThemeValue", () => {
+  const values = {light: "light-value", light2: "light2-value", dark: "dark-value"};
+
+  test("light theme", () => {
+    expect(getThemeValue("light", values)).toMatchSnapshot();
+  });
+
+  test("dark theme", () => {
+    expect(getThemeValue("dark", values)).toMatchSnapshot();
+  });
+
+  test("light2 theme", () => {
+    expect(getThemeValue("light2", values)).toMatchSnapshot();
+  });
+
+  test("fallback to light when key missing", () => {
+    expect(getThemeValue("light", {light: "fallback", dark: "dark"})).toMatchSnapshot();
+  });
+});
+
+describe("getLightColors", () => {
+  test("snapshot", () => {
+    expect(pickLightColors(makeThemeDefs(makeDefaultPalette()))).toMatchSnapshot();
+  });
+});
+
+describe("getDarkColors", () => {
+  test("snapshot", () => {
+    expect(pickDarkColors(makeThemeDefs(makeDefaultPalette()))).toMatchSnapshot();
+  });
+});
+
+describe("getLight2Colors", () => {
+  test("snapshot", () => {
+    expect(pickLight2Colors(makeThemeDefs(makeDefaultPalette()))).toMatchSnapshot();
+  });
+});
+
+const themes = {
+  light: getThemeColors(null, "light"),
+  dark: getThemeColors(null, "dark"),
+  light2: getThemeColors(null, "light2"),
+};
+
+describe("getEnumBackgroundColor", () => {
+  describe.each(["light", "dark", "light2"] as const)("%s theme", (mode) => {
+    test.each(testColorsForThemed)("snapshot for %s", (color) => {
+      expect(themes[mode].fns.getEnumBackground(color)).toMatchSnapshot();
+    });
+  });
+});
+
+describe("getIconColor", () => {
+  describe.each(["light", "dark"] as const)("%s theme", (mode) => {
+    test.each(testColorsForThemed)("snapshot for %s", (color) => {
+      expect(themes[mode].fns.getIconColor(color)).toMatchSnapshot();
+    });
+  });
+});
+
+describe("getAppIconBackgroundColor", () => {
+  describe.each(["light", "dark", "light2"] as const)("%s theme", (mode) => {
+    test.each(testColorsForThemed)("snapshot for %s", (color) => {
+      expect(themes[mode].fns.getAppIconBackground(color)).toMatchSnapshot();
+    });
+  });
+});
+
+describe("getLinkedHighlightBackgroundColor", () => {
+  const highlightColors = ["#FF5400", "#4978D4", "#08BD9F", "#FBA32F", "#673DB6"];
+
+  describe.each(["light", "dark"] as const)("%s theme", (mode) => {
+    test.each(highlightColors)("snapshot for %s", (color) => {
+      expect(themes[mode].fns.getLinkedHighlightBackground(color)).toMatchSnapshot();
+    });
+  });
+});
+
+describe("getLinkedHighlightDecorationBackgroundColor", () => {
+  const highlightColors = ["#FF5400", "#4978D4", "#08BD9F", "#FBA32F", "#673DB6"];
+
+  describe.each(["light", "dark"] as const)("%s theme", (mode) => {
+    test.each(highlightColors)("snapshot for %s", (color) => {
+      expect(themes[mode].fns.getLinkedHighlightDecorationBackground(color)).toMatchSnapshot();
+    });
+  });
+});
+
+describe("getEnumTextColor", () => {
+  test.each(testColorsForThemed)("snapshot for %s", (color) => {
+    expect(getEnumTextColor(color)).toMatchSnapshot();
+  });
+});
+
+describe("getObjectColorMemoized", () => {
+  test("empty name returns default", () => {
+    expect(getObjectColorMemoized("")).toMatchSnapshot();
+  });
+
+  test("null/undefined returns default", () => {
+    expect(getObjectColorMemoized(null)).toMatchSnapshot();
+    expect(getObjectColorMemoized(undefined)).toMatchSnapshot();
+  });
+
+  test("typical entity names", () => {
+    expect(getObjectColorMemoized("Task")).toMatchSnapshot();
+    expect(getObjectColorMemoized("Feature")).toMatchSnapshot();
+    expect(getObjectColorMemoized("Bug")).toMatchSnapshot();
+    expect(getObjectColorMemoized("User Story")).toMatchSnapshot();
+    expect(getObjectColorMemoized("Epic")).toMatchSnapshot();
+  });
+
+  test("database names", () => {
+    expect(getObjectColorMemoized("Product Management")).toMatchSnapshot();
+    expect(getObjectColorMemoized("Engineering")).toMatchSnapshot();
+    expect(getObjectColorMemoized("Design")).toMatchSnapshot();
+  });
+
+  test("special characters", () => {
+    expect(getObjectColorMemoized("Task #1")).toMatchSnapshot();
+    expect(getObjectColorMemoized("Feature (v2)")).toMatchSnapshot();
+    expect(getObjectColorMemoized("Bug-123")).toMatchSnapshot();
+  });
+
+  test("long names", () => {
+    expect(
+      getObjectColorMemoized("This is a very long entity name that might be used in some cases")
+    ).toMatchSnapshot();
+  });
+
+  test("unicode names", () => {
+    expect(getObjectColorMemoized("Задача")).toMatchSnapshot();
+    expect(getObjectColorMemoized("機能")).toMatchSnapshot();
+    expect(getObjectColorMemoized("🚀 Feature")).toMatchSnapshot();
+  });
+});
+
+describe("createInlineTheme", () => {
+  test("light theme with default reject keys", () => {
+    const theme = getThemeColors("#4978D4", "light");
+    expect(createInlineTheme(theme)).toMatchSnapshot();
+  });
+
+  test("dark theme with default reject keys", () => {
+    const theme = getThemeColors("#4978D4", "dark");
+    expect(createInlineTheme(theme)).toMatchSnapshot();
+  });
+
+  test("light2 theme with default reject keys", () => {
+    const theme = getThemeColors("#4978D4", "light2");
+    expect(createInlineTheme(theme)).toMatchSnapshot();
+  });
+
+  test("with custom reject keys (empty array - include all)", () => {
+    const theme = getThemeColors("#4978D4", "light");
+    expect(createInlineTheme(theme, [])).toMatchSnapshot();
+  });
+
+  test("with custom reject keys (specific keys)", () => {
+    const theme = getThemeColors("#4978D4", "light");
+    expect(createInlineTheme(theme, ["primary", "darkenPrimary"])).toMatchSnapshot();
+  });
 });