fix(ui): a page's sub-tab is remembered per browser tab, not forever
Settings, Configuration, Statistics and Users kept the last sub-tab in localStorage, so every fresh tab opened Configuration on "Plex" as if that were its home. useTabPersistedState keeps it in sessionStorage (account-scoped): a reload and a trip to another page keep it, a new tab starts on the first sub-tab. The pre-selects (a Review link, the Google-link return) write the same store; a value an older build left in localStorage is cleared on first read.
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
// @vitest-environment jsdom
|
||||
//
|
||||
// E31 (the owner): a page's sub-tab was remembered forever in localStorage, so every fresh browser tab
|
||||
// opened Configuration on "Plex" as if that were its home. The position is now kept per browser tab
|
||||
// (sessionStorage): it survives a reload and a trip to another page, and a new tab starts on the first.
|
||||
import { afterEach, beforeEach, describe, expect, it } from "vitest";
|
||||
import { act, renderHook } from "@testing-library/react";
|
||||
import { ACTIVE_ACCOUNT_KEY } from "./activeAccount";
|
||||
import { setTabRaw, useTabPersistedState } from "./storage";
|
||||
|
||||
beforeEach(() => {
|
||||
sessionStorage.setItem(ACTIVE_ACCOUNT_KEY, "1");
|
||||
});
|
||||
afterEach(() => {
|
||||
sessionStorage.clear();
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
describe("a page's sub-tab, per browser tab", () => {
|
||||
it("starts on the fallback, then keeps the picked tab for this browser tab only", () => {
|
||||
const first = renderHook(() => useTabPersistedState("siftlode.configTab", "access"));
|
||||
expect(first.result.current[0]).toBe("access");
|
||||
act(() => first.result.current[1]("plex"));
|
||||
expect(sessionStorage.getItem("siftlode.configTab.1")).toBe("plex");
|
||||
expect(localStorage.getItem("siftlode.configTab.1")).toBeNull();
|
||||
// The page mounts again in this tab (a reload, or back from another page): it is where it was.
|
||||
first.unmount();
|
||||
expect(
|
||||
renderHook(() => useTabPersistedState("siftlode.configTab", "access")).result.current[0],
|
||||
).toBe("plex");
|
||||
});
|
||||
|
||||
it("ignores a position left in localStorage by an older build, and clears it", () => {
|
||||
localStorage.setItem("siftlode.configTab.1", "plex");
|
||||
const { result } = renderHook(() => useTabPersistedState("siftlode.configTab", "access"));
|
||||
expect(result.current[0]).toBe("access");
|
||||
expect(localStorage.getItem("siftlode.configTab.1")).toBeNull();
|
||||
});
|
||||
|
||||
it("a pre-selected tab is the one the page opens on", () => {
|
||||
setTabRaw("siftlode.adminUsersTab", "access");
|
||||
const { result } = renderHook(() => useTabPersistedState("siftlode.adminUsersTab", "roles"));
|
||||
expect(result.current[0]).toBe("access");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user