/tests/signals.test.ts at master

import { heapStats } from "bun:jsc";
import { describe, expect, mock, test } from "bun:test";

import { derived, effect, signal } from "../src/signals.js";

function sleep(ms: number): Promise<void> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
}

describe("signal", () => {
  test("should be able to return containing value via `get`", () => {
    const $s = signal(1);

    expect($s.get()).toBe(1);
  });

  test("`.value` alias should work", () => {
    const $s = signal(1);

    expect($s.value).toBe(1);

    $s.value = 2;

    expect($s.get()).toBe(2);
  });

  test("should update containing value via `set`", () => {
    const $s = signal(1);

    $s.set(2);

    expect($s.get()).toBe(2);
  });

  test("should skip updates when the value is same", () => {
    const fn = mock(() => {});

    const $s = signal(1);

    effect(() => {
      $s.get();
      fn();
    });

    $s.set(1);
    $s.set(1);

    expect(fn).toHaveBeenCalledTimes(1);
  });

  test("`once` should not trigger re-run", () => {
    const fn = mock((_n: number) => {});
    const $s = signal(1);

    effect(() => {
      const $c = derived(() => $s.once());

      fn($c.get());
    });

    $s.set(2);

    expect(fn.mock.calls).toEqual([[1]]);
  });

  test("`update` pass the current value as an argument", () => {
    const $s = signal(1);

    $s.update((n) => n + 1);

    expect($s.once()).toBe(2);
  });

  test("should stop updating once disposed", () => {
    const fn = mock((_n: number) => {});
    const $s = signal(1);

    effect(() => {
      fn($s.get());
    });

    $s.dispose();
    $s.set(2);

    expect(fn.mock.calls).toEqual([[1]]);
  });

  test("should be able to manually specify which Computation to associate", async () => {
    const fn = mock((_n: number) => {});
    const $s = signal(0);

    effect((ctx) => {
      sleep(5).then(() => {
        // At the time this line, the Effect (ctx) is popped from global stack.
        fn($s.get(ctx));
      });
    });

    $s.set(1);

    await sleep(6);

    $s.set(2);

    await sleep(6);

    expect(fn.mock.calls).toEqual([[1], [2]]);
  });

  test("should work with immediate multiple writes", () => {
    const $s = signal(0);

    $s.set(1);
    $s.set(2);
    $s.set(3);

    expect($s.once()).toBe(3);

    $s.set(2);
    $s.set(1);
    $s.set(0);

    expect($s.once()).toBe(0);
  });
});

