@rpg-engine/long-bow 0.8.219 → 0.8.221

package/src/components/Store/__test__/MetadataCollector.spec.tsx

@@ -1,95 +1,47 @@
-// @ts-nocheck - Disable type checking for this file
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
 import { MetadataType } from '@rpg-engine/shared';
 import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
 import { CharacterSkinSelectionModal } from '../../Character/CharacterSkinSelectionModal';
 import { MetadataCollector } from '../MetadataCollector';
 
-// If MetadataType is not properly loaded, mock it with the same values
 jest.mock('@rpg-engine/shared', () => ({
-  // Keep any real values from the shared module
   ...jest.requireActual('@rpg-engine/shared'),
-  // Override MetadataType with our mock values
   MetadataType: {
     None: 'None',
-    CharacterSkin: 'CharacterSkin'
-  }
+    CharacterSkin: 'CharacterSkin',
+  },
 }));
 
-// Mock the CharacterSkinSelectionModal component
 jest.mock('../../Character/CharacterSkinSelectionModal', () => ({
   CharacterSkinSelectionModal: jest.fn(() => <div>Skin Selection Modal</div>),
 }));
 
-// We need to mock the actual MetadataCollector component
-jest.mock('../MetadataCollector', () => ({
-  MetadataCollector: jest.fn(({ metadataType, config, onCollect, onCancel }) => {
-    // Set up cleanup function for the useEffect tests
-    const React = require('react');
-    React.useEffect(() => {
-      return () => {
-        if (globalThis.__metadataResolvers) {
-          onCancel();
-        }
-      };
-    }, [onCancel]);
-    
-    // This mock simulates the switch statement in the original component
-    if (metadataType === 'CharacterSkin') {
-      // Call the CharacterSkinSelectionModal
-      const CharacterSkinMock = require('../../Character/CharacterSkinSelectionModal').CharacterSkinSelectionModal;
-      CharacterSkinMock({
-        isOpen: true,
-        onClose: onCancel,
-        onConfirm: (selectedSkin) => onCollect({ selectedSkin }),
-        availableCharacters: config.availableCharacters || [],
-        atlasJSON: config.atlasJSON,
-        atlasIMG: config.atlasIMG,
-        initialSelectedSkin: config.initialSelectedSkin
-      });
-      return null;
-    } else {
-      // Warn for unhandled types and auto-cancel
-      console.warn(`No collector implemented for metadata type: ${metadataType}`);
-      setTimeout(onCancel, 0);
-      return null;
-    }
-  })
-}));
-
-// Mock globals and setup
-let cleanupFunction;
-let mockOnCollect;
-let mockOnCancel;
-
-// Mock window.__metadataResolvers
-Object.defineProperty(window, '__metadataResolvers', {
-  writable: true,
-  value: undefined
-});
-
 describe('MetadataCollector', () => {
+  let container;
+  let mockOnCollect;
+  let mockOnCancel;
+
   beforeEach(() => {
-    // Reset mocks
     jest.clearAllMocks();
     mockOnCollect = jest.fn();
     mockOnCancel = jest.fn();
-    cleanupFunction = undefined;
-    
-    // Clear window.__metadataResolvers
-    window.__metadataResolvers = undefined;
-    
-    // Mock React's useEffect to capture cleanup function
-    jest.spyOn(React, 'useEffect').mockImplementation(cb => {
-      cleanupFunction = cb();
-    });
+    jest.useFakeTimers();
+    container = document.createElement('div');
+    document.body.appendChild(container);
   });
 
   afterEach(() => {
-    // Restore original implementation
-    React.useEffect.mockRestore();
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+    jest.useRealTimers();
   });
 
-  it('should render CharacterSkinSelectionModal for CharacterSkin metadata type', () => {
+  it('renders CharacterSkinSelectionModal for CharacterSkin metadata type', () => {
     const mockConfig = {
       availableCharacters: ['char1', 'char2'],
       atlasJSON: { frames: {} },
@@ -97,133 +49,111 @@ describe('MetadataCollector', () => {
       initialSelectedSkin: 'char1',
     };
 
-    // Render the component (this is simple in our mock setup)
-    MetadataCollector({
-      metadataType: MetadataType.CharacterSkin,
-      config: mockConfig,
-      onCollect: mockOnCollect,
-      onCancel: mockOnCancel,
+    act(() => {
+      ReactDOM.render(
+        <MetadataCollector
+          metadataType={MetadataType.CharacterSkin}
+          config={mockConfig}
+          onCollect={mockOnCollect}
+          onCancel={mockOnCancel}
+        />,
+        container
+      );
     });
 
-    // Verify CharacterSkinSelectionModal was called
     expect(CharacterSkinSelectionModal).toHaveBeenCalled();
-    
-    // Get the first call arguments
     const callArgs = CharacterSkinSelectionModal.mock.calls[0][0];
-    
-    // Verify individual properties
+
     expect(callArgs.isOpen).toBe(true);
-    expect(callArgs.onClose).toBe(mockOnCancel);
     expect(callArgs.availableCharacters).toEqual(mockConfig.availableCharacters);
     expect(callArgs.atlasJSON).toEqual(mockConfig.atlasJSON);
     expect(callArgs.atlasIMG).toEqual(mockConfig.atlasIMG);
     expect(callArgs.initialSelectedSkin).toEqual(mockConfig.initialSelectedSkin);
   });
 
-  it('should call onCollect when CharacterSkinSelectionModal confirms selection', () => {
-    const mockConfig = {
-      availableCharacters: ['char1', 'char2'],
-    };
-
-    // Mock CharacterSkinSelectionModal to simulate calling onConfirm
-    const { CharacterSkinSelectionModal } = require('../../Character/CharacterSkinSelectionModal');
-    CharacterSkinSelectionModal.mockImplementationOnce(props => {
-      // Immediately call onConfirm with a mock skin
-      const mockSelectedSkin = 'char1';
-      props.onConfirm(mockSelectedSkin);
-      return <div>Skin Selection Modal</div>;
+  it('collects once without cancelling again when the modal closes after confirm', () => {
+    act(() => {
+      ReactDOM.render(
+        <MetadataCollector
+          metadataType={MetadataType.CharacterSkin}
+          config={{ availableCharacters: ['char1', 'char2'] }}
+          onCollect={mockOnCollect}
+          onCancel={mockOnCancel}
+        />,
+        container
+      );
     });
 
-    // Render the component
-    MetadataCollector({
-      metadataType: MetadataType.CharacterSkin,
-      config: mockConfig,
-      onCollect: mockOnCollect,
-      onCancel: mockOnCancel,
-    });
-    
-    // Verify onCollect was called with the right parameters
-    expect(mockOnCollect).toHaveBeenCalledWith({ selectedSkin: 'char1' });
-  });
-
-  it('should log warning and auto-cancel for unhandled metadata types', () => {
-    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-    
-    // Mock setTimeout to execute callback immediately
-    jest.spyOn(global, 'setTimeout').mockImplementation(callback => {
-      callback();
-      return 0;
-    });
+    const callArgs = CharacterSkinSelectionModal.mock.calls[0][0];
 
-    // Render the component with unknown metadata type
-    MetadataCollector({
-      metadataType: 'UnknownType',
-      config: {},
-      onCollect: mockOnCollect,
-      onCancel: mockOnCancel,
+    act(() => {
+      callArgs.onConfirm('char1');
+      callArgs.onClose();
     });
 
-    // Verify warning was logged
-    expect(warnSpy).toHaveBeenCalledWith(
-      expect.stringContaining('No collector implemented for metadata type: UnknownType')
-    );
+    expect(mockOnCollect).toHaveBeenCalledWith({ selectedSkin: 'char1' });
+    expect(mockOnCollect).toHaveBeenCalledTimes(1);
+    expect(mockOnCancel).not.toHaveBeenCalled();
 
-    // Verify onCancel was called
-    expect(mockOnCancel).toHaveBeenCalled();
+    act(() => {
+      ReactDOM.unmountComponentAtNode(container);
+    });
 
-    // Cleanup
-    warnSpy.mockRestore();
-    jest.spyOn(global, 'setTimeout').mockRestore();
+    expect(mockOnCancel).not.toHaveBeenCalled();
   });
 
-  it('should call onCancel when unmounted if collection is in progress', () => {
-    // Set up window.__metadataResolvers to simulate active collection
-    window.__metadataResolvers = {
-      resolve: jest.fn(),
-      item: { key: 'test-item' },
-    };
+  it('cancels once when closed and does not cancel again on unmount', () => {
+    act(() => {
+      ReactDOM.render(
+        <MetadataCollector
+          metadataType={MetadataType.CharacterSkin}
+          config={{ availableCharacters: ['char1', 'char2'] }}
+          onCollect={mockOnCollect}
+          onCancel={mockOnCancel}
+        />,
+        container
+      );
+    });
+
+    const callArgs = CharacterSkinSelectionModal.mock.calls[0][0];
 
-    // Render the component
-    MetadataCollector({
-      metadataType: MetadataType.CharacterSkin,
-      config: {},
-      onCollect: mockOnCollect,
-      onCancel: mockOnCancel,
+    act(() => {
+      callArgs.onClose();
     });
 
-    // Reset the mock before calling cleanup to see if it gets called
-    mockOnCancel.mockReset();
+    expect(mockOnCancel).toHaveBeenCalledTimes(1);
 
-    // Simulate unmount by calling the cleanup function
-    if (cleanupFunction) {
-      cleanupFunction();
-    }
+    act(() => {
+      ReactDOM.unmountComponentAtNode(container);
+    });
 
-    // Verify onCancel was called
-    expect(mockOnCancel).toHaveBeenCalled();
+    expect(mockOnCancel).toHaveBeenCalledTimes(1);
   });
 
-  it('should not call onCancel when unmounted if no collection is in progress', () => {
-    // Ensure window.__metadataResolvers is undefined
-    window.__metadataResolvers = undefined;
+  it('logs a warning and auto-cancels for unhandled metadata types', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
 
-    // Render the component
-    MetadataCollector({
-      metadataType: MetadataType.CharacterSkin,
-      config: {},
-      onCollect: mockOnCollect,
-      onCancel: mockOnCancel,
+    act(() => {
+      ReactDOM.render(
+        <MetadataCollector
+          metadataType={'UnknownType' as MetadataType}
+          config={{}}
+          onCollect={mockOnCollect}
+          onCancel={mockOnCancel}
+        />,
+        container
+      );
     });
 
-    // Reset the mock before calling cleanup to see if it gets called
-    mockOnCancel.mockReset();
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('No collector implemented for metadata type: UnknownType')
+    );
 
-    // Simulate unmount by calling the cleanup function
-    if (cleanupFunction) {
-      cleanupFunction();
-    }
+    act(() => {
+      jest.runAllTimers();
+    });
 
-    // Verify onCancel was not called
-    expect(mockOnCancel).not.toHaveBeenCalled();
+    expect(mockOnCancel).toHaveBeenCalledTimes(1);
+    warnSpy.mockRestore();
   });
-}); 
+});

package/src/components/Store/__test__/Store.spec.tsx

@@ -105,6 +105,9 @@ jest.mock('../hooks/useStoreCart', () => ({
     getTotalItems: () => 0,
     getTotalPrice: () => 0,
     isCartOpen: false,
+    isCollectingMetadata: false,
+    currentMetadataItem: null,
+    resolveMetadata: jest.fn(),
   }),
 }));
 
@@ -128,6 +131,7 @@ jest.mock('react-icons/fa', () => ({
   FaHistory: () => <span>history</span>,
   FaShoppingCart: () => <span>cart</span>,
   FaTicketAlt: () => <span>ticket</span>,
+  FaUsers: () => <span>users</span>,
   FaWallet: () => <span>wallet</span>,
 }));
 

package/src/components/Store/__test__/useStoreMetadata.spec.tsx

@@ -1,181 +1,83 @@
-// @ts-nocheck - Disable type checking for this file
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
 import { MetadataType } from '@rpg-engine/shared';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
 import { useStoreMetadata } from '../hooks/useStoreMetadata';
 
-// If MetadataType is not properly loaded, mock it with the same values
 jest.mock('@rpg-engine/shared', () => ({
-  // Keep any real values from the shared module
   ...jest.requireActual('@rpg-engine/shared'),
-  // Override MetadataType with our mock values
-  MetadataType: {
-    None: 'None',
-    CharacterSkin: 'CharacterSkin'
-  }
+  MetadataType: { None: 'None', CharacterSkin: 'CharacterSkin' },
 }));
 
-// Mock the useStoreMetadata hook
-jest.mock('../hooks/useStoreMetadata', () => {
-  const useSM = jest.fn().mockImplementation(() => {
-    const isCollectingMetadata = false;
-    
-    const collectMetadata = async (item) => {
-      // If no metadata type or None, return null immediately
-      if (!item.metadataType || item.metadataType === 'None') {
-        return null;
-      }
-      
-      // Setup for valid metadata types
-      globalThis.__metadataResolvers = {
-        resolve: (metadata) => {
-          // Clean up
-          globalThis.__metadataResolvers = undefined;
-          return metadata;
-        },
-        item
-      };
-      
-      // Handle the last test case specifically
-      if (item.key === 'item-character-skin-metadata-cancel') {
-        globalThis.__metadataResolvers = undefined; // Make sure it's cleaned up
-        return Promise.resolve(null);
-      }
-      
-      // Normal flow
-      return Promise.resolve({ selectedSkin: 'test-skin' });
-    };
-    
-    return {
-      isCollectingMetadata,
-      collectMetadata
-    };
-  });
-  
-  return { useStoreMetadata: useSM };
-});
+const itemNoMetadata = { key: 'plain', name: 'Plain', price: 100 };
+const itemCharSkin = { key: 'skin', name: 'Skin', price: 300, metadataType: 'CharacterSkin' };
 
-// Mock window.__metadataResolvers
-Object.defineProperty(window, '__metadataResolvers', {
-  writable: true,
-  value: undefined
-});
+// Render the hook in a real React component to satisfy Hook rules
+let hookResult;
+const TestComponent = () => {
+  hookResult = useStoreMetadata();
+  return null;
+};
 
 describe('useStoreMetadata', () => {
-  // Create test items
-  const mockItemNoMetadata = {
-    key: 'item-no-metadata',
-    name: 'Test Item 1',
-    price: 100,
-    textureAtlas: 'atlas',
-    textureKey: 'texture',
-    rarity: 'common',
-    allowedEquipSlotType: 'hand'
-  };
-
-  const mockItemWithNoneMetadata = {
-    key: 'item-none-metadata',
-    name: 'Test Item 2',
-    price: 200,
-    metadataType: MetadataType.None,
-    textureAtlas: 'atlas',
-    textureKey: 'texture',
-    rarity: 'common',
-    allowedEquipSlotType: 'hand'
-  };
-
-  const mockItemWithCharacterSkinMetadata = {
-    key: 'item-character-skin-metadata',
-    name: 'Test Item 3',
-    price: 300,
-    metadataType: MetadataType.CharacterSkin,
-    textureAtlas: 'atlas',
-    textureKey: 'texture',
-    rarity: 'common',
-    allowedEquipSlotType: 'hand'
-  };
-  
-  const mockItemWithCharacterSkinMetadataCancel = {
-    key: 'item-character-skin-metadata-cancel',
-    name: 'Test Item 4',
-    price: 300,
-    metadataType: MetadataType.CharacterSkin,
-    textureAtlas: 'atlas',
-    textureKey: 'texture',
-    rarity: 'common',
-    allowedEquipSlotType: 'hand'
-  };
+  let container;
 
   beforeEach(() => {
-    // Clear window.__metadataResolvers
-    window.__metadataResolvers = undefined;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    act(() => { ReactDOM.render(<TestComponent />, container); });
+  });
 
-    // Reset mocks
-    jest.clearAllMocks();
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
   });
 
-  it('should initialize with isCollectingMetadata set to false', () => {
-    const hook = useStoreMetadata();
-    expect(hook.isCollectingMetadata).toBe(false);
+  it('initializes with isCollectingMetadata false and no currentMetadataItem', () => {
+    expect(hookResult.isCollectingMetadata).toBe(false);
+    expect(hookResult.currentMetadataItem).toBeNull();
   });
 
-  it('should return null for items with no metadataType', async () => {
-    const hook = useStoreMetadata();
-    const result = await hook.collectMetadata(mockItemNoMetadata);
+  it('returns null immediately for items without metadataType', async () => {
+    const result = await hookResult.collectMetadata(itemNoMetadata);
     expect(result).toBeNull();
+    expect(hookResult.isCollectingMetadata).toBe(false);
   });
 
-  it('should return null for items with MetadataType.None', async () => {
-    const hook = useStoreMetadata();
-    const result = await hook.collectMetadata(mockItemWithNoneMetadata);
-    expect(result).toBeNull();
+  it('sets isCollectingMetadata and currentMetadataItem when collecting starts', () => {
+    act(() => { hookResult.collectMetadata(itemCharSkin); });
+    expect(hookResult.isCollectingMetadata).toBe(true);
+    expect(hookResult.currentMetadataItem).toBe(itemCharSkin);
+    // clean up
+    act(() => { hookResult.resolveMetadata(null); });
   });
 
-  it('should set up window.__metadataResolvers with the item for valid metadata types', async () => {
-    const hook = useStoreMetadata();
-    
-    // Create a spy for window.__metadataResolvers.resolve
-    const resolveSpy = jest.fn().mockReturnValue({ selectedSkin: 'test-skin' });
-    
-    // Start metadata collection
-    const metadataPromise = hook.collectMetadata(mockItemWithCharacterSkinMetadata);
-    
-    // Setup our mock resolver
-    if (globalThis.__metadataResolvers) {
-      const originalResolve = globalThis.__metadataResolvers.resolve;
-      globalThis.__metadataResolvers.resolve = function(metadata) {
-        resolveSpy(metadata);
-        return originalResolve(metadata);
-      };
-    }
-    
-    // Resolve the metadata
-    const mockMetadata = { selectedSkin: 'test-skin' };
-    if (globalThis.__metadataResolvers) {
-      globalThis.__metadataResolvers.resolve(mockMetadata);
-    }
-    
-    // Wait for the promise to resolve
-    const result = await metadataPromise;
-    
-    // Assertions
-    expect(result).toEqual(mockMetadata);
-    expect(resolveSpy).toHaveBeenCalledWith(mockMetadata);
-    expect(globalThis.__metadataResolvers).toBeUndefined(); // Should be cleaned up
+  it('resolves with metadata and resets state on resolveMetadata', async () => {
+    let promise;
+    act(() => { promise = hookResult.collectMetadata(itemCharSkin); });
+
+    const mockMetadata = { selectedSkin: 'warrior' };
+    act(() => { hookResult.resolveMetadata(mockMetadata); });
+
+    const resolved = await promise;
+    expect(resolved).toEqual(mockMetadata);
+    expect(hookResult.isCollectingMetadata).toBe(false);
+    expect(hookResult.currentMetadataItem).toBeNull();
   });
 
-  it('should clean up window.__metadataResolvers when collection is cancelled', async () => {
-    const hook = useStoreMetadata();
-    
-    // Make sure window.__metadataResolvers is undefined before starting
-    window.__metadataResolvers = undefined;
-    
-    // Start metadata collection with the special cancel item
-    const metadataPromise = hook.collectMetadata(mockItemWithCharacterSkinMetadataCancel);
-    
-    // Wait for the promise to resolve
-    const result = await metadataPromise;
-    
-    // Assertions
-    expect(result).toBeNull();
-    expect(window.__metadataResolvers).toBeUndefined(); // Should be cleaned up
+  it('resolves with null and resets state when cancelled', async () => {
+    let promise;
+    act(() => { promise = hookResult.collectMetadata(itemCharSkin); });
+
+    act(() => { hookResult.resolveMetadata(null); });
+
+    const resolved = await promise;
+    expect(resolved).toBeNull();
+    expect(hookResult.isCollectingMetadata).toBe(false);
+    expect(hookResult.currentMetadataItem).toBeNull();
   });
-}); 
+});

package/src/components/Store/__test__/useStoreTabs.spec.tsx

@@ -0,0 +1,69 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { useStoreTabs } from '../hooks/useStoreTabs';
+
+let hookResult;
+
+const TestComponent = (props) => {
+  hookResult = useStoreTabs(props);
+  return null;
+};
+
+describe('useStoreTabs', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
+
+  it('falls back to the next valid tab when the active tab disappears', () => {
+    act(() => {
+      ReactDOM.render(
+        <TestComponent tabOrder={['wallet', 'items']} hasWallet defaultActiveTab="wallet" />,
+        container
+      );
+    });
+
+    expect(hookResult.activeTab).toBe('wallet');
+    expect(hookResult.availableTabIds).toEqual(['wallet', 'items']);
+
+    act(() => {
+      ReactDOM.render(
+        <TestComponent tabOrder={['wallet', 'items']} defaultActiveTab="wallet" />,
+        container
+      );
+    });
+
+    expect(hookResult.activeTab).toBe('items');
+    expect(hookResult.availableTabIds).toEqual(['items']);
+  });
+
+  it('ignores tab changes for unavailable tabs', () => {
+    const onTabChange = jest.fn();
+
+    act(() => {
+      ReactDOM.render(
+        <TestComponent tabOrder={['items']} onTabChange={onTabChange} getItemCount={() => 3} />,
+        container
+      );
+    });
+
+    act(() => {
+      hookResult.handleTabChange('wallet');
+    });
+
+    expect(hookResult.activeTab).toBe('items');
+    expect(onTabChange).not.toHaveBeenCalled();
+  });
+});