@qlover/create-app 0.7.15 → 0.8.0

package/dist/templates/react-app/e2e/App.spec.ts

@@ -0,0 +1,319 @@
+import { baseNoLocaleRoutes } from '@config/app.router';
+import { useLocaleRoutes } from '@config/common';
+import { i18nConfig } from '@config/i18n/i18nConfig';
+import { themeConfig } from '@config/theme';
+import { test, expect } from './fixtures/base.fixture';
+import {
+  createStartWithUrlRegex,
+  localeRoutesEach
+} from './utils/test-helpers';
+import type { Page } from '@playwright/test';
+
+test.describe('App', () => {
+  test('should render the app component', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.locator('#root')).toBeVisible();
+  });
+
+  test.describe('locale routes', () => {
+    test('should handle locale routes correctly(useLocaleRoutes: true)', async ({
+      page,
+      fullURL
+    }) => {
+      test.skip(!useLocaleRoutes, 'Locale routes are disabled');
+
+      // use default locale: i18nConfig.fallbackLng
+      await page.goto('/');
+      await expect(page).toHaveURL(
+        createStartWithUrlRegex(fullURL, i18nConfig.fallbackLng)
+      );
+
+      // 访问所有支持的语言
+      for (const locale of i18nConfig.supportedLngs) {
+        await page.goto(`/${locale}`);
+        await expect(page).toHaveURL(createStartWithUrlRegex(fullURL, locale));
+      }
+
+      // 访问不存在的语言
+      await page.goto(`/ena`);
+
+      // 应该跳转到默认语言
+      if (i18nConfig.noValidRedirectFallbackLng) {
+        await expect(page).toHaveURL(
+          createStartWithUrlRegex(fullURL, i18nConfig.fallbackLng)
+        );
+      } else {
+        await expect(page).toHaveURL(createStartWithUrlRegex(fullURL, '404'));
+      }
+    });
+
+    test('should handle locale routes correctly(useLocaleRoutes: false)', async ({
+      page,
+      fullURL
+    }) => {
+      test.skip(useLocaleRoutes, 'Locale routes are enabled');
+
+      await page.goto('/');
+      await expect(page).toHaveURL(createStartWithUrlRegex(fullURL, ''));
+
+      // 访问不存在的语言, 或路由
+      await page.goto('/en'); //=> /router-prefix/en/login -> 404
+      await expect(page).toHaveURL(createStartWithUrlRegex(fullURL, '404'));
+      await expect(page.getByTestId('NotFound')).toBeVisible();
+    });
+
+    test('should render the client routes correctly(LanguageSwitcher.tsx)', async ({
+      page,
+      fullURL
+    }) => {
+      const testLocale = async (locale: string, targetLocale: string) => {
+        await page.goto(`/${locale}`);
+        const languageSwitcher = page.getByTestId('LanguageSwitcher');
+        await expect(languageSwitcher).toBeVisible();
+        await expect(page).toHaveURL(createStartWithUrlRegex(fullURL, locale));
+        await expect(languageSwitcher).toHaveAttribute(
+          'data-testvalue',
+          locale
+        );
+
+        // switch to targetLocale
+        await page.getByTestId('LanguageSwitcher').click();
+        const languageSwitcherSelect = page.getByTestId(
+          'LanguageSwitcherSelect'
+        );
+        await expect(languageSwitcherSelect).toBeVisible();
+
+        const targetOption = page.getByTestId(
+          `LanguageSwitcherOption-${targetLocale}`
+        );
+        await expect(targetOption).toBeVisible();
+        await targetOption.click();
+
+        await expect(page).toHaveURL(
+          createStartWithUrlRegex(fullURL, targetLocale)
+        );
+      };
+
+      const options = [
+        { locale: 'zh', targetLocale: 'en' },
+        { locale: 'en', targetLocale: 'zh' }
+      ];
+
+      for (const option of options) {
+        await testLocale(option.locale, option.targetLocale);
+      }
+    });
+  });
+
+  test.describe('theme tests', () => {
+    test('should handle theme routes correctly(default theme)', async ({
+      page
+    }) => {
+      await page.goto('/');
+
+      const systemTheme = 'light';
+      await expect(
+        page.locator(`html[data-theme="${systemTheme}"]`)
+      ).toBeVisible();
+
+      const switchTheme = async (theme: string, targetTheme: string) => {
+        const themeSwitcher = page.getByTestId('ThemeSwitcher');
+        await expect(themeSwitcher).toBeVisible();
+        await expect(themeSwitcher).toHaveAttribute('data-testvalue', theme);
+        await themeSwitcher.click();
+
+        const themeSwitcherSelect = page.getByTestId('ThemeSwitcherSelect');
+        await expect(themeSwitcherSelect).toBeVisible();
+        const themeOption = page
+          .getByTestId(`ThemeSwitcherOption-${targetTheme}`)
+          .first();
+
+        await expect(themeOption).toBeVisible();
+        await themeOption.click();
+
+        await expect(
+          page.locator(`html[data-theme="${targetTheme}"]`)
+        ).toBeVisible();
+      };
+
+      for (let i = 0; i < themeConfig.supportedThemes.length; i++) {
+        const theme = themeConfig.supportedThemes[i];
+        const targetTheme =
+          themeConfig.supportedThemes[i + 1] || themeConfig.supportedThemes[0];
+        await switchTheme(theme, targetTheme);
+      }
+    });
+
+    test('should use the real browser default theme(dark mode)', async ({
+      page
+    }) => {
+      // 验证系统检测到暗色模式
+      const systemTheme = 'dark';
+      // 在测试开始前设置浏览器为暗色模式
+      await page.emulateMedia({ colorScheme: systemTheme });
+
+      await page.goto('/');
+
+      await expect(
+        page.locator(`html[data-theme="${systemTheme}"]`)
+      ).toBeVisible();
+    });
+
+    test('should correctly cache the last theme', async ({ page }) => {
+      const systemTheme = 'dark';
+      await page.emulateMedia({ colorScheme: systemTheme });
+
+      await page.goto('/');
+      await expect(
+        page.locator(`html[data-theme="${systemTheme}"]`)
+      ).toBeVisible();
+
+      const switchTheme = async (theme: string, targetTheme: string) => {
+        const themeSwitcher = page.getByTestId('ThemeSwitcher');
+        await expect(themeSwitcher).toBeVisible();
+        await expect(themeSwitcher).toHaveAttribute('data-testvalue', theme);
+        await themeSwitcher.click();
+
+        const themeSwitcherSelect = page.getByTestId('ThemeSwitcherSelect');
+        await expect(themeSwitcherSelect).toBeVisible();
+        const themeOption = page
+          .getByTestId(`ThemeSwitcherOption-${targetTheme}`)
+          .first();
+
+        await expect(themeOption).toBeVisible();
+        await themeOption.click();
+
+        await expect(
+          page.locator(`html[data-theme="${targetTheme}"]`)
+        ).toBeVisible();
+      };
+
+      const testCachedTheme = async (cachedTheme: string) => {
+        await switchTheme(systemTheme, cachedTheme);
+        await page.reload();
+        await expect(
+          page.locator(`html[data-theme="${cachedTheme}"]`)
+        ).toBeVisible();
+      };
+
+      await testCachedTheme('pink');
+    });
+  });
+
+  test.describe('App bootstrap flow', () => {
+    async function testLogin(page: Page, fullURL: string, locale: string) {
+      await expect(page.getByTestId('LoginPage')).toBeVisible();
+
+      // 重定向到登录页
+      expect(page.url()).toContain('/login');
+
+      // 等待登录成功
+      const loginButton = page.getByTestId('LoginButton');
+      await expect(loginButton).toBeVisible();
+      await loginButton.click();
+
+      // 等待登录 loading 出现
+      await loginButton
+        .locator('span.ant-btn-loading-icon')
+        .waitFor({ state: 'visible' });
+
+      // 关键：等待登录 loading 消失（表示登录完成）
+      await loginButton
+        .locator('span.ant-btn-loading-icon')
+        .waitFor({ state: 'hidden' });
+
+      // 等待 LoginPage 消失
+      await expect(page.getByTestId('LoginPage')).toBeHidden();
+
+      // 等待重定向到首页
+      await expect(page).toHaveURL(createStartWithUrlRegex(fullURL, locale));
+
+      // 等待首页显示
+      await expect(page.getByTestId('HomePage')).toBeVisible();
+    }
+
+    test('should correctly handle the case of not logged in', async ({
+      page
+    }) => {
+      await page.goto('/');
+      await expect(page.locator('#root')).toBeVisible();
+      await expect(page.getByTestId('LoginPage')).toBeVisible();
+
+      // 访问首页和其他登录后才能访问的页面
+      await page.goto('/about');
+      await expect(page.getByTestId('AboutPage')).toBeHidden();
+      await expect(page.getByTestId('LoginPage')).toBeVisible();
+
+      // 重定向到登录页
+      expect(page.url()).toContain('/login');
+    });
+
+    test('should correctly handle the login flow', async ({
+      page,
+      fullURL
+    }) => {
+      const testLoginFlow = async (locale: string) => {
+        await page.goto(`/${locale}`);
+        await expect(page.locator('#root')).toBeVisible();
+
+        await testLogin(page, fullURL, locale);
+
+        // 退出
+        const logoutButton = page.getByTestId('LogoutButton');
+        await expect(logoutButton).toBeVisible();
+        await logoutButton.click();
+
+        const logoutOkButton = page.getByTestId('LogoutButton-OkButton');
+        await expect(logoutOkButton).toBeVisible();
+        await logoutOkButton.click();
+
+        await expect(page.getByTestId('LoginPage')).toBeVisible();
+      };
+
+      for (const locale of i18nConfig.supportedLngs) {
+        await testLoginFlow(locale);
+      }
+    });
+
+    test('should correctly visit all pages after login', async ({
+      page,
+      fullURL
+    }) => {
+      await page.goto('/');
+
+      await testLogin(page, fullURL, i18nConfig.fallbackLng);
+
+      // 1. 先提取 base/Layout 下的所有子路由
+      const baseLayoutRoute = baseNoLocaleRoutes.find(
+        (route) => route.element === 'base/Layout'
+      );
+
+      if (!baseLayoutRoute || !baseLayoutRoute.children) {
+        throw new Error('base/Layout route or its children not found');
+      }
+
+      // 2. 过滤并构建所有需要访问的页面信息
+      const pagesToVisit = baseLayoutRoute.children
+        .filter(
+          (child) => child.path !== '*' && child.element && child.index !== true
+        )
+        .map((child) => {
+          return {
+            visitPath: child.index ? '/' : `/${child.path}`,
+            pageName: child.element.split('/').pop()
+          };
+        });
+
+      await localeRoutesEach(async (route) => {
+        // 3. 访问所有页面
+        for (const pageInfo of pagesToVisit) {
+          const path = route + pageInfo.visitPath;
+          await page.goto(path);
+
+          // 验证页面可见
+          await expect(page.getByTestId(pageInfo.pageName)).toBeVisible();
+        }
+      });
+    });
+  });
+});

