@angular-architects/ngrx-toolkit 19.2.3 → 19.4.0

package/src/lib/storage-sync/tests/indexeddb.service.spec.ts

@@ -0,0 +1,99 @@
+import 'fake-indexeddb/auto';
+import { IndexedDBService } from '../internal/indexeddb.service';
+
+describe('IndexedDBService', () => {
+  const sampleData = JSON.stringify({
+    foo: 'bar',
+    users: [
+      { name: 'John', age: 30, isAdmin: true },
+      { name: 'Jane', age: 25, isAdmin: false },
+    ],
+  });
+
+  let indexedDBService: IndexedDBService;
+
+  beforeEach(() => {
+    indexedDBService = new IndexedDBService();
+  });
+
+  it('It should be possible to write data using write() and then read the data using read()', async (): Promise<void> => {
+    const key = 'users';
+
+    const expectedData = sampleData;
+
+    await indexedDBService.setItem(key, sampleData);
+
+    const receivedData = await indexedDBService.getItem(key);
+
+    expect(receivedData).toEqual(expectedData);
+  });
+
+  it('It should be possible to delete data using clear()', async (): Promise<void> => {
+    const key = 'sample';
+
+    await indexedDBService.setItem(key, sampleData);
+
+    await indexedDBService.clear(key);
+
+    const receivedData = await indexedDBService.getItem(key);
+
+    expect(receivedData).toEqual(null);
+  });
+
+  it('When there is no data, read() should return null', async (): Promise<void> => {
+    const key = 'nullData';
+
+    const receivedData = await indexedDBService.getItem(key);
+
+    expect(receivedData).toEqual(null);
+  });
+
+  it('write() should handle null data', async (): Promise<void> => {
+    const key = 'nullData';
+
+    await indexedDBService.setItem(key, JSON.stringify(null));
+
+    const receivedData = await indexedDBService.getItem(key);
+
+    expect(receivedData).toEqual('null');
+  });
+
+  it('write() should handle empty object data', async (): Promise<void> => {
+    const key = 'emptyData';
+
+    const emptyData = JSON.stringify({});
+    const expectedData = emptyData;
+
+    await indexedDBService.setItem(key, emptyData);
+
+    const receivedData = await indexedDBService.getItem(key);
+
+    expect(receivedData).toEqual(expectedData);
+  });
+
+  it('write() should handle large data objects', async (): Promise<void> => {
+    const key = 'largeData';
+
+    const largeData = JSON.stringify({ foo: 'a'.repeat(100000) });
+    const expectedData = largeData;
+
+    await indexedDBService.setItem(key, largeData);
+
+    const receivedData = await indexedDBService.getItem(key);
+
+    expect(receivedData).toEqual(expectedData);
+  });
+
+  it('write() should handle special characters in data', async (): Promise<void> => {
+    const key = 'specialCharData';
+
+    const specialCharData = JSON.stringify({ foo: 'bar!@#$%^&*()_+{}:"<>?' });
+    const expectedData = specialCharData;
+
+    await indexedDBService.setItem(key, specialCharData);
+
+    const receivedData = await indexedDBService.getItem(key);
+
+    expect(receivedData).toEqual(expectedData);
+  });
+});

package/src/lib/storage-sync/tests/with-storage-async.spec.ts

