jay/luminance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Started palette editor.
Test and Build / test-and-build (push) Failing after 1m47s
Details

Browse Source 
Cleaned up tests and lint errors.
Upgraded npm packages.
This commit is contained in:
Jay
2026-03-19 18:54:44 -04:00
parent 6be2d9e41a
commit 9fec89949b
36 changed files with 1484 additions and 1229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/tests/color.test.ts
+62 -95
View File
@@ -1,44 +1,11 @@
import * as colorlib from "colorlib";
import { beforeEach, describe, expect, test } from "vitest";
import { expectEqualColor, mockUseReducer } from "@/testUtil";
import { colorReducer, createColorActions } from "../color";
import type { ColorAction, ColorActions, ColorState } from "../color";
const mockUseReducer = <T extends object, U>(
reducer: (state: T, action: U) => T,
initialArg: T,
): [T, (value: U) => void] => {
let currentState = initialArg;
const state = new Proxy({} as T, {
get: (_, prop) => currentState[prop as keyof T],
});
const dispatch = (value: U) => {
const nextState = reducer(currentState, value);
currentState = nextState;
};
return [state, dispatch];
};
const expectRGB = (value: colorlib.RGB, expected: colorlib.RGB) => {
expect(value.r).toBe(expected.r);
expect(value.g).toBe(expected.g);
expect(value.b).toBe(expected.b);
};
const expectHSV = (value: colorlib.HSV, expected: colorlib.HSV) => {
expect(value.h).toBe(expected.h);
expect(value.s).toBe(expected.s);
expect(value.v).toBe(expected.v);
};
const expectHCL = (value: colorlib.HCL, expected: colorlib.HCL) => {
expect(value.h).toBe(expected.h);
expect(value.c).toBe(expected.c);
expect(value.l).toBe(expected.l);
};
describe("color reducer", () => {
const initialState = { color: colorlib.Color.from_hex("000") };
@@ -61,7 +28,7 @@ describe("color reducer", () => {
payload: nextColor,
});
expectRGB(nextState.color.rgb, nextColor);
expectEqualColor(nextState.color.rgb, nextColor);
});
test("set hsv", () => {
@@ -71,7 +38,7 @@ describe("color reducer", () => {
payload: nextColor,
});
expectHSV(nextState.color.hsv, nextColor);
expectEqualColor(nextState.color.hsv, nextColor);
});
test("set hcl", () => {
@@ -81,7 +48,7 @@ describe("color reducer", () => {
payload: nextColor,
});
expectHCL(nextState.color.hcl, nextColor);
expectEqualColor(nextState.color.hcl, nextColor);
});
test("set hex", () => {
@@ -104,7 +71,7 @@ describe("color reducer", () => {
component: colorlib.Component.RGB_R,
payload: nextColor.r,
});
expectRGB(nextState.color.rgb, nextColor);
expectEqualColor(nextState.color.rgb, nextColor);
});
test("set rgb g", () => {
@@ -114,7 +81,7 @@ describe("color reducer", () => {
component: colorlib.Component.RGB_G,
payload: nextColor.g,
});
expectRGB(nextState.color.rgb, nextColor);
expectEqualColor(nextState.color.rgb, nextColor);
});
test("set rgb b", () => {
@@ -124,7 +91,7 @@ describe("color reducer", () => {
component: colorlib.Component.RGB_B,
payload: nextColor.b,
});
expectRGB(nextState.color.rgb, nextColor);
expectEqualColor(nextState.color.rgb, nextColor);
});
});
@@ -136,7 +103,7 @@ describe("color reducer", () => {
component: colorlib.Component.HSV_H,
payload: nextColor.h,
});
expectHSV(nextState.color.hsv, nextColor);
expectEqualColor(nextState.color.hsv, nextColor);
});
test("set hsv s", () => {
@@ -146,7 +113,7 @@ describe("color reducer", () => {
component: colorlib.Component.HSV_S,
payload: nextColor.s,
});
expectHSV(nextState.color.hsv, nextColor);
expectEqualColor(nextState.color.hsv, nextColor);
});
test("set hsv v", () => {
@@ -156,7 +123,7 @@ describe("color reducer", () => {
component: colorlib.Component.HSV_V,
payload: nextColor.v,
});
expectHSV(nextState.color.hsv, nextColor);
expectEqualColor(nextState.color.hsv, nextColor);
});
});
@@ -168,7 +135,7 @@ describe("color reducer", () => {
component: colorlib.Component.HCL_H,
payload: nextColor.h,
});
expectHCL(nextState.color.hcl, nextColor);
expectEqualColor(nextState.color.hcl, nextColor);
});
test("set hcl c", () => {
@@ -178,7 +145,7 @@ describe("color reducer", () => {
component: colorlib.Component.HCL_C,
payload: nextColor.c,
});
expectHCL(nextState.color.hcl, nextColor);
expectEqualColor(nextState.color.hcl, nextColor);
});
test("set hcl l", () => {
@@ -188,7 +155,7 @@ describe("color reducer", () => {
component: colorlib.Component.HCL_L,
payload: nextColor.l,
});
expectHCL(nextState.color.hcl, nextColor);
expectEqualColor(nextState.color.hcl, nextColor);
});
});
});
@@ -202,7 +169,7 @@ describe("color reducer", () => {
component: colorlib.Component.RGB_R,
payload: (prev) => prev + 100,
});
expectRGB(nextState.color.rgb, nextColor);
expectEqualColor(nextState.color.rgb, nextColor);
nextColor = colorlib.RGB.new(50, 0, 0);
nextState = colorReducer(nextState, {
@@ -210,7 +177,7 @@ describe("color reducer", () => {
component: colorlib.Component.RGB_R,
payload: (prev) => prev - 50,
});
expectRGB(nextState.color.rgb, nextColor);
expectEqualColor(nextState.color.rgb, nextColor);
});
test("adjust rgb g", () => {
@@ -220,7 +187,7 @@ describe("color reducer", () => {
component: colorlib.Component.RGB_G,
payload: (prev) => prev + 100,
});
expectRGB(nextState.color.rgb, nextColor);
expectEqualColor(nextState.color.rgb, nextColor);
nextColor = colorlib.RGB.new(0, 50, 0);
nextState = colorReducer(nextState, {
@@ -228,7 +195,7 @@ describe("color reducer", () => {
component: colorlib.Component.RGB_G,
payload: (prev) => prev - 50,
});
expectRGB(nextState.color.rgb, nextColor);
expectEqualColor(nextState.color.rgb, nextColor);
});
test("adjust rgb b", () => {
@@ -238,7 +205,7 @@ describe("color reducer", () => {
component: colorlib.Component.RGB_B,
payload: (prev) => prev + 100,
});
expectRGB(nextState.color.rgb, nextColor);
expectEqualColor(nextState.color.rgb, nextColor);
nextColor = colorlib.RGB.new(0, 0, 50);
nextState = colorReducer(nextState, {
@@ -246,7 +213,7 @@ describe("color reducer", () => {
component: colorlib.Component.RGB_B,
payload: (prev) => prev - 50,
});
expectRGB(nextState.color.rgb, nextColor);
expectEqualColor(nextState.color.rgb, nextColor);
});
});
@@ -258,7 +225,7 @@ describe("color reducer", () => {
component: colorlib.Component.HSV_H,
payload: (prev) => prev + 100,
});
expectHSV(nextState.color.hsv, nextColor);
expectEqualColor(nextState.color.hsv, nextColor);
nextColor = colorlib.HSV.new(50, 0, 0);
nextState = colorReducer(nextState, {
@@ -266,7 +233,7 @@ describe("color reducer", () => {
component: colorlib.Component.HSV_H,
payload: (prev) => prev - 50,
});
expectHSV(nextState.color.hsv, nextColor);
expectEqualColor(nextState.color.hsv, nextColor);
});
test("adjust hsv s", () => {
@@ -276,7 +243,7 @@ describe("color reducer", () => {
component: colorlib.Component.HSV_S,
payload: (prev) => prev + 1,
});
expectHSV(nextState.color.hsv, nextColor);
expectEqualColor(nextState.color.hsv, nextColor);
nextColor = colorlib.HSV.new(0, 0.5, 0);
nextState = colorReducer(nextState, {
@@ -284,7 +251,7 @@ describe("color reducer", () => {
component: colorlib.Component.HSV_S,
payload: (prev) => prev - 0.5,
});
expectHSV(nextState.color.hsv, nextColor);
expectEqualColor(nextState.color.hsv, nextColor);
});
test("adjust hsv v", () => {
@@ -294,7 +261,7 @@ describe("color reducer", () => {
component: colorlib.Component.HSV_V,
payload: (prev) => prev + 1,
});
expectHSV(nextState.color.hsv, nextColor);
expectEqualColor(nextState.color.hsv, nextColor);
nextColor = colorlib.HSV.new(0, 0, 0.5);
nextState = colorReducer(nextState, {
@@ -302,7 +269,7 @@ describe("color reducer", () => {
component: colorlib.Component.HSV_V,
payload: (prev) => prev - 0.5,
});
expectHSV(nextState.color.hsv, nextColor);
expectEqualColor(nextState.color.hsv, nextColor);
});
});
@@ -314,7 +281,7 @@ describe("color reducer", () => {
component: colorlib.Component.HCL_H,
payload: (prev) => prev + 100,
});
expectHCL(nextState.color.hcl, nextColor);
expectEqualColor(nextState.color.hcl, nextColor);
nextColor = colorlib.HCL.new(50, 0, 0);
nextState = colorReducer(nextState, {
@@ -322,7 +289,7 @@ describe("color reducer", () => {
component: colorlib.Component.HCL_H,
payload: (prev) => prev - 50,
});
expectHCL(nextState.color.hcl, nextColor);
expectEqualColor(nextState.color.hcl, nextColor);
});
test("adjust hcl c", () => {
@@ -332,7 +299,7 @@ describe("color reducer", () => {
component: colorlib.Component.HCL_C,
payload: (prev) => prev + 1,
});
expectHCL(nextState.color.hcl, nextColor);
expectEqualColor(nextState.color.hcl, nextColor);
nextColor = colorlib.HCL.new(0, 0.5, 0);
nextState = colorReducer(nextState, {
@@ -340,7 +307,7 @@ describe("color reducer", () => {
component: colorlib.Component.HCL_C,
payload: (prev) => prev - 0.5,
});
expectHCL(nextState.color.hcl, nextColor);
expectEqualColor(nextState.color.hcl, nextColor);
});
test("adjust hcl l", () => {
@@ -350,7 +317,7 @@ describe("color reducer", () => {
component: colorlib.Component.HCL_L,
payload: (prev) => prev + 1,
});
expectHCL(nextState.color.hcl, nextColor);
expectEqualColor(nextState.color.hcl, nextColor);
nextColor = colorlib.HCL.new(0, 0, 0.5);
nextState = colorReducer(nextState, {
@@ -358,7 +325,7 @@ describe("color reducer", () => {
component: colorlib.Component.HCL_L,
payload: (prev) => prev - 0.5,
});
expectHCL(nextState.color.hcl, nextColor);
expectEqualColor(nextState.color.hcl, nextColor);
});
});
});
@@ -388,19 +355,19 @@ describe("color actions", () => {
test("set rgb", () => {
const nextColor = colorlib.RGB.new(1, 2, 3);
actions.rgb.setRGB(nextColor);
expectRGB(state.color.rgb, nextColor);
expectEqualColor(state.color.rgb, nextColor);
});
test("set hsv", () => {
const nextColor = colorlib.HSV.new(1, 2, 3);
actions.hsv.setHSV(nextColor);
expectHSV(state.color.hsv, nextColor);
expectEqualColor(state.color.hsv, nextColor);
});
test("set hcl", () => {
const nextColor = colorlib.HCL.new(1, 2, 3);
actions.hcl.setHCL(nextColor);
expectHCL(state.color.hcl, nextColor);
expectEqualColor(state.color.hcl, nextColor);
});
test("set hex", () => {
@@ -415,19 +382,19 @@ describe("color actions", () => {
test("set rgb r", () => {
const nextColor = colorlib.RGB.new(100, 0, 0);
actions.rgb.setR(nextColor.r);
expectRGB(state.color.rgb, nextColor);
expectEqualColor(state.color.rgb, nextColor);
});
test("set rgb g", () => {
const nextColor = colorlib.RGB.new(0, 100, 0);
actions.rgb.setG(nextColor.g);
expectRGB(state.color.rgb, nextColor);
expectEqualColor(state.color.rgb, nextColor);
});
test("set rgb b", () => {
const nextColor = colorlib.RGB.new(0, 0, 100);
actions.rgb.setB(nextColor.b);
expectRGB(state.color.rgb, nextColor);
expectEqualColor(state.color.rgb, nextColor);
});
});
@@ -435,19 +402,19 @@ describe("color actions", () => {
test("set hsv h", () => {
const nextColor = colorlib.HSV.new(100, 0, 0);
actions.hsv.setH(nextColor.h);
expectHSV(state.color.hsv, nextColor);
expectEqualColor(state.color.hsv, nextColor);
});
test("set hsv s", () => {
const nextColor = colorlib.HSV.new(0, 0.5, 0);
actions.hsv.setS(nextColor.s);
expectHSV(state.color.hsv, nextColor);
expectEqualColor(state.color.hsv, nextColor);
});
test("set hsv v", () => {
const nextColor = colorlib.HSV.new(0, 0, 0.5);
actions.hsv.setV(nextColor.v);
expectHSV(state.color.hsv, nextColor);
expectEqualColor(state.color.hsv, nextColor);
});
});
@@ -455,19 +422,19 @@ describe("color actions", () => {
test("set hcl h", () => {
const nextColor = colorlib.HCL.new(100, 0, 0);
actions.hcl.setH(nextColor.h);
expectHCL(state.color.hcl, nextColor);
expectEqualColor(state.color.hcl, nextColor);
});
test("set hcl c", () => {
const nextColor = colorlib.HCL.new(0, 0.5, 0);
actions.hcl.setC(nextColor.c);
expectHCL(state.color.hcl, nextColor);
expectEqualColor(state.color.hcl, nextColor);
});
test("set hcl l", () => {
const nextColor = colorlib.HCL.new(0, 0, 0.5);
actions.hcl.setL(nextColor.l);
expectHCL(state.color.hcl, nextColor);
expectEqualColor(state.color.hcl, nextColor);
});
});
});
@@ -477,31 +444,31 @@ describe("color actions", () => {
test("adjust rgb r", () => {
let nextColor = colorlib.RGB.new(100, 0, 0);
actions.rgb.setR((prev) => prev + 100);
expectRGB(state.color.rgb, nextColor);
expectEqualColor(state.color.rgb, nextColor);
nextColor = colorlib.RGB.new(50, 0, 0);
actions.rgb.setR((prev) => prev - 50);
expectRGB(state.color.rgb, nextColor);
expectEqualColor(state.color.rgb, nextColor);
});
test("adjust rgb g", () => {
let nextColor = colorlib.RGB.new(0, 100, 0);
actions.rgb.setG((prev) => prev + 100);
expectRGB(state.color.rgb, nextColor);
expectEqualColor(state.color.rgb, nextColor);
nextColor = colorlib.RGB.new(0, 50, 0);
actions.rgb.setG((prev) => prev - 50);
expectRGB(state.color.rgb, nextColor);
expectEqualColor(state.color.rgb, nextColor);
});
test("adjust rgb b", () => {
let nextColor = colorlib.RGB.new(0, 0, 100);
actions.rgb.setB((prev) => prev + 100);
expectRGB(state.color.rgb, nextColor);
expectEqualColor(state.color.rgb, nextColor);
nextColor = colorlib.RGB.new(0, 0, 50);
actions.rgb.setB((prev) => prev - 50);
expectRGB(state.color.rgb, nextColor);
expectEqualColor(state.color.rgb, nextColor);
});
});
@@ -509,31 +476,31 @@ describe("color actions", () => {
test("adjust hsv h", () => {
let nextColor = colorlib.HSV.new(100, 0, 0);
actions.hsv.setH((prev) => prev + 100);
expectHSV(state.color.hsv, nextColor);
expectEqualColor(state.color.hsv, nextColor);
nextColor = colorlib.HSV.new(50, 0, 0);
actions.hsv.setH((prev) => prev - 50);
expectHSV(state.color.hsv, nextColor);
expectEqualColor(state.color.hsv, nextColor);
});
test("adjust hsv s", () => {
let nextColor = colorlib.HSV.new(0, 1, 0);
actions.hsv.setS((prev) => prev + 1);
expectHSV(state.color.hsv, nextColor);
expectEqualColor(state.color.hsv, nextColor);
nextColor = colorlib.HSV.new(0, 0.5, 0);
actions.hsv.setS((prev) => prev - 0.5);
expectHSV(state.color.hsv, nextColor);
expectEqualColor(state.color.hsv, nextColor);
});
test("adjust hsv v", () => {
let nextColor = colorlib.HSV.new(0, 0, 1);
actions.hsv.setV((prev) => prev + 1);
expectHSV(state.color.hsv, nextColor);
expectEqualColor(state.color.hsv, nextColor);
nextColor = colorlib.HSV.new(0, 0, 0.5);
actions.hsv.setV((prev) => prev - 0.5);
expectHSV(state.color.hsv, nextColor);
expectEqualColor(state.color.hsv, nextColor);
});
});
@@ -541,31 +508,31 @@ describe("color actions", () => {
test("adjust hcl h", () => {
let nextColor = colorlib.HCL.new(100, 0, 0);
actions.hcl.setH((prev) => prev + 100);
expectHCL(state.color.hcl, nextColor);
expectEqualColor(state.color.hcl, nextColor);
nextColor = colorlib.HCL.new(50, 0, 0);
actions.hcl.setH((prev) => prev - 50);
expectHCL(state.color.hcl, nextColor);
expectEqualColor(state.color.hcl, nextColor);
});
test("adjust hcl c", () => {
let nextColor = colorlib.HCL.new(0, 1, 0);
actions.hcl.setC((prev) => prev + 1);
expectHCL(state.color.hcl, nextColor);
expectEqualColor(state.color.hcl, nextColor);
nextColor = colorlib.HCL.new(0, 0.5, 0);
actions.hcl.setC((prev) => prev - 0.5);
expectHCL(state.color.hcl, nextColor);
expectEqualColor(state.color.hcl, nextColor);
});
test("adjust hcl l", () => {
let nextColor = colorlib.HCL.new(0, 0, 1);
actions.hcl.setL((prev) => prev + 1);
expectHCL(state.color.hcl, nextColor);
expectEqualColor(state.color.hcl, nextColor);
nextColor = colorlib.HCL.new(0, 0, 0.5);
actions.hcl.setL((prev) => prev - 0.5);
expectHCL(state.color.hcl, nextColor);
expectEqualColor(state.color.hcl, nextColor);
});
});
});
src/hooks/tests/crosshair.test.cy.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import type { CartesianSpace } from "@/types";
import { valueToPosition } from "@/util";
@@ -12,8 +12,8 @@ function TestSquare() {
const [dimensions, setDimensions] = useState<CartesianSpace>({ x: 0, y: 0 });
const [xValue, setXValue] = useState(0);
const [yValue, setYValue] = useState(0);
const xValueRange = { min: 0, max: 100 };
const yValueRange = { min: 0, max: 100 };
const xValueRange = useMemo(() => ({ min: 0, max: 100 }), []);
const yValueRange = useMemo(() => ({ min: 0, max: 100 }), []);
const [xPosition, setXPosition] = useState(0);
const [yPosition, setYPosition] = useState(0);
@@ -46,7 +46,7 @@ function TestSquare() {
const newYPos = valueToPosition(yValue, dimensions.y - 1, yValueRange);
setXPosition(newXPos);
setYPosition(newYPos);
}, [xValue, yValue]);
}, [xValue, yValue, dimensions.x, dimensions.y, xValueRange, yValueRange]);
return (
<>
src/hooks/tests/dragAndDrop.test.cy.tsx
+1
View File
@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState } from "react";
import clsx from "clsx";
src/hooks/tests/paletteCard.test.ts
+52
View File
@@ -0,0 +1,52 @@
import { Hex as HexColor } from "colorlib";
import { beforeEach, describe, expect, test } from "vitest";
import { mockUseReducer } from "@/testUtil";
import type {
PaletteCard,
PaletteCardAction,
PaletteCardActions,
PaletteCardState,
} from "../paletteCard";
import { createPaletteCardActions, paletteCardReducer } from "../paletteCard";
const createPaletteState = (
present: PaletteCard,
history: PaletteCard[] = [],
future: PaletteCard[] = [],
) => ({ present: { ...present }, history, future });
const testPaletteCard = {
id: "palette_id",
name: "Test Palette",
colors: [],
selectedColorId: null,
inToolkitMode: false,
};
const testState = createPaletteState(testPaletteCard);
const WHITE = HexColor.from_code("#fff");
const GREY = HexColor.from_code("#777");
const BLACK = HexColor.from_code("#000");
describe("palette card actions", () => {
let state: PaletteCardState;
let dispatch: (value: PaletteCardAction) => void;
let actions: PaletteCardActions;
beforeEach(() => {
[state, dispatch] = mockUseReducer(paletteCardReducer, testState);
actions = createPaletteCardActions(dispatch);
});
test("sets card name", () => {
actions.setCardName("New Name");
expect(state.present.name).toBe("New Name");
expect(state.history.length).toBe(1);
expect(state.future.length).toBe(0);
expect(state.history[0].name).toBe("Test Palette");
});
});
src/hooks/tests/slider.test.cy.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import type { CartesianSpace } from "@/types";
import { Direction } from "@/types";
@@ -17,7 +17,7 @@ function TestSlider({
const [dimensions, setDimensions] = useState<CartesianSpace>({ x: 0, y: 0 });
const [value, setValue] = useState(0);
const [position, setPosition] = useState(0);
const valueRange = { min: 0, max: 100 };
const valueRange = useMemo(() => ({ min: 0, max: 100 }), []);
const { sliderRef, isDragging } = useSlider({
direction,
origin,
@@ -51,7 +51,7 @@ function TestSlider({
} else {
setValue(0);
}
}, [dimensions, direction]);
}, [dimensions, direction, position]);
useEffect(() => {
const maxPosition = chooseValueByDirection(