feat(tests): Implement further tests

Author: Paulo Miguel Ferreira Jorge

src/index.ts

@@ -1,24 +1,23 @@
 import { useState } from "react";
 
-const isBrowser = typeof window !== "undefined";
-const supported = isBrowser && window.localStorage;
+import { SUPPORTED } from "./utils";
 
 const useLocalState = <T>(
   key: string,
   defaultValue: T
 ): [T, (newValue: T) => void] => {
   const [value, setValue] = useState<T>(() => {
-    if (!supported) return defaultValue;
+    if (!SUPPORTED) return defaultValue;
     const item = window.localStorage.getItem(key);
     return item ? JSON.parse(item) : defaultValue;
   });
 
-  const setValueMain = (newValue: T) => {
-    if (supported) window.localStorage.setItem(key, JSON.stringify(newValue));
+  const setLocalStateValue = (newValue: T) => {
+    if (SUPPORTED) window.localStorage.setItem(key, JSON.stringify(newValue));
     setValue(newValue);
   };
 
-  return [value, setValueMain];
+  return [value, setLocalStateValue];
 };
 
 export default useLocalState;

src/utils.ts

@@ -0,0 +1,3 @@
+const IS_BROWSER = typeof window !== "undefined";
+
+export const SUPPORTED = IS_BROWSER && window.localStorage;

test/index.test.tsx

@@ -1,58 +1,232 @@
 import { renderHook, act } from "@testing-library/react-hooks";
 
 import useLocalState from "../src";
+import { SUPPORTED } from "../src/utils";
 
-describe("performs requests", () => {
+beforeEach(() => {
+  if (SUPPORTED) localStorage.clear();
+});
+
+describe("useLocalState()", () => {
   it("uses initial value as string", async () => {
-    const key = "key 0";
-    const value = "something 0";
+    const key = "key";
+    const value = "something";
     const { result } = renderHook(() => useLocalState(key, value));
-    expect(result.current[0]).toEqual(value);
+
+    const [values] = result.current;
+    expect(values).toEqual(value);
+  });
+
+  it(`initial value isn't written into localStorage`, async () => {
+    if (!SUPPORTED) return;
+
+    const key = "key";
+    const value = "something";
+    renderHook(() => useLocalState(key, value));
+
+    expect(localStorage.getItem(key)).toEqual(null);
   });
 
   it("uses initial value as boolean", async () => {
-    const key = "key1";
+    const key = "key";
     const value = false;
     const { result } = renderHook(() => useLocalState(key, value));
-    expect(result.current[0]).toEqual(value);
+
+    const [values] = result.current;
+    expect(values).toEqual(value);
   });
 
   it("uses initial value as object", async () => {
-    const key = "key2";
+    const key = "key";
     const value = {
       something: "else",
     };
     const { result } = renderHook(() => useLocalState(key, value));
-    expect(result.current[0]).toEqual(value);
+
+    const [values] = result.current;
+    expect(values).toEqual(value);
+  });
+
+  it("uses initial value as array", async () => {
+    const key = "todos";
+    const values = ["first", "second"];
+    const { result } = renderHook(() => useLocalState(key, values));
+
+    const [todos] = result.current;
+    expect(todos).toEqual(values);
+  });
+
+  it("accepts callback as a value", async () => {
+    const key = "todos";
+    const values = ["first", "second"];
+    const callback = () => values;
+    const { result } = renderHook(() => useLocalState(key, callback));
+
+    const [todos] = result.current;
+    expect(todos).toEqual(values);
   });
 
   it("can update value as string", async () => {
-    const key = "key3";
-    const value = "something 3";
-    const value2 = "something else 3";
+    const key = "key";
+    const value = "something";
 
     const { result } = renderHook(() => useLocalState(key, value));
     expect(result.current[0]).toEqual(value);
 
+    const newValue = "something else";
     act(() => {
-      result.current[1](value2);
+      const setValue = result.current[1];
+
+      setValue(newValue);
     });
 
-    expect(result.current[0]).toEqual(value2);
+    const [values] = result.current;
+    expect(values).toEqual(newValue);
   });
 
   it("can update value as object", async () => {
-    const key = "key4";
-    const value = { something: "something 4" };
-    const value2 = { something: "else 4" };
+    const key = "key";
+    const value = { something: "something" };
 
     const { result } = renderHook(() => useLocalState(key, value));
     expect(result.current[0]).toEqual(value);
 
+    const newValue = { something: "else" };
+    act(() => {
+      const setValue = result.current[1];
+
+      setValue(newValue);
+    });
+
+    const [values] = result.current;
+    expect(values).toEqual(newValue);
+  });
+
+  it("can update value as list", async () => {
+    const key = "todos";
+    const values = ["first", "second"];
+    const { result } = renderHook(() => useLocalState(key, values));
+
+    const newValues = ["third", "fourth"];
+    act(() => {
+      const setValues = result.current[1];
+
+      setValues(newValues);
+    });
+
+    const [todos] = result.current;
+    expect(todos).toEqual(newValues);
+  });
+
+  // todo(): this logic could be super handy...
+  // it("updates state with callback function", () => {
+  //   const key = "todos";
+  //   const values = ["first", "second"];
+  //   const { result } = renderHook(() => useLocalState(key, values));
+
+  //   const newValues = ["first", "second"];
+  //   act(() => {
+  //     const setTodos = result.current[1];
+
+  //     setTodos((current) => [...current, ...newValues]);
+  //   });
+
+  //   const [todos] = result.current;
+  //   expect(todos).toEqual([...values, ...newValues]);
+  // });
+
+  it("does not fail even if invalid data is stored into localStorage", async () => {
+    if (!SUPPORTED) return;
+
+    const key = "todos";
+    const value = "something";
+
+    localStorage.setItem(key, value);
+
+    const newValues = ["first", "second"];
+    const { result } = renderHook(() => useLocalState(key, newValues));
+
+    const [todos] = result.current;
+    expect(todos).toEqual(newValues);
+  });
+
+  it("gets initial value from localStorage if there is a value", async () => {
+    if (!SUPPORTED) return;
+
+    const key = "todos";
+    const values = ["first", "second"];
+
+    localStorage.setItem(key, JSON.stringify(values));
+
+    const { result } = renderHook(() => useLocalState(key, values));
+
+    const [todos] = result.current;
+    expect(todos).toEqual(values);
+  });
+
+  it("throws an error on two states with the same key", async () => {
+    const consoleError = console.error;
+    console.error = () => null;
+
+    const key = "todos";
+    const valuesA = ["first", "second"];
+    const valuesB = ["third", "fourth"];
+
+    expect(() => {
+      renderHook(() => {
+        useLocalState(key, valuesA);
+        useLocalState(key, valuesB);
+      });
+    }).toThrow();
+
+    console.error = consoleError;
+  });
+
+  it("does not throw an error with two states with different keys", async () => {
+    const keyA = "todos";
+    const keyB = "todos";
+    const valuesA = ["first", "second"];
+    const valuesB = ["third", "fourth"];
+
+    expect(() => {
+      renderHook(() => {
+        useLocalState(keyA, valuesA);
+        useLocalState(keyB, valuesB);
+      });
+    }).not.toThrow();
+  });
+
+  it("can handle `undefined` values", async () => {
+    const key = "todos";
+    const values = ["first", "second"];
+
+    const { result } = renderHook(() =>
+      useLocalState<string[] | undefined>(key, values)
+    );
+
+    act(() => {
+      const [, setValues] = result.current;
+      setValues(undefined);
+    });
+
+    const [value] = result.current;
+    expect(value).toBe(undefined);
+  });
+
+  it("can handle `null` values", async () => {
+    const key = "todos";
+    const values = ["first", "second"];
+
+    const { result } = renderHook(() =>
+      useLocalState<string[] | null>(key, values)
+    );
+
     act(() => {
-      result.current[1](value2);
+      const [, setValues] = result.current;
+      setValues(null);
     });
 
-    expect(result.current[0]).toEqual(value2);
+    const [value] = result.current;
+    expect(value).toBe(null);
   });
 });