@@ -0,0 +1,308 @@
+import { TestBed } from '@angular/core/testing';
+import { getState, patchState, signalStore, withState } from '@ngrx/signals';
+import 'fake-indexeddb/auto';
+import { withIndexedDB } from '../features/with-indexed-db';
+import { IndexedDBService } from '../internal/indexeddb.service';
+import { withStorageSync } from '../with-storage-sync';
+
+interface StateObject {
+  foo: string;
+  age: number;
+}
+
+const initialState: StateObject = {
+  foo: 'bar',
+  age: 18,
+};
+const key = 'FooBar';
+
+const waitForSyncStable = async (store: {
+  whenSynced?: () => Promise<void>;
+}) => {
+  if (store.whenSynced) {
+    await store.whenSynced();
+  }
+};
+
+describe('withStorageSync (async storage)', () => {
+  beforeEach(() => {
+    // make sure to start with a clean storage
+    globalThis.indexedDB = new IDBFactory();
+  });
+
+  it('adds methods for storage access to the store', () => {
+    TestBed.runInInjectionContext(() => {
+      const Store = signalStore(withStorageSync({ key }, withIndexedDB()));
+      const store = new Store();
+
+      expect(Object.keys(store)).toEqual([
+        'isSynced',
+        'whenSynced',
+        'clearStorage',
+        'readFromStorage',
+        'writeToStorage',
+      ]);
+    });
+  });
+
+  it('offers manual sync using provided methods', async () => {
+    TestBed.runInInjectionContext(async () => {
+      // prefill storage
+      const indexedDBService = TestBed.inject(IndexedDBService);
+      await indexedDBService.setItem(
+        key,
+        JSON.stringify({
+          foo: 'baz',
+          age: 99,
+        }),
+      );
+
+      const Store = signalStore(
+        { protectedState: false },
+        withStorageSync({ key, autoSync: false }, withIndexedDB()),
+      );
+      const store = TestBed.inject(Store);
+      await waitForSyncStable(store);
+
+      expect(getState(store)).toEqual({});
+
+      await store.readFromStorage();
+
+      expect(getState(store)).toEqual({
+        foo: 'baz',
+        age: 99,
+      });
+
+      patchState(store, { ...initialState });
+      await waitForSyncStable(store);
+
+      expect(await indexedDBService.getItem(key)).toEqual({
+        foo: 'baz',
+        age: 99,
+      });
+
+      await store.writeToStorage();
+      expect(await indexedDBService.getItem(key)).toEqual({
+        ...initialState,
+      });
+
+      await store.clearStorage();
+      expect(await indexedDBService.getItem(key)).toEqual(null);
+    });
+  });
+
+  describe('autoSync', () => {
+    it('inits from storage and write to storage on changes when set to `true`', async () => {
+      const indexedDBService = TestBed.inject(IndexedDBService);
+      // prefill storage
+      await indexedDBService.setItem(
+        key,
+        JSON.stringify({
+          foo: 'baz',
+          age: 99,
+        } as StateObject),
+      );
+
+      const Store = signalStore(
+        { providedIn: 'root', protectedState: false },
+        withStorageSync(key, withIndexedDB()),
+      );
+
+      const store = TestBed.inject(Store);
+      await waitForSyncStable(store);
+      expect(getState(store)).toEqual({
+        foo: 'baz',
+        age: 99,
+      });
+
+      patchState(store, { ...initialState });
+      await waitForSyncStable(store);
+
+      expect(getState(store)).toEqual({
+        ...initialState,
+      });
+
+      expect(await indexedDBService.getItem(key)).toEqual(
+        JSON.stringify(initialState),
+      );
+    });
+
+    it('does not init from storage and does write to storage on changes when set to `false`', async () => {
+      const indexedDBService = TestBed.inject(IndexedDBService);
+      await indexedDBService.setItem(
+        key,
+        JSON.stringify({
+          foo: 'baz',
+          age: 99,
+        }),
+      );
+
+      const Store = signalStore(
+        { providedIn: 'root', protectedState: false },
+        withStorageSync({ key, autoSync: false }, withIndexedDB()),
+      );
+      const store = TestBed.inject(Store);
+      expect(store.isSynced()).toBe(false);
+      expect(getState(store)).toEqual({});
+
+      patchState(store, { ...initialState });
+      expect(store.isSynced()).toBe(false);
+
+      const storeItem = JSON.parse(
+        (await indexedDBService.getItem(key)) || '{}',
+      );
+      expect(storeItem).toEqual({
+        foo: 'baz',
+        age: 99,
+      });
+    });
+  });
+
+  describe('select', () => {
+    it('syncs the whole state by default', async () => {
+      const indexedDBService = TestBed.inject(IndexedDBService);
+      const Store = signalStore(
+        { providedIn: 'root', protectedState: false },
+        withStorageSync(key, withIndexedDB()),
+      );
+      const store = TestBed.inject(Store);
+      await waitForSyncStable(store);
+
+      patchState(store, { ...initialState });
+      await waitForSyncStable(store);
+
+      expect(await indexedDBService.getItem(key)).toEqual(
+        JSON.stringify(initialState),
+      );
+    });
+
+    it('syncs selected slices when specified', async () => {
+      const indexedDBService = TestBed.inject(IndexedDBService);
+      const Store = signalStore(
+        { providedIn: 'root', protectedState: false },
+        withState(initialState),
+        withStorageSync(
+          { key, select: ({ foo }) => ({ foo }) },
+          withIndexedDB(),
+        ),
+      );
+      const store = TestBed.inject(Store);
+      await waitForSyncStable(store);
+
+      patchState(store, { foo: 'baz' });
+      await waitForSyncStable(store);
+
+      const storeItem = JSON.parse(
+        (await indexedDBService.getItem(key)) || '{}',
+      );
+      expect(storeItem).toEqual({
+        foo: 'baz',
+      });
+    });
+  });
+
+  describe('parse/stringify', () => {
+    it('uses custom parsing/stringification when specified', async () => {
+      const indexedDBService = TestBed.inject(IndexedDBService);
+      const parse = (stateString: string) => {
+        const [foo, age] = stateString.split('_');
+        return {
+          foo,
+          age: +age,
+        };
+      };
+
+      const Store = signalStore(
+        { providedIn: 'root', protectedState: false },
+        withState(initialState),
+        withStorageSync(
+          {
+            key,
+            parse,
+            stringify: (state) => `${state.foo}_${state.age}`,
+          },
+          withIndexedDB(),
+        ),
+      );
+
+      const store = TestBed.inject(Store);
+      await waitForSyncStable(store);
+      patchState(store, { foo: 'baz' });
+      await waitForSyncStable(store);
+
+      const storeItem = parse((await indexedDBService.getItem(key)) || '');
+      expect(storeItem).toEqual({
+        ...initialState,
+        foo: 'baz',
+      });
+    });
+  });
+
+  describe('withStorageSync', () => {
+    let warnings = [] as string[];
+
+    jest.spyOn(console, 'warn').mockImplementation((...messages: string[]) => {
+      warnings.push(...messages);
+    });
+
+    beforeEach(() => {
+      warnings = [];
+    });
+
+    it('logs when writing happens before state is synchronized', async () => {
+      const Store = signalStore(
+        { providedIn: 'root', protectedState: false },
+        withState({ name: 'Delta', age: 52 }),
+        withStorageSync('flights', withIndexedDB()),
+      );
+      const store = TestBed.inject(Store);
+
+      expect(warnings).toEqual([]);
+      patchState(store, { name: 'Lufthansa', age: 27 });
+      expect(warnings).toEqual([
+        'Writing to Store (flights) happened before the state was initially read from storage.',
+        'Please ensure that the store is not in syncing state via `store.whenSynced()` before writing to the state.',
+        'Alternatively, you can disable autoSync by passing `autoSync: false` in the config.',
+      ]);
+    });
+
+    it('warns when reading happens during a write', async () => {
+      console.log('starting test');
+      const Store = signalStore(
+        { providedIn: 'root', protectedState: false },
+        withState({ name: 'Delta', age: 52 }),
+        withStorageSync('flights', withIndexedDB()),
+      );
+
+      const store = TestBed.inject(Store);
+      await waitForSyncStable(store);
+      patchState(store, { name: 'Lufthansa', age: 27 });
+      store.readFromStorage();
+
+      expect(warnings).toEqual([
+        'Reading to Store (flights) happened during an ongoing synchronization process.',
+        'Please ensure that the store is not in syncing state via `store.whenSynced()`.',
+        'Alternatively, you can disable the autoSync by passing `autoSync: false` in the config.',
+      ]);
+    });
+
+    it('warns when writing happens during a read', async () => {
+      const Store = signalStore(
+        { providedIn: 'root', protectedState: false },
+        withState({ name: 'Delta', age: 52 }),
+        withStorageSync('flights', withIndexedDB()),
+      );
+
+      const store = TestBed.inject(Store);
+      await waitForSyncStable(store);
+
+      store.readFromStorage();
+      patchState(store, { name: 'Lufthansa', age: 27 });
+      expect(warnings).toEqual([
+        'Writing to Store (flights) happened during an ongoing synchronization process.',
+        'Please ensure that the store is not in syncing state via `store.whenSynced()`.',
+        'Alternatively, you can disable the autoSync by passing `autoSync: false` in the config.',
+      ]);
+    });
+  });
+});

