@angular-architects/ngrx-toolkit 20.0.0 → 20.0.2

package/src/lib/devtools/tests/basic.spec.ts

@@ -0,0 +1,111 @@
+import { createEnvironmentInjector, EnvironmentInjector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
+import { renameDevtoolsName } from '../rename-devtools-name';
+import { withDevtools } from '../with-devtools';
+import { setupExtensions } from './helpers.spec';
+
+describe('Devtools Basics', () => {
+  it('should dispatch update', () => {
+    const { sendSpy } = setupExtensions();
+    TestBed.inject(
+      signalStore(
+        { providedIn: 'root' },
+        withDevtools('shop'),
+        withState({ name: 'Car' }),
+      ),
+    );
+    TestBed.flushEffects();
+    expect(sendSpy).toHaveBeenCalledWith(
+      { type: 'Store Update' },
+      { shop: { name: 'Car' } },
+    );
+  });
+
+  it('should add multiple stores as feature stores', () => {
+    const { sendSpy } = setupExtensions();
+    for (const name of ['category', 'booking']) {
+      TestBed.inject(signalStore({ providedIn: 'root' }, withDevtools(name)));
+    }
+    TestBed.flushEffects();
+    expect(sendSpy).toHaveBeenLastCalledWith(
+      { type: 'Store Update' },
+      {
+        category: {},
+        booking: {},
+      },
+    );
+  });
+
+  it('should remove the state once destroyed', () => {
+    const { sendSpy } = setupExtensions();
+
+    const Store = signalStore(withDevtools('flight'));
+    const childInjector = createEnvironmentInjector(
+      [Store],
+      TestBed.inject(EnvironmentInjector),
+    );
+
+    childInjector.get(Store);
+    TestBed.flushEffects();
+
+    expect(sendSpy).toHaveBeenCalledWith(
+      { type: 'Store Update' },
+      { flight: {} },
+    );
+
+    childInjector.destroy();
+    TestBed.flushEffects();
+    expect(sendSpy).toHaveBeenCalledWith({ type: 'Store Update' }, {});
+  });
+
+  it('should remove a renamed state once destroyed', () => {
+    const { sendSpy } = setupExtensions();
+
+    const Store = signalStore(withDevtools('flight'));
+    const childInjector = createEnvironmentInjector(
+      [Store],
+      TestBed.inject(EnvironmentInjector),
+    );
+
+    const store = childInjector.get(Store);
+    TestBed.flushEffects();
+
+    expect(sendSpy).toHaveBeenCalledWith(
+      { type: 'Store Update' },
+      { flight: {} },
+    );
+
+    renameDevtoolsName(store, 'flights');
+    childInjector.destroy();
+    TestBed.flushEffects();
+    expect(sendSpy).toHaveBeenCalledWith({ type: 'Store Update' }, {});
+  });
+
+  it('should group multiple patchState running before the synchronization', () => {
+    const { sendSpy } = setupExtensions();
+    const store = TestBed.inject(
+      signalStore(
+        { providedIn: 'root' },
+        withDevtools('shop'),
+        withState({ name: 'Car', amount: 0 }),
+        withMethods((store) => ({
+          increment() {
+            patchState(store, (value) => ({
+              ...value,
+              amount: value.amount + 1,
+            }));
+          },
+        })),
+      ),
+    );
+
+    store.increment();
+    store.increment();
+    TestBed.flushEffects();
+
+    expect(sendSpy.mock.calls).toEqual([
+      [{ type: 'Store Update' }, { shop: { name: 'Car', amount: 2 } }],
+    ]);
+  });
+});

package/src/lib/devtools/tests/connecting.spec.ts

@@ -0,0 +1,37 @@
+import { TestBed } from '@angular/core/testing';
+import { signalStore } from '@ngrx/signals';
+import { withDevtools } from '../with-devtools';
+import { setupExtensions } from './helpers.spec';
+
+describe('connect & send', () => {
+  it('should connect', () => {
+    const Store = signalStore({ providedIn: 'root' }, withDevtools('flight'));
+    const { connectSpy } = setupExtensions();
+    TestBed.inject(Store);
+    expect(connectSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not connect if Redux Devtools are not available', () => {
+    const { connectSpy } = setupExtensions(true, false);
+    expect(connectSpy).toHaveBeenCalledTimes(0);
+  });
+
+  it('should not throw if it runs on the server', () => {
+    setupExtensions(true, false);
+    const Store = signalStore({ providedIn: 'root' }, withDevtools('flight'));
+    expect(() => TestBed.inject(Store)).not.toThrow();
+  });
+
+  it('should only send when store is initialized', () => {
+    const { sendSpy } = setupExtensions();
+    expect(sendSpy).toHaveBeenCalledTimes(0);
+
+    const Store = signalStore({ providedIn: 'root' }, withDevtools('flight'));
+    TestBed.flushEffects();
+    expect(sendSpy).toHaveBeenCalledTimes(0);
+
+    TestBed.inject(Store);
+    TestBed.flushEffects();
+    expect(sendSpy).toHaveBeenCalledTimes(1);
+  });
+});

package/src/lib/devtools/tests/helpers.spec.ts

@@ -0,0 +1,43 @@
+import { PLATFORM_ID } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+export type Flight = {
+  id: number;
+  from: string;
+  to: string;
+  date: Date;
+  delayed: boolean;
+};
+
+export function setupExtensions(
+  isPlatformBrowser = true,
+  isExtensionAvailable = true,
+) {
+  const sendSpy = jest.fn();
+  const connection = {
+    send: sendSpy,
+  };
+  const connectSpy = jest.fn(() => connection);
+
+  if (isExtensionAvailable) {
+    window.__REDUX_DEVTOOLS_EXTENSION__ = { connect: connectSpy };
+  }
+
+  if (isPlatformBrowser) {
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: PLATFORM_ID,
+          useValue: isPlatformBrowser ? 'browser' : 'server',
+        },
+      ],
+    });
+  }
+
+  return { sendSpy, connectSpy };
+}
+
+it('should initialize', () => {
+  const { connectSpy } = setupExtensions();
+  expect(connectSpy).not.toHaveBeenCalled();
+});

