@qlover/create-app 0.7.15 → 0.9.0

package/dist/templates/react-app/__tests__/src/core/bootstraps/BootstrapClient.test.ts

@@ -0,0 +1,153 @@
+/**
+ * BootstrapClient test-suite
+ *
+ * Coverage:
+ * 1. main method       – Bootstrap client main flow tests
+ * 2. parameter validation – Input parameter validation tests
+ * 3. error handling    – Error handling tests
+ * 4. integration       – Bootstrap flow integration tests
+ */
+
+import { testIOC } from '@__tests__/__mocks__/testIOC/TestIOC';
+import { I, type IOCIdentifierMap } from '@config/IOCIdentifier';
+import type { BootstrapClientArgs } from '@/core/bootstraps/BootstrapClient';
+import { BootstrapClient } from '@/core/bootstraps/BootstrapClient';
+import type { BootstrapsRegistryInterface } from '@/core/bootstraps/BootstrapsRegistry';
+import * as globals from '@/core/globals';
+import type {
+  BootstrapExecutorPlugin,
+  IOCContainerInterface,
+  IOCFunctionInterface
+} from '@qlover/corekit-bridge';
+import type { ExecutorPlugin } from '@qlover/fe-corekit';
+
+describe('BootstrapClient', () => {
+  describe('bootstrap start flow', () => {
+    const mockRoot = {
+      location: { href: 'http://localhost:3000/en' }
+    };
+
+    const testBootstrapPlugin: BootstrapExecutorPlugin = {
+      pluginName: 'test-bootstrap-1',
+      onExec: vi.fn().mockResolvedValue(undefined)
+    };
+
+    it('should bootstrap real strapup flow', async () => {
+      // 将 mock 函数提取出来，以便验证是否被调用
+      const mockRegister = vi.fn().mockReturnValue([testBootstrapPlugin]);
+
+      class TestBootstrapsRegistry implements BootstrapsRegistryInterface {
+        register = mockRegister;
+      }
+
+      const args: BootstrapClientArgs = {
+        root: mockRoot,
+        bootHref: mockRoot.location.href,
+        ioc: testIOC,
+        RegistryClass: TestBootstrapsRegistry
+      };
+
+      const result = await BootstrapClient.main(args);
+
+      expect(result).toEqual(args);
+      expect(globals.logger.info).toHaveBeenCalledWith('bootstrap start...');
+      expect(testBootstrapPlugin.onExec).toHaveBeenCalled();
+      // 验证 register 方法是否被调用
+      expect(mockRegister).toHaveBeenCalled();
+    });
+
+    it('should handle bootstrap I18nService', async () => {
+      // 将 mock 函数提取出来，以便验证是否被调用
+      const mockRegister = vi
+        .fn()
+        .mockImplementationOnce(
+          (
+            ioc: IOCFunctionInterface<IOCIdentifierMap, IOCContainerInterface>
+          ) => {
+            // TestIocRegister 中已经注册了，无法bind
+            return [ioc.get(I.I18nServiceInterface)];
+          }
+        );
+
+      class TestBootstrapsRegistry implements BootstrapsRegistryInterface {
+        register = mockRegister;
+      }
+
+      const args: BootstrapClientArgs = {
+        root: mockRoot,
+        bootHref: mockRoot.location.href,
+        ioc: testIOC,
+        RegistryClass: TestBootstrapsRegistry
+      };
+
+      await BootstrapClient.main(args);
+
+      const ioc = testIOC.getIoc();
+      expect(mockRegister).toBeCalled();
+      expect(ioc).toBeDefined();
+
+      const i18nService = ioc!.get(I.I18nServiceInterface);
+      expect(i18nService).toBeDefined();
+      // @ts-ignore
+      expect(i18nService.pathname).toBe(args.bootHref);
+
+      // mock i18n set language to en
+      i18nService.emit({ ...i18nService.state, language: 'en' });
+
+      expect(i18nService.state.language).toBe('en');
+    });
+
+    it('should handle bootstrap UserApiBootstarp', async () => {
+      const mockUserService: ExecutorPlugin = {
+        pluginName: 'TestUserService',
+        onBefore: vi.fn().mockResolvedValue(undefined)
+      };
+      // 将 mock 函数提取出来，以便验证是否被调用
+      const mockRegister = vi
+        .fn()
+        .mockImplementationOnce(
+          (
+            ioc: IOCFunctionInterface<IOCIdentifierMap, IOCContainerInterface>
+          ) => {
+            return [ioc.get(I.UserServiceInterface)];
+          }
+        );
+
+      class TestBootstrapsRegistry implements BootstrapsRegistryInterface {
+        register = mockRegister;
+      }
+
+      const args: BootstrapClientArgs = {
+        root: mockRoot,
+        bootHref: mockRoot.location.href,
+        ioc: testIOC,
+        iocRegister: {
+          register: vi
+            .fn()
+            .mockImplementationOnce(
+              (
+                ioc: IOCFunctionInterface<
+                  IOCIdentifierMap,
+                  IOCContainerInterface
+                >
+              ) => {
+                ioc.bind(I.UserServiceInterface, mockUserService as any);
+              }
+            )
+        },
+        RegistryClass: TestBootstrapsRegistry
+      };
+
+      await BootstrapClient.main(args);
+      const ioc = testIOC.getIoc();
+      expect(ioc).toBeDefined();
+
+      const userService = ioc!.get(I.UserServiceInterface);
+
+      expect(userService).toBeDefined();
+      expect(userService).toEqual(mockUserService);
+      expect(userService.pluginName).toBe('TestUserService');
+      expect(userService.onBefore).toBeCalled();
+    });
+  });
+});