describe("derived", () => {
  test("should create a derived signal based on another signal", () => {
    const $s = signal(1);

    const $c = derived(() => $s.get() + 1);

    expect($c.get()).toBe(2);
  });

  test("`.value` alias should work", () => {
    const $s = signal(1);

    const $c = derived(() => $s.get() + 1);

    expect($c.value).toBe(2);
  });

  test("should be updated when dependent signal was updated", () => {
    const $s = signal(1);

    const $c = derived(() => $s.get() + 1);

    expect($c.get()).toBe(2);

    $s.set(2);

    expect($c.get()).toBe(3);
  });

  test("should be updated when one of dependent signal got updated", () => {
    const $s1 = signal(1);
    const $s2 = signal(2);

    const $c = derived(() => $s1.get() + $s2.get());

    expect($c.get()).toBe(3);

    $s1.set(10);

    expect($c.get()).toBe(12);
  });

  test("should trigger effect re-run", () => {
    const fn = mock((_n: number) => {});
    const $s = signal(1);
    const $c = derived(() => $s.get() + 1);

    effect(() => {
      fn($c.get());
    });

    $s.set(2);

    expect(fn.mock.calls).toEqual([[2], [3]]);
  });

  test("should not react to unnecessary change", () => {
    const fn = mock((_v: unknown) => {});
    const $s1 = signal(true);
    const $s2 = signal(1);

    effect(() => {
      const $c = derived(() => {
        return $s1.get() ? $s2.get() : null;
      });

      effect(() => {
        fn($c.get());
      });
    });

    $s1.set(false);
    $s2.set(2);

    expect(fn.mock.calls).toEqual([[1], [null]]);
  });

  test("should update nested computation", () => {
    const fn = mock((_v: number) => {});

    const $s = signal(1);

    const $c1 = derived(() => $s.get() + 1);
    const $c2 = derived(() => $c1.get() + 1);
    const $c3 = derived(() => $c2.get() + 1);

    effect(() => {
      fn($c3.get());
    });

    $s.set(2);

    expect(fn.mock.calls).toEqual([[4], [5]]);
  });

  test("should stop reacting to dependants' changes once disposed", () => {
    const fn = mock((_n: number) => {});

    const $s = signal(1);
    const $c = derived(() => {
      fn($s.get());
      return 0;
    });

    $c.get();
    $c.dispose();
    $s.set(2);

    expect(fn.mock.calls).toEqual([[1]]);
  });

  test("should de-associate Signals", () => {
    const fn = mock(() => {});
    const $s1 = signal(1);
    const $s2 = signal(10);
    const $s3 = signal(100);

    const $c = derived(() => {
      fn();
      if ($s1.get() > 0) {
        return $s2.get();
      } else {
        return $s3.get();
      }
    });

    expect($c.get()).toBe(10);

    $s1.set(0);

    expect($c.get()).toBe(100);

    $s2.set(20);

    expect($c.get()).toBe(100);
    expect(fn.mock.calls.length).toBe(2);
  });

  test("should manually specify which Computation to associate", async () => {
    const fn = mock((_n: number) => {});
    const $s = signal(0);
    const $c = derived(() => $s.get());

    effect((ctx) => {
      sleep(5).then(() => {
        // At the time this line, the Effect (ctx) is popped from global stack.
        fn($c.get(ctx));
      });
    });

    $s.set(1);

    await sleep(6);

    $s.set(2);

    await sleep(6);

    expect(fn.mock.calls).toEqual([[1], [2]]);
  });

  test("should dispose child setups on update", () => {
    const fn = mock(() => {});
    const $s = signal(0);

    const $c = derived(() => {
      effect(() => {
        return () => {
          fn();
        };
      });

      return $s.get();
    });

    $s.set(1);

    expect(fn.mock.calls.length).toBe(1);

    $c.dispose();

    expect(fn.mock.calls.length).toBe(2);
  });
});

describe("effect", () => {
  test("should run the callback function immediately", () => {
    const fn = mock(() => {});

    effect(() => {
      fn();
    });

    expect(fn).toHaveBeenCalledTimes(1);
  });

  test("should re-run the callback function when inner signal got updated", () => {
    const fn = mock((_n: number) => {});

    const $s = signal(1);

    effect(() => {
      fn($s.get());
    });

    $s.set(2);
    $s.set(3);

    expect(fn.mock.calls).toEqual([[1], [2], [3]]);
  });

  test("should not run same effect multiple times for same signal update", () => {
    const fn = mock((_n: number) => {});

    const $s = signal(1);
    const $c = derived(() => $s.get());

    effect(() => {
      $s.get();
      fn($c.get());
    });

    $s.set(2);

    expect(fn.mock.calls).toEqual([[1], [2]]);
  });

  test("should run effect without dupe", () => {
    const fn = mock((_n: number) => {});

    const $s = signal(1);

    effect(() => {
      fn($s.get());
    });

    $s.set(2);
    $s.set(2);
    $s.set(1);
    $s.set(1);
    $s.set(2);
    $s.set(2);

    expect(fn.mock.calls).toEqual([[1], [2], [1], [2]]);
  });

  test("should destroy signals and computations created inside the callback function", () => {
    const fn1 = mock((_n: number) => {});
    const fn2 = mock((_n: number) => {});

    const $s1 = signal(1);

    effect(() => {
      const $s2 = signal($s1.get() * 10);

      effect(() => {
        fn1($s2.get());
      });

      const $c = derived(() => {
        return $s1.get();
      });

      effect(() => {
        fn2($c.get());
      });
    });

    $s1.set(2);

    expect(fn1.mock.calls).toEqual([[10], [20]]);
    expect(fn2.mock.calls).toEqual([[1], [2]]);
  });

  test("should re-run callback only when scope item was updated", () => {
    const fn1 = mock(() => {});
    const fn2 = mock(() => {});
    const fn3 = mock((_v: unknown) => {});

    const $s = signal(1);
    const $c = derived(() => $s.get());

    effect(() => {
      fn1();

      effect(() => {
        fn2();

        $s.get();

        effect(() => {
          fn3($c.get());
        });
      });
    });

    $s.set(2);

    expect(fn1).toHaveBeenCalledTimes(1);
    expect(fn2).toHaveBeenCalledTimes(2);
    expect(fn3.mock.calls).toEqual([[1], [2]]);
  });

  test("should run cleanup function on dispose", () => {
    const fn = mock(() => {});

    const e = effect(() => {
      return () => {
        fn();
      };
    });

    expect(fn.mock.calls.length).toBe(0);

    e.dispose();

    expect(fn.mock.calls.length).toBe(1);
  });

  test("should run cleanup function on re-run", () => {
    const fn = mock(() => {});
    const $s = signal(1);

    effect(() => {
      $s.get();

      return () => {
        fn();
      };
    });

    $s.set(2);

    expect(fn.mock.calls.length).toBe(1);
  });

  test("should de-asocciate Signals", () => {
    const fn = mock(() => {});
    const $s1 = signal(1);
    const $s2 = signal(10);
    const $s3 = signal(100);

    effect(() => {
      fn();
      if ($s1.get() > 0) {
        $s2.get();
      } else {
        $s3.get();
      }
    });

    $s1.set(0);
    $s2.set(20);

    expect(fn.mock.calls.length).toBe(2);
  });
});

