fix(signals): improve state type and add type tests (#4064)

Closes #4065

Author: markostanimirovic

modules/signals/spec/types/helpers.ts

@@ -0,0 +1,11 @@
+export const compilerOptions = () => ({
+  moduleResolution: 'node',
+  target: 'ES2022',
+  baseUrl: '.',
+  experimentalDecorators: true,
+  strict: true,
+  noImplicitAny: true,
+  paths: {
+    '@ngrx/signals': ['./modules/signals'],
+  },
+});

modules/signals/spec/types/signal-state.types.spec.ts

@@ -0,0 +1,387 @@
+import { expecter } from 'ts-snippet';
+import { compilerOptions } from './helpers';
+
+describe('signalState', () => {
+  const expectSnippet = expecter(
+    (code) => `
+        import { patchState, signalState } from '@ngrx/signals';
+
+        const initialState = {
+          user: {
+            age: 30,
+            details: {
+              first: 'John',
+              last: 'Smith',
+            },
+            address: ['Belgrade', 'Serbia'],
+          },
+          numbers: [1, 2, 3],
+          ngrx: 'rocks',
+        };
+
+        ${code}
+      `,
+    compilerOptions()
+  );
+
+  it('allows passing state as a generic argument', () => {
+    const snippet = `
+      type FooState = { foo: string; bar: number };
+      const state = signalState<FooState>({ foo: 'bar', bar: 1 });
+    `;
+
+    expectSnippet(snippet).toSucceed();
+
+    expectSnippet(snippet).toInfer('state', 'SignalState<FooState>');
+  });
+
+  it('creates deep signals for nested state slices', () => {
+    const snippet = `
+      const state = signalState(initialState);
+
+      const user = state.user;
+      const age = state.user.age;
+      const details = state.user.details;
+      const first = state.user.details.first;
+      const last = state.user.details.last;
+      const address = state.user.address;
+      const numbers = state.numbers;
+      const ngrx = state.ngrx;
+    `;
+
+    expectSnippet(snippet).toSucceed();
+
+    expectSnippet(snippet).toInfer(
+      'state',
+      'SignalState<{ user: { age: number; details: { first: string; last: string; }; address: string[]; }; numbers: number[]; ngrx: string; }>'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'user',
+      'DeepSignal<{ age: number; details: { first: string; last: string; }; address: string[]; }>'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'details',
+      'DeepSignal<{ first: string; last: string; }>'
+    );
+
+    expectSnippet(snippet).toInfer('first', 'Signal<string>');
+
+    expectSnippet(snippet).toInfer('last', 'Signal<string>');
+
+    expectSnippet(snippet).toInfer('address', 'Signal<string[]>');
+
+    expectSnippet(snippet).toInfer('numbers', 'Signal<number[]>');
+
+    expectSnippet(snippet).toInfer('ngrx', 'Signal<string>');
+  });
+
+  it('does not create deep signals when state slice type is an interface', () => {
+    const snippet = `
+      interface User {
+        firstName: string;
+        lastName: string;
+      }
+
+      type State = { user: User };
+
+      const state = signalState<State>({ user: { firstName: 'John', lastName: 'Smith' } });
+      const user = state.user;
+    `;
+
+    expectSnippet(snippet).toSucceed();
+
+    expectSnippet(snippet).toInfer('user', 'Signal<User>');
+  });
+
+  it('does not create deep signals for optional state slices', () => {
+    const snippet = `
+      type State = {
+        foo?: string;
+        bar: { baz?: number };
+        x?: { y: { z?: boolean } };
+      };
+
+      const state = signalState<State>({ bar: {} });
+      const foo = state.foo;
+      const bar = state.bar;
+      const baz = state.bar.baz;
+      const x = state.x;
+    `;
+
+    expectSnippet(snippet).toSucceed();
+
+    expectSnippet(snippet).toInfer('state', 'SignalState<State>');
+
+    expectSnippet(snippet).toInfer(
+      'foo',
+      'Signal<string | undefined> | undefined'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'bar',
+      'DeepSignal<{ baz?: number | undefined; }>'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'baz',
+      'Signal<number | undefined> | undefined'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'x',
+      'Signal<{ y: { z?: boolean | undefined; }; } | undefined> | undefined'
+    );
+  });
+
+  it('does not create deep signals for unknown records', () => {
+    const snippet = `
+      const state1 = signalState<{ [key: string]: number }>({});
+      declare const state1Keys: keyof typeof state1;
+
+      const state2 = signalState<{ [key: number]: { foo: string } }>({
+         1: { foo: 'bar' },
+      });
+      declare const state2Keys: keyof typeof state2;
+
+      const state3 = signalState<Record<string, { bar: number }>>({});
+      declare const state3Keys: keyof typeof state3;
+
+      const state4 = signalState({
+        foo: {} as Record<string, { bar: boolean } | number>,
+      });
+      const foo = state4.foo;
+
+      const state5 = signalState({
+        bar: { baz: {} as Record<number, unknown> }
+      });
+      const bar = state5.bar;
+      const baz = bar.baz;
+    `;
+
+    expectSnippet(snippet).toSucceed();
+
+    expectSnippet(snippet).toInfer(
+      'state1',
+      'SignalState<{ [key: string]: number; }>'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'state1Keys',
+      'unique symbol | unique symbol'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'state2',
+      'SignalState<{ [key: number]: { foo: string; }; }>'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'state2Keys',
+      'unique symbol | unique symbol'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'state3',
+      'SignalState<Record<string, { bar: number; }>>'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'state3Keys',
+      'unique symbol | unique symbol'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'state4',
+      'SignalState<{ foo: Record<string, number | { bar: boolean; }>; }>'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'foo',
+      'Signal<Record<string, number | { bar: boolean; }>>'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'state5',
+      'SignalState<{ bar: { baz: Record<number, unknown>; }; }>'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'bar',
+      'DeepSignal<{ baz: Record<number, unknown>; }>'
+    );
+
+    expectSnippet(snippet).toInfer('baz', 'Signal<Record<number, unknown>>');
+  });
+
+  it('succeeds when state is an empty object', () => {
+    const snippet = `const state = signalState({})`;
+
+    expectSnippet(snippet).toSucceed();
+
+    expectSnippet(snippet).toInfer('state', 'SignalState<{}>');
+  });
+
+  it('succeeds when state slices are union types', () => {
+    const snippet = `
+      type State = {
+        foo: { s: string } | number;
+        bar: { baz: { n: number } | null };
+        x: { y: { z: boolean | undefined } };
+      };
+
+      const state = signalState<State>({
+        foo: { s: 's' },
+        bar: { baz: null },
+        x: { y: { z: undefined } },
+      });
+      const foo = state.foo;
+      const bar = state.bar;
+      const baz = state.bar.baz;
+      const x = state.x;
+      const y = state.x.y;
+      const z = state.x.y.z;
+    `;
+
+    expectSnippet(snippet).toSucceed();
+
+    expectSnippet(snippet).toInfer('state', 'SignalState<State>');
+
+    expectSnippet(snippet).toInfer('foo', 'Signal<number | { s: string; }>');
+
+    expectSnippet(snippet).toInfer(
+      'bar',
+      'DeepSignal<{ baz: { n: number; } | null; }>'
+    );
+
+    expectSnippet(snippet).toInfer('baz', 'Signal<{ n: number; } | null>');
+
+    expectSnippet(snippet).toInfer(
+      'x',
+      'DeepSignal<{ y: { z: boolean | undefined; }; }>'
+    );
+
+    expectSnippet(snippet).toInfer(
+      'y',
+      'DeepSignal<{ z: boolean | undefined; }>'
+    );
+
+    expectSnippet(snippet).toInfer('z', 'Signal<boolean | undefined>');
+  });
+
+  it('fails when state contains Function properties', () => {
+    expectSnippet(`const state = signalState({ name: '' })`).toFail(
+      /@ngrx\/signals: signal state cannot contain `Function` property or method names/
+    );
+
+    expectSnippet(
+      `const state = signalState({ foo: { arguments: [] } })`
+    ).toFail(
+      /@ngrx\/signals: signal state cannot contain `Function` property or method names/
+    );
+
+    expectSnippet(`
+      type State = { foo: { bar: { call?: boolean }; baz: number } };
+      const state = signalState<State>({ foo: { bar: {}, baz: 1 } });
+    `).toFail(
+      /@ngrx\/signals: signal state cannot contain `Function` property or method names/
+    );
+
+    expectSnippet(
+      `const state = signalState({ foo: { apply: 'apply', bar: true } })`
+    ).toFail(
+      /@ngrx\/signals: signal state cannot contain `Function` property or method names/
+    );
+
+    expectSnippet(`
+      type State = { bind?: { foo: string } };
+      const state = signalState<State>({ bind: { foo: 'bar' } });
+    `).toFail(
+      /@ngrx\/signals: signal state cannot contain `Function` property or method names/
+    );
+
+    expectSnippet(
+      `const state = signalState({ foo: { bar: { prototype: [] }; baz: 1 } })`
+    ).toFail(
+      /@ngrx\/signals: signal state cannot contain `Function` property or method names/
+    );
+
+    expectSnippet(`const state = signalState({ foo: { length: 10 } })`).toFail(
+      /@ngrx\/signals: signal state cannot contain `Function` property or method names/
+    );
+
+    expectSnippet(`const state = signalState({ caller: '' })`).toFail(
+      /@ngrx\/signals: signal state cannot contain `Function` property or method names/
+    );
+  });
+
+  it('fails when state is not an object', () => {
+    expectSnippet(`const state = signalState(10);`).toFail();
+
+    expectSnippet(`const state = signalState('');`).toFail();
+
+    expectSnippet(`const state = signalState(null);`).toFail();
+
+    expectSnippet(`const state = signalState(true);`).toFail();
+
+    expectSnippet(`const state = signalState(['ng', 'rx']);`).toFail();
+  });
+
+  it('fails when state type is defined as an interface', () => {
+    expectSnippet(`
+      interface User {
+        firstName: string;
+        lastName: string;
+      }
+
+      const state = signalState<User>({ firstName: 'John', lastName: 'Smith' });
+    `).toFail(
+      /Type 'User' does not satisfy the constraint 'Record<string, unknown>'/
+    );
+  });
+
+  it('patches state via sequence of partial state objects and updater functions', () => {
+    expectSnippet(`
+      const state = signalState(initialState);
+
+      patchState(
+        state,
+        { numbers: [10, 100, 1000] },
+        (state) => ({ user: { ...state.user, age: state.user.age + 1 } }),
+        { ngrx: 'signals' }
+      );
+    `).toSucceed();
+  });
+
+  it('fails when state is patched with a non-record', () => {
+    expectSnippet(`
+      const state = signalState(initialState);
+      patchState(state, 10);
+    `).toFail();
+
+    expectSnippet(`
+      const state = signalState(initialState);
+      patchState(state, undefined);
+    `).toFail();
+
+    expectSnippet(`
+      const state = signalState(initialState);
+      patchState(state, [1, 2, 3]);
+    `).toFail();
+  });
+
+  it('fails when state is patched with a wrong record', () => {
+    expectSnippet(`
+      const state = signalState(initialState);
+      patchState(state, { ngrx: 10 });
+    `).toFail(/Type 'number' is not assignable to type 'string'/);
+  });
+
+  it('fails when state is patched with a wrong updater function', () => {
+    expectSnippet(`
+      const state = signalState(initialState);
+      patchState(state, (state) => ({ user: { ...state.user, age: '30' } }));
+    `).toFail(/Type 'string' is not assignable to type 'number'/);
+  });
+});