Add createConditionalFallback and related tests

Author: notwillk

src/__tests__/index.test.tsx

@@ -1,8 +1,102 @@
-// import { render } from '@testing-library/react';
-// import { axe } from 'jest-axe';
-// import { PropsWithChildren } from 'react';
+import { act, render, waitForElementToBeRemoved } from '@testing-library/react';
+
+import createConditionalFallback from "index";
+
+function MainComponent() {
+  return <div data-testid="main">Condition is FALSE.</div>;
+}
+
+function FallbackComponent() {
+  return <div data-testid="fallback">Condition is TRUE.</div>;
+}
 
 describe('#react-conditional-fallback', () => {
-  xit('xxx', async () => {
+  it('renders the happy path', async () => {
+    const { ConditionalFallback } = createConditionalFallback(false);
+
+    const { queryByTestId } = render(
+      <ConditionalFallback fallback={<FallbackComponent />}>
+        <MainComponent />
+      </ConditionalFallback>,
+    );
+
+    expect(await queryByTestId('main')).not.toEqual(null);
+    expect(await queryByTestId('fallback')).toEqual(null);
+  });
+
+  it('renders the fallback path', async () => {
+    const { ConditionalFallback } = createConditionalFallback(true);
+
+    const { queryByTestId } = render(
+      <ConditionalFallback fallback={<FallbackComponent />}>
+        <MainComponent />
+      </ConditionalFallback>,
+    );
+
+    expect(await queryByTestId('main')).toEqual(null);
+    expect(await queryByTestId('fallback')).not.toEqual(null);
+  });
+
+  it('updates on state change', async () => {
+    const { ConditionalFallback, set } = createConditionalFallback(false);
+
+    const { queryByTestId } = render(
+      <ConditionalFallback fallback={<FallbackComponent />}>
+        <MainComponent />
+      </ConditionalFallback>,
+    );
+
+    expect(await queryByTestId('main')).not.toEqual(null);
+    expect(await queryByTestId('fallback')).toEqual(null);
+
+    act(() => {
+      set();
+    });
+
+    expect(await queryByTestId('main')).toEqual(null);
+    expect(await queryByTestId('fallback')).not.toEqual(null);
+  });
+
+  it('works with the provider as an ancestor', async () => {
+    const { Provider, ConditionalFallback, set } = createConditionalFallback(false);
+
+    const { queryByTestId } = render(
+      <Provider>
+        <ConditionalFallback fallback={<FallbackComponent />}>
+          <MainComponent />
+        </ConditionalFallback>
+      </Provider>,
+    );
+
+    expect(await queryByTestId('main')).not.toEqual(null);
+    expect(await queryByTestId('fallback')).toEqual(null);
+
+    act(() => {
+      set();
+    });
+
+    expect(await queryByTestId('main')).toEqual(null);
+    expect(await queryByTestId('fallback')).not.toEqual(null);
+  });
+
+  it('provides the correct value to the hook', async () => {
+    const { Provider, useCondition, set } = createConditionalFallback(false);
+
+    function ConditionValue() {
+      const value = useCondition();
+      return <pre>{value.toString().toUpperCase()}</pre>;
+    }
+
+    const { queryByText } = render(<Provider><ConditionValue /></Provider>);
+
+    expect(await queryByText('TRUE')).toEqual(null);
+    expect(await queryByText('FALSE')).not.toEqual(null);
+
+    act(() => {
+      set();
+    });
+
+    expect(await queryByText('TRUE')).not.toEqual(null);
+    expect(await queryByText('FALSE')).toEqual(null);
   });
 });

src/index.tsx

@@ -1,7 +1,50 @@
-import { PropsWithChildren } from 'react';
+import ConditionStore from 'ConditionStore';
+import React, { PropsWithChildren, ReactNode, createContext, useContext, useMemo, useSyncExternalStore } from 'react';
 
-export default function createConditionalFallback({
-  children,
-}: PropsWithChildren) {
-  return <>{children}</>
+export type ConditionalFallbackProps = PropsWithChildren<{fallback: ReactNode}>;
+
+export type ConditionalFallbackContext = {
+  value: boolean,
+  set: () => void,
+  clear: () => void,
+};
+
+export default function createConditionalFallback(initialValue?: boolean) {
+  const store = new ConditionStore(initialValue);
+
+  const set = store.set.bind(store);
+  const clear = store.clear.bind(store);
+  const subscribe = store.subscribe.bind(store);
+  const getSnapshot = store.getSnapshot.bind(store);
+
+  const Context = createContext<ConditionalFallbackContext | null>(null);
+
+  function Provider({children}: PropsWithChildren) {
+    const value = useSyncExternalStore(subscribe, getSnapshot);
+    const context = useMemo(() => ({ value, set, clear }), [value]);
+    return <Context.Provider value={context}>{children}</Context.Provider>;
+  }
+
+  function ConditionalFallback({ fallback, children }: ConditionalFallbackProps) {
+    const context = useContext(Context);
+
+    if( context === null) {
+      return <Provider><ConditionalFallback fallback={fallback}>{children}</ConditionalFallback></Provider>;
+    }
+
+    return <>{context.value ? fallback : children}</>
+  }
+
+  function useCondition() {
+    const { value } = useContext(Context) || { value: initialValue };
+    return Boolean(value);
+  }
+
+  return {
+    set,
+    clear,
+    Provider,
+    ConditionalFallback,
+    useCondition,
+  };
 }