From 5ef4912a225abc69a9f7e1a01d5561266741c766 Mon Sep 17 00:00:00 2001 From: Pete Myron Date: Wed, 28 Jan 2026 10:19:46 -0600 Subject: [PATCH] test: fix padding tests --- src/stores/editorStore.test.ts | 257 +++++++++++++++++++++++++++------ 1 file changed, 211 insertions(+), 46 deletions(-) diff --git a/src/stores/editorStore.test.ts b/src/stores/editorStore.test.ts index 2ca5902..ec86cb4 100644 --- a/src/stores/editorStore.test.ts +++ b/src/stores/editorStore.test.ts @@ -1,5 +1,13 @@ import { describe, it, expect, beforeEach } from "vitest"; -import { useEditorStore, editorActions, usePadding, useSettings } from "./editorStore"; +import { + useEditorStore, + editorActions, + usePaddingTop, + usePaddingBottom, + usePaddingLeft, + usePaddingRight, + useSettings +} from "./editorStore"; import { act, renderHook } from "@testing-library/react"; describe("editorStore - padding feature", () => { @@ -11,28 +19,79 @@ describe("editorStore - padding feature", () => { }); describe("initial state", () => { - it("should have default padding of 100px", () => { + it("should have default padding of 100px for all sides", () => { const state = useEditorStore.getState(); - expect(state.settings.padding).toBe(100); + expect(state.settings.paddingTop).toBe(100); + expect(state.settings.paddingBottom).toBe(100); + expect(state.settings.paddingLeft).toBe(100); + expect(state.settings.paddingRight).toBe(100); }); it("should include padding in settings", () => { const { result } = renderHook(() => useSettings()); - expect(result.current.padding).toBe(100); + expect(result.current.paddingTop).toBe(100); + expect(result.current.paddingBottom).toBe(100); + expect(result.current.paddingLeft).toBe(100); + expect(result.current.paddingRight).toBe(100); }); }); describe("usePadding selector", () => { - it("should return current padding value", () => { - const { result } = renderHook(() => usePadding()); + it("should return current paddingTop value", () => { + const { result } = renderHook(() => usePaddingTop()); expect(result.current).toBe(100); }); - it("should update when padding changes", () => { - const { result } = renderHook(() => usePadding()); + it("should return current paddingBottom value", () => { + const { result } = renderHook(() => usePaddingBottom()); + expect(result.current).toBe(100); + }); + + it("should return current paddingLeft value", () => { + const { result } = renderHook(() => usePaddingLeft()); + expect(result.current).toBe(100); + }); + + it("should return current paddingRight value", () => { + const { result } = renderHook(() => usePaddingRight()); + expect(result.current).toBe(100); + }); + + it("should update when paddingTop changes", () => { + const { result } = renderHook(() => usePaddingTop()); + + act(() => { + editorActions.setPaddingTopTransient(50); + }); + + expect(result.current).toBe(50); + }); + + it("should update when paddingBottom changes", () => { + const { result } = renderHook(() => usePaddingBottom()); + + act(() => { + editorActions.setPaddingBottomTransient(50); + }); + + expect(result.current).toBe(50); + }); + + it("should update when paddingLeft changes", () => { + const { result } = renderHook(() => usePaddingLeft()); act(() => { - editorActions.setPaddingTransient(50); + editorActions.setPaddingLeftTransient(50); + }); + + expect(result.current).toBe(50); + }); + + it("should update when paddingRight changes", () => { + const { result } = renderHook(() => usePaddingRight()); + + act(() => { + editorActions.setPaddingRightTransient(50); }); expect(result.current).toBe(50); @@ -40,32 +99,82 @@ describe("editorStore - padding feature", () => { }); describe("setPaddingTransient", () => { - it("should update padding without pushing to history", () => { + it("should update paddingTop without pushing to history", () => { + const initialHistoryLength = useEditorStore.getState().past.length; + + act(() => { + editorActions.setPaddingTopTransient(75); + }); + + const state = useEditorStore.getState(); + expect(state.settings.paddingTop).toBe(75); + expect(state.past.length).toBe(initialHistoryLength); + }); + + it("should update paddingBottom without pushing to history", () => { const initialHistoryLength = useEditorStore.getState().past.length; act(() => { - editorActions.setPaddingTransient(75); + editorActions.setPaddingBottomTransient(75); }); const state = useEditorStore.getState(); - expect(state.settings.padding).toBe(75); + expect(state.settings.paddingBottom).toBe(75); + expect(state.past.length).toBe(initialHistoryLength); + }); + + it("should update paddingLeft without pushing to history", () => { + const initialHistoryLength = useEditorStore.getState().past.length; + + act(() => { + editorActions.setPaddingLeftTransient(75); + }); + + const state = useEditorStore.getState(); + expect(state.settings.paddingLeft).toBe(75); + expect(state.past.length).toBe(initialHistoryLength); + }); + + it("should update paddingRight without pushing to history", () => { + const initialHistoryLength = useEditorStore.getState().past.length; + + act(() => { + editorActions.setPaddingRightTransient(75); + }); + + const state = useEditorStore.getState(); + expect(state.settings.paddingRight).toBe(75); expect(state.past.length).toBe(initialHistoryLength); }); it("should handle minimum value (0)", () => { act(() => { - editorActions.setPaddingTransient(0); + editorActions.setPaddingTopTransient(0); + editorActions.setPaddingBottomTransient(0); + editorActions.setPaddingLeftTransient(0); + editorActions.setPaddingRightTransient(0); }); - expect(useEditorStore.getState().settings.padding).toBe(0); + const state = useEditorStore.getState(); + expect(state.settings.paddingTop).toBe(0); + expect(state.settings.paddingBottom).toBe(0); + expect(state.settings.paddingLeft).toBe(0); + expect(state.settings.paddingRight).toBe(0); }); it("should handle maximum value (200)", () => { act(() => { - editorActions.setPaddingTransient(200); + editorActions.setPaddingTopTransient(200); + editorActions.setPaddingBottomTransient(200); + editorActions.setPaddingLeftTransient(200); + editorActions.setPaddingRightTransient(200); }); - expect(useEditorStore.getState().settings.padding).toBe(200); + const state = useEditorStore.getState(); + expect(state.settings.paddingTop).toBe(200); + expect(state.settings.paddingBottom).toBe(200); + expect(state.settings.paddingLeft).toBe(200); + expect(state.settings.paddingRight).toBe(200); }); it("should allow rapid updates without history pollution", () => { @@ -74,33 +183,75 @@ describe("editorStore - padding feature", () => { // Simulate slider drag with many updates act(() => { for (let i = 0; i <= 100; i += 10) { - editorActions.setPaddingTransient(i); + editorActions.setPaddingTopTransient(i); + editorActions.setPaddingBottomTransient(i); + editorActions.setPaddingLeftTransient(i); + editorActions.setPaddingRightTransient(i); } }); const state = useEditorStore.getState(); - expect(state.settings.padding).toBe(100); + expect(state.settings.paddingTop).toBe(100); + expect(state.settings.paddingBottom).toBe(100); + expect(state.settings.paddingLeft).toBe(100); + expect(state.settings.paddingRight).toBe(100); expect(state.past.length).toBe(initialHistoryLength); }); }); describe("setPadding (commit)", () => { - it("should update padding and push to history", () => { + it("should update paddingTop and push to history", () => { const initialHistoryLength = useEditorStore.getState().past.length; act(() => { - editorActions.setPadding(150); + editorActions.setPaddingTop(150); }); const state = useEditorStore.getState(); - expect(state.settings.padding).toBe(150); + expect(state.settings.paddingTop).toBe(150); + expect(state.past.length).toBe(initialHistoryLength + 1); + }); + + it("should update paddingBottom and push to history", () => { + const initialHistoryLength = useEditorStore.getState().past.length; + + act(() => { + editorActions.setPaddingBottom(150); + }); + + const state = useEditorStore.getState(); + expect(state.settings.paddingBottom).toBe(150); + expect(state.past.length).toBe(initialHistoryLength + 1); + }); + + it("should update paddingLeft and push to history", () => { + const initialHistoryLength = useEditorStore.getState().past.length; + + act(() => { + editorActions.setPaddingLeft(150); + }); + + const state = useEditorStore.getState(); + expect(state.settings.paddingLeft).toBe(150); + expect(state.past.length).toBe(initialHistoryLength + 1); + }); + + it("should update paddingRight and push to history", () => { + const initialHistoryLength = useEditorStore.getState().past.length; + + act(() => { + editorActions.setPaddingRight(150); + }); + + const state = useEditorStore.getState(); + expect(state.settings.paddingRight).toBe(150); expect(state.past.length).toBe(initialHistoryLength + 1); }); it("should clear future history on commit", () => { // Setup: make a change and undo it act(() => { - editorActions.setPadding(50); + editorActions.setPaddingTop(50); editorActions.undo(); }); @@ -108,7 +259,7 @@ describe("editorStore - padding feature", () => { // Now commit a new change act(() => { - editorActions.setPadding(75); + editorActions.setPaddingTop(75); }); expect(useEditorStore.getState().future.length).toBe(0); @@ -116,74 +267,85 @@ describe("editorStore - padding feature", () => { }); describe("undo/redo with padding", () => { - it("should undo padding changes", () => { + it("should undo paddingTop changes", () => { act(() => { - editorActions.setPadding(50); + editorActions.setPaddingTop(50); }); - expect(useEditorStore.getState().settings.padding).toBe(50); + expect(useEditorStore.getState().settings.paddingTop).toBe(50); act(() => { editorActions.undo(); }); - expect(useEditorStore.getState().settings.padding).toBe(100); + expect(useEditorStore.getState().settings.paddingTop).toBe(100); }); - it("should redo padding changes", () => { + it("should redo paddingTop changes", () => { act(() => { - editorActions.setPadding(50); + editorActions.setPaddingTop(50); editorActions.undo(); }); - expect(useEditorStore.getState().settings.padding).toBe(100); + expect(useEditorStore.getState().settings.paddingTop).toBe(100); act(() => { editorActions.redo(); }); - expect(useEditorStore.getState().settings.padding).toBe(50); + expect(useEditorStore.getState().settings.paddingTop).toBe(50); }); it("should handle multiple undo/redo operations", () => { act(() => { - editorActions.setPadding(50); - editorActions.setPadding(75); - editorActions.setPadding(100); + editorActions.setPaddingTop(50); + editorActions.setPaddingTop(75); + editorActions.setPaddingTop(125); }); - expect(useEditorStore.getState().settings.padding).toBe(100); + expect(useEditorStore.getState().settings.paddingTop).toBe(125); act(() => { editorActions.undo(); }); - expect(useEditorStore.getState().settings.padding).toBe(75); + expect(useEditorStore.getState().settings.paddingTop).toBe(75); act(() => { editorActions.undo(); }); - expect(useEditorStore.getState().settings.padding).toBe(50); + expect(useEditorStore.getState().settings.paddingTop).toBe(50); act(() => { editorActions.redo(); }); - expect(useEditorStore.getState().settings.padding).toBe(75); + expect(useEditorStore.getState().settings.paddingTop).toBe(75); }); }); describe("reset", () => { - it("should reset padding to default value", () => { + it("should reset all padding values to default", () => { act(() => { - editorActions.setPadding(50); + editorActions.setPaddingTop(50); + editorActions.setPaddingBottom(60); + editorActions.setPaddingLeft(70); + editorActions.setPaddingRight(80); }); - expect(useEditorStore.getState().settings.padding).toBe(50); + const state = useEditorStore.getState(); + expect(state.settings.paddingTop).toBe(50); + expect(state.settings.paddingBottom).toBe(60); + expect(state.settings.paddingLeft).toBe(70); + expect(state.settings.paddingRight).toBe(80); act(() => { editorActions.reset(); }); - expect(useEditorStore.getState().settings.padding).toBe(100); + const resetState = useEditorStore.getState(); + expect(resetState.settings.paddingTop).toBe(100); + expect(resetState.settings.paddingBottom).toBe(100); + expect(resetState.settings.paddingLeft).toBe(100); + expect(resetState.settings.paddingRight).toBe(100); }); }); @@ -193,7 +355,10 @@ describe("editorStore - padding feature", () => { const initialBorderRadius = useEditorStore.getState().settings.borderRadius; act(() => { - editorActions.setPadding(150); + editorActions.setPaddingTop(150); + editorActions.setPaddingBottom(160); + editorActions.setPaddingLeft(170); + editorActions.setPaddingRight(180); }); const state = useEditorStore.getState(); @@ -203,7 +368,7 @@ describe("editorStore - padding feature", () => { it("should be included in history snapshots with other settings", () => { act(() => { - editorActions.setPadding(50); + editorActions.setPaddingTop(50); editorActions.setNoiseAmount(50); }); @@ -212,9 +377,9 @@ describe("editorStore - padding feature", () => { editorActions.undo(); }); - // Padding should still be 50 (from previous snapshot) + // paddingTop should still be 50 (from previous snapshot) const state = useEditorStore.getState(); - expect(state.settings.padding).toBe(50); + expect(state.settings.paddingTop).toBe(50); expect(state.settings.noiseAmount).toBe(20); // Reset to default }); });