package/src/lib/storage-sync/tests/with-storage-sync.spec.ts

@@ -0,0 +1,268 @@
+import { TestBed } from '@angular/core/testing';
+import { getState, patchState, signalStore, withState } from '@ngrx/signals';
+import { withLocalStorage } from '../features/with-local-storage';
+import { withStorageSync } from '../with-storage-sync';
+
+interface StateObject {
+  foo: string;
+  age: number;
+}
+
+const initialState: StateObject = {
+  foo: 'bar',
+  age: 18,
+};
+const key = 'FooBar';
+
+describe('withStorageSync (sync storage)', () => {
+  beforeEach(() => {
+    // make sure to start with a clean storage
+    localStorage.removeItem(key);
+  });
+
+  it('adds methods for storage access to the store', () => {
+    TestBed.runInInjectionContext(() => {
+      const Store = signalStore(withStorageSync({ key }));
+      const store = new Store();
+
+      expect(Object.keys(store)).toEqual([
+        'clearStorage',
+        'readFromStorage',
+        'writeToStorage',
+      ]);
+    });
+  });
+
+  it('offers manual sync using provided methods', () => {
+    TestBed.runInInjectionContext(() => {
+      // prefill storage
+      localStorage.setItem(
+        key,
+        JSON.stringify({
+          foo: 'baz',
+          age: 99,
+        } as StateObject),
+      );
+
+      const Store = signalStore(
+        { protectedState: false },
+        withStorageSync({ key, autoSync: false }),
+      );
+      const store = new Store();
+      expect(getState(store)).toEqual({});
+
+      store.readFromStorage();
+      expect(getState(store)).toEqual({
+        foo: 'baz',
+        age: 99,
+      });
+
+      patchState(store, { ...initialState });
+      TestBed.flushEffects();
+
+      let storeItem = JSON.parse(localStorage.getItem(key) || '{}');
+      expect(storeItem).toEqual({
+        foo: 'baz',
+        age: 99,
+      });
+
+      store.writeToStorage();
+      storeItem = JSON.parse(localStorage.getItem(key) || '{}');
+      expect(storeItem).toEqual({
+        ...initialState,
+      });
+
+      store.clearStorage();
+      storeItem = localStorage.getItem(key);
+      expect(storeItem).toEqual(null);
+    });
+  });
+
+  describe('autoSync', () => {
+    it('inits from storage and write to storage on changes when set to `true`', () => {
+      TestBed.runInInjectionContext(() => {
+        // prefill storage
+        localStorage.setItem(
+          key,
+          JSON.stringify({
+            foo: 'baz',
+            age: 99,
+          } as StateObject),
+        );
+
+        const Store = signalStore(
+          { protectedState: false },
+          withStorageSync(key),
+        );
+        const store = new Store();
+        expect(getState(store)).toEqual({
+          foo: 'baz',
+          age: 99,
+        });
+
+        patchState(store, { ...initialState });
+        TestBed.flushEffects();
+
+        expect(getState(store)).toEqual({
+          ...initialState,
+        });
+        const storeItem = JSON.parse(localStorage.getItem(key) || '{}');
+        expect(storeItem).toEqual({
+          ...initialState,
+        });
+      });
+    });
+
+    it('does not init from storage and does write to storage on changes when set to `false`', () => {
+      TestBed.runInInjectionContext(() => {
+        // prefill storage
+        localStorage.setItem(
+          key,
+          JSON.stringify({
+            foo: 'baz',
+            age: 99,
+          } as StateObject),
+        );
+
+        const Store = signalStore(
+          { protectedState: false },
+          withStorageSync({ key, autoSync: false }),
+        );
+        const store = new Store();
+        expect(getState(store)).toEqual({});
+
+        patchState(store, { ...initialState });
+        const storeItem = JSON.parse(localStorage.getItem(key) || '{}');
+        expect(storeItem).toEqual({
+          foo: 'baz',
+          age: 99,
+        });
+      });
+    });
+  });
+
+  describe('select', () => {
+    it('syncs the whole state by default', () => {
+      TestBed.runInInjectionContext(() => {
+        const Store = signalStore(
+          { protectedState: false },
+          withStorageSync(key),
+        );
+        const store = new Store();
+
+        patchState(store, { ...initialState });
+        TestBed.flushEffects();
+
+        const storeItem = JSON.parse(localStorage.getItem(key) || '{}');
+        expect(storeItem).toEqual({
+          ...initialState,
+        });
+      });
+    });
+
+    it('syncs selected slices when specified', () => {
+      TestBed.runInInjectionContext(() => {
+        const Store = signalStore(
+          { protectedState: false },
+          withState(initialState),
+          withStorageSync({ key, select: ({ foo }) => ({ foo }) }),
+        );
+        const store = new Store();
+
+        patchState(store, { foo: 'baz' });
+        TestBed.flushEffects();
+
+        const storeItem = JSON.parse(localStorage.getItem(key) || '{}');
+        expect(storeItem).toEqual({
+          foo: 'baz',
+        });
+      });
+    });
+  });
+
+  describe('parse/stringify', () => {
+    it('uses custom parsing/stringification when specified', () => {
+      const parse = (stateString: string) => {
+        const [foo, age] = stateString.split('_');
+        return {
+          foo,
+          age: +age,
+        };
+      };
+
+      TestBed.runInInjectionContext(() => {
+        const Store = signalStore(
+          { protectedState: false },
+          withState(initialState),
+          withStorageSync({
+            key,
+            parse,
+            stringify: (state) => `${state.foo}_${state.age}`,
+          }),
+        );
+        const store = new Store();
+
+        patchState(store, { foo: 'baz' });
+        TestBed.flushEffects();
+
+        const storeItem = parse(localStorage.getItem(key) || '');
+        expect(storeItem).toEqual({
+          ...initialState,
+          foo: 'baz',
+        });
+      });
+    });
+  });
+
+  describe('storage factory', () => {
+    it('should throw an error when both config and storage strategy are provided', () => {
+      const signalStoreFactory = () =>
+        signalStore(
+          withStorageSync(
+            { key: 'foo', storage: () => localStorage },
+            withLocalStorage(),
+          ),
+        );
+
+      expect(signalStoreFactory).toThrow(
+        'You can either pass a storage strategy or a config with storage, but not both.',
+      );
+    });
+
+    it('uses specified storage', () => {
+      TestBed.runInInjectionContext(() => {
+        // prefill storage
+        sessionStorage.setItem(
+          key,
+          JSON.stringify({
+            foo: 'baz',
+            age: 99,
+          } as StateObject),
+        );
+
+        const Store = signalStore(
+          { protectedState: false },
+          withStorageSync({ key, storage: () => sessionStorage }),
+        );
+        const store = new Store();
+        expect(getState(store)).toEqual({
+          foo: 'baz',
+          age: 99,
+        });
+
+        patchState(store, { ...initialState });
+        TestBed.flushEffects();
+
+        expect(getState(store)).toEqual({
+          ...initialState,
+        });
+        const storeItem = JSON.parse(sessionStorage.getItem(key) || '{}');
+        expect(storeItem).toEqual({
+          ...initialState,
+        });
+
+        store.clearStorage();
+      });
+    });
+  });
+});