create-react-admin-template 0.0.0-stage → 0.1.0

package/template/tests/unit/config/viteConfig.test.mjs

@@ -0,0 +1,371 @@
+import { loadConfigFromFile, loadEnv } from 'vite'
+import assert from 'node:assert/strict'
+import { readdir, readFile } from 'node:fs/promises'
+import path from 'node:path'
+import test from 'node:test'
+import { fileURLToPath } from 'node:url'
+
+const strProjectRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '../../..'
+)
+
+test('development API proxy respects the insecure TLS setting', async () => {
+  const objEnv = loadEnv('development', strProjectRoot)
+  const objLoadedConfig = await loadConfigFromFile(
+    { command: 'serve', mode: 'development' },
+    path.resolve(strProjectRoot, 'vite.config.ts'),
+    strProjectRoot
+  )
+  const strApiProxy = objEnv.VITE_API_PROXY.trim()
+  const objApiProxy = objLoadedConfig?.config.server?.proxy?.[strApiProxy]
+
+  assert.ok(objApiProxy)
+  assert.equal(objApiProxy.target, objEnv.VITE_API_BASE_URL.trim())
+  assert.equal(objApiProxy.changeOrigin, true)
+  assert.equal(objApiProxy.secure, false)
+  assert.equal(objLoadedConfig?.config.server?.strictPort, true)
+})
+
+test('invalid build configuration reports the field and recovery action', async () => {
+  const strPreviousPort = process.env.VITE_PORT
+  process.env.VITE_PORT = 'invalid'
+
+  try {
+    await assert.rejects(
+      loadConfigFromFile(
+        { command: 'serve', mode: 'development' },
+        path.resolve(strProjectRoot, 'vite.config.ts'),
+        strProjectRoot,
+        'silent'
+      ),
+      (objError) => {
+        assert.match(objError.message, /BUILD_CONFIG_INVALID/)
+        assert.match(objError.message, /VITE_PORT/)
+        assert.match(objError.message, /pnpm scaffold:check/)
+        assert.doesNotMatch(objError.message, /VITE_PORT:\s*invalid/)
+        return true
+      }
+    )
+  } finally {
+    if (strPreviousPort === undefined) delete process.env.VITE_PORT
+    else process.env.VITE_PORT = strPreviousPort
+  }
+})
+
+test('production console plugin removes logs but keeps errors', async () => {
+  const objLoadedConfig = await loadConfigFromFile(
+    { command: 'build', mode: 'production' },
+    path.resolve(strProjectRoot, 'vite.config.ts'),
+    strProjectRoot
+  )
+  const objRemoveConsolePlugin = objLoadedConfig?.config.plugins?.find(
+    (objPlugin) => objPlugin?.name === 'vite:remove-console'
+  )
+
+  assert.ok(objRemoveConsolePlugin)
+  assert.equal(objRemoveConsolePlugin.apply, 'build')
+  assert.equal(typeof objRemoveConsolePlugin.transform, 'function')
+
+  const objResult = await objRemoveConsolePlugin.transform(
+    'console.log("remove me")\nconsole.error("keep me")',
+    '/src/consoleFixture.ts'
+  )
+
+  assert.doesNotMatch(objResult.code, /remove me/)
+  assert.match(objResult.code, /console\.error\(['"]keep me['"]\)/)
+})
+
+test('build injects public release metadata without runtime secrets', async () => {
+  const objLoadedConfig = await loadConfigFromFile(
+    { command: 'build', mode: 'production' },
+    path.resolve(strProjectRoot, 'vite.config.ts'),
+    strProjectRoot
+  )
+  const objDefine = objLoadedConfig?.config.define
+
+  assert.equal(objDefine?.strBuildAppVersion, '"0.1.0"')
+  assert.match(objDefine?.strBuildCommit, /^"(?:[a-f0-9]+|unknown)"$/)
+  assert.match(
+    JSON.parse(objDefine?.strBuildTime),
+    /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/
+  )
+  assert.doesNotMatch(JSON.stringify(objDefine), /token|password|secret/i)
+})
+
+async function fnCollectTsxFiles(strDirectory) {
+  const arrEntries = await readdir(strDirectory, { withFileTypes: true })
+  const arrFiles = await Promise.all(
+    arrEntries.map((objEntry) => {
+      const strEntryPath = path.resolve(strDirectory, objEntry.name)
+      if (objEntry.isDirectory()) return fnCollectTsxFiles(strEntryPath)
+      return objEntry.isFile() && objEntry.name.endsWith('.tsx')
+        ? [strEntryPath]
+        : []
+    })
+  )
+  return arrFiles.flat()
+}
+
+test('future application tables must use the licensed boundary and stable keys', async () => {
+  const objLoadedConfig = await loadConfigFromFile(
+    { command: 'build', mode: 'production' },
+    path.resolve(strProjectRoot, 'vite.config.ts'),
+    strProjectRoot
+  )
+  assert.equal(
+    objLoadedConfig?.config.plugins?.some((objPlugin) =>
+      objPlugin?.name?.includes('auto-component-name')
+    ),
+    false
+  )
+
+  const objTypeScript = await import('typescript')
+  const arrFiles = await fnCollectTsxFiles(path.resolve(strProjectRoot, 'src'))
+  for (const strFilePath of arrFiles) {
+    const strSource = await readFile(strFilePath, 'utf8')
+    const bIsAppTableBoundary = strFilePath.endsWith(
+      path.join('components', 'AppTable', 'AppTable.tsx')
+    )
+    const bIsOwnedTableSource = strFilePath.includes(
+      path.join('components', 'AppTable', 'table')
+    )
+    if (strSource.includes('<TableComponent')) {
+      assert.equal(
+        bIsAppTableBoundary || bIsOwnedTableSource,
+        true,
+        `${path.relative(strProjectRoot, strFilePath)} 必须通过 AppTable 使用 TableComponent`
+      )
+    }
+    if (!strSource.includes('<AppTable')) continue
+    const objSourceFile = objTypeScript.createSourceFile(
+      strFilePath,
+      strSource,
+      objTypeScript.ScriptTarget.Latest,
+      true,
+      objTypeScript.ScriptKind.TSX
+    )
+    const fnVisit = (objNode) => {
+      if (
+        (objTypeScript.isJsxOpeningElement(objNode) ||
+          objTypeScript.isJsxSelfClosingElement(objNode)) &&
+        objNode.tagName.getText(objSourceFile) === 'AppTable'
+      ) {
+        assert.ok(
+          objNode.attributes.properties.some(
+            (objAttribute) =>
+              objTypeScript.isJsxAttribute(objAttribute) &&
+              objAttribute.name.getText(objSourceFile) === 'tableKey'
+          ),
+          `${path.relative(strProjectRoot, strFilePath)} 中的 AppTable 必须显式配置 tableKey`
+        )
+      }
+      objTypeScript.forEachChild(objNode, fnVisit)
+    }
+    fnVisit(objSourceFile)
+  }
+})
+
+test('production does not silently accept the Handsontable evaluation license', async () => {
+  const [strProductionEnv, strAppTable, strLicenseResolver] = await Promise.all(
+    [
+      readFile(path.resolve(strProjectRoot, '.env.production'), 'utf8'),
+      readFile(
+        path.resolve(strProjectRoot, 'src/components/AppTable/AppTable.tsx'),
+        'utf8'
+      ).catch(() => undefined),
+      readFile(
+        path.resolve(
+          strProjectRoot,
+          'src/components/AppTable/config/license.ts'
+        ),
+        'utf8'
+      ).catch(() => undefined),
+    ]
+  )
+
+  assert.doesNotMatch(strProductionEnv, /non-commercial-and-evaluation/)
+  if (strAppTable) {
+    assert.match(strAppTable, /import\.meta\.env\.PROD/)
+    assert.match(strAppTable, /fnResolveAdvancedTableLicense/)
+    assert.match(strLicenseResolver, /TABLE_HANDSONTABLE_LICENSE_REQUIRED/)
+  }
+
+  const objLoadedConfig = await loadConfigFromFile(
+    { command: 'build', mode: 'production' },
+    path.resolve(strProjectRoot, 'vite.config.ts'),
+    strProjectRoot
+  )
+  const objGuardPlugin = objLoadedConfig?.config.plugins?.find(
+    (objPlugin) => objPlugin?.name === 'enterprise:app-table-build-guard'
+  )
+  const fnGenerateBundle =
+    typeof objGuardPlugin?.generateBundle === 'function'
+      ? objGuardPlugin.generateBundle
+      : objGuardPlugin?.generateBundle?.handler
+
+  assert.equal(typeof fnGenerateBundle, 'function')
+  assert.throws(
+    () =>
+      fnGenerateBundle.call(
+        {
+          error(strMessage) {
+            throw new Error(strMessage)
+          },
+        },
+        {},
+        {
+          'app-table.js': {
+            type: 'chunk',
+            fileName: 'app-table.js',
+            imports: [],
+            isEntry: false,
+            modules: {
+              '/workspace/src/components/AppTable/AppTable.tsx': {},
+            },
+          },
+          'index.js': {
+            type: 'chunk',
+            fileName: 'index.js',
+            imports: [],
+            isEntry: true,
+            modules: { '/workspace/src/main.tsx': {} },
+          },
+        },
+        false
+      ),
+    /APP_TABLE_LICENSE_REQUIRED/
+  )
+})
+
+test('production keeps the advanced table outside the initial chunk graph', async () => {
+  const strPreviousLicense = process.env.VITE_HANDSONTABLE_LICENSE_KEY
+  process.env.VITE_HANDSONTABLE_LICENSE_KEY = '12345-12345-12345-12345-12345'
+
+  try {
+    const objLoadedConfig = await loadConfigFromFile(
+      { command: 'build', mode: 'production' },
+      path.resolve(strProjectRoot, 'vite.config.ts'),
+      strProjectRoot
+    )
+    const objGuardPlugin = objLoadedConfig?.config.plugins?.find(
+      (objPlugin) => objPlugin?.name === 'enterprise:app-table-build-guard'
+    )
+    const fnGenerateBundle =
+      typeof objGuardPlugin?.generateBundle === 'function'
+        ? objGuardPlugin.generateBundle
+        : objGuardPlugin?.generateBundle?.handler
+    const objPluginContext = {
+      error(strMessage) {
+        throw new Error(strMessage)
+      },
+    }
+    const objLazyBundle = {
+      'app-table.js': {
+        type: 'chunk',
+        fileName: 'app-table.js',
+        imports: ['advanced-table-vendor.js'],
+        isEntry: false,
+        modules: {
+          '/workspace/src/components/AppTable/AppTable.tsx': {},
+        },
+      },
+      'advanced-table-vendor.js': {
+        type: 'chunk',
+        fileName: 'advanced-table-vendor.js',
+        imports: [],
+        isEntry: false,
+        modules: {
+          '/workspace/node_modules/handsontable/base.mjs': {},
+        },
+      },
+      'index.js': {
+        type: 'chunk',
+        dynamicImports: ['app-table.js'],
+        fileName: 'index.js',
+        imports: [],
+        isEntry: true,
+        modules: { '/workspace/src/main.tsx': {} },
+      },
+    }
+
+    assert.doesNotThrow(() =>
+      fnGenerateBundle.call(objPluginContext, {}, objLazyBundle, false)
+    )
+    objLazyBundle['index.js'].imports = ['app-table.js']
+    assert.throws(
+      () => fnGenerateBundle.call(objPluginContext, {}, objLazyBundle, false),
+      /APP_TABLE_EAGER_LOAD/
+    )
+
+    const objOutput = objLoadedConfig?.config.build?.rollupOptions?.output
+    const fnManualChunks = Array.isArray(objOutput)
+      ? undefined
+      : objOutput?.manualChunks
+    assert.equal(typeof fnManualChunks, 'function')
+    assert.equal(
+      fnManualChunks('/workspace/node_modules/handsontable/base.mjs'),
+      'advanced-table-vendor'
+    )
+  } finally {
+    if (strPreviousLicense === undefined) {
+      delete process.env.VITE_HANDSONTABLE_LICENSE_KEY
+    } else {
+      process.env.VITE_HANDSONTABLE_LICENSE_KEY = strPreviousLicense
+    }
+  }
+})
+
+test('OpenAPI generator reads the backend service array', async () => {
+  const objServices = JSON.parse(
+    await readFile(
+      path.resolve(strProjectRoot, 'src/api/config/services.json'),
+      'utf8'
+    )
+  )
+  const strGenerator = await readFile(
+    path.resolve(strProjectRoot, 'tools/openapi/generate.mjs'),
+    'utf8'
+  )
+
+  assert.deepEqual(objServices, [
+    {
+      name: 'backend',
+      baseUrlEnv: 'VITE_API_BASE_URL',
+      openapiPath: '/swagger/openapi.json',
+    },
+  ])
+  assert.match(strGenerator, /VITE_API_BASE_URL/)
+  assert.match(strGenerator, /services\.json/)
+  assert.match(strGenerator, /baseUrlEnv/)
+  assert.match(strGenerator, /openapiPath/)
+  assert.doesNotMatch(strGenerator, /includePaths/)
+})
+
+test('OpenAPI generation remains a protected scaffold capability', async () => {
+  const [strPackage, strGenerator, strGitignore, strReadme] = await Promise.all(
+    [
+      readFile(path.resolve(strProjectRoot, 'package.json'), 'utf8'),
+      readFile(
+        path.resolve(strProjectRoot, 'tools/openapi/generate.mjs'),
+        'utf8'
+      ),
+      readFile(path.resolve(strProjectRoot, '.gitignore'), 'utf8'),
+      readFile(path.resolve(strProjectRoot, 'README.md'), 'utf8'),
+    ]
+  )
+  const objPackage = JSON.parse(strPackage)
+
+  assert.equal(objPackage.scripts.api, 'node tools/openapi/generate.mjs')
+  assert.match(objPackage.devDependencies['swagger-typescript-api'], /^\^13\./)
+  assert.match(
+    strGenerator,
+    /import \{ generateApi \} from 'swagger-typescript-api'/
+  )
+  assert.match(strGenerator, /src\/api\/generated/)
+  assert.match(strGenerator, /mkdtemp/)
+  assert.match(strGenerator, /fnReplaceDirectory/)
+  assert.match(strGitignore, /src\/api\/generated\//)
+  assert.match(strReadme, /不是冗余目录/)
+  assert.match(strReadme, /原子替换/)
+})

package/template/tests/unit/context/ThemeProvider.test.tsx

@@ -0,0 +1,108 @@
+import '@/styles/index.css'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
+import { ThemeProvider } from '@/context/ThemeProvider'
+
+const strThemeStorageKey = 'enterprise-admin.theme'
+
+beforeEach(() => {
+  localStorage.setItem(strThemeStorageKey, 'dark')
+
+  const objThemeColor = document.createElement('meta')
+  objThemeColor.name = 'theme-color'
+  objThemeColor.dataset.testThemeColor = 'true'
+  document.head.append(objThemeColor)
+})
+
+afterEach(() => {
+  localStorage.removeItem(strThemeStorageKey)
+  document.documentElement.classList.remove('dark')
+  document.documentElement.style.colorScheme = ''
+  for (const strProperty of [
+    '--brand-light-primary',
+    '--brand-light-primary-foreground',
+    '--brand-light-secondary',
+    '--brand-light-secondary-foreground',
+    '--brand-dark-primary',
+    '--brand-dark-primary-foreground',
+    '--brand-dark-secondary',
+    '--brand-dark-secondary-foreground',
+  ]) {
+    document.documentElement.style.removeProperty(strProperty)
+  }
+  document.querySelector('[data-test-theme-color]')?.remove()
+})
+
+describe('ThemeProvider', () => {
+  it('uses the neutral-black palette for the app and scoped table theme', async () => {
+    await render(
+      <ThemeProvider>
+        <div className='hgw-table-theme' data-testid='table-theme' />
+      </ThemeProvider>
+    )
+
+    await expect
+      .poll(() => document.documentElement.classList.contains('dark'))
+      .toBe(true)
+
+    const objTableTheme = document.querySelector<HTMLElement>(
+      '[data-testid="table-theme"]'
+    )
+
+    expect(objTableTheme).not.toBeNull()
+    expect(
+      getComputedStyle(document.documentElement)
+        .getPropertyValue('--background')
+        .trim()
+    ).toBe('#000')
+    expect(
+      document.documentElement.style.getPropertyValue('--brand-dark-primary')
+    ).toBe('#8aadff')
+    expect(
+      document.documentElement.style.getPropertyValue(
+        '--brand-dark-primary-foreground'
+      )
+    ).toBe('#0f172a')
+    expect(
+      getComputedStyle(objTableTheme!).getPropertyValue('--primary').trim()
+    ).toBe('#8aadff')
+    expect(
+      getComputedStyle(objTableTheme!).getPropertyValue('--background').trim()
+    ).toBe('#000')
+    expect(
+      document.querySelector<HTMLMetaElement>('meta[name="theme-color"]')
+        ?.content
+    ).toBe('#000000')
+  })
+
+  it('tracks operating-system theme changes while system mode is active', async () => {
+    localStorage.setItem(strThemeStorageKey, 'system')
+    const objMediaQuery = Object.assign(new EventTarget(), {
+      matches: false,
+      media: '(prefers-color-scheme: dark)',
+      onchange: null,
+      addListener: () => undefined,
+      removeListener: () => undefined,
+    }) as MediaQueryList
+    vi.spyOn(window, 'matchMedia').mockReturnValue(objMediaQuery)
+
+    await render(
+      <ThemeProvider>
+        <div />
+      </ThemeProvider>
+    )
+
+    await expect
+      .poll(() => document.documentElement.classList.contains('dark'))
+      .toBe(false)
+    objMediaQuery.dispatchEvent(
+      Object.assign(new Event('change'), {
+        matches: true,
+        media: '(prefers-color-scheme: dark)',
+      })
+    )
+    await expect
+      .poll(() => document.documentElement.classList.contains('dark'))
+      .toBe(true)
+  })
+})

package/template/tests/unit/context/UnsavedChangesProvider.test.tsx

@@ -0,0 +1,94 @@
+import { useState } from 'react'
+import {
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router'
+import { LocaleProvider } from '@/locale'
+import { describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-react'
+import { userEvent } from 'vitest/browser'
+import {
+  UnsavedChangesProvider,
+  useUnsavedChangesRegistration,
+} from '@/context/UnsavedChangesProvider'
+
+function TestRootLayout() {
+  return (
+    <LocaleProvider strLocale='en-US' strTimeZone='UTC'>
+      <UnsavedChangesProvider>
+        <Outlet />
+      </UnsavedChangesProvider>
+    </LocaleProvider>
+  )
+}
+
+function TestEditor() {
+  const [bIsDirty, fnSetDirty] = useState(false)
+  useUnsavedChangesRegistration({ bIsDirty })
+
+  return (
+    <main>
+      <h1>Editor</h1>
+      <button type='button' onClick={() => fnSetDirty(true)}>
+        Change draft
+      </button>
+    </main>
+  )
+}
+
+function fnCreateUnsavedChangesRouter() {
+  const objRootRoute = createRootRoute({ component: TestRootLayout })
+  const objEditorRoute = createRoute({
+    getParentRoute: () => objRootRoute,
+    path: '/',
+    component: TestEditor,
+  })
+  const objNextRoute = createRoute({
+    getParentRoute: () => objRootRoute,
+    path: '/next',
+    component: () => <h1>Next page</h1>,
+  })
+
+  return createRouter({
+    routeTree: objRootRoute.addChildren([objEditorRoute, objNextRoute]),
+    history: createMemoryHistory({ initialEntries: ['/'] }),
+  })
+}
+
+describe('UnsavedChangesProvider', () => {
+  it('uses one localized confirmation flow for SPA navigation', async () => {
+    const objRouter = fnCreateUnsavedChangesRouter()
+    await objRouter.load()
+    const objScreen = await render(<RouterProvider router={objRouter} />)
+
+    await userEvent.click(
+      objScreen.getByRole('button', { name: 'Change draft' })
+    )
+    objRouter.history.push('/next')
+    await expect
+      .element(objScreen.getByRole('dialog'))
+      .toHaveTextContent('Unsaved changes')
+    await expect
+      .element(objScreen.getByRole('dialog'))
+      .toHaveTextContent(
+        'You have unsaved changes. Leaving this page will discard them.'
+      )
+
+    await userEvent.click(
+      objScreen.getByRole('button', { name: 'Stay on page' })
+    )
+    await expect
+      .element(objScreen.getByRole('heading', { name: 'Editor' }))
+      .toBeVisible()
+
+    objRouter.history.push('/next')
+    await userEvent.click(objScreen.getByRole('button', { name: 'Leave page' }))
+    await expect
+      .element(objScreen.getByRole('heading', { name: 'Next page' }))
+      .toBeVisible()
+  })
+})

package/template/tests/unit/context/applicationScope.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+import {
+  fnCreateApplicationScope,
+  fnResolveApplicationMetadataScope,
+  fnResolveApplicationQueryScope,
+} from '@/context/applicationScope'
+
+describe('application runtime scope', () => {
+  it('reuses the session generation for every metadata resource', () => {
+    const objScope = fnCreateApplicationScope({
+      nSessionGeneration: 7,
+      strLocale: 'zh-CN',
+      strTenantId: 'tenant-a',
+      strUserId: 'user-a',
+      strWorkspaceId: 'workspace-a',
+    })
+
+    expect(fnResolveApplicationMetadataScope(objScope)).toEqual({
+      nSessionGeneration: 7,
+      strTenantId: 'tenant-a',
+      strWorkspaceId: 'workspace-a',
+    })
+  })
+
+  it('allows resource overrides without changing the application identity', () => {
+    const objScope = fnCreateApplicationScope({
+      nSessionGeneration: 2,
+      strLocale: 'en-US',
+      strTenantId: 'tenant-a',
+      strUserId: 'user-a',
+      strWorkspaceId: 'workspace-a',
+    })
+
+    expect(
+      fnResolveApplicationMetadataScope(objScope, {
+        strNamespace: 'public',
+        strWorkspaceId: 'workspace-b',
+      })
+    ).toEqual({
+      nSessionGeneration: 2,
+      strNamespace: 'public',
+      strTenantId: 'tenant-a',
+      strWorkspaceId: 'workspace-b',
+    })
+    expect(objScope.strWorkspaceId).toBe('workspace-a')
+  })
+
+  it('uses one explicit anonymous identity before authentication', () => {
+    const objScope = fnCreateApplicationScope({
+      nSessionGeneration: 0,
+      strLocale: 'zh-CN',
+    })
+
+    expect(fnResolveApplicationQueryScope(objScope)).toEqual({
+      nSessionGeneration: 0,
+      strLocale: 'zh-CN',
+      strTenantId: undefined,
+      strUserId: 'anonymous',
+      strWorkspaceId: undefined,
+    })
+  })
+})