@blac/react 2.0.0-rc-11 → 2.0.0-rc-14

package/src/__tests__/rerenderLogging.test.tsx

@@ -0,0 +1,257 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { Blac, Cubit, RerenderLogger } from '@blac/core';
+import { RenderLoggingPlugin } from '@blac/plugin-render-logging';
+import useBloc from '../useBloc';
+
+class TestCubit extends Cubit<{ count: number; name: string }> {
+  constructor() {
+    super({ count: 0, name: 'test' });
+  }
+
+  increment = () => this.emit({ ...this.state, count: this.state.count + 1 });
+  changeName = (name: string) => this.emit({ ...this.state, name });
+  changeAll = () => this.emit({ count: this.state.count + 1, name: 'changed' });
+}
+
+describe('Rerender Logging', () => {
+  let consoleSpy: any;
+  let plugin: RenderLoggingPlugin;
+
+  beforeEach(() => {
+    Blac.resetInstance();
+    RerenderLogger.clear();
+    consoleSpy = {
+      log: vi.spyOn(console, 'log').mockImplementation(() => {}),
+      group: vi.spyOn(console, 'group').mockImplementation(() => {}),
+      groupEnd: vi.spyOn(console, 'groupEnd').mockImplementation(() => {}),
+      table: vi.spyOn(console, 'table').mockImplementation(() => {}),
+    };
+  });
+
+  afterEach(() => {
+    consoleSpy.log.mockRestore();
+    consoleSpy.group.mockRestore();
+    consoleSpy.groupEnd.mockRestore();
+    consoleSpy.table.mockRestore();
+    // Remove plugin if it was added
+    if (plugin) {
+      Blac.getInstance().plugins.remove(plugin.name);
+    }
+  });
+
+  it('should not log when rerender logging is disabled', () => {
+    // No plugin registered
+    const { result } = renderHook(() => useBloc(TestCubit));
+
+    act(() => {
+      result.current[1].increment();
+    });
+
+    expect(consoleSpy.log).not.toHaveBeenCalled();
+  });
+
+  it('should log rerenders when enabled with minimal level', () => {
+    plugin = new RenderLoggingPlugin({ enabled: true, level: 'minimal' });
+    Blac.getInstance().plugins.add(plugin);
+
+    const { result } = renderHook(() => useBloc(TestCubit));
+
+    // Clear logs from mount
+    consoleSpy.log.mockClear();
+
+    act(() => {
+      result.current[1].increment();
+    });
+
+    expect(consoleSpy.log).toHaveBeenCalled();
+    const logCall = consoleSpy.log.mock.calls[0][0];
+    expect(logCall).toContain('#2'); // Second render (first is mount)
+  });
+
+  it('should log state changes with normal level', () => {
+    plugin = new RenderLoggingPlugin({ enabled: true, level: 'normal' });
+    Blac.getInstance().plugins.add(plugin);
+
+    const { result } = renderHook(() => useBloc(TestCubit));
+
+    // Clear logs from mount
+    consoleSpy.log.mockClear();
+
+    act(() => {
+      result.current[1].increment();
+    });
+
+    expect(consoleSpy.log).toHaveBeenCalled();
+    const logCall = consoleSpy.log.mock.calls[0];
+    expect(logCall.join(' ')).toContain('State changed');
+    expect(logCall.join(' ')).toContain('(entire state)'); // Without proxy tracking individual properties
+  });
+
+  it('should log detailed information with detailed level', () => {
+    plugin = new RenderLoggingPlugin({ enabled: true, level: 'detailed' });
+    Blac.getInstance().plugins.add(plugin);
+
+    const { result } = renderHook(() => useBloc(TestCubit));
+
+    // Clear logs from mount
+    consoleSpy.log.mockClear();
+    consoleSpy.group.mockClear();
+    consoleSpy.table.mockClear();
+
+    act(() => {
+      result.current[1].increment();
+    });
+
+    expect(consoleSpy.group).toHaveBeenCalled();
+    expect(consoleSpy.table).toHaveBeenCalled();
+
+    const tableData = consoleSpy.table.mock.calls[0][0];
+    // Since we haven't accessed specific properties, it shows '(entire state)'
+    expect(tableData).toHaveProperty('(entire state)');
+    expect(tableData['(entire state)']).toHaveProperty('old');
+    expect(tableData['(entire state)']).toHaveProperty('new');
+  });
+
+  it('should track dependency changes when using manual dependencies', () => {
+    plugin = new RenderLoggingPlugin({ enabled: true, level: 'normal' });
+    Blac.getInstance().plugins.add(plugin);
+
+    let depValue = 1;
+    const { result, rerender } = renderHook(() =>
+      useBloc(TestCubit, {
+        dependencies: () => [depValue],
+      }),
+    );
+
+    // Clear logs from mount
+    consoleSpy.log.mockClear();
+
+    // Change dependency
+    depValue = 2;
+    rerender();
+
+    expect(consoleSpy.log).toHaveBeenCalled();
+    const logCall = consoleSpy.log.mock.calls[0];
+    const logMessage = logCall.join(' ');
+
+    // The plugin logs "Manual dependencies changed" in the description
+    expect(logMessage).toContain('Manual dependencies changed');
+    // Verify it's logged as a dependency change (check for the emoji)
+    expect(logMessage).toContain('🔗');
+  });
+
+  it('should respect filter function', () => {
+    plugin = new RenderLoggingPlugin({
+      enabled: true,
+      filter: ({ blocName }) => blocName !== 'TestCubit',
+    });
+    Blac.getInstance().plugins.add(plugin);
+
+    const { result } = renderHook(() => useBloc(TestCubit));
+
+    act(() => {
+      result.current[1].increment();
+    });
+
+    expect(consoleSpy.log).not.toHaveBeenCalled();
+  });
+
+  it('should group consecutive rerenders when groupRerenders is enabled', async () => {
+    plugin = new RenderLoggingPlugin({
+      enabled: true,
+      groupRerenders: true,
+    });
+    Blac.getInstance().plugins.add(plugin);
+
+    const { result } = renderHook(() => useBloc(TestCubit));
+
+    // Clear logs from mount
+    consoleSpy.log.mockClear();
+    consoleSpy.group.mockClear();
+
+    // Multiple rapid state changes - React may batch these
+    act(() => {
+      result.current[1].increment();
+    });
+
+    act(() => {
+      result.current[1].increment();
+    });
+
+    act(() => {
+      result.current[1].increment();
+    });
+
+    // Wait for debounce
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(consoleSpy.group).toHaveBeenCalled();
+    const groupCall = consoleSpy.group.mock.calls[0][0];
+    // Should have at least 2 renders (React may batch some updates)
+    expect(groupCall).toMatch(/rendered \d+ times/);
+    // Verify it grouped multiple renders
+    expect(
+      parseInt(groupCall.match(/rendered (\d+) times/)?.[1] || '0'),
+    ).toBeGreaterThanOrEqual(2);
+  });
+
+  it('should track multiple state properties changes', () => {
+    plugin = new RenderLoggingPlugin({ enabled: true, level: 'normal' });
+    Blac.getInstance().plugins.add(plugin);
+
+    const { result } = renderHook(() => useBloc(TestCubit));
+
+    // Clear logs from mount
+    consoleSpy.log.mockClear();
+
+    // Change all properties
+    act(() => {
+      result.current[1].changeAll();
+    });
+
+    expect(consoleSpy.log).toHaveBeenCalled();
+    const logCall = consoleSpy.log.mock.calls[0].join(' ');
+    expect(logCall).toContain('(entire state)'); // Without proxy tracking, all properties changed
+  });
+
+  it('should show mount reason for first render', () => {
+    plugin = new RenderLoggingPlugin({ enabled: true });
+    Blac.getInstance().plugins.add(plugin);
+
+    renderHook(() => useBloc(TestCubit));
+
+    expect(consoleSpy.log).toHaveBeenCalled();
+    const logCall = consoleSpy.log.mock.calls[0];
+    expect(logCall.join(' ')).toContain('mount');
+    expect(logCall.join(' ')).toContain('Component mounted');
+  });
+
+  it('should include stack trace in detailed mode when enabled', () => {
+    plugin = new RenderLoggingPlugin({
+      enabled: true,
+      level: 'detailed',
+      includeStackTrace: true,
+    });
+    Blac.getInstance().plugins.add(plugin);
+
+    const { result } = renderHook(() => useBloc(TestCubit));
+
+    // Clear logs from mount
+    consoleSpy.log.mockClear();
+    consoleSpy.group.mockClear();
+
+    act(() => {
+      result.current[1].increment();
+    });
+
+    // In detailed mode with stack trace, it logs the stack
+    const logCalls = consoleSpy.log.mock.calls;
+    const hasStackTrace = logCalls.some((call: any[]) =>
+      call.some(
+        (arg: any) => typeof arg === 'string' && arg.includes('Stack trace:'),
+      ),
+    );
+    expect(hasStackTrace).toBe(true);
+  });
+});

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

@@ -0,0 +1,377 @@
+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();
+    }
+  });
+});