package/dist/templates/react-app/e2e/fixtures/base.fixture.ts

@@ -0,0 +1,40 @@
+import { test as base } from '@playwright/test';
+import { routerPrefix } from '../../config/common';
+
+type CustomFixtures = {
+  routerPrefix: string;
+  fullURL: string;
+};
+
+/**
+ * Custom test fixture that can be extended with additional functionality
+ * For example: authentication, mock data, custom page objects, etc.
+ */
+export const test = base.extend<CustomFixtures>({
+  // Provide routerPrefix as a fixture
+  routerPrefix: async ({}, use) => {
+    await use(routerPrefix);
+  },
+
+  fullURL: async ({ baseURL }, use) => {
+    await use(baseURL + routerPrefix);
+  },
+
+  // Override page fixture to automatically add routerPrefix to goto calls
+  page: async ({ page }, use) => {
+    const originalGoto = page.goto.bind(page);
+
+    // Override goto method to prepend routerPrefix
+    page.goto = async (url, options) => {
+      // If url is a relative path (starts with /), prepend routerPrefix
+      if (typeof url === 'string' && url.startsWith('/')) {
+        url = routerPrefix + url;
+      }
+      return originalGoto(url, options);
+    };
+
+    await use(page);
+  }
+});
+
+export { expect } from '@playwright/test';

