fix/remove legacy ui (#5010)

2025-05-02 14:05:40 -04:00
1 parent 1cb8d328a4
commit 4be8495335
@@ -0,0 +1,103 @@
+import { act } from 'react';
+import { renderHook } from '@testing-library/react';
+import useSessionStorage from './useSessionStorage';
+
+const SESSION_STORAGE_KEY = 'test';
+
+describe('Hook Session Storage', () => {
+  beforeEach(() => {
+    window.sessionStorage.removeItem(SESSION_STORAGE_KEY);
+  });
+
+  it('hook should return state and setState', () => {
+    const data = { test: 1 };
+    const { result } = renderHook(() =>
+      useSessionStorage({ key: SESSION_STORAGE_KEY, defaultValue: data })
+    );
+    const [hookState, setHookState] = result.current;
+    expect(hookState).toStrictEqual(data);
+    expect(typeof setHookState).toBe('function');
+  });
+
+  it('hook should store data on sessionStorage', () => {
+    const data = { test: 2 };
+    renderHook(() => useSessionStorage({ key: SESSION_STORAGE_KEY, defaultValue: data }));
+
+    const dataStr = JSON.stringify(data);
+    const dataSessionStorage = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
+    expect(dataSessionStorage).toEqual(dataStr);
+  });
+
+  it('hook should return stored data from sessionStorage', () => {
+    const data = { test: 3 };
+    const dataToCompare = { test: 4 };
+
+    window.sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(dataToCompare));
+
+    const { result } = renderHook(() =>
+      useSessionStorage({ key: SESSION_STORAGE_KEY, defaultValue: data })
+    );
+    const [hookState, setHookState] = result.current;
+
+    expect(hookState).toStrictEqual(dataToCompare);
+  });
+
+  it('hook should provide a setState method which updates its state', () => {
+    const data = { test: 5 };
+    const dataToCompare = { test: 6 };
+    const { result } = renderHook(() =>
+      useSessionStorage({ key: SESSION_STORAGE_KEY, defaultValue: data })
+    );
+    const [hookState, setHookState] = result.current;
+
+    act(() => {
+      setHookState(dataToCompare);
+    });
+
+    const dataToCompareStr = JSON.stringify(dataToCompare);
+    const dataSessionStorage = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
+
+    const [hookStateToCompare] = result.current;
+    expect(dataSessionStorage).toEqual(dataToCompareStr);
+    expect(hookStateToCompare).toStrictEqual(dataToCompare);
+  });
+
+  it('hook state must be preserved in case rerender', () => {
+    const data = { test: 7 };
+    const { result, rerender } = renderHook(() =>
+      useSessionStorage({ key: SESSION_STORAGE_KEY, defaultValue: data })
+    );
+
+    rerender();
+
+    const [hookState, setHookState] = result.current;
+
+    const dataToCompareStr = JSON.stringify(data);
+    const dataSessionStorage = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
+
+    expect(dataSessionStorage).toEqual(dataToCompareStr);
+    expect(hookState).toStrictEqual(data);
+  });
+
+  it('hook state must be preserved in case multiple operations and rerender', () => {
+    const data = { test: 8 };
+    const dataToCompare = { test: 9 };
+    const { result, rerender } = renderHook(() =>
+      useSessionStorage({ key: SESSION_STORAGE_KEY, defaultValue: data })
+    );
+    const [hookState, setHookState] = result.current;
+
+    act(() => {
+      setHookState(dataToCompare);
+    });
+
+    rerender();
+
+    const dataToCompareStr = JSON.stringify(dataToCompare);
+    const dataSessionStorage = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
+
+    const [hookStateToCompare] = result.current;
+    expect(dataSessionStorage).toEqual(dataToCompareStr);
+    expect(hookStateToCompare).toStrictEqual(dataToCompare);
+  });
+});