52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
|
/*
|
||
|
|
Copyright 2025 New Vector Ltd.
|
||
|
|
|
||
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||
|
|
Please see LICENSE in the repository root for full details.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { test } from "vitest";
|
||
|
|
import { render, screen } from "@testing-library/react";
|
||
|
|
import { type FC, useEffect, useState } from "react";
|
||
|
|
import userEvent from "@testing-library/user-event";
|
||
|
|
|
||
|
|
import {
|
||
|
|
setLocalStorageItemReactive,
|
||
|
|
useLocalStorage,
|
||
|
|
} from "./useLocalStorage";
|
||
|
|
|
||
|
|
test("useLocalStorage reacts to changes made by an effect mounted on the same render", () => {
|
||
|
|
localStorage.clear();
|
||
|
|
const Test: FC = () => {
|
||
|
|
useEffect(() => setLocalStorageItemReactive("my-value", "Hello!"), []);
|
||
|
|
const [myValue] = useLocalStorage("my-value");
|
||
|
|
return myValue;
|
||
|
|
};
|
||
|
|
render(<Test />);
|
||
|
|
screen.getByText("Hello!");
|
||
|
|
});
|
||
|
|
|
||
|
|
test("useLocalStorage reacts to key changes", async () => {
|
||
|
|
localStorage.clear();
|
||
|
|
localStorage.setItem("value-1", "1");
|
||
|
|
localStorage.setItem("value-2", "2");
|
||
|
|
|
||
|
|
const Test: FC = () => {
|
||
|
|
const [key, setKey] = useState("value-1");
|
||
|
|
const [value] = useLocalStorage(key);
|
||
|
|
if (key !== `value-${value}`) throw new Error("Value is out of sync");
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<button onClick={() => setKey("value-2")}>Switch keys</button>
|
||
|
|
<div>Value is: {value}</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
const user = userEvent.setup();
|
||
|
|
render(<Test />);
|
||
|
|
|
||
|
|
screen.getByText("Value is: 1");
|
||
|
|
await user.click(screen.getByRole("button", { name: "Switch keys" }));
|
||
|
|
screen.getByText("Value is: 2");
|
||
|
|
});
|