package/dist/templates/react-app/e2e/main.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from './fixtures/base.fixture';
+
+test.describe('Main', () => {
+  test('should render the main component', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.locator('#root')).toBeVisible();
+  });
+
+  test('should render the main component with bootstrap loading', async ({
+    page
+  }) => {
+    await page.goto('/');
+
+    await page.waitForSelector('[data-testid="Loading"]', { state: 'visible' });
+    await expect(page.locator('#root')).toBeVisible();
+    await page.waitForSelector('[data-testid="Loading"]', { state: 'hidden' });
+
+    await expect(page.locator('#root')).toBeVisible();
+  });
+});

package/dist/templates/react-app/e2e/utils/test-helpers.ts

@@ -0,0 +1,19 @@
+import { useLocaleRoutes } from '@config/common';
+import { i18nConfig } from '@config/i18n/i18nConfig';
+
+export const createStartWithUrlRegex = (fullURL: string, locale: string) => {
+  const url = locale ? `${fullURL}/${locale}` : fullURL;
+  return new RegExp(`^${url.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`);
+};
+
+export async function localeRoutesEach(
+  callback: (localePrefix: string) => Promise<void>
+) {
+  if (!useLocaleRoutes) {
+    return await callback('');
+  }
+
+  for (const locale of i18nConfig.supportedLngs) {
+    await callback(`/${locale}`);
+  }
+}