package/dist/templates/react-app/__tests__/src/core/bootstraps/BootstrapsApp.test.ts

@@ -1,10 +1,10 @@
-import { InversifyContainer } from '@/base/cases/InversifyContainer';
-import { BootstrapApp } from '@/core/bootstraps/BootstrapApp';
-import type { BootstrapAppArgs } from '@/core/bootstraps/BootstrapApp';
+import { browserGlobalsName } from '@config/common';
 import { createIOCFunction } from '@qlover/corekit-bridge';
+import { InversifyContainer } from '@/base/cases/InversifyContainer';
+import { BootstrapClient } from '@/core/bootstraps/BootstrapClient';
+import type { BootstrapClientArgs } from '@/core/bootstraps/BootstrapClient';
 import type { IOCIdentifierMap } from '@config/IOCIdentifier';
 import { name, version } from '../../../../package.json';
-import { browserGlobalsName } from '@config/common';
 
 // Mock IocRegisterImpl to properly handle registration
 vi.mock('@/core/registers/IocRegisterImpl', () => ({
@@ -25,7 +25,7 @@ vi.mock('@/core/bootstraps/BootstrapsRegistry', () => ({
 }));
 
 describe('BootstrapApp', () => {
-  let mockArgs: BootstrapAppArgs;
+  let mockArgs: BootstrapClientArgs;
   let mockIOC: ReturnType<typeof createIOCFunction<IOCIdentifierMap>>;
 
   beforeEach(() => {
@@ -40,13 +40,15 @@ describe('BootstrapApp', () => {
     mockArgs = {
       root: {},
       bootHref: 'http://localhost:3000',
-      IOC: mockIOC
+      ioc: {
+        create: vi.fn().mockReturnValue(mockIOC)
+      }
     };
   });
 
   describe('main', () => {
     it('should initialize bootstrap successfully', async () => {
-      const result = await BootstrapApp.main(mockArgs);
+      const result = await BootstrapClient.main(mockArgs);
 
       expect(result.bootHref).toBe('http://localhost:3000');
       // default inject env,globals var, ioc

package/dist/templates/react-app/__tests__/src/main.integration.test.tsx

@@ -1,4 +1,3 @@
-import { describe, it, expect, beforeAll, afterAll, beforeEach } from 'vitest';
 import { readFileSync, existsSync } from 'fs';
 import { join } from 'path';
 
@@ -41,7 +40,7 @@ describe('main.tsx Integration Tests', () => {
 
     // Check if it contains necessary imports
     expect(content).toContain('import');
-    expect(content).toContain('BootstrapApp');
+    expect(content).toContain('BootstrapClient');
     expect(content).toContain('createRoot');
   });
 
@@ -51,11 +50,11 @@ describe('main.tsx Integration Tests', () => {
     expect(existsSync(appPath)).toBe(true);
   });
 
-  it('should have BootstrapApp.ts file', () => {
-    // Test if BootstrapApp.ts file exists
+  it('should have BootstrapClient.ts file', () => {
+    // Test if BootstrapClient.ts file exists
     const bootstrapPath = join(
       process.cwd(),
-      'src/core/bootstraps/BootstrapApp.ts'
+      'src/core/bootstraps/BootstrapClient.ts'
     );
     expect(existsSync(bootstrapPath)).toBe(true);
   });

package/dist/templates/react-app/__tests__/src/main.test.tsx

@@ -1,8 +1,8 @@
-import { BootstrapApp } from '@/core/bootstraps/BootstrapApp';
+import { BootstrapClient } from '@/core/bootstraps/BootstrapClient';
 
 // Mock BootstrapApp
-vi.mock('@/core/bootstraps/BootstrapApp', () => ({
-  BootstrapApp: {
+vi.mock('@/core/bootstraps/BootstrapClient', () => ({
+  BootstrapClient: {
     main: vi.fn()
   }
 }));
@@ -33,7 +33,7 @@ describe('main.tsx', () => {
   describe('BootstrapApp initialization', () => {
     it('should call BootstrapApp.main()', async () => {
       await import('@/main');
-      expect(BootstrapApp.main).toHaveBeenCalledTimes(1);
+      expect(BootstrapClient.main).toHaveBeenCalledTimes(1);
     });
   });
 

package/dist/templates/react-app/__tests__/src/uikit/components/BaseHeader.test.tsx

@@ -1,86 +1,95 @@
+import { BootstrapTest } from '@__mocks__/BootstrapTest';
+import { TestApp } from '@__mocks__/components';
+import { I } from '@config/IOCIdentifier';
 import { render, screen } from '@testing-library/react';
-import { vi, expect } from 'vitest';
-import BaseHeader from '@/uikit/components/BaseHeader';
-import { PublicAssetsPath } from '@/base/cases/PublicAssetsPath';
+import type { IOCRegister } from '@/base/port/IOCInterface';
+import { UserService } from '@/base/services/UserService';
+import { BaseHeader } from '@/uikit/components/BaseHeader';
 
-// Mock dependencies
-const mockPublicAssetsPath = new PublicAssetsPath('');
-
-vi.mock('@/core/IOC', () => ({
-  IOC: vi.fn((key) => {
-    if (key === 'AppConfig') {
-      return { appName: 'Test App' };
-    }
-    if (key === PublicAssetsPath) {
-      return mockPublicAssetsPath;
-    }
-    return {};
-  })
-}));
-
-// Mock child components
-vi.mock('@/uikit/components/ThemeSwitcher', () => ({
-  default: () => <div data-testid="theme-switcher">Theme Switcher</div>
-}));
-
-interface LocaleLinkProps {
-  children: React.ReactNode;
-  href: string;
-  className?: string;
-}
-
-vi.mock('@/uikit/components/LocaleLink', () => ({
-  default: ({ children, href, className }: LocaleLinkProps) => (
-    <a href={href} className={className} data-testid="locale-link">
-      {children}
-    </a>
-  )
-}));
-
-vi.mock('@/uikit/components/LanguageSwitcher', () => ({
-  default: () => <div data-testid="language-switcher">Language Switcher</div>
-}));
-
-vi.mock('@/uikit/components/LogoutButton', () => ({
-  default: () => <div data-testid="logout-button">Logout</div>
-}));
+const BaseHeaderRegister: IOCRegister = {
+  register(ioc): void {
+    ioc.bind(I.UserServiceInterface, ioc.get(UserService));
+  }
+};
 
 describe('BaseHeader', () => {
+  beforeAll(async () => {
+    await BootstrapTest.main({
+      root: globalThis,
+      bootHref: 'http://localhost:3000/en/test',
+      iocRegister: BaseHeaderRegister
+    });
+  });
+
   it('renders header with correct structure', () => {
-    render(<BaseHeader />);
-    expect(screen.getByTestId('base-header')).toBeDefined();
+    render(
+      <TestApp>
+        <BaseHeader />
+      </TestApp>
+    );
+
+    const header = screen.getByTestId('BaseHeader');
+    expect(header).toBeDefined();
   });
 
   it('renders logo and app name correctly', () => {
-    render(<BaseHeader />);
-    const logo = screen.getByTestId('base-header-logo');
-    const appName = screen.getByTestId('base-header-app-name');
+    render(
+      <TestApp>
+        <BaseHeader />
+      </TestApp>
+    );
+
+    const logo = screen.getByTestId('BaseHeader-logo');
+    const appName = screen.getByTestId('BaseHeader-app-name');
 
     expect(logo).toBeDefined();
-    expect(logo.getAttribute('src')).toBe('/logo.svg');
     expect(logo.getAttribute('alt')).toBe('logo');
     expect(appName).toBeDefined();
-    expect(appName.textContent).toBe('Test App');
+    expect(appName.textContent).toBeTruthy();
   });
 
   it('renders theme and language switchers', () => {
-    render(<BaseHeader />);
-    expect(screen.getByTestId('theme-switcher')).toBeDefined();
-    expect(screen.getByTestId('language-switcher')).toBeDefined();
+    render(
+      <TestApp>
+        <BaseHeader />
+      </TestApp>
+    );
+
+    // Note: These components render as Ant Design Select components
+    // We can verify they exist by checking for their parent containers
+    const header = screen.getByTestId('BaseHeader');
+    expect(header).toBeDefined();
+    // The actual Select components might not have data-testid in production code
   });
 
   it('renders logout button when showLogoutButton is true', () => {
-    render(<BaseHeader showLogoutButton />);
-    expect(screen.getByTestId('logout-button')).toBeDefined();
+    render(
+      <TestApp>
+        <BaseHeader showLogoutButton />
+      </TestApp>
+    );
+
+    const logoutButton = screen.getByTestId('LogoutButton');
+    expect(logoutButton).toBeDefined();
   });
 
   it('does not render logout button when showLogoutButton is false', () => {
-    render(<BaseHeader showLogoutButton={false} />);
-    expect(screen.queryByTestId('logout-button')).toBeNull();
+    render(
+      <TestApp>
+        <BaseHeader showLogoutButton={false} />
+      </TestApp>
+    );
+
+    expect(screen.queryByTestId('LogoutButton')).toBeNull();
   });
 
   it('renders home link correctly', () => {
-    render(<BaseHeader />);
+    render(
+      <TestApp>
+        <BaseHeader />
+      </TestApp>
+    );
+
     const link = screen.getByTestId('locale-link');
     expect(link).toBeDefined();
     expect(link.getAttribute('href')).toBe('/');

package/dist/templates/react-app/__tests__/src/uikit/components/chatMessage/ChatRoot.test.tsx

@@ -0,0 +1,274 @@
+import { BootstrapTest } from '@__mocks__/BootstrapTest';
+import { TestApp } from '@__mocks__/components';
+import * as chatI18nKeys from '@config/Identifier/components/component.chatMessage';
+import { ChatMessageRole, ChatMessageStore } from '@qlover/corekit-bridge';
+import { render, screen } from '@testing-library/react';
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { logger } from '@/core/globals';
+import { ChatMessageBridge } from '@/uikit/components/chatMessage/ChatMessageBridge';
+import { ChatRoot } from '@/uikit/components/chatMessage/ChatRoot';
+import type { ChatMessageI18nInterface } from '@config/i18n/chatMessageI18n';
+import type { MessageGetwayInterface } from '@qlover/corekit-bridge';
+
+// Mock i18n values matching the actual i18n keys
+const mockI18n: ChatMessageI18nInterface = {
+  send: chatI18nKeys.COMPONENT_CHAT_SEND,
+  stop: chatI18nKeys.COMPONENT_CHAT_STOP,
+  loading: chatI18nKeys.COMPONENT_CHAT_LOADING,
+  inputPlaceholder: chatI18nKeys.COMPONENT_CHAT_INPUT_PLACEHOLDER,
+  empty: chatI18nKeys.COMPONENT_CHAT_EMPTY,
+  start: chatI18nKeys.COMPONENT_CHAT_START,
+  retry: chatI18nKeys.COMPONENT_CHAT_RETRY,
+  duration: chatI18nKeys.COMPONENT_CHAT_DURATION
+};
+
+// Simple mock gateway for testing
+class MockMessageGateway implements MessageGetwayInterface {
+  sendMessage = vi.fn();
+}
+
+describe('ChatRoot Component', () => {
+  let messagesStore: ChatMessageStore<string>;
+  let mockGateway: MockMessageGateway;
+  let bridge: ChatMessageBridge<string>;
+
+  beforeAll(async () => {
+    await BootstrapTest.main({
+      root: globalThis,
+      bootHref: 'http://localhost:3000/en/test'
+    });
+  });
+
+  beforeEach(() => {
+    // Create fresh instances for each test
+    messagesStore = new ChatMessageStore<string>();
+    mockGateway = new MockMessageGateway();
+    bridge = new ChatMessageBridge<string>(messagesStore, {
+      gateway: mockGateway,
+      logger: logger,
+      senderName: 'TestSender',
+      gatewayOptions: {}
+    });
+
+    // Reset mocks
+    vi.clearAllMocks();
+  });
+
+  describe('Component Rendering', () => {
+    it('should render ChatRoot with all required components', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Check main container
+      const chatRoot = screen.getByTestId('ChatRoot');
+      expect(chatRoot).toBeDefined();
+
+      // Check MessagesList component
+      const messagesList = screen.getByTestId('MessagesList');
+      expect(messagesList).toBeDefined();
+
+      // Check FocusBar component
+      const focusBar = screen.getByTestId('FocusBar');
+      expect(focusBar).toBeDefined();
+    });
+
+    it('should display empty state initially', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Empty state text should be visible
+      // Note: The actual text will be the i18n key, not the translated text in tests
+      const emptyText = screen.getByText(/component_chat:empty/i);
+      expect(emptyText).toBeDefined();
+    });
+
+    it('should render textarea for input', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toBeDefined();
+    });
+
+    it('should render send button', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const sendButton = screen.getByTestId('FocusBar-Button-Send');
+      expect(sendButton).toBeDefined();
+    });
+  });
+
+  describe('Props Integration', () => {
+    it('should accept and use bridge prop', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Verify bridge is connected by checking store state
+      const state = messagesStore.state;
+      expect(state).toBeDefined();
+      expect(state.messages).toEqual([]);
+      expect(state.draftMessages).toEqual([]);
+    });
+
+    it('should accept different bridge instances', () => {
+      const newStore = new ChatMessageStore<string>();
+      const newBridge = new ChatMessageBridge<string>(newStore, {
+        gateway: mockGateway,
+        logger: logger,
+        senderName: 'NewTestSender',
+        gatewayOptions: {}
+      });
+
+      render(
+        <TestApp>
+          <ChatRoot bridge={newBridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const chatRoot = screen.getByTestId('ChatRoot');
+      expect(chatRoot).toBeDefined();
+    });
+  });
+
+  describe('Bridge Integration', () => {
+    it('should connect to message store through bridge', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Bridge should have access to store
+      const messageStore = bridge.getMessageStore();
+      expect(messageStore).toBe(messagesStore);
+    });
+
+    it('should update UI when content is changed via bridge', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Initially, send button should be disabled (no content)
+      const sendButton = screen.getByTestId('FocusBar-Button-Send');
+      expect(sendButton).toHaveProperty('disabled', true);
+
+      // Change content via bridge
+      bridge.onChangeContent('Test message');
+
+      // Now send button should be enabled (has content)
+      // Note: This requires the component to re-render based on store updates
+      const state = messagesStore.state;
+      expect(state.draftMessages.length).toBeGreaterThan(0);
+      expect(state.draftMessages[0]?.content).toBe('Test message');
+    });
+  });
+
+  describe('Store State Management', () => {
+    it('should reflect message store state', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Initial state should be empty
+      const initialState = messagesStore.state;
+      expect(initialState.messages).toEqual([]);
+      expect(initialState.draftMessages).toEqual([]);
+      // These properties might be undefined initially, which is fine
+      expect(initialState.disabledSend).toBeFalsy();
+      expect(initialState.streaming).toBeFalsy();
+    });
+
+    it('should update when messages are added to store', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Add a message to the store
+      messagesStore.addMessage({
+        id: 'test-1',
+        role: ChatMessageRole.USER,
+        content: 'Test message',
+        loading: false,
+        startTime: Date.now()
+      });
+
+      // Verify message is in store
+      const state = messagesStore.state;
+      expect(state.messages.length).toBe(1);
+      expect(state.messages[0]?.content).toBe('Test message');
+    });
+  });
+
+  describe('Button States', () => {
+    it('should have disabled send button when no content', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const sendButton = screen.getByTestId('FocusBar-Button-Send');
+      expect(sendButton).toHaveProperty('disabled', true);
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('should have correct CSS classes for layout', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const chatRoot = screen.getByTestId('ChatRoot');
+      expect(chatRoot.className).toContain('flex');
+      expect(chatRoot.className).toContain('flex-col');
+    });
+
+    it('should render MessagesList with correct data-testid', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const messagesList = screen.getByTestId('MessagesList');
+      expect(messagesList).toBeDefined();
+      expect(messagesList.className).toContain('overflow-y-auto');
+    });
+
+    it('should render FocusBar with correct data-testid', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const focusBar = screen.getByTestId('FocusBar');
+      expect(focusBar).toBeDefined();
+      expect(focusBar.className).toContain('border-t');
+    });
+  });
+});