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

package/template/tests/unit/components/PasswordInput.test.tsx

@@ -0,0 +1,105 @@
+import { useForm } from 'react-hook-form'
+import { describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-react'
+import { userEvent } from 'vitest/browser'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/components/ui/form'
+import { PasswordInput } from '@/components/PasswordInput'
+
+describe('PasswordInput', () => {
+  it('renders the password input correctly', async () => {
+    const { getByPlaceholder: fnGetByPlaceholder, getByRole: fnGetByRole } =
+      await render(<PasswordInput placeholder='请输入密码' />)
+
+    const objPasswordInput = fnGetByPlaceholder('请输入密码')
+    const objShowPasswordButton = fnGetByRole('button', {
+      name: '显示密码',
+    })
+
+    await expect.element(objPasswordInput).toBeInTheDocument()
+    await expect.element(objPasswordInput).toHaveAttribute('type', 'password')
+    await expect.element(objPasswordInput).toHaveAttribute('data-slot', 'input')
+    await expect.element(objShowPasswordButton).toBeVisible()
+  })
+
+  it('toggles the password visibility when the show password button is clicked', async () => {
+    const { getByPlaceholder: fnGetByPlaceholder, getByRole: fnGetByRole } =
+      await render(<PasswordInput placeholder='请输入密码' />)
+
+    const objPasswordInput = fnGetByPlaceholder('请输入密码')
+    const objShowPasswordButton = fnGetByRole('button', {
+      name: '显示密码',
+    })
+
+    await expect.element(objPasswordInput).toHaveAttribute('type', 'password')
+    await expect.element(objShowPasswordButton).toBeInTheDocument()
+
+    await userEvent.click(objShowPasswordButton)
+
+    await expect.element(objPasswordInput).toHaveAttribute('type', 'text')
+    const objHidePasswordButton = fnGetByRole('button', { name: '隐藏密码' })
+    await expect.element(objHidePasswordButton).toBeInTheDocument()
+
+    await userEvent.click(objHidePasswordButton)
+
+    await expect.element(objPasswordInput).toHaveAttribute('type', 'password')
+    await expect
+      .element(fnGetByRole('button', { name: '显示密码' }))
+      .toBeInTheDocument()
+  })
+
+  it('disables the show password button when the password input is disabled', async () => {
+    const { getByPlaceholder: fnGetByPlaceholder, getByRole: fnGetByRole } =
+      await render(<PasswordInput placeholder='请输入密码' disabled />)
+
+    const objPasswordInput = fnGetByPlaceholder('请输入密码')
+    const objShowPasswordButton = fnGetByRole('button', {
+      name: '显示密码',
+    })
+    await expect.element(objShowPasswordButton).toBeDisabled()
+    await expect.element(objPasswordInput).toBeDisabled()
+  })
+
+  it('works with FormLabel and react-hook-form field spread', async () => {
+    function PasswordInLabeledForm() {
+      const objForm = useForm<{ password: string }>({
+        defaultValues: { password: '' },
+      })
+
+      return (
+        <Form {...objForm}>
+          <form>
+            <FormField
+              control={objForm.control}
+              name='password'
+              render={({ field: objField }) => (
+                <FormItem>
+                  <FormLabel>密码</FormLabel>
+                  <FormControl>
+                    <PasswordInput {...objField} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+      )
+    }
+
+    const { getByLabelText: fnGetByLabelText } = await render(
+      <PasswordInLabeledForm />
+    )
+
+    const objPassword = fnGetByLabelText(/^密码$/)
+    await expect.element(objPassword).toHaveAttribute('type', 'password')
+
+    await userEvent.type(objPassword, 'secret-value')
+
+    await expect.element(objPassword).toHaveValue('secret-value')
+  })
+})

package/template/tests/unit/components/ScaffoldComponents.test.tsx

@@ -0,0 +1,64 @@
+import '@/styles/index.css'
+import { expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
+import { page } from 'vitest/browser'
+import {
+  AppDataTable,
+  type IAppDataTableColumn,
+} from '@/components/AppDataTable'
+import { AppPageForm, type IFormProp } from '@/components/AppPageForm'
+
+interface IFixtureModel {
+  strName: string
+}
+
+interface IFixtureRow {
+  nId: number
+  strName: string
+}
+
+const objFormConfig: IFormProp<IFixtureModel> = {
+  formItems: [
+    {
+      label: '项目名称',
+      prop: 'strName',
+      required: true,
+    },
+  ],
+}
+
+const arrColumns: IAppDataTableColumn<IFixtureRow>[] = [
+  {
+    strKey: 'strName',
+    strHeader: '名称',
+    fnRender: (objRow) => objRow.strName,
+  },
+]
+
+it('renders AppPageForm through its project public boundary', async () => {
+  await render(
+    <AppPageForm
+      model={{ strName: '' }}
+      config={objFormConfig}
+      onModelChange={vi.fn()}
+    />
+  )
+
+  await expect.element(page.getByLabelText('项目名称')).toBeVisible()
+})
+
+it('renders lightweight rows through AppDataTable', async () => {
+  await render(
+    <AppDataTable
+      strAriaLabel='项目列表'
+      arrRows={[{ nId: 1, strName: '开箱即用脚手架' }]}
+      arrColumns={arrColumns}
+      fnGetRowKey={(objRow) => objRow.nId}
+    />
+  )
+
+  await expect.element(page.getByText('开箱即用脚手架')).toBeVisible()
+  await expect
+    .element(page.getByRole('table', { name: '项目列表' }))
+    .toBeVisible()
+})

package/template/tests/unit/components/SensitiveData.test.tsx

@@ -0,0 +1,151 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
+import { userEvent } from 'vitest/browser'
+import { useAuthStore } from '@/stores/authStore'
+import { SensitiveData } from '@/components/SensitiveData'
+
+function fnCreatePermissionSession(arrPermissions: string[]) {
+  return {
+    nAccessTokenExpiresAt: Date.now() + 60_000,
+    nRefreshTokenExpiresAt: Date.now() + 60_000,
+    objUser: {
+      arrPermissions,
+      arrRoleCodes: ['operator'],
+      strAccount: '138****0000',
+      strDisplayName: '操作员',
+      strId: 'user-sensitive-data',
+      strRole: 'admin',
+    },
+    strAccessToken: 'access-token',
+    strRefreshToken: 'refresh-token',
+  }
+}
+
+describe('SensitiveData', () => {
+  beforeEach(() => {
+    useAuthStore.getState().fnClearSession()
+  })
+
+  it('defaults to masked output with no reveal or copy controls', async () => {
+    const objScreen = await render(
+      <SensitiveData
+        objMaskingPolicy={{ strPreset: 'phone' }}
+        objValue={{ strState: 'available', strValue: '13800138000' }}
+        strLabel='手机号'
+      />
+    )
+
+    await expect.element(objScreen.getByText('138****8000')).toBeVisible()
+    expect(objScreen.getByText('13800138000').query()).toBeNull()
+    expect(objScreen.getByRole('button').query()).toBeNull()
+  })
+
+  it('separates reveal permission from raw-value copy permission', async () => {
+    useAuthStore
+      .getState()
+      .fnEstablishSession(
+        fnCreatePermissionSession([
+          'customer:phone:view',
+          'customer:phone:copy',
+        ])
+      )
+    const fnWriteClipboard = vi.fn(async () => undefined)
+    const objScreen = await render(
+      <SensitiveData
+        fnWriteClipboard={fnWriteClipboard}
+        objCopyPolicy={{
+          objRequirement: 'customer:phone:copy',
+          strMode: 'revealed',
+        }}
+        objMaskingPolicy={{ strPreset: 'phone' }}
+        objRevealPolicy={{
+          objRequirement: 'customer:phone:view',
+          strMode: 'authorized',
+        }}
+        objValue={{ strState: 'available', strValue: '13800138000' }}
+        strLabel='手机号'
+      />
+    )
+
+    expect(
+      objScreen.getByRole('button', { name: '复制当前明文: 手机号' }).query()
+    ).toBeNull()
+    await userEvent.click(
+      objScreen.getByRole('button', { name: '查看敏感数据: 手机号' })
+    )
+    await expect.element(objScreen.getByText('13800138000')).toBeVisible()
+
+    await userEvent.click(
+      objScreen.getByRole('button', { name: '复制当前明文: 手机号' })
+    )
+    expect(fnWriteClipboard).toHaveBeenCalledWith('13800138000')
+  })
+
+  it('loads raw data on demand and re-masks it when leaving the page', async () => {
+    useAuthStore
+      .getState()
+      .fnEstablishSession(fnCreatePermissionSession(['customer:id:view']))
+    const fnRequestReveal = vi.fn(async () => '110101199001011234')
+    const objScreen = await render(
+      <SensitiveData
+        fnRequestReveal={fnRequestReveal}
+        objMaskingPolicy={{ strPreset: 'identity' }}
+        objRevealPolicy={{
+          objRequirement: 'customer:id:view',
+          strMode: 'authorized',
+        }}
+        objValue={{
+          strMaskedValue: '110********1234',
+          strState: 'masked',
+        }}
+        strLabel='证件号'
+      />
+    )
+
+    await userEvent.click(
+      objScreen.getByRole('button', { name: '查看敏感数据: 证件号' })
+    )
+    await expect
+      .element(objScreen.getByText('110101199001011234'))
+      .toBeVisible()
+    expect(fnRequestReveal).toHaveBeenCalledOnce()
+
+    globalThis.dispatchEvent(new Event('pagehide'))
+    await expect.element(objScreen.getByText('110********1234')).toBeVisible()
+    expect(objScreen.getByText('110101199001011234').query()).toBeNull()
+  })
+
+  it('re-masks immediately when the current permission is revoked', async () => {
+    useAuthStore
+      .getState()
+      .fnEstablishSession(fnCreatePermissionSession(['customer:phone:view']))
+    const objScreen = await render(
+      <SensitiveData
+        objMaskingPolicy={{ strPreset: 'phone' }}
+        objRevealPolicy={{
+          objRequirement: 'customer:phone:view',
+          strMode: 'authorized',
+        }}
+        objValue={{ strState: 'available', strValue: '13800138000' }}
+        strLabel='手机号'
+      />
+    )
+
+    await userEvent.click(
+      objScreen.getByRole('button', { name: '查看敏感数据: 手机号' })
+    )
+    await expect.element(objScreen.getByText('13800138000')).toBeVisible()
+
+    const objCurrentUser = useAuthStore.getState().objUser
+    useAuthStore.getState().fnUpdateUser({
+      ...objCurrentUser!,
+      arrPermissions: [],
+    })
+
+    await expect.element(objScreen.getByText('138****8000')).toBeVisible()
+    expect(objScreen.getByText('13800138000').query()).toBeNull()
+    expect(
+      objScreen.getByRole('button', { name: '查看敏感数据: 手机号' }).query()
+    ).toBeNull()
+  })
+})

package/template/tests/unit/components/StatusBadge.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-react'
+import { StatusBadge } from '@/components/StatusBadge'
+
+describe('StatusBadge', () => {
+  it('uses the shared shadcn badge and semantic status tone', async () => {
+    const objScreen = await render(
+      <StatusBadge strStatus='active' strLabel='启用' />
+    )
+
+    const objBadge = objScreen.getByText('启用')
+    await expect.element(objBadge).toHaveAttribute('data-slot', 'status-badge')
+    await expect.element(objBadge).toHaveAttribute('data-status', 'active')
+    await expect.element(objBadge).toHaveAttribute('data-tone', 'success')
+  })
+
+  it('falls back to the neutral tone for an unrecognized status', async () => {
+    const objScreen = await render(
+      <StatusBadge strStatus='custom-state' strLabel='自定义状态' />
+    )
+
+    await expect
+      .element(objScreen.getByText('自定义状态'))
+      .toHaveAttribute('data-tone', 'neutral')
+  })
+
+  it('does not infer product-specific status semantics', async () => {
+    const objScreen = await render(
+      <StatusBadge strStatus='published' strLabel='已发布' />
+    )
+
+    await expect
+      .element(objScreen.getByText('已发布'))
+      .toHaveAttribute('data-tone', 'neutral')
+  })
+})