From 09426e3aac7b2357ee13bb3d9811cd8785769cf4 Mon Sep 17 00:00:00 2001 From: Dinesh Katariya Date: Mon, 5 Jun 2023 21:51:58 +0530 Subject: [PATCH 01/12] #test-coverage-for-getColorNameAndShadeFromColor function --- src/components/ColorPicker/colorPicker.test.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/components/ColorPicker/colorPicker.test.ts diff --git a/src/components/ColorPicker/colorPicker.test.ts b/src/components/ColorPicker/colorPicker.test.ts new file mode 100644 index 000000000..735477c9c --- /dev/null +++ b/src/components/ColorPicker/colorPicker.test.ts @@ -0,0 +1,17 @@ +import { ColorPaletteCustom } from '../../colors'; +import { getColorNameAndShadeFromColor } from './colorPickerUtils'; + +test('getColorNameAndShadeFromColor returns null when no matching color is found', () => { + // Arrange + const palette: ColorPaletteCustom = { + green: '#00FF00', + orange: '#E07C24', + }; + const color = '#FF6666'; + + // Act + const result = getColorNameAndShadeFromColor({ palette, color }); + + // Assert + expect(result).toBeNull(); +}); \ No newline at end of file From 451f8034c7a1cd7df68b2d686d251a8476d5f1f2 Mon Sep 17 00:00:00 2001 From: Dinesh Katariya Date: Tue, 6 Jun 2023 22:09:41 +0530 Subject: [PATCH 02/12] test : added test for colorPickerHotkeyBindings --- .../ColorPicker/colorPicker.test.ts | 17 ---------- .../ColorPicker/colorPicker.test.tsx | 34 +++++++++++++++++++ 2 files changed, 34 insertions(+), 17 deletions(-) delete mode 100644 src/components/ColorPicker/colorPicker.test.ts create mode 100644 src/components/ColorPicker/colorPicker.test.tsx diff --git a/src/components/ColorPicker/colorPicker.test.ts b/src/components/ColorPicker/colorPicker.test.ts deleted file mode 100644 index 735477c9c..000000000 --- a/src/components/ColorPicker/colorPicker.test.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { ColorPaletteCustom } from '../../colors'; -import { getColorNameAndShadeFromColor } from './colorPickerUtils'; - -test('getColorNameAndShadeFromColor returns null when no matching color is found', () => { - // Arrange - const palette: ColorPaletteCustom = { - green: '#00FF00', - orange: '#E07C24', - }; - const color = '#FF6666'; - - // Act - const result = getColorNameAndShadeFromColor({ palette, color }); - - // Assert - expect(result).toBeNull(); -}); \ No newline at end of file diff --git a/src/components/ColorPicker/colorPicker.test.tsx b/src/components/ColorPicker/colorPicker.test.tsx new file mode 100644 index 000000000..cb44c2eba --- /dev/null +++ b/src/components/ColorPicker/colorPicker.test.tsx @@ -0,0 +1,34 @@ +import { ColorPaletteCustom } from "../../colors"; +import { + getColorNameAndShadeFromColor, + colorPickerHotkeyBindings, +} from "./colorPickerUtils"; +import { render, screen } from "@testing-library/react"; + +test("getColorNameAndShadeFromColor returns null when no matching color is found", () => { + const palette: ColorPaletteCustom = { + green: "#00FF00", + orange: "#E07C24", + }; + const color = "#FF6666"; + + const result = getColorNameAndShadeFromColor({ palette, color }); + + expect(result).toBeNull(); +}); + +describe('colorPickerHotkeyBindings', () => { + test('renders all hotkey bindings', () => { + render( +
+

{colorPickerHotkeyBindings.join(',')}

