@blac/react 2.0.0-rc-16 → 2.0.0-rc.1

package/src/__tests__/useBloc.disposal.test.tsx

@@ -1,377 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import { act } from '@testing-library/react';
-import { Cubit, Blac } from '@blac/core';
-import useBloc from '../useBloc';
-import React from 'react';
-
-interface TestState {
-  counter: number;
-  text: string;
-}
-
-class SharedTestCubit extends Cubit<TestState> {
-  // Not isolated - should be shared across components
-  constructor() {
-    super({ counter: 0, text: 'initial' });
-    console.log('[SharedTestCubit] Created');
-  }
-
-  increment = () => {
-    console.log(
-      '[SharedTestCubit] increment called, current state:',
-      this.state,
-    );
-    console.log(
-      '[SharedTestCubit] disposal state on increment:',
-      (this as any)._disposalState,
-    );
-    this.emit({ ...this.state, counter: this.state.counter + 1 });
-  };
-
-  updateText = (text: string) => {
-    console.log(
-      '[SharedTestCubit] updateText called with:',
-      text,
-      'current state:',
-      this.state,
-    );
-    console.log(
-      '[SharedTestCubit] disposal state:',
-      (this as any)._disposalState,
-    );
-    this.emit({ ...this.state, text });
-  };
-
-  async dispose() {
-    console.log('[SharedTestCubit] Disposing');
-    await super.dispose();
-  }
-}
-
-describe('useBloc disposal issues', () => {
-  afterEach(() => {
-    // Clean up any existing blocs after each test
-    const existingBloc = Blac.getBloc(SharedTestCubit);
-    if (existingBloc) {
-      existingBloc.dispose();
-    }
-  });
-
-  it('should not dispose shared bloc when switching between components', async () => {
-    // Track disposal errors
-    const disposalErrors: string[] = [];
-    const originalError = console.error;
-    console.error = (...args: any[]) => {
-      const message = args[0];
-      if (
-        typeof message === 'string' &&
-        message.includes('Attempted state update')
-      ) {
-        disposalErrors.push(message);
-      }
-      originalError(...args);
-    };
-    // Component A uses the shared bloc
-    const ComponentA = () => {
-      const [state, cubit] = useBloc(SharedTestCubit);
-      return (
-        <div>
-          <span data-testid="component-a-counter">{state.counter}</span>
-          <button onClick={cubit.increment}>Increment A</button>
-        </div>
-      );
-    };
-
-    // Component B uses the same shared bloc with dependencies
-    const ComponentB = () => {
-      const [state, cubit] = useBloc(SharedTestCubit, {
-        dependencies: (bloc) => [bloc.state.text],
-      });
-      return (
-        <div>
-          <span data-testid="component-b-text">{state.text}</span>
-          <span data-testid="component-b-counter">{state.counter}</span>
-          <button onClick={() => cubit.updateText('updated')}>
-            Update Text B
-          </button>
-        </div>
-      );
-    };
-
-    // App component that switches between A and B
-    const App = () => {
-      const [showA, setShowA] = React.useState(true);
-      return (
-        <div>
-          <button onClick={() => setShowA(!showA)}>Toggle Component</button>
-          {showA ? <ComponentA /> : <ComponentB />}
-        </div>
-      );
-    };
-
-    const { rerender } = render(<App />);
-
-    // Initially showing Component A
-    expect(screen.getByTestId('component-a-counter')).toHaveTextContent('0');
-
-    // Increment counter in Component A
-    act(() => {
-      screen.getByText('Increment A').click();
-    });
-
-    // Wait for state to update
-    await waitFor(() => {
-      expect(screen.getByTestId('component-a-counter')).toHaveTextContent('1');
-    });
-
-    // Switch to Component B
-    act(() => {
-      screen.getByText('Toggle Component').click();
-    });
-
-    // Wait a bit to ensure Component B is mounted
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 20));
-    });
-
-    // Component B should see the updated counter from Component A
-    await waitFor(() => {
-      expect(screen.getByTestId('component-b-counter')).toHaveTextContent('1');
-      expect(screen.getByTestId('component-b-text')).toHaveTextContent(
-        'initial',
-      );
-    });
-
-    // Try to update text in Component B
-    act(() => {
-      screen.getByText('Update Text B').click();
-    });
-
-    // Wait a moment to see if state updates
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 50));
-    });
-
-    // Check the actual text value
-    const textElement = screen.getByTestId('component-b-text');
-    const actualText = textElement.textContent;
-    console.log('Text after update attempt:', actualText);
-
-    // Should successfully update without disposal errors
-    expect(actualText).toBe('updated');
-
-    // Check if any disposal errors were logged
-    if (disposalErrors.length > 0) {
-      console.log('Disposal errors found:', disposalErrors);
-    }
-    expect(disposalErrors).toHaveLength(0);
-
-    // Switch back to Component A
-    act(() => {
-      screen.getByText('Toggle Component').click();
-    });
-
-    // Component A should still see the counter as 1
-    await waitFor(() => {
-      expect(screen.getByTestId('component-a-counter')).toHaveTextContent('1');
-    });
-
-    // Restore console.error
-    console.error = originalError;
-
-    // Cleanup handled by afterEach
-  });
-
-  it('should handle rapid component switching without disposal issues', async () => {
-    let disposalErrorLogged = false;
-    const originalError = console.error;
-    console.error = (message: string) => {
-      if (message.includes('Attempted state update on disposed bloc')) {
-        disposalErrorLogged = true;
-      }
-      originalError(message);
-    };
-
-    const ComponentWithTimer = () => {
-      const [state, cubit] = useBloc(SharedTestCubit);
-
-      React.useEffect(() => {
-        // Simulate async operation that might complete after unmount
-        const timer = setTimeout(() => {
-          cubit.increment();
-        }, 50);
-
-        return () => clearTimeout(timer);
-      }, [cubit]);
-
-      return <span data-testid="timer-counter">{state.counter}</span>;
-    };
-
-    const App = () => {
-      const [show, setShow] = React.useState(true);
-      return (
-        <div>
-          <button onClick={() => setShow(!show)}>Toggle</button>
-          {show && <ComponentWithTimer />}
-        </div>
-      );
-    };
-
-    render(<App />);
-
-    // Rapidly toggle the component
-    act(() => {
-      screen.getByText('Toggle').click(); // Hide
-    });
-
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 10));
-      screen.getByText('Toggle').click(); // Show again
-    });
-
-    // Wait for potential timer to fire
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    });
-
-    // Should not have logged disposal error
-    expect(disposalErrorLogged).toBe(false);
-
-    // Restore console.error
-    console.error = originalError;
-
-    // Cleanup handled by afterEach
-  });
-
-  it('should not dispose bloc when switching quickly between components', async () => {
-    // Use a unique instance ID for this test to avoid state contamination
-    const testInstanceId = 'test-demo-app-issue';
-
-    const errorMessages: string[] = [];
-    const originalError = console.error;
-    console.error = (message: string, ...args: any[]) => {
-      if (
-        typeof message === 'string' &&
-        message.includes('Attempted state update')
-      ) {
-        errorMessages.push(message);
-      }
-      originalError(message, ...args);
-    };
-
-    // Component using automatic proxy tracking (like DependencyTrackingDemo)
-    const ProxyTrackingComponent = () => {
-      const [state, cubit] = useBloc(SharedTestCubit, {
-        instanceId: testInstanceId,
-      });
-      // Access only counter, not text
-      return (
-        <div>
-          <span data-testid="proxy-counter">{state.counter}</span>
-          <button onClick={cubit.increment}>Increment</button>
-        </div>
-      );
-    };
-
-    // Component using manual dependencies (like CustomSelectorDemo)
-    const ManualDependencyComponent = () => {
-      const [state, cubit] = useBloc(SharedTestCubit, {
-        instanceId: testInstanceId,
-        dependencies: (bloc) => [bloc.state.text],
-      });
-      return (
-        <div>
-          <span data-testid="manual-text">{state.text}</span>
-          <span data-testid="manual-counter">{state.counter}</span>
-          <button onClick={() => cubit.updateText('updated')}>
-            Update Text
-          </button>
-        </div>
-      );
-    };
-
-    // Simulate the demo app behavior
-    const DemoApp = () => {
-      const [showProxy, setShowProxy] = React.useState(false);
-      const [showManual, setShowManual] = React.useState(false);
-
-      return (
-        <div>
-          <button onClick={() => setShowProxy(!showProxy)}>
-            Toggle Proxy Tracking
-          </button>
-          <button onClick={() => setShowManual(!showManual)}>
-            Toggle Manual Dependencies
-          </button>
-          {showProxy && <ProxyTrackingComponent />}
-          {showManual && <ManualDependencyComponent />}
-        </div>
-      );
-    };
-
-    render(<DemoApp />);
-
-    // Open proxy tracking component
-    act(() => {
-      screen.getByText('Toggle Proxy Tracking').click();
-    });
-
-    expect(screen.getByTestId('proxy-counter')).toHaveTextContent('0');
-
-    // Increment counter
-    act(() => {
-      screen.getByText('Increment').click();
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('proxy-counter')).toHaveTextContent('1');
-    });
-
-    // Close proxy tracking component
-    act(() => {
-      screen.getByText('Toggle Proxy Tracking').click();
-    });
-
-    // Switch quickly without waiting - disposal should be cancelled
-    // Don't wait here - switch immediately
-
-    // Open manual dependency component
-    act(() => {
-      screen.getByText('Toggle Manual Dependencies').click();
-    });
-
-    // Should see the incremented state because disposal was cancelled
-    expect(screen.getByTestId('manual-counter')).toHaveTextContent('1');
-    expect(screen.getByTestId('manual-text')).toHaveTextContent('initial');
-
-    // Try to update text
-    act(() => {
-      screen.getByText('Update Text').click();
-    });
-
-    // Wait for state update
-    await waitFor(() => {
-      expect(screen.getByTestId('manual-text')).toHaveTextContent('updated');
-    });
-
-    // Check for disposal errors
-    const disposalErrors = errorMessages.filter(
-      (msg) =>
-        msg.includes('Attempted state update on disposed bloc') ||
-        msg.includes('Attempted state update on disposal_requested bloc'),
-    );
-
-    expect(disposalErrors).toHaveLength(0);
-    expect(screen.getByTestId('manual-text')).toHaveTextContent('updated');
-
-    // Restore console.error
-    console.error = originalError;
-
-    // Clean up test instance
-    const testBloc = Blac.getBloc(SharedTestCubit, { id: testInstanceId });
-    if (testBloc) {
-      await testBloc.dispose();
-    }
-  });
-});

