signalium 1.2.1 → 2.0.0

package/src/react/__tests__/async.test.tsx

@@ -1,704 +0,0 @@
-import { beforeEach, describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-react';
-import { state, reactive, ReactivePromise, subscription } from 'signalium';
-import { setupReact } from '../index.js';
-import React, { memo } from 'react';
-import { Locator } from '@vitest/browser/context';
-import { sleep } from '../../__tests__/utils/async.js';
-import { createRenderCounter, HOC, RenderCounter } from './utils.js';
-
-setupReact();
-
-const PROMISE_PROPS: (keyof ReactivePromise<string>)[] = [
-  'value',
-  'error',
-  'isPending',
-  'isRejected',
-  'isResolved',
-  'isSettled',
-  'isReady',
-];
-
-function createPromisePropCounter(prop: keyof ReactivePromise<string>, wrapper?: HOC) {
-  return createRenderCounter(({ promise }: { promise: ReactivePromise<string> }) => {
-    return <>{String(promise[prop])}</>;
-  }, wrapper);
-}
-
-type PromisePropsKey = keyof ReactivePromise<string> | 'parent';
-
-type PromisePropsRenderers = Record<PromisePropsKey, RenderCounter<{ promise: ReactivePromise<string> }>>;
-
-export const createPromisePropsCounter = (
-  propWrapper?: HOC,
-  parentWrapper?: HOC,
-): [RenderCounter<{ promise: ReactivePromise<string> }>, PromisePropsRenderers] => {
-  const PropRenderers = PROMISE_PROPS.reduce((acc, prop) => {
-    acc[prop] = createPromisePropCounter(prop, propWrapper);
-    return acc;
-  }, {} as PromisePropsRenderers);
-
-  const ParentRenderer = createRenderCounter(({ promise }: { promise: ReactivePromise<string> }) => {
-    return (
-      <>
-        {PROMISE_PROPS.map(prop => {
-          const PropRenderer = PropRenderers[prop];
-
-          return <PropRenderer key={String(prop)} promise={promise} />;
-        })}
-      </>
-    );
-  }, parentWrapper);
-
-  PropRenderers.parent = ParentRenderer;
-
-  return [ParentRenderer, PropRenderers];
-};
-
-const getPromiseValuesAndCounts = (
-  getByTestId: (id: string | RegExp) => Locator,
-  PropRenderers: PromisePropsRenderers,
-) => {
-  return Object.fromEntries(
-    Object.entries(PropRenderers).map(([prop, renderer]) => {
-      const value = getByTestId(renderer.testId.toString());
-
-      return prop === 'parent'
-        ? [prop, renderer.renderCount]
-        : [prop, [value.element().textContent, renderer.renderCount]];
-    }),
-  );
-};
-
-describe('React > async', () => {
-  describe('reactive functions', () => {
-    test('results can be passed down to children and grandchildren, and are updated when reactive promise resolves', async () => {
-      const value = state('Hello');
-
-      const derived = reactive(async () => {
-        const v = value.get();
-        await sleep(100);
-        return `${v}, World`;
-      });
-
-      function GrandChild({ text }: { text: string }): React.ReactNode {
-        return <span>{text}</span>;
-      }
-
-      function Child({
-        asyncValue,
-      }: {
-        asyncValue: { isPending: boolean; value: string | undefined };
-      }): React.ReactNode {
-        return <div>{asyncValue.isPending ? 'Loading...' : <GrandChild text={asyncValue.value!} />}</div>;
-      }
-
-      function Parent(): React.ReactNode {
-        const d = derived();
-        return <Child asyncValue={d} />;
-      }
-
-      const { getByText } = render(<Parent />);
-
-      await expect.element(getByText('Loading...')).toBeInTheDocument();
-      await expect.element(getByText('Hello, World')).toBeInTheDocument();
-
-      value.set('Hey');
-
-      await expect.element(getByText('Loading...')).toBeInTheDocument();
-      await expect.element(getByText('Hey, World')).toBeInTheDocument();
-    });
-
-    test('results will update all promise props together when used in unmemoized functions', async () => {
-      const content = state('World');
-
-      const derived1 = reactive(async () => {
-        const v = `Hello, ${content.get()}`;
-        await sleep(100);
-        return v;
-      });
-
-      const [ParentRenderer, Renderers] = createPromisePropsCounter();
-
-      const Parent = () => <ParentRenderer promise={derived1()} />;
-
-      const { getByTestId } = render(<Parent />);
-
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 1,
-
-        isPending: ['true', 1],
-        isReady: ['false', 1],
-        isRejected: ['false', 1],
-        isResolved: ['false', 1],
-        isSettled: ['false', 1],
-        value: ['undefined', 1],
-        error: ['undefined', 1],
-      });
-
-      await sleep(200);
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 2,
-
-        isPending: ['false', 2],
-        isReady: ['true', 2],
-        isRejected: ['false', 2],
-        isResolved: ['true', 2],
-        isSettled: ['true', 2],
-        value: ['Hello, World', 2],
-        error: ['undefined', 2],
-      });
-
-      content.set('Galaxy');
-      await sleep(0);
-
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 3,
-
-        isPending: ['true', 3],
-        isReady: ['true', 3],
-        isRejected: ['false', 3],
-        isResolved: ['true', 3],
-        isSettled: ['true', 3],
-        value: ['Hello, World', 3],
-        error: ['undefined', 3],
-      });
-
-      await sleep(200);
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 4,
-
-        isPending: ['false', 4],
-        isReady: ['true', 4],
-        isRejected: ['false', 4],
-        isResolved: ['true', 4],
-        isSettled: ['true', 4],
-        value: ['Hello, Galaxy', 4],
-        error: ['undefined', 4],
-      });
-    });
-
-    test('it can transition back and forth between error and success states', async () => {
-      const content = state('World');
-
-      const derived1 = reactive(async () => {
-        const value = content.get();
-        const v = `Hello, ${value}`;
-        await sleep(100);
-        if (value === 'Galaxy') {
-          throw new Error('Galaxy is not allowed');
-        }
-        return v;
-      });
-
-      const [ParentRenderer, Renderers] = createPromisePropsCounter();
-
-      const Parent = () => <ParentRenderer promise={derived1()} />;
-
-      const { getByTestId } = render(<Parent />);
-
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 1,
-
-        isPending: ['true', 1],
-        isReady: ['false', 1],
-        isRejected: ['false', 1],
-        isResolved: ['false', 1],
-        isSettled: ['false', 1],
-        value: ['undefined', 1],
-        error: ['undefined', 1],
-      });
-
-      await sleep(200);
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 2,
-
-        isPending: ['false', 2],
-        isReady: ['true', 2],
-        isRejected: ['false', 2],
-        isResolved: ['true', 2],
-        isSettled: ['true', 2],
-        value: ['Hello, World', 2],
-        error: ['undefined', 2],
-      });
-
-      content.set('Galaxy');
-      await sleep(0);
-
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 3,
-
-        isPending: ['true', 3],
-        isReady: ['true', 3],
-        isRejected: ['false', 3],
-        isResolved: ['true', 3],
-        isSettled: ['true', 3],
-        value: ['Hello, World', 3],
-        error: ['undefined', 3],
-      });
-
-      await sleep(200);
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 4,
-
-        isPending: ['false', 4],
-        isReady: ['true', 4],
-        isRejected: ['true', 4],
-        isResolved: ['false', 4],
-        isSettled: ['true', 4],
-        value: ['Hello, World', 4],
-        error: ['Error: Galaxy is not allowed', 4],
-      });
-
-      content.set('Universe');
-      await sleep(0);
-
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 5,
-
-        isPending: ['true', 5],
-        isReady: ['true', 5],
-        isRejected: ['true', 5],
-        isResolved: ['false', 5],
-        isSettled: ['true', 5],
-        value: ['Hello, World', 5],
-        error: ['Error: Galaxy is not allowed', 5],
-      });
-
-      await sleep(200);
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 6,
-
-        isPending: ['false', 6],
-        isReady: ['true', 6],
-        isRejected: ['false', 6],
-        isResolved: ['true', 6],
-        isSettled: ['true', 6],
-        value: ['Hello, Universe', 6],
-        error: ['undefined', 6],
-      });
-    });
-
-    test('results can update when used in reactive functions', async () => {
-      const value1 = state('Hello');
-      let parentRenderCount = 0;
-      let childRenderCount = 0;
-
-      const derived1 = reactive(async () => {
-        const v = value1.get();
-        await sleep(100);
-        return v;
-      });
-
-      const Child = reactive(({ promise }: { promise: ReactivePromise<string> }): React.ReactNode => {
-        childRenderCount++;
-        return <span data-testid="child">{promise.value}</span>;
-      });
-
-      const Parent = reactive((): React.ReactNode => {
-        parentRenderCount++;
-        const d1 = derived1();
-        return (
-          <div data-testid="parent">
-            <Child promise={d1} />
-          </div>
-        );
-      });
-
-      const { getByTestId } = render(<Parent />);
-
-      // Wait for both promises to resolve
-      await sleep(200);
-      await expect.element(getByTestId('parent')).toBeInTheDocument();
-      await expect.element(getByTestId('child')).toBeInTheDocument();
-
-      expect(parentRenderCount).toBe(1);
-      expect(childRenderCount).toBe(2);
-
-      // Update only value1, should re-render only the child
-      value1.set('World');
-      await sleep(200);
-
-      expect(parentRenderCount).toBe(1);
-      expect(childRenderCount).toBe(3);
-    });
-
-    test('results do not update when used in React.memo components when passed down directly', async () => {
-      const value1 = state('Hello');
-      let parentRenderCount = 0;
-      let childRenderCount = 0;
-
-      const derived1 = reactive(async () => {
-        const v = value1.get();
-        await sleep(100);
-        return v;
-      });
-
-      const Child = memo(({ promise }: { promise: ReactivePromise<string> }): React.ReactNode => {
-        childRenderCount++;
-        return <span data-testid="child">{promise.value}</span>;
-      });
-
-      const Parent = memo((): React.ReactNode => {
-        parentRenderCount++;
-        const d1 = derived1();
-        return (
-          <div data-testid="parent">
-            <Child promise={d1} />
-          </div>
-        );
-      });
-
-      const { getByTestId } = render(<Parent />);
-
-      // Wait for both promises to resolve
-      await sleep(200);
-      await expect.element(getByTestId('parent')).toBeInTheDocument();
-      await expect.element(getByTestId('child')).toBeInTheDocument();
-
-      expect(parentRenderCount).toBe(2);
-      expect(childRenderCount).toBe(1);
-
-      // Update only value1, should re-render only the child
-      value1.set('World');
-      await sleep(200);
-
-      expect(parentRenderCount).toBe(4);
-      expect(childRenderCount).toBe(1);
-    });
-  });
-
-  describe('subscriptions', () => {
-    test('results can be passed down to children and grandchildren, and are updated when reactive promise resolves', async () => {
-      const value = state('Hello');
-
-      const derived = reactive(() => {
-        const greeting = value.get();
-
-        return subscription<string>(({ set }) => {
-          const run = async () => {
-            await sleep(100);
-
-            return `${greeting}, World`;
-          };
-
-          set(run());
-        });
-      });
-
-      function GrandChild({ text }: { text: string }): React.ReactNode {
-        return <span>{text}</span>;
-      }
-
-      function Child({
-        asyncValue,
-      }: {
-        asyncValue: { isPending: boolean; value: string | undefined };
-      }): React.ReactNode {
-        return <div>{asyncValue.isPending ? 'Loading...' : <GrandChild text={asyncValue.value!} />}</div>;
-      }
-
-      function Parent(): React.ReactNode {
-        const d = derived();
-        return <Child asyncValue={d} />;
-      }
-
-      const { getByText } = render(<Parent />);
-
-      await expect.element(getByText('Loading...')).toBeInTheDocument();
-      await expect.element(getByText('Hello, World')).toBeInTheDocument();
-
-      value.set('Hey');
-
-      await expect.element(getByText('Loading...')).toBeInTheDocument();
-      await expect.element(getByText('Hey, World')).toBeInTheDocument();
-    });
-
-    test('results will update all promise props together when used in unmemoized functions', async () => {
-      const content = state('World');
-
-      const derived1 = reactive(() => {
-        return subscription<string>(({ set }) => {
-          const v = content.get();
-
-          const run = async () => {
-            await sleep(100);
-            return `Hello, ${v}`;
-          };
-
-          set(run());
-        });
-      });
-
-      const [ParentRenderer, Renderers] = createPromisePropsCounter();
-
-      const Parent = () => <ParentRenderer promise={derived1()} />;
-
-      const { getByTestId } = render(<Parent />);
-
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 1,
-
-        isPending: ['true', 1],
-        isReady: ['false', 1],
-        isRejected: ['false', 1],
-        isResolved: ['false', 1],
-        isSettled: ['false', 1],
-        value: ['undefined', 1],
-        error: ['undefined', 1],
-      });
-
-      await sleep(200);
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 2,
-
-        isPending: ['false', 2],
-        isReady: ['true', 2],
-        isRejected: ['false', 2],
-        isResolved: ['true', 2],
-        isSettled: ['true', 2],
-        value: ['Hello, World', 2],
-        error: ['undefined', 2],
-      });
-
-      content.set('Galaxy');
-      // await sleep(10);
-
-      // expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-      //   parent: 3,
-
-      //   isPending: ['true', 3],
-      //   isReady: ['true', 3],
-      //   isRejected: ['false', 3],
-      //   isResolved: ['true', 3],
-      //   isSettled: ['true', 3],
-      //   value: ['Hello, World', 3],
-      //   error: ['undefined', 3],
-      // });
-
-      await sleep(200);
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 4,
-
-        isPending: ['false', 4],
-        isReady: ['true', 4],
-        isRejected: ['false', 4],
-        isResolved: ['true', 4],
-        isSettled: ['true', 4],
-        value: ['Hello, Galaxy', 4],
-        error: ['undefined', 4],
-      });
-    });
-
-    test('it can transition back and forth between error and success states', async () => {
-      const content = state('World');
-
-      const derived1 = reactive(() => {
-        return subscription<string>(({ set }) => {
-          const value = content.get();
-
-          const run = async () => {
-            await sleep(100);
-
-            if (value === 'Galaxy') {
-              throw new Error('Galaxy is not allowed');
-            }
-
-            return `Hello, ${value}`;
-          };
-
-          set(run());
-        });
-      });
-
-      const [ParentRenderer, Renderers] = createPromisePropsCounter();
-
-      const Parent = () => <ParentRenderer promise={derived1()} />;
-
-      const { getByTestId } = render(<Parent />);
-
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 1,
-
-        isPending: ['true', 1],
-        isReady: ['false', 1],
-        isRejected: ['false', 1],
-        isResolved: ['false', 1],
-        isSettled: ['false', 1],
-        value: ['undefined', 1],
-        error: ['undefined', 1],
-      });
-
-      await sleep(200);
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 2,
-
-        isPending: ['false', 2],
-        isReady: ['true', 2],
-        isRejected: ['false', 2],
-        isResolved: ['true', 2],
-        isSettled: ['true', 2],
-        value: ['Hello, World', 2],
-        error: ['undefined', 2],
-      });
-
-      content.set('Galaxy');
-      await sleep(0);
-
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 3,
-
-        isPending: ['true', 3],
-        isReady: ['true', 3],
-        isRejected: ['false', 3],
-        isResolved: ['true', 3],
-        isSettled: ['true', 3],
-        value: ['Hello, World', 3],
-        error: ['undefined', 3],
-      });
-
-      await sleep(200);
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 4,
-
-        isPending: ['false', 4],
-        isReady: ['true', 4],
-        isRejected: ['true', 4],
-        isResolved: ['false', 4],
-        isSettled: ['true', 4],
-        value: ['Hello, World', 4],
-        error: ['Error: Galaxy is not allowed', 4],
-      });
-
-      content.set('Universe');
-      await sleep(0);
-
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 5,
-
-        isPending: ['true', 5],
-        isReady: ['true', 5],
-        isRejected: ['true', 5],
-        isResolved: ['false', 5],
-        isSettled: ['true', 5],
-        value: ['Hello, World', 5],
-        error: ['Error: Galaxy is not allowed', 5],
-      });
-
-      await sleep(200);
-      expect(getPromiseValuesAndCounts(getByTestId, Renderers)).toEqual({
-        parent: 6,
-
-        isPending: ['false', 6],
-        isReady: ['true', 6],
-        isRejected: ['false', 6],
-        isResolved: ['true', 6],
-        isSettled: ['true', 6],
-        value: ['Hello, Universe', 6],
-        error: ['undefined', 6],
-      });
-    });
-
-    test('results can update when used in reactive functions', async () => {
-      const value1 = state('Hello');
-      let parentRenderCount = 0;
-      let childRenderCount = 0;
-
-      const derived1 = reactive(() => {
-        return subscription<string>(({ set }) => {
-          const v = value1.get();
-
-          const run = async () => {
-            await sleep(100);
-            return v;
-          };
-
-          set(run());
-        });
-      });
-
-      const Child = reactive(({ promise }: { promise: ReactivePromise<string> }): React.ReactNode => {
-        childRenderCount++;
-        return <span data-testid="child">{promise.value}</span>;
-      });
-
-      const Parent = reactive((): React.ReactNode => {
-        parentRenderCount++;
-        const d1 = derived1();
-        return (
-          <div data-testid="parent">
-            <Child promise={d1} />
-          </div>
-        );
-      });
-
-      const { getByTestId } = render(<Parent />);
-
-      // Wait for both promises to resolve
-      await sleep(200);
-      await expect.element(getByTestId('parent')).toBeInTheDocument();
-      await expect.element(getByTestId('child')).toBeInTheDocument();
-
-      expect(parentRenderCount).toBe(1);
-      expect(childRenderCount).toBe(2);
-
-      // Update only value1, should re-render only the child
-      value1.set('World');
-      await sleep(200);
-
-      expect(parentRenderCount).toBe(1);
-      expect(childRenderCount).toBe(3);
-    });
-
-    test('results do not update when used in React.memo components when passed down directly', async () => {
-      const value1 = state('Hello');
-      let parentRenderCount = 0;
-      let childRenderCount = 0;
-
-      const derived1 = reactive(() => {
-        return subscription<string>(({ set }) => {
-          const v = value1.get();
-
-          const run = async () => {
-            await sleep(100);
-            return v;
-          };
-
-          set(run());
-        });
-      });
-
-      const Child = memo(({ promise }: { promise: ReactivePromise<string> }): React.ReactNode => {
-        childRenderCount++;
-        return <span data-testid="child">{promise.value}</span>;
-      });
-
-      const Parent = memo((): React.ReactNode => {
-        parentRenderCount++;
-        const d1 = derived1();
-        return (
-          <div data-testid="parent">
-            <Child promise={d1} />
-          </div>
-        );
-      });
-
-      const { getByTestId } = render(<Parent />);
-
-      // Wait for both promises to resolve
-      await sleep(200);
-      await expect.element(getByTestId('parent')).toBeInTheDocument();
-      await expect.element(getByTestId('child')).toBeInTheDocument();
-
-      expect(parentRenderCount).toBe(2);
-      expect(childRenderCount).toBe(1);
-
-      // Update only value1, should re-render only the child
-      value1.set('World');
-      await sleep(200);
-
-      expect(parentRenderCount).toBe(4);
-      expect(childRenderCount).toBe(1);
-    });
-  });
-});