+
+ ); + + colorPickerHotkeyBindings.forEach((hotkey) => { + const hotkeyElement = screen.getByText(hotkey); + expect(hotkeyElement).toBeInTheDocument(); + }); + }); +}); + From 4e454b41d18dbf320748094026f38717e53d544d Mon Sep 17 00:00:00 2001 From: Dinesh Katariya Date: Wed, 7 Jun 2023 21:27:15 +0530 Subject: [PATCH 03/12] test : resolved comments & modified code --- .../ColorPicker/colorPicker.test.ts | 32 +++++++++++++++++ .../ColorPicker/colorPicker.test.tsx | 34 ------------------- 2 files changed, 32 insertions(+), 34 deletions(-) create mode 100644 src/components/ColorPicker/colorPicker.test.ts delete mode 100644 src/components/ColorPicker/colorPicker.test.tsx diff --git a/src/components/ColorPicker/colorPicker.test.ts b/src/components/ColorPicker/colorPicker.test.ts new file mode 100644 index 000000000..82098112a --- /dev/null +++ b/src/components/ColorPicker/colorPicker.test.ts @@ -0,0 +1,32 @@ +import { ColorPaletteCustom } from "../../colors"; +import { + getColorNameAndShadeFromColor, + colorPickerHotkeyBindings, +} from "./colorPickerUtils"; + +describe("getColorNameAndShadeFromColor", () => { + it("returns null when no matching color is found", () => { + const palette: ColorPaletteCustom = { + green: "#00FF00", + orange: "#E07C24", + }; + const color = "#FF6666"; + + const result = getColorNameAndShadeFromColor({ palette, color }); + + expect(result).toBeNull(); + }); +}); + +describe("colorPickerHotkeyBindings", () => { + it("should contain all the expected hotkey bindings", () => { + + const testBindingKeys = [ + ["q", "w", "e", "r", "t"], + ["a", "s", "d", "f", "g"], + ["z", "x", "c", "v", "b"], + ].flat(); + + expect(testBindingKeys).toEqual(colorPickerHotkeyBindings); + }); +}); diff --git a/src/components/ColorPicker/colorPicker.test.tsx b/src/components/ColorPicker/colorPicker.test.tsx deleted file mode 100644 index cb44c2eba..000000000 --- a/src/components/ColorPicker/colorPicker.test.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { ColorPaletteCustom } from "../../colors"; -import { - getColorNameAndShadeFromColor, - colorPickerHotkeyBindings, -} from "./colorPickerUtils"; -import { render, screen } from "@testing-library/react"; - -test("getColorNameAndShadeFromColor returns null when no matching color is found", () => { - const palette: ColorPaletteCustom = { - green: "#00FF00", - orange: "#E07C24", - }; - const color = "#FF6666"; - - const result = getColorNameAndShadeFromColor({ palette, color }); - - expect(result).toBeNull(); -}); - -describe('colorPickerHotkeyBindings', () => { - test('renders all hotkey bindings', () => { - render( -
-

{colorPickerHotkeyBindings.join(',')}

-
- ); - - colorPickerHotkeyBindings.forEach((hotkey) => { - const hotkeyElement = screen.getByText(hotkey); - expect(hotkeyElement).toBeInTheDocument(); - }); - }); -}); - From cf816ca71f68268bb00bfc7f38fedf00be43a761 Mon Sep 17 00:00:00 2001 From: Dinesh Katariya Date: Wed, 7 Jun 2023 22:06:55 +0530 Subject: [PATCH 04/12] test : added test cases for getMostUsedCustomColors --- .../ColorPicker/colorPicker.test.ts | 114 +++++++++++++++++- 1 file changed, 113 insertions(+), 1 deletion(-) diff --git a/src/components/ColorPicker/colorPicker.test.ts b/src/components/ColorPicker/colorPicker.test.ts index 82098112a..06d910ee1 100644 --- a/src/components/ColorPicker/colorPicker.test.ts +++ b/src/components/ColorPicker/colorPicker.test.ts @@ -1,7 +1,10 @@ import { ColorPaletteCustom } from "../../colors"; +import { ExcalidrawElement } from "../../element/types"; import { getColorNameAndShadeFromColor, colorPickerHotkeyBindings, + isCustomColor, + getMostUsedCustomColors, } from "./colorPickerUtils"; describe("getColorNameAndShadeFromColor", () => { @@ -20,7 +23,6 @@ describe("getColorNameAndShadeFromColor", () => { describe("colorPickerHotkeyBindings", () => { it("should contain all the expected hotkey bindings", () => { - const testBindingKeys = [ ["q", "w", "e", "r", "t"], ["a", "s", "d", "f", "g"], @@ -30,3 +32,113 @@ describe("colorPickerHotkeyBindings", () => { expect(testBindingKeys).toEqual(colorPickerHotkeyBindings); }); }); + +describe("isCustomColor", () => { + it("should return true for a custom color not present in the palette", () => { + const palette = { + green: "#00FF00", + orange: "#E07C24", + }; + const color = "#FF6666"; + + const result = isCustomColor({ color, palette }); + + expect(result).toBe(true); + }); + + it("should return false for a color present in the palette", () => { + const palette = { + green: "#00FF00", + orange: "#E07C24", + }; + const color = "#00FF00"; + + const result = isCustomColor({ color, palette }); + + expect(result).toBe(false); + }); + + it("should handle empty palette correctly", () => { + const palette = {}; + const color = "#FF6666"; + + const result = isCustomColor({ color, palette }); + + expect(result).toBe(true); + }); +}); + +describe("getMostUsedCustomColors", () => { + const elements = [ + { + type: "rectangle", + id: "1", + isDeleted: false, + backgroundColor: "#FF0000", + strokeColor: "#00FF00", + }, + { + type: "ellipse", + id: "2", + isDeleted: false, + backgroundColor: "#FF0000", + strokeColor: "#0000FF", + }, + { + type: "rectangle", + id: "3", + isDeleted: false, + backgroundColor: "#00FF00", + strokeColor: "#00FF00", + }, + { + type: "rectangle", + id: "4", + isDeleted: true, + backgroundColor: "#FFFF00", + strokeColor: "#FF00FF", + }, + ]; + + const palette = { + red: "#FF0000", + green: "#00FF00", + blue: "#0000FF", + }; + + it("should return the most used custom colors for element background", () => { + const type = "elementBackground"; + + // @ts-ignore + const result = getMostUsedCustomColors(elements, type, palette); + + expect(result).toEqual(["#FF0000"]); + }); + + it("should return the most used custom colors for element stroke", () => { + const type = "elementStroke"; + + // @ts-ignore + const result = getMostUsedCustomColors(elements, type, palette); + + expect(result).toEqual(["#00FF00"]); + }); + + it("should handle empty elements correctly", () => { + const type = "elementBackground"; + const emptyElements: readonly ExcalidrawElement[] = []; + + const result = getMostUsedCustomColors(emptyElements, type, palette); + + expect(result).toEqual([]); + }); + + it("should handle empty palette correctly", () => { + const type = "elementBackground"; + const emptyPalette = {}; + // @ts-ignore + const result = getMostUsedCustomColors(elements, type, emptyPalette); + + expect(result).toEqual([]); + }); +}); From d8bc145af0427cc2f0521325b1c2a93f18d97ff7 Mon Sep 17 00:00:00 2001 From: Dinesh Katariya Date: Thu, 8 Jun 2023 22:24:33 +0530 Subject: [PATCH 05/12] test : improved code by removing ts-ignore had to add any because not able to find exact type --- src/components/ColorPicker/colorPicker.test.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/ColorPicker/colorPicker.test.ts b/src/components/ColorPicker/colorPicker.test.ts index 06d910ee1..87bc7aeed 100644 --- a/src/components/ColorPicker/colorPicker.test.ts +++ b/src/components/ColorPicker/colorPicker.test.ts @@ -69,7 +69,7 @@ describe("isCustomColor", () => { }); describe("getMostUsedCustomColors", () => { - const elements = [ + const elements:readonly any[] = [ { type: "rectangle", id: "1", @@ -109,7 +109,6 @@ describe("getMostUsedCustomColors", () => { it("should return the most used custom colors for element background", () => { const type = "elementBackground"; - // @ts-ignore const result = getMostUsedCustomColors(elements, type, palette); expect(result).toEqual(["#FF0000"]); @@ -118,7 +117,6 @@ describe("getMostUsedCustomColors", () => { it("should return the most used custom colors for element stroke", () => { const type = "elementStroke"; - // @ts-ignore const result = getMostUsedCustomColors(elements, type, palette); expect(result).toEqual(["#00FF00"]); @@ -136,7 +134,6 @@ describe("getMostUsedCustomColors", () => { it("should handle empty palette correctly", () => { const type = "elementBackground"; const emptyPalette = {}; - // @ts-ignore const result = getMostUsedCustomColors(elements, type, emptyPalette); expect(result).toEqual([]); From 2617b2ba2f9776f2870faba3fa7ef3bd51641af6 Mon Sep 17 00:00:00 2001 From: Dinesh Katariya <33573799+Thedineshk24@users.noreply.github.com> Date: Tue, 13 Jun 2023 17:11:52 +0530 Subject: [PATCH 06/12] test : renamed colorPicker to colorPickerUtils as per commet --- .../ColorPicker/{colorPicker.test.ts => colorPickerUtils.test.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/ColorPicker/{colorPicker.test.ts => colorPickerUtils.test.ts} (100%) diff --git a/src/components/ColorPicker/colorPicker.test.ts b/src/components/ColorPicker/colorPickerUtils.test.ts similarity index 100% rename from src/components/ColorPicker/colorPicker.test.ts rename to src/components/ColorPicker/colorPickerUtils.test.ts From 68db9a32bada2f72359f48f66a46f325d5aee22f Mon Sep 17 00:00:00 2001 From: Dinesh Katariya <33573799+Thedineshk24@users.noreply.github.com> Date: Tue, 13 Jun 2023 12:33:48 +0000 Subject: [PATCH 07/12] test : fixed prettier issue --- src/components/ColorPicker/colorPickerUtils.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ColorPicker/colorPickerUtils.test.ts b/src/components/ColorPicker/colorPickerUtils.test.ts index 87bc7aeed..4155b2227 100644 --- a/src/components/ColorPicker/colorPickerUtils.test.ts +++ b/src/components/ColorPicker/colorPickerUtils.test.ts @@ -69,7 +69,7 @@ describe("isCustomColor", () => { }); describe("getMostUsedCustomColors", () => { - const elements:readonly any[] = [ + const elements: readonly any[] = [ { type: "rectangle", id: "1", From 04011ccfddb45e2845d2f4a1c7373467f5d69210 Mon Sep 17 00:00:00 2001 From: Dinesh Katariya Date: Fri, 21 Jul 2023 11:31:33 +0530 Subject: [PATCH 08/12] test: modified code as per given comments --- .../ColorPicker/colorPickerUtils.test.ts | 45 ++++++++++++++----- 1 file changed, 34 insertions(+), 11 deletions(-) diff --git a/src/components/ColorPicker/colorPickerUtils.test.ts b/src/components/ColorPicker/colorPickerUtils.test.ts index 4155b2227..07eda6d11 100644 --- a/src/components/ColorPicker/colorPickerUtils.test.ts +++ b/src/components/ColorPicker/colorPickerUtils.test.ts @@ -2,7 +2,6 @@ import { ColorPaletteCustom } from "../../colors"; import { ExcalidrawElement } from "../../element/types"; import { getColorNameAndShadeFromColor, - colorPickerHotkeyBindings, isCustomColor, getMostUsedCustomColors, } from "./colorPickerUtils"; @@ -19,17 +18,41 @@ describe("getColorNameAndShadeFromColor", () => { expect(result).toBeNull(); }); -}); -describe("colorPickerHotkeyBindings", () => { - it("should contain all the expected hotkey bindings", () => { - const testBindingKeys = [ - ["q", "w", "e", "r", "t"], - ["a", "s", "d", "f", "g"], - ["z", "x", "c", "v", "b"], - ].flat(); + it("returns color name and null when matching single color is found", () => { + const palette: ColorPaletteCustom = { + red: "#FF0000", + orange: "#FFA500", + yellow: "#FFFF00", + green: "#008000", + blue: "#0000FF", + indigo: "#4B0082", + violet: "#EE82EE", + pink: "#FFC0CB", + brown: "#A52A2A", + black: "#000000", + white: "#FFFFFF", + gray: "#808080", + }; + + const color = "#FF0000"; - expect(testBindingKeys).toEqual(colorPickerHotkeyBindings); + const result = getColorNameAndShadeFromColor({ palette, color }); + + expect(result).toEqual({colorName: "red", shade: null}); + }); + + it("returns color name and shade index when matching array of colors is found", () => { + const palette: ColorPaletteCustom = { + red: ["#FF0000", "#FF6666"], + green: ["#00FF00"], + }; + + const color = "#FF6666"; + + const result = getColorNameAndShadeFromColor({ palette, color }); + + expect(result).toEqual({colorName: "red", shade: 1}); }); }); @@ -119,7 +142,7 @@ describe("getMostUsedCustomColors", () => { const result = getMostUsedCustomColors(elements, type, palette); - expect(result).toEqual(["#00FF00"]); + expect(result).toEqual(["#00FF00", "#0000FF"]); }); it("should handle empty elements correctly", () => { From 852b2b9ec0ceed288f1cc4e5ba35bda69ed1074d Mon Sep 17 00:00:00 2001 From: Dinesh Katariya Date: Fri, 21 Jul 2023 12:27:55 +0530 Subject: [PATCH 09/12] test: getMostUsedCustomColors commented --- .../ColorPicker/colorPickerUtils.test.ts | 130 +++++++++--------- 1 file changed, 65 insertions(+), 65 deletions(-) diff --git a/src/components/ColorPicker/colorPickerUtils.test.ts b/src/components/ColorPicker/colorPickerUtils.test.ts index 07eda6d11..445b6fdf6 100644 --- a/src/components/ColorPicker/colorPickerUtils.test.ts +++ b/src/components/ColorPicker/colorPickerUtils.test.ts @@ -34,25 +34,25 @@ describe("getColorNameAndShadeFromColor", () => { white: "#FFFFFF", gray: "#808080", }; - + const color = "#FF0000"; const result = getColorNameAndShadeFromColor({ palette, color }); - expect(result).toEqual({colorName: "red", shade: null}); + expect(result).toEqual({ colorName: "red", shade: null }); }); it("returns color name and shade index when matching array of colors is found", () => { const palette: ColorPaletteCustom = { - red: ["#FF0000", "#FF6666"], - green: ["#00FF00"], + red: ["#FF0000", "#FF6666", "#CC0000", "#990000", "#660000"], + green: ["#00FF00", "#00CC00", "#009900", "#006600", "#003300"], }; - + const color = "#FF6666"; const result = getColorNameAndShadeFromColor({ palette, color }); - expect(result).toEqual({colorName: "red", shade: 1}); + expect(result).toEqual({ colorName: "red", shade: 1 }); }); }); @@ -91,74 +91,74 @@ describe("isCustomColor", () => { }); }); -describe("getMostUsedCustomColors", () => { - const elements: readonly any[] = [ - { - type: "rectangle", - id: "1", - isDeleted: false, - backgroundColor: "#FF0000", - strokeColor: "#00FF00", - }, - { - type: "ellipse", - id: "2", - isDeleted: false, - backgroundColor: "#FF0000", - strokeColor: "#0000FF", - }, - { - type: "rectangle", - id: "3", - isDeleted: false, - backgroundColor: "#00FF00", - strokeColor: "#00FF00", - }, - { - type: "rectangle", - id: "4", - isDeleted: true, - backgroundColor: "#FFFF00", - strokeColor: "#FF00FF", - }, - ]; +// describe("getMostUsedCustomColors", () => { +// const elements: readonly any[] = [ +// { +// type: "rectangle", +// id: "1", +// isDeleted: false, +// backgroundColor: "#FF0000", +// strokeColor: "#00FF00", +// }, +// { +// type: "ellipse", +// id: "2", +// isDeleted: false, +// backgroundColor: "#FF0000", +// strokeColor: "#0000FF", +// }, +// { +// type: "rectangle", +// id: "3", +// isDeleted: false, +// backgroundColor: "#00FF00", +// strokeColor: "#00FF00", +// }, +// { +// type: "rectangle", +// id: "4", +// isDeleted: true, +// backgroundColor: "#FFFF00", +// strokeColor: "#FF00FF", +// }, +// ]; - const palette = { - red: "#FF0000", - green: "#00FF00", - blue: "#0000FF", - }; +// const palette = { +// red: "#FF0000", +// green: "#00FF00", +// blue: "#0000FF", +// }; - it("should return the most used custom colors for element background", () => { - const type = "elementBackground"; +// it("should return the most used custom colors for element background", () => { +// const type = "elementBackground"; - const result = getMostUsedCustomColors(elements, type, palette); +// const result = getMostUsedCustomColors(elements, type, palette); - expect(result).toEqual(["#FF0000"]); - }); +// expect(result).toEqual(["#FF0000"]); +// }); - it("should return the most used custom colors for element stroke", () => { - const type = "elementStroke"; +// it("should return the most used custom colors for element stroke", () => { +// const type = "elementStroke"; - const result = getMostUsedCustomColors(elements, type, palette); +// const result = getMostUsedCustomColors(elements, type, palette); - expect(result).toEqual(["#00FF00", "#0000FF"]); - }); +// expect(result).toEqual(["#00FF00", "#0000FF"]); +// }); - it("should handle empty elements correctly", () => { - const type = "elementBackground"; - const emptyElements: readonly ExcalidrawElement[] = []; +// it("should handle empty elements correctly", () => { +// const type = "elementBackground"; +// const emptyElements: readonly ExcalidrawElement[] = []; - const result = getMostUsedCustomColors(emptyElements, type, palette); +// const result = getMostUsedCustomColors(emptyElements, type, palette); - expect(result).toEqual([]); - }); +// expect(result).toEqual([]); +// }); - it("should handle empty palette correctly", () => { - const type = "elementBackground"; - const emptyPalette = {}; - const result = getMostUsedCustomColors(elements, type, emptyPalette); +// it("should handle empty palette correctly", () => { +// const type = "elementBackground"; +// const emptyPalette = {}; +// const result = getMostUsedCustomColors(elements, type, emptyPalette); - expect(result).toEqual([]); - }); -}); +// expect(result).toEqual(["#FF0000", "#00FF00", "#0000FF"]); +// }); +// }); From 4a22085ac12f503d842252f914ce524d87d1f491 Mon Sep 17 00:00:00 2001 From: Dinesh Katariya Date: Fri, 21 Jul 2023 12:30:05 +0530 Subject: [PATCH 10/12] test: added Fixme: comment title --- src/components/ColorPicker/colorPickerUtils.test.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/ColorPicker/colorPickerUtils.test.ts b/src/components/ColorPicker/colorPickerUtils.test.ts index 445b6fdf6..b4ae1cfb0 100644 --- a/src/components/ColorPicker/colorPickerUtils.test.ts +++ b/src/components/ColorPicker/colorPickerUtils.test.ts @@ -91,6 +91,8 @@ describe("isCustomColor", () => { }); }); +// FIXME: temporary commented below test because they're failing + // describe("getMostUsedCustomColors", () => { // const elements: readonly any[] = [ // { From 0914c08add1f62f338a4feb884720b0977f18e0f Mon Sep 17 00:00:00 2001 From: Dinesh Katariya Date: Fri, 21 Jul 2023 12:35:01 +0530 Subject: [PATCH 11/12] test: removed unused files --- src/components/ColorPicker/colorPickerUtils.test.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/ColorPicker/colorPickerUtils.test.ts b/src/components/ColorPicker/colorPickerUtils.test.ts index b4ae1cfb0..d11947485 100644 --- a/src/components/ColorPicker/colorPickerUtils.test.ts +++ b/src/components/ColorPicker/colorPickerUtils.test.ts @@ -1,9 +1,7 @@ import { ColorPaletteCustom } from "../../colors"; -import { ExcalidrawElement } from "../../element/types"; import { getColorNameAndShadeFromColor, isCustomColor, - getMostUsedCustomColors, } from "./colorPickerUtils"; describe("getColorNameAndShadeFromColor", () => { From 08eea5321129415b4bbb4ecc9850cd2259e09232 Mon Sep 17 00:00:00 2001 From: Dinesh Katariya Date: Sun, 13 Aug 2023 11:56:10 +0530 Subject: [PATCH 12/12] test: fixed failing test per original code --- .../ColorPicker/colorPickerUtils.test.ts | 123 +++++++++--------- 1 file changed, 63 insertions(+), 60 deletions(-) diff --git a/src/components/ColorPicker/colorPickerUtils.test.ts b/src/components/ColorPicker/colorPickerUtils.test.ts index d11947485..a4620226c 100644 --- a/src/components/ColorPicker/colorPickerUtils.test.ts +++ b/src/components/ColorPicker/colorPickerUtils.test.ts @@ -1,6 +1,8 @@ import { ColorPaletteCustom } from "../../colors"; +import { ExcalidrawElement } from "../../element/types"; import { getColorNameAndShadeFromColor, + getMostUsedCustomColors, isCustomColor, } from "./colorPickerUtils"; @@ -89,76 +91,77 @@ describe("isCustomColor", () => { }); }); -// FIXME: temporary commented below test because they're failing +describe("getMostUsedCustomColors", () => { +const elements: readonly any[] = [ + { + type: "rectangle", + id: "1", + isDeleted: false, + backgroundColor: "#FF0000", + strokeColor: "#00FF00", + }, + { + type: "ellipse", + id: "2", + isDeleted: false, + backgroundColor: "#FF0000", + strokeColor: "#0000FF", + }, + { + type: "rectangle", + id: "3", + isDeleted: false, + backgroundColor: "#00FF00", + strokeColor: "#00FF00", + }, + { + type: "rectangle", + id: "4", + isDeleted: true, + backgroundColor: "#FFFF00", + strokeColor: "#FF00FF", + }, +]; -// describe("getMostUsedCustomColors", () => { -// const elements: readonly any[] = [ -// { -// type: "rectangle", -// id: "1", -// isDeleted: false, -// backgroundColor: "#FF0000", -// strokeColor: "#00FF00", -// }, -// { -// type: "ellipse", -// id: "2", -// isDeleted: false, -// backgroundColor: "#FF0000", -// strokeColor: "#0000FF", -// }, -// { -// type: "rectangle", -// id: "3", -// isDeleted: false, -// backgroundColor: "#00FF00", -// strokeColor: "#00FF00", -// }, -// { -// type: "rectangle", -// id: "4", -// isDeleted: true, -// backgroundColor: "#FFFF00", -// strokeColor: "#FF00FF", -// }, -// ]; +const palette = { + red: "#FF0000", + green: "#00FF00", + blue: "#0000FF", +}; -// const palette = { -// red: "#FF0000", -// green: "#00FF00", -// blue: "#0000FF", -// }; +it("should return empty array for elementBackground.", () => { + const type = "elementBackground"; -// it("should return the most used custom colors for element background", () => { -// const type = "elementBackground"; + const result = getMostUsedCustomColors(elements, type, palette); -// const result = getMostUsedCustomColors(elements, type, palette); + expect(result).toEqual([]); +}); -// expect(result).toEqual(["#FF0000"]); -// }); -// it("should return the most used custom colors for element stroke", () => { -// const type = "elementStroke"; +it("should return empty array for elementStroke.", () => { + const type = "elementStroke"; -// const result = getMostUsedCustomColors(elements, type, palette); + const result = getMostUsedCustomColors(elements, type, palette); -// expect(result).toEqual(["#00FF00", "#0000FF"]); -// }); + expect(result).toEqual([]); +}); -// it("should handle empty elements correctly", () => { -// const type = "elementBackground"; -// const emptyElements: readonly ExcalidrawElement[] = []; -// const result = getMostUsedCustomColors(emptyElements, type, palette); +it("should handle empty elements correctly", () => { + const type = "elementBackground"; + const emptyElements: readonly ExcalidrawElement[] = []; -// expect(result).toEqual([]); -// }); + const result = getMostUsedCustomColors(emptyElements, type, palette); -// it("should handle empty palette correctly", () => { -// const type = "elementBackground"; -// const emptyPalette = {}; -// const result = getMostUsedCustomColors(elements, type, emptyPalette); + expect(result).toEqual([]); +}); -// expect(result).toEqual(["#FF0000", "#00FF00", "#0000FF"]); -// }); -// }); +it("should handle empty palette correctly", () => { + const type = "elementBackground"; + const emptyPalette = {}; + const result = getMostUsedCustomColors(elements, type, emptyPalette); + + // Assuming MAX_CUSTOM_COLORS_USED_IN_CANVAS is set to 2 + expect(result).toEqual(["#FF0000", "#00FF00"]); +}); +});