package/dist/templates/react-app/eslint.config.mjs

@@ -0,0 +1,247 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+import importPlugin from 'eslint-plugin-import';
+import prettierPlugin from 'eslint-plugin-prettier';
+import unusedImports from 'eslint-plugin-unused-imports';
+import qloverEslint from '@qlover/eslint-plugin';
+import tseslint from 'typescript-eslint';
+import globals from 'globals';
+import {
+  disableGlobals,
+  restrictSpecificGlobals
+} from './makes/eslint-utils.mjs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({ baseDirectory: __dirname });
+
+const eslintConfig = [
+  ...compat.extends(
+    'plugin:import/recommended',
+    'plugin:import/typescript'
+    // 'plugin:prettier/recommended' // 添加 prettier 推荐配置
+  ),
+  {
+    ignores: [
+      // dependencies
+      'node_modules/**',
+      '.pnp/**',
+      '.pnp.js',
+
+      // testing
+      'coverage/**',
+      'test-results/**',
+      'playwright-report/**',
+      '.playwright/**',
+
+      // next.js
+      '.next/**',
+      'out/**',
+      'build/**',
+      'dist/**',
+
+      // misc
+      '*.pem',
+
+      // debug
+      'npm-debug.log*',
+      'yarn-debug.log*',
+      'yarn-error.log*',
+
+      // env files
+      '.env*',
+
+      // vercel
+      '.vercel/**',
+
+      // typescript
+      '*.tsbuildinfo',
+      'next-env.d.ts',
+
+      // cache
+      '.cache/**',
+      '.eslintcache',
+
+      // IDE
+      '.idea/**',
+      '.vscode/**',
+
+      // package manager
+      'package-lock.json',
+      'yarn.lock',
+      'pnpm-lock.yaml',
+
+      // config files
+      '*.config.js',
+      '*.config.mjs',
+      '*.config.cjs',
+      'postcss.config.*',
+      'tailwind.config.*',
+      'next.config.*',
+      'jest.config.*',
+      'babel.config.*',
+      'playwright.config.*',
+      
+      // static assets
+      'public/**',
+      '**/*.min.js',
+      '**/*.bundle.js',
+      '**/vendor/**',
+
+      // generated files
+      'coverage/**',
+      '.nyc_output/**',
+      'storybook-static/**'
+    ]
+  },
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        project: [
+          './tsconfig.app.json',
+          './tsconfig.node.json',
+          './tsconfig.test.json',
+          './tsconfig.e2e.json'
+        ],
+        tsconfigRootDir: __dirname
+      }
+    },
+    plugins: {
+      'unused-imports': unusedImports,
+      import: importPlugin,
+      prettier: prettierPlugin,
+      '@qlover-eslint': qloverEslint,
+      '@typescript-eslint': tseslint.plugin
+    },
+    rules: {
+      '@qlover-eslint/ts-class-method-return': 'error',
+      '@qlover-eslint/require-root-testid': 'error',
+      // 禁用 import 路径解析检查，TypeScript 编译器会处理
+      'import/no-unresolved': 'off',
+      // 禁用原始的 no-unused-vars，使用 unused-imports 的规则替代
+      '@typescript-eslint/no-unused-vars': 'off',
+      // 强制使用 import type 导入类型
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          prefer: 'type-imports',
+          disallowTypeAnnotations: true,
+          fixStyle: 'separate-type-imports'
+        }
+      ],
+      // 检查未使用的导入
+      'unused-imports/no-unused-imports': 'error',
+      // 检查未使用的变量，但允许以下划线开头的变量
+      'unused-imports/no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_'
+        }
+      ],
+      // import 语句排序规则
+      'import/order': [
+        'error',
+        {
+          groups: [
+            'builtin', // Node.js 内置模块
+            'external', // 第三方模块
+            'internal', // 内部模块（使用 alias 的导入）
+            ['parent', 'sibling'], // 父级和同级模块
+            'index', // 当前目录下的模块
+            'object', // 对象导入
+            'type' // 类型导入
+          ],
+          pathGroups: [
+            {
+              pattern: '@/**',
+              group: 'internal',
+              position: 'after'
+            },
+            {
+              pattern: '@migrations/**',
+              group: 'internal',
+              position: 'after'
+            },
+            {
+              pattern: '@config/**',
+              group: 'internal',
+              position: 'after'
+            }
+          ],
+          // "newlines-between": "always", // 不同组之间空一行
+          alphabetize: {
+            order: 'asc', // 按字母顺序排序
+            caseInsensitive: true // 排序时忽略大小写
+          }
+        }
+      ],
+      // Prettier 配置
+      'prettier/prettier': [
+        'error',
+        {
+          semi: true,
+          singleQuote: true,
+          trailingComma: 'none',
+          endOfLine: 'lf'
+        }
+      ],
+      // 默认禁用 export default
+      'import/no-default-export': 'error'
+    }
+  },
+  {
+    // TODO: antd override theme need use import type
+    files: ['src/base/types/deprecated-antd.d.ts'],
+    rules: {
+      '@typescript-eslint/consistent-type-imports': 'off'
+    }
+  },
+  // 限制 src 目录下不能直接使用特定的浏览器全局变量
+  restrictSpecificGlobals(
+    {
+      files: ['src/**/*.{ts,tsx,js,jsx}'],
+      languageOptions: {
+        globals: globals.browser
+      }
+    },
+    {
+      restrictedGlobals: [
+        'window',
+        'document',
+        'localStorage',
+        'sessionStorage',
+        'navigator',
+        'location',
+        'history'
+      ],
+      message: '❌ see(./docs/zh/why-no-globals.md)'
+    }
+  ),
+  // 为特定文件允许使用全局变量
+  {
+    files: ['src/main.tsx', 'src/core/globals.ts'],
+    rules: {
+      'no-restricted-globals': 'off'
+    }
+  },
+  // 为特定文件允许 default export
+  {
+    files: ['src/pages/**/*.tsx', 'src/App.tsx', 'vite.config.ts'],
+    rules: {
+      'import/no-default-export': 'off',
+      // 强制 pages 必须使用 default export，禁止 named export
+      'import/no-named-export': 'error',
+      // 建议使用 default export
+      'import/prefer-default-export': 'error'
+    }
+  }
+];
+
+export default eslintConfig;