package/src/__tests__/useBloc.instanceChange.test.tsx

@@ -1,200 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-import { BlocConstructorParams, Cubit } from '@blac/core';
-import useBloc from '../useBloc';
-
-interface CounterProps {
-  initialValue: number;
-  step?: number;
-}
-
-class CounterCubit extends Cubit<number> {
-  props: BlocConstructorParams<typeof CounterCubit>;
-
-  constructor(props?: CounterProps) {
-    super(props?.initialValue ?? 0);
-    this.props = props;
-  }
-
-  increment = () => {
-    const step = this.props?.step ?? 1;
-    this.emit(this.state + step);
-  };
-}
-
-describe('useBloc instance changes', () => {
-  describe('when instanceId changes', () => {
-    it('should use a different bloc instance', async () => {
-      const { result, rerender } = renderHook(
-        ({ instanceId }) =>
-          useBloc(CounterCubit, {
-            instanceId,
-            staticProps: { initialValue: 0 },
-          }),
-        { initialProps: { instanceId: 'counter-1' } },
-      );
-
-      // Wait for initial render
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      const firstInstance = result.current[1];
-      expect(firstInstance._id).toBe('counter-1');
-      expect(firstInstance.props).toEqual({ initialValue: 0 });
-
-      // Change instanceId
-      rerender({ instanceId: 'counter-2' });
-
-      const secondInstance = result.current[1];
-      expect(secondInstance._id).toBe('counter-2');
-      expect(secondInstance).not.toBe(firstInstance);
-      expect(result.current[0]).toBe(0); // New instance starts at 0
-    });
-  });
-
-  describe('when staticProps change', () => {
-    it('should use a different bloc instance when staticProps change', async () => {
-      const { result, rerender } = renderHook(
-        ({ initialValue }) =>
-          useBloc(CounterCubit, {
-            staticProps: { initialValue },
-          }),
-        { initialProps: { initialValue: 10 } },
-      );
-
-      // Wait for initial render
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      const firstInstance = result.current[1];
-      expect(result.current[0]).toBe(10);
-      expect(firstInstance._id).toBe('initialValue:10');
-
-      // Change staticProps
-      rerender({ initialValue: 20 });
-
-      const secondInstance = result.current[1];
-      expect(secondInstance).not.toBe(firstInstance);
-      expect(result.current[0]).toBe(20); // New instance with new initial value
-      expect(secondInstance._id).toBe('initialValue:20');
-    });
-
-    it('should use same instance when non-primitive staticProps values change', () => {
-      const { result, rerender } = renderHook(
-        ({ config }) =>
-          useBloc(CounterCubit, {
-            staticProps: {
-              initialValue: 5,
-              config, // This will be ignored for instance ID
-            } as any,
-          }),
-        { initialProps: { config: { debug: true } } },
-      );
-
-      const firstInstance = result.current[1];
-      expect(firstInstance._id).toBe('initialValue:5');
-
-      // Change non-primitive prop
-      rerender({ config: { debug: false } });
-
-      const secondInstance = result.current[1];
-      expect(secondInstance).toBe(firstInstance); // Same instance
-      expect(secondInstance._id).toBe('initialValue:5');
-    });
-
-    it('should change instance when primitive staticProps change', () => {
-      const { result, rerender } = renderHook(
-        ({ step }) =>
-          useBloc(CounterCubit, {
-            staticProps: { initialValue: 0, step },
-          }),
-        { initialProps: { step: 1 } },
-      );
-
-      const firstInstance = result.current[1];
-      expect(firstInstance._id).toBe('initialValue:0|step:1');
-
-      // Change primitive prop
-      rerender({ step: 2 });
-
-      const secondInstance = result.current[1];
-      expect(secondInstance).not.toBe(firstInstance); // Different instance
-      expect(secondInstance._id).toBe('initialValue:0|step:2');
-    });
-  });
-
-  describe('when using both instanceId and staticProps', () => {
-    it('should use explicit instanceId over generated one', () => {
-      const { result } = renderHook(() =>
-        useBloc(CounterCubit, {
-          instanceId: 'my-counter',
-          staticProps: { initialValue: 100 },
-        }),
-      );
-
-      expect(result.current[1]._id).toBe('my-counter');
-      expect(result.current[0]).toBe(100);
-    });
-
-    it('should change instance when instanceId changes even if staticProps are same', () => {
-      const { result, rerender } = renderHook(
-        ({ instanceId }) =>
-          useBloc(CounterCubit, {
-            instanceId,
-            staticProps: { initialValue: 50 },
-          }),
-        { initialProps: { instanceId: 'counter-a' } },
-      );
-
-      const firstInstance = result.current[1];
-
-      // Change instanceId
-      rerender({ instanceId: 'counter-b' });
-
-      const secondInstance = result.current[1];
-      expect(secondInstance).not.toBe(firstInstance);
-      expect(secondInstance._id).toBe('counter-b');
-      expect(result.current[0]).toBe(50); // Same initial value, different instance
-    });
-  });
-
-  describe('lifecycle hooks', () => {
-    it('should call onMount/onUnmount when instance changes', () => {
-      const onMount1 = vi.fn();
-      const onUnmount1 = vi.fn();
-      const onMount2 = vi.fn();
-      const onUnmount2 = vi.fn();
-
-      const { rerender, unmount } = renderHook(
-        ({ instanceId, onMount, onUnmount }) =>
-          useBloc(CounterCubit, { instanceId, onMount, onUnmount }),
-        {
-          initialProps: {
-            instanceId: 'counter-1',
-            onMount: onMount1,
-            onUnmount: onUnmount1,
-          },
-        },
-      );
-
-      expect(onMount1).toHaveBeenCalledTimes(1);
-      expect(onUnmount1).not.toHaveBeenCalled();
-
-      // Change instance
-      rerender({
-        instanceId: 'counter-2',
-        onMount: onMount2,
-        onUnmount: onUnmount2,
-      });
-
-      expect(onUnmount1).toHaveBeenCalledTimes(1);
-      expect(onMount2).toHaveBeenCalledTimes(1);
-      expect(onUnmount2).not.toHaveBeenCalled();
-
-      unmount();
-      expect(onUnmount2).toHaveBeenCalledTimes(1);
-    });
-  });
-});