Ku6epXBOCTuK/twitch-panels
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update persisted state workflow

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-02-19 08:05:33 +05:00
parent 8fccc1e36b
commit 833cc3d086
15 changed files with 216 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/unit/__snapshots__/constants.test.ts.snap
+4 -3
View File
@@ -2,7 +2,6 @@
exports[`Application Constants Logic > Global Contract (Snapshot) > should match the previous configuration snapshot 1`] = `
{
"DEFAULT_TEXT_ALIGN": "center",
"IMAGE_SETTINGS": {
"BRIGHTNESS_MAX": 100,
"BRIGHTNESS_MIN": 0,
@@ -35,6 +34,7 @@ exports[`Application Constants Logic > Global Contract (Snapshot) > should match
"NEXT": "next",
"PREV": "prev",
},
"TEXT_ALIGN_DEFAULT": "center",
"TRANSITION_DURATION": 0,
"TYPOGRAPHY": {
"FONT_FAMILIES": [
@@ -52,12 +52,13 @@ exports[`Application Constants Logic > Global Contract (Snapshot) > should match
"FONT_SIZE_MAX": 72,
"FONT_SIZE_MIN": 10,
"MAX_TEXT_LENGTH": 100,
"OFFSET_Y_DEFAULT": 0,
"OFFSET_Y_MAX": 100,
"OFFSET_Y_MIN": -100,
"PADDING_X_DEFAULT": 10,
"PADDING_X_MAX": 100,
"PADDING_X_MIN": 0,
"TEXT_COLOR_DEFAULT": "#ffffff",
"VERTICAL_OFFSET_MAX": 100,
"VERTICAL_OFFSET_MIN": -100,
},
"TextAlign": {
"CENTER": "center",
tests/unit/components/panel/PreviewManager.test.ts
+8 -13
View File
@@ -1,7 +1,6 @@
import PreviewManager from "$components/panel/PreviewManager.svelte";
import { downloadService } from "$services/downloadService";
import { konvaStageState } from "$states/konvaStage.svelte";
import { STATE_DATA } from "$states/persisted.svelte";
import { textsState } from "$states/texts.svelte";
import { render, screen, waitFor } from "@testing-library/svelte";
import userEvent from "@testing-library/user-event";
@@ -21,7 +20,7 @@ vi.mock("./Preview.svelte", () => ({
describe("PreviewManager Integration", () => {
beforeEach(() => {
vi.clearAllMocks();
textsState[STATE_DATA] = [];
textsState.fromSnapshot([]);
});
it("should show empty state by aria-label when no texts", () => {
@@ -30,7 +29,7 @@ describe("PreviewManager Integration", () => {
});
it("should toggle navigation buttons availability based on texts length", async () => {
textsState[STATE_DATA] = ["1", "2"];
textsState.fromSnapshot(["1", "2"]);
render(PreviewManager);
const nextBtn = screen.getByRole("button", { name: /next slide/i });
@@ -42,7 +41,7 @@ describe("PreviewManager Integration", () => {
it("should send correct data to downloadAll service", async () => {
const user = userEvent.setup();
textsState[STATE_DATA] = ["Apple", "Banana"];
textsState.fromSnapshot(["Apple", "Banana"]);
render(PreviewManager);
await user.click(screen.getByRole("button", { name: /download all/i }));
@@ -57,12 +56,11 @@ describe("PreviewManager Integration", () => {
it("should call downloadPanel with current active text", async () => {
const user = userEvent.setup();
textsState[STATE_DATA] = ["First", "Second"];
textsState.fromSnapshot(["First", "Second"]);
konvaStageState.stage = { node: { id: "stage-ref" } } as unknown as Stage;
render(PreviewManager);
// Переходим на второй слайд
await user.click(screen.getByRole("button", { name: /next slide/i }));
await user.click(screen.getByRole("button", { name: /download current/i }));
@@ -70,12 +68,12 @@ describe("PreviewManager Integration", () => {
});
it("should return to empty state when texts are removed", async () => {
textsState[STATE_DATA] = ["Temp"];
textsState.fromSnapshot(["Temp"]);
render(PreviewManager);
expect(screen.queryByLabelText(/Empty texts info/i)).not.toBeInTheDocument();
textsState[STATE_DATA] = [];
textsState.fromSnapshot([]);
await waitFor(() => {
expect(screen.getByLabelText(/Empty texts info/i)).toBeInTheDocument();
@@ -84,18 +82,15 @@ describe("PreviewManager Integration", () => {
it("should automatically correct current index on items deletion", async () => {
const user = userEvent.setup();
textsState[STATE_DATA] = ["1", "2", "3"];
textsState.fromSnapshot(["1", "2", "3"]);
render(PreviewManager);
// Уходим на последний слайд
await user.click(screen.getByRole("button", { name: /next slide/i }));
await user.click(screen.getByRole("button", { name: /next slide/i }));
// Удаляем элементы. Индекс должен упасть с 2 до 0
textsState[STATE_DATA] = ["Only one left"];
textsState.fromSnapshot(["Only one left"]);
await waitFor(() => {
// Проверяем, что кнопка "Next" заблокировалась (значит мы на последнем/единственном)
expect(screen.getByRole("button", { name: /next slide/i })).toBeDisabled();
expect(screen.getByRole("button", { name: /previous slide/i })).toBeDisabled();
});
tests/unit/constants.test.ts
+1 -1
View File
@@ -17,7 +17,7 @@ describe("Application Constants Logic", () => {
PANEL_SETTINGS.PANEL_HEIGHT_MAX,
);
expect(TYPOGRAPHY.VERTICAL_OFFSET_MAX).toBeGreaterThan(TYPOGRAPHY.VERTICAL_OFFSET_MIN);
expect(TYPOGRAPHY.OFFSET_Y_MAX).toBeGreaterThan(TYPOGRAPHY.OFFSET_Y_MIN);
});
it("should not have duplicate values in lists", () => {
tests/unit/services/downloadService.test.ts
-1
View File
@@ -100,7 +100,6 @@ describe("DownloadService", () => {
{ filename: "test-panel-5", stage: mockKonvaStage },
];
const result = await service.downloadAll(panels);
// const [blobArg, fileNameArg] = vi.mocked(saveAs).mock.calls[0];
const zipInstance = vi.mocked(JSZip).mock.instances[0];
expect(result.success).toBe(true);
tests/unit/states/persisted.svelte.test.ts
+64 -23
View File
@@ -1,4 +1,4 @@
import { STATE_DATA, withPersistence } from "$states/persisted.svelte";
import { withPersistence } from "$states/persisted.svelte";
import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
function createMock() {
@@ -40,59 +40,83 @@ describe("persisted.svelte", () => {
describe("withPersistence", () => {
it("should return state unchanged when not in browser", () => {
const data = $state({ test: "value" });
const mockState = {
[STATE_DATA]: { test: "value" },
toSnapshot: () => data,
fromSnapshot: () => {},
};
const result = withPersistence("test-key", mockState);
expect(result).toBe(mockState);
});
it("should restore state from localStorage when valid JSON exists", () => {
const savedData = { value: 42, name: "test" };
interface State {
value: number;
name: string;
}
const savedData: State = { value: 42, name: "test" };
localStorageMock.getItem.mockReturnValue(JSON.stringify(savedData));
const data: State = $state({ value: 0, name: "" });
const state = {
[STATE_DATA]: { value: 0, name: "" },
toSnapshot: () => data,
fromSnapshot: (newData: State) => {
if (newData.value !== undefined) data.value = newData.value;
if (newData.name !== undefined) data.name = newData.name;
},
};
withPersistence("test-key", state);
expect(state[STATE_DATA]).toEqual(savedData);
expect(state.toSnapshot()).toEqual(savedData);
expect(localStorageMock.getItem).toHaveBeenCalledWith("test-key");
});
it("should handle corrupted JSON in localStorage gracefully", () => {
localStorageMock.getItem.mockReturnValue("{ invalid json");
const data = $state({ value: 0 });
const state = {
[STATE_DATA]: { value: 0 },
toSnapshot: () => data,
fromSnapshot: () => {},
};
expect(() => withPersistence("test-key", state)).not.toThrow();
expect(state[STATE_DATA]).toEqual({ value: 0 });
expect(state.toSnapshot()).toEqual({ value: 0 });
});
it("should handle empty localStorage (no saved data)", () => {
localStorageMock.getItem.mockReturnValue(null);
const data = $state({ value: 0 });
const state = {
[STATE_DATA]: { value: 0 },
toSnapshot: () => data,
fromSnapshot: () => {},
};
withPersistence("test-key", state);
expect(state[STATE_DATA]).toEqual({ value: 0 });
expect(state.toSnapshot()).toEqual({ value: 0 });
});
it("should save state to localStorage with debounce", async () => {
vi.useFakeTimers();
interface State {
count: number;
}
const data: State = $state({ count: 1 });
const state = {
[STATE_DATA]: { count: 1 },
toSnapshot: () => data,
fromSnapshot: (newData: State) => {
if (newData.count !== undefined) data.count = newData.count;
},
};
withPersistence("test-key", state, 500);
state[STATE_DATA] = { count: 2 };
state.fromSnapshot({ count: 2 });
await Promise.resolve();
vi.advanceTimersByTime(500);
@@ -108,13 +132,21 @@ describe("persisted.svelte", () => {
});
it("should save state immediately when debounce is 0", async () => {
interface State {
count: number;
}
const data: State = $state({ count: 1 });
const state = {
[STATE_DATA]: { count: 1 },
toSnapshot: () => data,
fromSnapshot: (newData: State) => {
if (newData.count !== undefined) data.count = newData.count;
},
};
withPersistence("test-key", state, 0);
state[STATE_DATA] = { count: 2 };
state.fromSnapshot({ count: 2 });
await Promise.resolve();
@@ -126,23 +158,24 @@ describe("persisted.svelte", () => {
it("should cleanup timeout on state change during debounce", async () => {
vi.useFakeTimers();
const data = $state({ count: 1 });
interface State {
count: number;
}
const data: State = $state({ count: 1 });
const state = {
get [STATE_DATA]() {
return data;
},
set [STATE_DATA](v) {
data.count = v.count;
toSnapshot: () => data,
fromSnapshot: (newData: State) => {
if (newData.count !== undefined) data.count = newData.count;
},
};
withPersistence("test-key", state, 500);
state[STATE_DATA] = { count: 2 };
state.fromSnapshot({ count: 2 });
await Promise.resolve();
state[STATE_DATA] = { count: 3 };
state.fromSnapshot({ count: 3 });
await Promise.resolve();
vi.runOnlyPendingTimers();
@@ -158,13 +191,21 @@ describe("persisted.svelte", () => {
});
it("should use DEBOUNCE_DURATION constant as default", async () => {
interface State {
test: boolean;
}
const data: State = $state({ test: true });
const state = {
[STATE_DATA]: { test: true },
toSnapshot: () => data,
fromSnapshot: (newData: State) => {
if (newData.test !== undefined) data.test = newData.test;
},
};
withPersistence("test-key", state);
state[STATE_DATA] = { test: false };
state.fromSnapshot({ test: false });
await Promise.resolve();
tests/unit/states/textConfig.test.ts
+5 -8
View File
@@ -1,6 +1,5 @@
import { TextAlign } from "$lib/constants";
import type { HexColor } from "$lib/types";
import { STATE_DATA } from "$states/persisted.svelte";
import { textConfigState } from "$states/textConfig.svelte";
import { describe, expect, it } from "vitest";
@@ -37,9 +36,8 @@ describe("textConfig.svelte", () => {
});
});
describe("STATE_DATA", () => {
describe("persistence", () => {
it("should serialize and deserialize state", () => {
// Set custom values
textConfigState.fontSize = 18;
textConfigState.fontFamily = "Georgia";
textConfigState.color = "#00ff00" as HexColor;
@@ -47,8 +45,7 @@ describe("textConfig.svelte", () => {
textConfigState.paddingX = 5;
textConfigState.offsetY = 15;
// Get serialized data
const data = textConfigState[STATE_DATA];
const data = textConfigState.toSnapshot();
expect(data).toEqual({
fontSize: 18,
fontFamily: "Georgia",
@@ -56,17 +53,17 @@ describe("textConfig.svelte", () => {
align: TextAlign.RIGHT,
paddingX: 5,
offsetY: 15,
outlined: false,
});
// Restore from serialized data
textConfigState[STATE_DATA] = {
textConfigState.fromSnapshot({
fontSize: 24,
fontFamily: "Arial",
color: "#ffffff" as HexColor,
align: TextAlign.CENTER,
paddingX: 10,
offsetY: 0,
};
});
expect(textConfigState.fontSize).toBe(24);
expect(textConfigState.fontFamily).toBe("Arial");
tests/unit/states/texts.test.ts
+12 -14
View File
@@ -1,11 +1,10 @@
import { STATE_DATA } from "$states/persisted.svelte";
import { createState } from "$states/texts.svelte";
import { TextsState } from "$states/texts.svelte";
import { describe, expect, it } from "vitest";
describe("texts.svelte", () => {
describe("addText", () => {
it("should add new text with unique ID", () => {
const state = createState();
const state = new TextsState();
const initialLength = state.texts.length;
state.addText("Test text");
@@ -16,7 +15,7 @@ describe("texts.svelte", () => {
});
it("should not add empty text", () => {
const state = createState();
const state = new TextsState();
const initialLength = state.texts.length;
state.addText("");
@@ -28,7 +27,7 @@ describe("texts.svelte", () => {
describe("removeText", () => {
it("should remove text by ID", () => {
const state = createState();
const state = new TextsState();
const idToRemove = state.texts[0].id;
const initialLength = state.texts.length;
@@ -39,7 +38,7 @@ describe("texts.svelte", () => {
});
it("should not affect other texts when removing", () => {
const state = createState();
const state = new TextsState();
const remainingTexts = state.texts.filter((item) => item.id !== state.texts[0].id);
const idToRemove = state.texts[0].id;
@@ -51,7 +50,7 @@ describe("texts.svelte", () => {
describe("clear", () => {
it("should remove all texts", () => {
const state = createState();
const state = new TextsState();
state.addText("Test 1");
state.addText("Test 2");
state.addText("Test 3");
@@ -62,19 +61,18 @@ describe("texts.svelte", () => {
});
});
describe("STATE_DATA", () => {
describe("persistence", () => {
it("should serialize and deserialize texts", () => {
const state = createState();
const state = new TextsState();
state.clear();
state.addText("First");
state.addText("Second");
state.addText("Third");
const data = state[STATE_DATA];
const data = state.toSnapshot();
expect(data).toEqual(["First", "Second", "Third"]);
// Restore from serialized data
state[STATE_DATA] = ["New 1", "New 2"];
state.fromSnapshot(["New 1", "New 2"]);
expect(state.texts).toHaveLength(2);
expect(state.texts[0].text).toBe("New 1");
@@ -84,10 +82,10 @@ describe("texts.svelte", () => {
});
it("should handle empty array", () => {
const state = createState();
const state = new TextsState();
state.addText("Test");
state[STATE_DATA] = [];
state.fromSnapshot([]);
expect(state.texts).toHaveLength(0);
});
tests/unit/states/theme.test.ts
+3 -4
View File
@@ -1,5 +1,4 @@
import { Theme } from "$lib/constants";
import { STATE_DATA } from "$states/persisted.svelte";
import { themeState } from "$states/theme.svelte";
import { describe, expect, it } from "vitest";
@@ -33,12 +32,12 @@ describe("theme.svelte", () => {
});
});
describe("STATE_DATA", () => {
describe("persistence", () => {
it("should serialize and deserialize theme", () => {
themeState.current = Theme.DARK;
expect(themeState[STATE_DATA]).toEqual({ current: Theme.DARK });
expect(themeState.toSnapshot()).toEqual({ current: Theme.DARK });
themeState[STATE_DATA] = { current: Theme.LIGHT };
themeState.fromSnapshot({ current: Theme.LIGHT });
expect(themeState.current).toBe(Theme.LIGHT);
});
});