// These test measures object counts instead of heap size, because it's hard to
// define test thresholds (acceptable margin).
describe("GC", () => {
  // Error margin for object counts
  const ERROR_MARGIN = 100;

  test("Signals should not retain references to stale computation closures", () => {
    Bun.gc(true);

    let p1: number;
    let p2: number;
    {
      const $s = signal(1);
      const $c = derived(() => $s.get().toString(16));

      const eff = effect(() => {
        $c.get();
      });

      for (let i = 0; i < 10_000; i++) {
        $s.set(i);
      }
      Bun.gc(true);
      p1 = heapStats().objectCount;

      for (let i = 0; i < 10_000; i++) {
        $s.set(i);
      }
      Bun.gc(true);
      p2 = heapStats().objectCount;

      eff.dispose();
    }

    Bun.gc(true);

    const p3 = heapStats().objectCount;

    // If stale references are held, memory usage would radically inrease.
    expect(p2).toBeLessThanOrEqual(p1 + ERROR_MARGIN);

    // If stale references are held, counts go over 10_000.
    expect(p3).toBeLessThanOrEqual(p1 + ERROR_MARGIN);
    expect(p3).toBeLessThanOrEqual(p2 + ERROR_MARGIN);
  });

  test("Deriveds and Effects should free descendants", () => {
    Bun.gc(true);

    let p1: number;
    let p2: number;
    {
      const $s = signal(1);
      const $c = derived(() => {
        return signal($s.get().toString(16)).get();
      });

      const eff = effect(() => {
        derived(() => {
          return $c.get();
        }).get();
      });

      for (let i = 0; i < 10_000; i++) {
        $s.set(i);
      }
      Bun.gc(true);
      p1 = heapStats().objectCount;

      for (let i = 0; i < 10_000; i++) {
        $s.set(i);
      }
      Bun.gc(true);
      p2 = heapStats().objectCount;

      eff.dispose();
    }

    Bun.gc(true);

    const p3 = heapStats().objectCount;

    // If stale references are held, memory usage would radically inrease.
    expect(p2).toBeLessThanOrEqual(p1 + ERROR_MARGIN);

    // If stale references are held, counts go over 10_000.
    expect(p3).toBeLessThanOrEqual(p1 + ERROR_MARGIN);
    expect(p3).toBeLessThanOrEqual(p2 + ERROR_MARGIN);
  });
});