package/src/lib/devtools/tests/naming.spec.ts

@@ -0,0 +1,216 @@
+import {
+  createEnvironmentInjector,
+  EnvironmentInjector,
+  inject,
+  runInInjectionContext,
+} from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { signalStore, withState } from '@ngrx/signals';
+import { withDisabledNameIndices } from '../features/with-disabled-name-indicies';
+import { renameDevtoolsName } from '../rename-devtools-name';
+import { withDevtools } from '../with-devtools';
+import { setupExtensions } from './helpers.spec';
+
+describe('withDevtools / renaming', () => {
+  it('should automatically index multiple instances', () => {
+    const { sendSpy } = setupExtensions();
+    const Store = signalStore(
+      { providedIn: 'root' },
+      withDevtools('flights'),
+      withState({ airline: 'Lufthansa' }),
+    );
+
+    const childContext = createEnvironmentInjector(
+      [Store],
+      TestBed.inject(EnvironmentInjector),
+    );
+
+    TestBed.inject(Store);
+    runInInjectionContext(childContext, () => inject(Store));
+
+    TestBed.flushEffects();
+
+    expect(sendSpy).toHaveBeenLastCalledWith(
+      { type: 'Store Update' },
+      {
+        flights: { airline: 'Lufthansa' },
+        'flights-1': { airline: 'Lufthansa' },
+      },
+    );
+  });
+
+  it('not index, if multiple instances do not exist simultaneously', () => {
+    const { sendSpy } = setupExtensions();
+    const Store = signalStore(
+      withDevtools('flights'),
+      withState({ airline: 'Lufthansa' }),
+    );
+
+    const envInjector = TestBed.inject(EnvironmentInjector);
+    const childContext1 = createEnvironmentInjector([Store], envInjector);
+    const childContext2 = createEnvironmentInjector([Store], envInjector);
+
+    runInInjectionContext(childContext1, () => inject(Store));
+    TestBed.flushEffects();
+    childContext1.destroy();
+
+    expect(sendSpy.mock.calls).toEqual([
+      [
+        { type: 'Store Update' },
+        {
+          flights: { airline: 'Lufthansa' },
+        },
+      ],
+    ]);
+
+    runInInjectionContext(childContext2, () => inject(Store));
+    TestBed.flushEffects();
+    expect(sendSpy.mock.calls).toEqual([
+      [
+        { type: 'Store Update' },
+        {
+          flights: { airline: 'Lufthansa' },
+        },
+      ],
+      [
+        { type: 'Store Update' },
+        {
+          flights: { airline: 'Lufthansa' },
+        },
+      ],
+    ]);
+  });
+
+  it('should throw if automatic indexing is disabled', () => {
+    setupExtensions();
+    const Store = signalStore(
+      { providedIn: 'root' },
+      withDevtools('flights', withDisabledNameIndices()),
+      withState({ airline: 'Lufthansa' }),
+    );
+
+    const childContext = createEnvironmentInjector(
+      [Store],
+      TestBed.inject(EnvironmentInjector),
+    );
+
+    TestBed.inject(Store);
+    expect(() =>
+      runInInjectionContext(childContext, () => inject(Store)),
+    ).toThrow(
+      `An instance of the store flights already exists. \
+Enable automatic indexing via withDevTools('flights', { indexNames: true }), or rename it upon instantiation.`,
+    );
+  });
+
+  it('should index for two different stores with same devtools name', () => {
+    const { sendSpy } = setupExtensions();
+
+    TestBed.inject(
+      signalStore({ providedIn: 'root' }, withDevtools('flights')),
+    );
+    TestBed.inject(
+      signalStore({ providedIn: 'root' }, withDevtools('flights')),
+    );
+
+    TestBed.flushEffects();
+    expect(sendSpy.mock.calls).toEqual([
+      [
+        { type: 'Store Update' },
+        {
+          flights: {},
+          'flights-1': {},
+        },
+      ],
+    ]);
+  });
+
+  it('should throw for two different stores when indexing is disabled', () => {
+    setupExtensions();
+
+    TestBed.inject(
+      signalStore({ providedIn: 'root' }, withDevtools('flights')),
+    );
+    expect(() =>
+      TestBed.inject(
+        signalStore(
+          { providedIn: 'root' },
+          withDevtools('flights', withDisabledNameIndices()),
+        ),
+      ),
+    ).toThrow();
+  });
+
+  it('should not throw for two different stores if only the first one has indexing disabled', () => {
+    setupExtensions();
+
+    TestBed.inject(
+      signalStore(
+        { providedIn: 'root' },
+        withDevtools('flights', withDisabledNameIndices()),
+      ),
+    );
+    expect(() =>
+      TestBed.inject(
+        signalStore({ providedIn: 'root' }, withDevtools('flights')),
+      ),
+    ).not.toThrow();
+  });
+
+  describe('renaming', () => {
+    it('should allow to rename the store before first sync', () => {
+      const { sendSpy } = setupExtensions();
+
+      const Store = signalStore(
+        { providedIn: 'root' },
+        withState({ name: 'Product', price: 10.5 }),
+        withDevtools('flight'),
+      );
+
+      const store = TestBed.inject(Store);
+      renameDevtoolsName(store, 'flights');
+      TestBed.flushEffects();
+
+      expect(sendSpy).toHaveBeenCalledWith(
+        { type: 'Store Update' },
+        { flights: { name: 'Product', price: 10.5 } },
+      );
+    });
+
+    it('should throw on rename if name already exists', () => {
+      setupExtensions();
+      const Store1 = signalStore(
+        { providedIn: 'root' },
+        withState({ name: 'Product', price: 10.5 }),
+        withDevtools('shop'),
+      );
+
+      const Store2 = signalStore(
+        { providedIn: 'root' },
+        withState({ name: 'Product', price: 10.5 }),
+        withDevtools('mall'),
+      );
+      TestBed.inject(Store1);
+      const store = TestBed.inject(Store2);
+      TestBed.flushEffects();
+
+      expect(() => renameDevtoolsName(store, 'shop')).toThrow(
+        'NgRx Toolkit/DevTools: cannot rename from mall to shop. shop is already assigned to another SignalStore instance.',
+      );
+    });
+
+    it('should throw if applied to a SignalStore without DevTools', () => {
+      setupExtensions();
+      const Store = signalStore(
+        { providedIn: 'root' },
+        withState({ name: 'Product', price: 10.5 }),
+      );
+
+      const store = TestBed.inject(Store);
+
+      expect(() => renameDevtoolsName(store, 'shop')).toThrow(
+        "Devtools extensions haven't been added to this store.",
+      );
+    });
+  });
+});

package/src/lib/devtools/tests/provide-devtools-config.spec.ts

@@ -0,0 +1,25 @@
+import { TestBed } from '@angular/core/testing';
+import { DevtoolsSyncer } from '../internal/devtools-syncer.service';
+import { provideDevtoolsConfig } from '../provide-devtools-config';
+import { setupExtensions } from './helpers.spec';
+
+describe('provideDevtoolsConfig', () => {
+  it('DevtoolsSyncer should use the default configuration if none is provided', () => {
+    const { connectSpy } = setupExtensions();
+    TestBed.inject(DevtoolsSyncer);
+    expect(connectSpy).toHaveBeenCalledWith({
+      name: 'NgRx SignalStore',
+    });
+  });
+
+  it('DevtoolsSyncer should use the configuration provided', () => {
+    const { connectSpy } = setupExtensions();
+    TestBed.configureTestingModule({
+      providers: [provideDevtoolsConfig({ name: 'test' })],
+    });
+    TestBed.inject(DevtoolsSyncer);
+    expect(connectSpy).toHaveBeenCalledWith({
+      name: 'test',
+    });
+  });
+});

package/src/lib/devtools/tests/types.spec.ts

@@ -0,0 +1,19 @@
+import { computed } from '@angular/core';
+import { patchState, signalStore, withState } from '@ngrx/signals';
+import { withDevtools } from '../with-devtools';
+
+it('should compile when signalStore is extended from', () => {
+  class CounterStore extends signalStore(
+    { protectedState: false },
+    withState({ count: 0 }),
+    withDevtools('counter-store'),
+  ) {
+    readonly myReadonlyProp = 42;
+
+    readonly doubleCount = computed(() => this.count() * 2);
+
+    increment(): void {
+      patchState(this, { count: this.count() + 1 });
+    }
+  }
+});

package/src/lib/devtools/tests/update-state.spec.ts

@@ -0,0 +1,29 @@
+import { signalStore, withMethods } from '@ngrx/signals';
+import { setAllEntities, withEntities } from '@ngrx/signals/entities';
+import { setLoaded, withCallState } from '../../with-call-state';
+import { updateState } from '../update-state';
+
+describe('updateState', () => {
+  it('should work with multiple updaters', () => {
+    interface Item {
+      id: string;
+      name: string;
+    }
+
+    signalStore(
+      withEntities<Item>(),
+      withCallState({ collection: 'items' }),
+      withMethods((store) => ({
+        loadItems() {
+          // This should not cause a type error
+          updateState(
+            store,
+            'Items loaded successfully',
+            setAllEntities([] as Item[]),
+            setLoaded('items'),
+          );
+        },
+      })),
+    );
+  });
+});

package/src/lib/devtools/tests/with-devtools.spec.ts

@@ -0,0 +1,5 @@
+describe('Devtools', () => {
+  it.todo('should group multiple patchStates (glitch-free) in one action');
+  it.todo('should allow time-travel (revert state via devtools');
+  it.todo('should clear actionNames automatically onDestroy');
+});