diff --git a/package.json b/package.json index b0652950..0c57cea1 100644 --- a/package.json +++ b/package.json @@ -35,21 +35,21 @@ "postsite:preview": "cp _site/index.html _site/404.html", "lint": "eslint --ext .ts,.tsx ./ --max-warnings 0", "lint:fix": "eslint --ext .ts,.tsx ./ --max-warnings 0 --fix", - "test": "npm run test:unit", - "test:update": "npm run test:unit-update", - "test:unit": "bash -c 'jest --coverage --config test/config/jest.unit.conf.js ${1}' -- ", - "test:unit-update": "jest --config test/config/jest.unit.conf.js --updateSnapshot --coverage", - "test:node": "jest --config test/config/jest.ssr.conf.js", - "test:node-update": "jest --config test/config/jest.ssr.conf.js --updateSnapshot --coverage", - "test:watch": "jest --config test/config/jest.unit.conf.js --watch", - "test:coverage": "npm run test:update", + "test": "npm run test:unit && npm run test:snap", + "test:unit": "vitest run", + "test:unit-dev": "vitest", + "test:unit-gui": "vitest --ui", + "test:unit-coverage": "vitest run --coverage", + "test:snap": "cross-env NODE_ENV=test-snap vitest run", + "test:snap-update": "cross-env NODE_ENV=test-snap vitest run -u", + "generate:coverage-badge": "node script/generate-coverage.js", "prebuild": "rimraf es/* lib/* dist/* esm/*", "build": "cross-env NODE_ENV=production rollup -c script/rollup.config.js && npm run build:tsc", "build:tsc": "concurrently \"npm:build:tsc-*\"", - "build:tsc-es": "tsc --emitDeclarationOnly -d --outDir es/", - "build:tsc-esm": "tsc --emitDeclarationOnly -d --outDir esm/", - "build:tsc-lib": "tsc --emitDeclarationOnly -d --outDir lib/", - "build:tsc-cjs": "tsc --emitDeclarationOnly -d --outDir cjs/" + "build:tsc-es": "tsc --emitDeclarationOnly -d -p ./tsconfig.build.json --outDir es/", + "build:tsc-esm": "tsc --emitDeclarationOnly -d -p ./tsconfig.build.json --outDir esm/", + "build:tsc-lib": "tsc --emitDeclarationOnly -d -p ./tsconfig.build.json --outDir lib/", + "build:tsc-cjs": "tsc --emitDeclarationOnly -d -p ./tsconfig.build.json --outDir cjs/" }, "publishConfig": { "registry": "https://registry.npmjs.org/" @@ -95,6 +95,9 @@ "@typescript-eslint/eslint-plugin": "^5.6.0", "@typescript-eslint/parser": "^5.6.0", "@vitejs/plugin-react": "^1.1.1", + "@vitest/coverage-c8": "^0.24.1", + "@vitest/coverage-istanbul": "^0.24.1", + "@vitest/ui": "^0.24.1", "autoprefixer": "^10.4.0", "babel-jest": "^27.5.1", "babel-polyfill": "^6.26.0", @@ -105,6 +108,7 @@ "cross-env": "^7.0.3", "cssnano": "^5.0.12", "cz-conventional-changelog": "^3.3.0", + "dom-parser": "^0.1.6", "eslint": "^8.4.1", "eslint-config-airbnb": "^19.0.2", "eslint-config-airbnb-base": "^15.0.0", @@ -118,12 +122,10 @@ "gray-matter": "^4.0.3", "husky": "^7.0.4", "inquirer": "^8.2.0", - "jest": "^27.5.1", - "jest-html-reporter": "^3.4.2", - "jest-transform-stub": "^2.0.0", - "jest-watch-typeahead": "^1.0.0", + "jsdom": "^24.1.0", "less": "^4.1.2", "markdown-it-fence": "^0.1.3", + "mockdate": "^3.0.5", "npm-run-all": "^4.1.5", "postcss": "^8.4.5", "prismjs": "^1.25.0", @@ -143,11 +145,11 @@ "rollup-plugin-typescript2": "^0.31.2", "tdesign-icons-view": "^0.1.0", "tdesign-site-components": "^0.13.10", - "ts-jest": "^27.1.3", "typescript": "^4.5.3", "vite": "^2.7.0", "vite-plugin-pwa": "^0.11.11", "vite-plugin-tdoc": "^2.0.0", + "vitest": "^0.24.1", "workbox-precaching": "^6.3.0" }, "dependencies": { diff --git a/script/generate-coverage.js b/script/generate-coverage.js new file mode 100644 index 00000000..b05fe62f --- /dev/null +++ b/script/generate-coverage.js @@ -0,0 +1,54 @@ +const fs = require('fs'); +const path = require('path'); +const camelCase = require('lodash/camelCase'); + +const DomParser = require('dom-parser'); + +const parser = new DomParser(); + +function resolveCwd(...args) { + args.unshift(process.cwd()); + return path.join(...args); +} + +fs.readFile(resolveCwd('test/coverage/index.html'), 'utf8', (err, html) => { + if (err) { + console.log('please execute npm run test:unit-coverage first!', err); + return; + } + + if (!err) { + const dom = parser.parseFromString(html); + const tds = dom.getElementsByTagName('td'); + + const size = 10; + const groups = Math.ceil(tds.length / size); + const componentCoverage = []; + for (let i = 0; i < groups; i++) { + componentCoverage.push(tds.slice(i * size, (i + 1) * size)); + } + + const resultCoverage = {}; + componentCoverage.forEach((item, index) => { + const dataVal = item[0].getAttribute('data-value'); + + const name = dataVal; + const statements = `${item[2].getAttribute('data-value')}%`; + const branches = `${item[4].getAttribute('data-value')}%`; + const functions = `${item[6].getAttribute('data-value')}%`; + const lines = `${item[8].getAttribute('data-value')}%`; + + const key = camelCase(name); + resultCoverage[key] = { + statements, + branches, + functions, + lines, + }; + }); + + const finalRes = `module.exports = ${JSON.stringify(resultCoverage)}`; + fs.writeFileSync(resolveCwd('site/test-coverage.js'), finalRes); + console.log('successful re-generate coverage'); + } +}); diff --git a/site/plugin-tdoc/md-to-react.js b/site/plugin-tdoc/md-to-react.js index b6b6fc2f..7da837eb 100644 --- a/site/plugin-tdoc/md-to-react.js +++ b/site/plugin-tdoc/md-to-react.js @@ -2,9 +2,9 @@ import fs from 'fs'; import path from 'path'; import matter from 'gray-matter'; -// import camelCase from 'camelcase'; +import camelCase from 'camelcase'; -// import testCoverage from '../test-coverage'; +import testCoverage from '../test-coverage'; import { transformSync } from '@babel/core'; @@ -12,10 +12,10 @@ export default function mdToReact(options) { const mdSegment = customRender(options); const { demoCodesDefsStr } = options; - // let coverage = ''; - // if (mdSegment.isComponent) { - // coverage = testCoverage[camelCase(mdSegment.componentName)] || '0%'; - // } + let coverage = ''; + if (mdSegment.isComponent) { + coverage = testCoverage[camelCase(mdSegment.componentName)] || {}; + } const reactSource = ` import React, { useEffect, useRef, useState } from 'react';\n @@ -85,7 +85,25 @@ export default function mdToReact(options) { ref={tdDocHeader} spline="${mdSegment.spline}" platform="mobile" - >` + > + ${ + mdSegment.isComponent + ? ` + + + + ` + : '' + } + ` : '' } { diff --git a/site/test-coverage.js b/site/test-coverage.js new file mode 100644 index 00000000..2a81387f --- /dev/null +++ b/site/test-coverage.js @@ -0,0 +1,4 @@ +module.exports = { + button: { statements: '100%', branches: '66.66%', functions: '100%', lines: '100%' }, + configProvider: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' }, +}; diff --git a/site/vite.config.js b/site/vite.config.js index 0e427485..b157ec7e 100644 --- a/site/vite.config.js +++ b/site/vite.config.js @@ -26,6 +26,7 @@ export default ({ mode }) => '@components': path.resolve(__dirname, './src/components'), '@common': path.resolve(__dirname, '../src/_common'), 'tdesign-mobile-react': path.resolve(__dirname, '../src'), + '@test/utils': path.resolve(__dirname, '../test/utils'), }, }, build: { diff --git a/src/button/__tests__/__snapshots__/button.test.tsx.snap b/src/button/__tests__/__snapshots__/button.test.tsx.snap index 93acb983..265add7c 100644 --- a/src/button/__tests__/__snapshots__/button.test.tsx.snap +++ b/src/button/__tests__/__snapshots__/button.test.tsx.snap @@ -1,4 +1,4 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1 exports[`base.jsx 1`] = ` diff --git a/src/button/__tests__/button.test.tsx b/src/button/__tests__/button.test.tsx index fc37fe8d..f2f7f507 100644 --- a/src/button/__tests__/button.test.tsx +++ b/src/button/__tests__/button.test.tsx @@ -1,10 +1,7 @@ import React from 'react'; -import { testExamples, render } from '@test/utils'; +import { render } from '@test/utils'; import Button from '../Button'; -// 测试组件代码 Example 快照 -testExamples(__dirname); - describe('Button 组件测试', () => { const ButtonText = '按钮组件'; test('content', async () => { diff --git a/test/scripts/generate-coverage.js b/test/scripts/generate-coverage.js deleted file mode 100644 index e426738a..00000000 --- a/test/scripts/generate-coverage.js +++ /dev/null @@ -1,137 +0,0 @@ -const fs = require('fs'); -const path = require('path'); -const { exec } = require('child_process'); -const camelCase = require('camelcase'); -const DomParser = require('dom-parser'); - -const parser = new DomParser(); -const result = {}; -const EXAMPLE_FILE = '/Example'; -const ALL_KEY = 'all'; -const DECIMAL = 2; - -const resolveCwd = (...args) => { - args.unshift(process.cwd()); - return path.join(...args); -}; - -const coveragePath = resolveCwd('site/test-coverage.js'); - -const calculate = (start, end) => { - try { - return `${(((start / end) || 0) * 100).toFixed(DECIMAL)}%`; - } catch (err) { - return '0%'; - } -} - -// 格式化处理value，四舍五入保留两位小数 -const formatValue = (value) => { - const [start, end] = value.split('/'); - return calculate(start, end); -} - -const generateReportJson = async (filepath, type) => { - try { - const html = await fs.readFileSync(filepath, 'utf8'); - const dom = parser.parseFromString(html); - // 提取表格中各个子组件覆盖率td - const tds = dom.getElementsByTagName('td'); - - // 提取总体行覆盖率 - let allPercent = 0; - const fraction = dom.getElementsByClassName('fraction'); - if (fraction.length > 0) { - allPercent = fraction[fraction.length - 1].textContent; - } - let key = ''; - Array.from(tds).forEach((item, index) => { - const col = index % 10; - if (col === 0) { - const [, name] = item.getAttribute('data-value').split('src/'); - name && (key = camelCase(name)); - } else if (col === 9) { - if (key !== '') - result[key] = item.innerHTML; - } - }); - result[ALL_KEY] = allPercent || 0; - console.log(`\n 已完成 ${type} coverage产出`); - return JSON.stringify(result, null, 2); - } catch (err) { - console.error(`\n 未能生成${type}覆盖率报告，将延用现有数据`, err); - } -} - -const formatCoverageResult = (result) => result.map((coverageOld) => { - let coverage = coverageOld; - try { - coverage = JSON.parse(coverage); - } catch (err) { - console.error(err); - return; - } - - const statistics = {}; - - coverage = Object.entries(coverage).reduce((covs, [keyPath, value]) => { - const newCovs = covs; - newCovs[keyPath] = formatValue(value); - - // EXAMPLE_FILE直接保留返回 - if (keyPath.endsWith(EXAMPLE_FILE) || keyPath === ALL_KEY) { - return newCovs; - } - - const [root, sub] = keyPath.split('/'); - - // 根文件 - if (!sub) { - statistics[keyPath] = value; - return newCovs; - } - - const preValue = statistics[root]; - // 根文件存在子目录 - if (preValue) { - const [preStart, preEnd] = preValue.split('/').map(item => Number(item)); - const [start, end] = value.split('/').map(item => Number(item)); - statistics[root] = `${preStart + start} / ${preEnd + end}`; - newCovs[root] = calculate((preStart + start), (preEnd + end)); - delete newCovs[keyPath]; - return newCovs; - } - - return newCovs; - }, {}); - return JSON.stringify(coverage); -}) - -const coverageExec = exec('npm run test:coverage', async () => { - let result = await Promise.all([ - generateReportJson('test/unit/coverage/index.html', 'unit'), - // generateReportJson('test/e2e/cy-report/coverage/lcov-report/index.html', 'e2e'), - // generateReportJson('test/ssr/coverage/index.html', 'ssr'), - ]); - result = formatCoverageResult(result); - const originalCoverage = await fs.readFileSync(coveragePath, 'utf8'); // 如果解析失败，有上一次生成的结果文件兜底 - const { unit = {}, e2e = {}, ssr = {} } = JSON.parse(originalCoverage.replace('export default ', '')); - const [resultunit = JSON.stringify(unit), resulte2e = JSON.stringify(e2e), resultssr = JSON.stringify(ssr)] = result; - const finalRes = `export default { - "unit": ${resultunit}, - "e2e": ${resulte2e}, - "ssr": ${resultssr} - }`; - - fs.writeFileSync(coveragePath, finalRes); - console.log('👍覆盖率报告解析完毕，请于site/test-coverage.js查看'); -}); - -let data = 0; -coverageExec.stdout.on('data', () => { - process.stdout.clearLine(); - process.stdout.cursorTo(0); - data += 1; - - process.stdout.write(data % 2 ? '努力生成中💪...' : '再耐心等一下⌛️...'); -}); diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap new file mode 100644 index 00000000..22231cf5 --- /dev/null +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -0,0 +1,358 @@ +// Vitest Snapshot v1 + +exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 8 +
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ new +
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ ··· +
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+ , + "container":
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 8 +
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ new +
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ ··· +
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
new
标题文字
···
标题文字
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap new file mode 100644 index 00000000..63ff7c43 --- /dev/null +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -0,0 +1,3 @@ +// Vitest Snapshot v1 + +exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
new
标题文字
···
标题文字
"`; diff --git a/test/snap/csr.test.jsx b/test/snap/csr.test.jsx new file mode 100644 index 00000000..8ba5624a --- /dev/null +++ b/test/snap/csr.test.jsx @@ -0,0 +1,41 @@ +import glob from 'glob'; +import MockDate from 'mockdate'; +import React from 'react'; +import { vi } from 'vitest'; +import { render } from '@test/utils'; +import { IGNORE_ASYNC_EXAMPLE_LIST } from './ssr.test'; + +// 固定时间，当使用 new Date() 时，返回固定时间，防止“当前时间”的副作用影响，导致 snapshot 变更，mockDate 插件见 https://github.com/boblauer/MockDate +MockDate.set('2020-12-28 00:00:00'); + +class ResizeObserver { + observe() { + return this; + } + + unobserve() { + return this; + } +} + +function runTest() { + const files = glob.sync('src/**/_example/*.tsx', { + ignore: IGNORE_ASYNC_EXAMPLE_LIST, + }); + + describe('csr snapshot test', () => { + HTMLCanvasElement.prototype.getContext = vi.fn(); + global.ResizeObserver = ResizeObserver; + + files.forEach((file) => { + it(`csr test ${file}`, async () => { + const demo = await import(`../../${file}`); + const RealDemoComp = demo.default ? demo.default : demo; + const wrapper = render(); + expect(wrapper).toMatchSnapshot(); + }); + }); + }); +} + +runTest(); diff --git a/test/snap/ssr.test.jsx b/test/snap/ssr.test.jsx new file mode 100644 index 00000000..1f942cb7 --- /dev/null +++ b/test/snap/ssr.test.jsx @@ -0,0 +1,36 @@ +import glob from 'glob'; +import MockDate from 'mockdate'; +import { vi } from 'vitest'; +import React from 'react'; +import { renderToString } from 'react-dom/server'; + +// 固定时间，当使用 new Date() 时，返回固定时间，防止“当前时间”的副作用影响，导致 snapshot 变更，mockdate 插件见 https://github.com/boblauer/MockDate +MockDate.set('2020-12-28 00:00:00'); + +export const IGNORE_ASYNC_EXAMPLE_LIST = ['src/watermark/_example/*.tsx', 'src/table/_example/pagination-ajax.tsx']; + +function runTest() { + const files = glob.sync('src/**/_example/*.tsx', { + ignore: IGNORE_ASYNC_EXAMPLE_LIST, + }); + + vi.mock('react-dom', async () => ({ + ...(await vi.importActual('react-dom')), + createPortal: (node) => node, + })); + + describe('ssr snapshot test', () => { + HTMLCanvasElement.prototype.getContext = vi.fn(); + + files.forEach((file) => { + it(`ssr test ${file}`, async () => { + const demo = await import(`../../${file}`); + const RealDemoComp = demo.default ? demo.default : demo; + const html = renderToString(); + expect(html).toMatchSnapshot(); + }); + }); + }); +} + +runTest(); diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap deleted file mode 100644 index 3f2827f2..00000000 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ /dev/null @@ -1,395 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ssr snapshot test renders ./src/avatar/_example/adjust.jsx correctly 1`] = `"
陈
陈晚
陈晚晚
"`; - -exports[`ssr snapshot test renders ./src/avatar/_example/index.jsx correctly 1`] = `"

Avatar 头像

用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。

01 头像类型

头像样式可为默认头像、微信头像圆形、方形、自定义文字

\\"示例图片\\"
\\"示例图片\\"/
\\"\\"
A

02 特殊类型

纯展示 从上往下

\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"

带操作 从下往上

\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"
\\"\\"

03 规格

头像大小尺寸

\\"示例图片\\"
10
\\"示例图片\\"
10
\\"示例图片\\"
\\"示例图片\\"
10
\\"示例图片\\"
10
\\"示例图片\\"
A
A
A
"`; - -exports[`ssr snapshot test renders ./src/avatar/_example/shape.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/avatar/_example/size.jsx correctly 1`] = `"
\\"示例图片\\"
10
\\"示例图片\\"
10
\\"示例图片\\"
\\"示例图片\\"
10
\\"示例图片\\"
10
\\"示例图片\\"
A
A
A
"`; - -exports[`ssr snapshot test renders ./src/avatar/_example/type.jsx correctly 1`] = `"
\\"示例图片\\"
\\"示例图片\\"/
\\"\\"
A
"`; - -exports[`ssr snapshot test renders ./src/back-top/_example/base.jsx correctly 1`] = `"

BackTop 返回顶部

用于当页面过长往下滑动时，帮助用户快速回到页面顶部

01 类型

圆型返回顶部

半圆型返回顶部

"`; - -exports[`ssr snapshot test renders ./src/badge/_example/basic.jsx correctly 1`] = `"
16
消息
消息
NEW
···
"`; - -exports[`ssr snapshot test renders ./src/badge/_example/color.jsx correctly 1`] = `"
12
99
1
"`; - -exports[`ssr snapshot test renders ./src/badge/_example/dist.jsx correctly 1`] = `"
单行标题
"`; - -exports[`ssr snapshot test renders ./src/badge/_example/index.jsx correctly 1`] = `"

Badge 徽标

展示新增内容的提示，用警示红色为主色，包含数字或文字提示内容

01 类型

徽标主要分红点、数字、文字和角标提醒

消息
16
消息
NEW
消息
···
消息
16
NEW
···
单行标题
单行标题
16
单行标题
NEW
NEW
单行标题
NEW
"`; - -exports[`ssr snapshot test renders ./src/badge/_example/max-count.jsx correctly 1`] = `"
12
99
44
105
单行标题
16
"`; - -exports[`ssr snapshot test renders ./src/badge/_example/offset.jsx correctly 1`] = `"
offset: [10, 10]
12
offset: [-10, 10]
12
offset: [-10, -10]
12
offset: [10, -10]
12
"`; - -exports[`ssr snapshot test renders ./src/badge/_example/shape.jsx correctly 1`] = `"
12
12
列表带徽标
NEW
"`; - -exports[`ssr snapshot test renders ./src/badge/_example/text.jsx correctly 1`] = `"
NEW
···
单行标题
NEW
NEW
NEW
NEW
"`; - -exports[`ssr snapshot test renders ./src/button/_example/base.jsx correctly 1`] = `""`; - -exports[`ssr snapshot test renders ./src/button/_example/icon.jsx correctly 1`] = `""`; - -exports[`ssr snapshot test renders ./src/button/_example/index.jsx correctly 1`] = `"

Button 按钮

按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。

01 基础按钮

基础类型分为主按钮、次按钮、文字按钮。

02 图标按钮

图标按钮分为图标加文字形式、纯图标形式

03 按钮状态

按钮禁用态

04 尺寸

提供大、中、小 3 种不同大小按钮


05 形状

"`; - -exports[`ssr snapshot test renders ./src/button/_example/shape.jsx correctly 1`] = `""`; - -exports[`ssr snapshot test renders ./src/button/_example/size.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/button/_example/test.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/cell/_example/base.jsx correctly 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
辅助信息
单行标题
单行标题
辅助信息
单行标题
8
单行标题
单行标题

多行单元格

多行标题
一段很长很长的内容文字
多行带图标
一段很长很长的内容文字
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
多行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
"`; - -exports[`ssr snapshot test renders ./src/cell/_example/multiple.jsx correctly 1`] = `"
多行标题
一段很长很长的内容文字
多行带图标
一段很长很长的内容文字
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
多行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
"`; - -exports[`ssr snapshot test renders ./src/cell/_example/single.jsx correctly 1`] = `"
单行标题
单行标题 *
单行标题
辅助信息
单行标题
单行标题
辅助信息
单行标题
8
单行标题
单行标题
"`; - -exports[`ssr snapshot test renders ./src/checkbox/_example/base.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/checkbox/_example/disable.jsx correctly 1`] = `""`; - -exports[`ssr snapshot test renders ./src/checkbox/_example/group.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/checkbox/_example/icon.jsx correctly 1`] = `""`; - -exports[`ssr snapshot test renders ./src/checkbox/_example/indeterminate.jsx correctly 1`] = `""`; - -exports[`ssr snapshot test renders ./src/checkbox/_example/index.jsx correctly 1`] = `"

Checkbox 多选框

用于预设的一组选项中执行多项选择，并呈现选择结果。

01 类型

基础多选框

右侧多选框

带全选的多选框

限制最多可选数量

02 状态

多选框禁用态

多选框半选态

03 特殊类型

自定义图标多选框

"`; - -exports[`ssr snapshot test renders ./src/checkbox/_example/max.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/checkbox/_example/right.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/collapse/_example/accordion.jsx correctly 1`] = `"
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; - -exports[`ssr snapshot test renders ./src/collapse/_example/action.jsx correctly 1`] = `"
折叠面板标题
收起
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; - -exports[`ssr snapshot test renders ./src/collapse/_example/base.jsx correctly 1`] = `"
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; - -exports[`ssr snapshot test renders ./src/collapse/_example/control.jsx correctly 1`] = `"
面板标题1
  • 面板内容
  • 面板内容
  • 面板内容
面板标题2
  • 面板内容
  • 面板内容
  • 面板内容

"`; - -exports[`ssr snapshot test renders ./src/collapse/_example/destroy.jsx correctly 1`] = `"
收起不销毁面板内容
展开
  • 面板内容
  • 面板内容
  • 面板内容
收起销毁面板内容
展开
"`; - -exports[`ssr snapshot test renders ./src/collapse/_example/disable.jsx correctly 1`] = `"
面板标题
  • 面板内容
  • 面板内容
  • 面板内容
"`; - -exports[`ssr snapshot test renders ./src/collapse/_example/expandIcon.jsx correctly 1`] = `"
面板标题1
  • 面板内容
  • 面板内容
  • 面板内容
面板标题2
  • 面板内容
  • 面板内容
  • 面板内容
"`; - -exports[`ssr snapshot test renders ./src/collapse/_example/index.jsx correctly 1`] = `"

Collapse 折叠面板

可以折叠/展开的内容区域。

01 类型

基础面板

折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容

带操作说明

折叠面板标题
收起
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容

手风琴模式

折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; - -exports[`ssr snapshot test renders ./src/collapse/_example/more.jsx correctly 1`] = `"
面板标题1
  • 面板内容
  • 面板内容
  • 面板内容
面板标题2
  • 面板内容
  • 面板内容
  • 面板内容
"`; - -exports[`ssr snapshot test renders ./src/count-down/_example/base.jsx correctly 1`] = `"

类型

时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位
"`; - -exports[`ssr snapshot test renders ./src/count-down/_example/index.jsx correctly 1`] = `"

CountDown倒计时

用于实时展示倒计时数值。

类型

时分秒
带毫秒
带方形底
带圆形底
带单位
无底色带单位

规格

纯数字
小
中
大
带圆形底
小
中
大
带方形底
小
中
大
带单位
小
中
大
无底色带单位
小
中
大
"`; - -exports[`ssr snapshot test renders ./src/count-down/_example/specs.jsx correctly 1`] = `"

规格

纯数字
小
中
大
带圆形底
小
中
大
带方形底
小
中
大
带单位
小
中
大
无底色带单位
小
中
大
"`; - -exports[`ssr snapshot test renders ./src/dialog/_example/index.jsx correctly 1`] = `"

Dialog 对话框

用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。

01 类型

反馈类对话框

确认类对话框

输入类对话框

命令调用

"`; - -exports[`ssr snapshot test renders ./src/divider/_example/base.jsx correctly 1`] = `"

Divider 分割线

用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。

01 类型

直线拉通

虚线拉通

左右间距

右侧拉通

定义左侧距离

垂直分割

文字信息
文字信息
文字信息

文字+直线

文字信息

文字+虚线

文字信息

纯文字

没有更多了～
"`; - -exports[`ssr snapshot test renders ./src/divider/_example/content.jsx correctly 1`] = `"
文字信息
"`; - -exports[`ssr snapshot test renders ./src/divider/_example/normal.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/divider/_example/normal-dashed.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/divider/_example/pure-content.jsx correctly 1`] = `"
没有更多了～
"`; - -exports[`ssr snapshot test renders ./src/divider/_example/vertical.jsx correctly 1`] = `"
文字信息
文字信息
文字信息
"`; - -exports[`ssr snapshot test renders ./src/grid/_example/badge.tsx correctly 1`] = `"
标题文字
8
标题文字
new
标题文字
···
标题文字
"`; - -exports[`ssr snapshot test renders ./src/grid/_example/base.jsx correctly 1`] = `"

Grid 宫格

用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。

基础宫格

标题文字
标题文字
标题文字
标题文字
最多四字
标题文字
标题文字
标题文字
标题五字内
标题文字
标题文字
标题最多六字
标题文字
标题文字
标题文字
标题文字
最多四字

带说明宫格

标题文字
说明文字
标题最多六字
说明文字最多八字
标题文字
说明文字
标题文字
说明文字
标题最多六字
说明最多六字

带徽标宫格

标题文字
8
标题文字
New
标题五字内
···
标题五字内
"`; - -exports[`ssr snapshot test renders ./src/grid/_example/border.jsx correctly 1`] = `"
标题文字
标题文字
标题文字
"`; - -exports[`ssr snapshot test renders ./src/grid/_example/layout.jsx correctly 1`] = `"
标题文字
说明文字
标题文字
说明文字
"`; - -exports[`ssr snapshot test renders ./src/grid/_example/normal.jsx correctly 1`] = `"
标题文字
标题文字
标题文字
标题文字
"`; - -exports[`ssr snapshot test renders ./src/icon/_example/index.jsx correctly 1`] = `"test"`; - -exports[`ssr snapshot test renders ./src/image/_example/index.jsx correctly 1`] = `"

Image 图片

用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。

01 类型

裁切样式

裁切
适应高
拉伸

圆角样式

方形
圆角方形
圆角

02 状态

加载中提示

默认提示
自定义提示

加载失败提示

默认提示
自定义提示

03 规格

常用图片尺寸

图片 56
图片 48
图片 32
图片 24
图片 120
图片 72
"`; - -exports[`ssr snapshot test renders ./src/indexes/_example/base.jsx correctly 1`] = `"
A开头
阿坝
阿拉善
阿里
安康
安庆
鞍山
安顺
安阳
澳门
B开头
北京
白银
保定
宝鸡
保山
包头
巴中
北海
蚌埠
本溪
毕节
滨州
百色
亳州
C开头
重庆
成都
长沙
长春
沧州
常德
昌都
长治
常州
巢湖
潮州
承德
郴州
赤峰
池州
崇左
楚雄
滁州
朝阳
D开头
大连
东莞
大理
丹东
大庆
大同
大兴安岭
德宏
德阳
德州
定西
迪庆
东营
E开头
鄂尔多斯
恩施
鄂州
F开头
福州
防城港
佛山
抚顺
抚州
阜新
阜阳
G开头
广州
桂林
贵阳
甘南
赣州
甘孜
广安
广元
贵港
果洛
A
B
C
D
E
F
G
"`; - -exports[`ssr snapshot test renders ./src/indexes/_example/index.tsx correctly 1`] = `"

Indexes 索引

用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。

01 类型

基础索引类型

"`; - -exports[`ssr snapshot test renders ./src/indexes/_example/number.jsx correctly 1`] = `"
第一章
第一章第一节
第一章第二节
第一章第三节
第一章第四节
第一章第五节
第二章
第二章第一节
第二章第二节
第二章第三节
第二章第四节
第二章第五节
第三章
第三章第一节
第三章第二节
第三章第三节
第三章第四节
第三章第五节
第四章
第四章第一节
第四章第二节
第四章第三节
第四章第四节
第四章第五节
第五章
第五章第一节
第五章第二节
第五章第三节
第五章第四节
第五章第五节
第六章
第六章第一节
第六章第二节
第六章第三节
第六章第四节
第六章第五节
1
2
3
4
5
6
"`; - -exports[`ssr snapshot test renders ./src/input/_example/base.jsx correctly 1`] = `"

Input 输入框

空状态时的占位提示。

01 类型

基础文本框

标签文字

必填、选填文本框

标签文字
 *
标签文字

无标题文本框

带提示信息文本框

标准五个字

两行样式文本框

标准五个字

长标题文本框

超长需换行的标签

02 状态

文本框状态

标签文字
填写错误
提示信息
不可编辑

03 特殊类型

特殊文本框类型

密码
验证码
XYDZ
价格
元
个数
个

04 字数限制

文本框字数限制

"`; - -exports[`ssr snapshot test renders ./src/input/_example/index.jsx correctly 1`] = `"

Input 输入框

空状态时的占位提示。

01 类型

基础文本框

标签文字

必填、选填文本框

标签文字
 *
标签文字

无标题文本框

带提示信息文本框

标准五个字

两行样式文本框

标准五个字

长标题文本框

超长需换行的标签

02 状态

文本框状态

标签文字
填写错误
提示信息
不可编辑

03 特殊类型

特殊文本框类型

密码
验证码
XYDZ
价格
元
个数
个

04 字数限制

文本框字数限制

"`; - -exports[`ssr snapshot test renders ./src/loading/_example/bar.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/loading/_example/base.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/loading/_example/delay.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/loading/_example/horz.jsx correctly 1`] = `"
加载中...
加载中...
加载中...
"`; - -exports[`ssr snapshot test renders ./src/loading/_example/index.jsx correctly 1`] = `"

Loading 加载中

加载过程中只有图标显示。适用于打开页面或操作完成后模块内等待刷新的加载场景。

01 类型

纯图标

图标加文字横向

加载中...
加载中...
加载中...

图标加文字竖向

加载中...

纯文字

加载中...

加载失败

加载失败 刷新

进度条加载

延迟加载

02 规格

图标加文字横向

加载中(大)...
加载中(中)...
加载中(小)...
"`; - -exports[`ssr snapshot test renders ./src/loading/_example/pure-text.jsx correctly 1`] = `"
加载中...
加载失败
加载失败 刷新
"`; - -exports[`ssr snapshot test renders ./src/loading/_example/size.jsx correctly 1`] = `"
加载中(大)...
加载中(中)...
加载中(小)...
"`; - -exports[`ssr snapshot test renders ./src/loading/_example/vert.jsx correctly 1`] = `"
加载中...
"`; - -exports[`ssr snapshot test renders ./src/message/_example/base.jsx correctly 1`] = `"

Message 消息通知

用于轻量级反馈或提示，不会打断用户操作。

01 类型

弹窗内容为纯文本、标题和副标题、带输入框

02 状态

弹窗状态为普通弹窗、警示提示弹窗、成功提示弹窗、错误提示弹窗。

"`; - -exports[`ssr snapshot test renders ./src/message/_example/status.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/message/_example/types.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/navbar/_example/base.jsx correctly 1`] = `"
标题
"`; - -exports[`ssr snapshot test renders ./src/navbar/_example/event.jsx correctly 1`] = `"
标题
"`; - -exports[`ssr snapshot test renders ./src/navbar/_example/icon.jsx correctly 1`] = `"
标题
标题
"`; - -exports[`ssr snapshot test renders ./src/navbar/_example/index.jsx correctly 1`] = `"

Navbar 导航栏

用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。

01 类型

基础导航栏

02 特殊类型

品牌超长文字导航栏

标题
"`; - -exports[`ssr snapshot test renders ./src/picker/_example/base.jsx correctly 1`] = `"

01 类型

基础选择器

城市
选择城市
年份和季节
选择城年份和季节
日期
选择日期

带标题选择器

城市
选择城市
"`; - -exports[`ssr snapshot test renders ./src/picker/_example/index.jsx correctly 1`] = `"

Picker 选择器

用于选择一个地区的省、市、区、街道等，包含树形用于多层级地区选择以及行政区单层选择

01 类型

基础选择器

城市
选择城市
年份和季节
选择城年份和季节
日期
选择日期

带标题选择器

城市
选择城市
"`; - -exports[`ssr snapshot test renders ./src/popup/_example/base.jsx correctly 1`] = `"

Popup 弹窗层

由其他控件触发，屏幕滑出或弹出一块自定义内容区域

类型

弹出层出现为止可能为顶部、底部、中部、左侧或右侧

"`; - -exports[`ssr snapshot test renders ./src/popup/_example/placement-bottom.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/popup/_example/placement-center.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/popup/_example/placement-left.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/popup/_example/placement-right.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/popup/_example/placement-top.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/pull-down-refresh/_example/base.jsx correctly 1`] = `"
拖拽该区域演示 中间下拉刷新
"`; - -exports[`ssr snapshot test renders ./src/pull-down-refresh/_example/index.jsx correctly 1`] = `"

PullDownRefresh 下拉刷新

用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。

01 类型

下拉刷新大致分为顶部下拉和中间下拉

拖拽该区域演示 中间下拉刷新

顶部下拉刷新

拖拽该区域演示 中间下拉刷新
"`; - -exports[`ssr snapshot test renders ./src/pull-down-refresh/_example/loading-texts.jsx correctly 1`] = `"
已下拉0次
"`; - -exports[`ssr snapshot test renders ./src/pull-down-refresh/_example/timeout.jsx correctly 1`] = `"
已下拉0次
"`; - -exports[`ssr snapshot test renders ./src/pull-down-refresh/_example/top.jsx correctly 1`] = `"
拖拽该区域演示 中间下拉刷新
"`; - -exports[`ssr snapshot test renders ./src/radio/_example/base.jsx correctly 1`] = `"
单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
"`; - -exports[`ssr snapshot test renders ./src/radio/_example/group.jsx correctly 1`] = `"
北京
北京
上海
上海
广州
广州
深圳
深圳
北京
上海
广州
深圳
北京
上海
广州
深圳
北京
上海
广州
深圳
"`; - -exports[`ssr snapshot test renders ./src/radio/_example/icon.jsx correctly 1`] = `"
单选
单选
"`; - -exports[`ssr snapshot test renders ./src/radio/_example/index.jsx correctly 1`] = `"

Radio 单选框

用于在预设的一组选项中执行单项选择，并呈现选择结果。

01 类型

左侧圆形单选框

单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选

右侧圆形单选框

单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选

左侧勾形单选框

单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选

右侧勾形单选框

单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选

02 状态

单选框禁用状态

单选
单选
单选
单选
单选
单选
单选
单选

03 特殊类型

自定义图标多选框

单选
单选

04 规格

单选框尺寸规格

单选 H48
"`; - -exports[`ssr snapshot test renders ./src/radio/_example/leftStrokeLine.jsx correctly 1`] = `"
单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
"`; - -exports[`ssr snapshot test renders ./src/radio/_example/right.jsx correctly 1`] = `"
单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
"`; - -exports[`ssr snapshot test renders ./src/radio/_example/rightStrokeLine.jsx correctly 1`] = `"
单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
单选
单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
"`; - -exports[`ssr snapshot test renders ./src/radio/_example/size.jsx correctly 1`] = `"
单选 H48
"`; - -exports[`ssr snapshot test renders ./src/radio/_example/status.jsx correctly 1`] = `"
单选
单选
单选
单选
单选
单选
单选
单选
"`; - -exports[`ssr snapshot test renders ./src/rate/_example/allow-half.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/rate/_example/base.jsx correctly 1`] = `"

Rate 评分

评分组件，对内容进行快速评级操作，或内容评价的等级展示，目前常用为五星实心评价

01 类型

基础评分

请点击评分
请点击评分
请点击评分
自定义数量
半星评价
"`; - -exports[`ssr snapshot test renders ./src/rate/_example/color.jsx correctly 1`] = `"
红色选中
绿色未选中
"`; - -exports[`ssr snapshot test renders ./src/rate/_example/count.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/rate/_example/custom-cell.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/rate/_example/disabled.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/rate/_example/index.jsx correctly 1`] = `"

Rate 评分

评分组件，对内容进行快速评级操作，或内容评价的等级展示，目前常用为五星实心评价

01 类型

基础评分

请点击评分
请点击评分
请点击评分
自定义数量
半星评价

带描述评分

请点击评分
3分
请点击评分
一般
请点击评分
一般

展示型评分

02 规格

实心评分

请点击评分
请点击评分

空心评分

请点击评分
请点击评分

自定义数量评分

自定义数量
自定义数量

半星评分

半星评价
半星评价

展示型评分

"`; - -exports[`ssr snapshot test renders ./src/rate/_example/size.jsx correctly 1`] = `"

02 规格

实心评分

请点击评分
请点击评分

空心评分

请点击评分
请点击评分

自定义数量评分

自定义数量
自定义数量

半星评分

半星评价
半星评价

展示型评分

"`; - -exports[`ssr snapshot test renders ./src/rate/_example/text.jsx correctly 1`] = `"

带描述评分

请点击评分
3分
请点击评分
一般
请点击评分
一般

展示型评分

"`; - -exports[`ssr snapshot test renders ./src/search/_example/base.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/search/_example/click.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/search/_example/default.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/search/_example/index.jsx correctly 1`] = `"

Search 搜索框

用于用户输入搜索信息，并进行页面内容搜索

01 类型

基础搜索框

02 状态

默认状态

点击状态

输入状态

"`; - -exports[`ssr snapshot test renders ./src/search/_example/state.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/skeleton/_example/avatar-text.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/skeleton/_example/base.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/skeleton/_example/flashed.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/skeleton/_example/gradient.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/skeleton/_example/index.jsx correctly 1`] = `"

Skeleton 骨架屏

用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。

01 类型

基础

头像组合

图片组合

02 动画效果

渐变加载动画

闪烁加载动画

"`; - -exports[`ssr snapshot test renders ./src/skeleton/_example/pic-text.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/slider/_example/base.jsx correctly 1`] = `"

Slider 滑动选择器

滑动滑块来选择一个数值，在具体场景中也可以增加来刻度和展示数值来方便用户使用

01 类型

基础滑动选择器

带数值滑动选择器

60

起始非零滑动选择器

30

带刻度滑动选择器

小
中
大

区间滑动选择器

0
30
70
100

02 状态

滑动选择器禁用状态

60

带刻度滑动选择器

小
中
大
50

区间滑动选择器

0
30
70
100

03 规格

无标题滑动选择器

65

有标题滑动选择器

选择器标题
65
"`; - -exports[`ssr snapshot test renders ./src/slider/_example/mark.jsx correctly 1`] = `"
小
中
大
50
"`; - -exports[`ssr snapshot test renders ./src/slider/_example/range.jsx correctly 1`] = `"
0
30
70
100
"`; - -exports[`ssr snapshot test renders ./src/slider/_example/value.jsx correctly 1`] = `"
65
"`; - -exports[`ssr snapshot test renders ./src/stepper/_example/base.jsx correctly 1`] = `"
文字标题
"`; - -exports[`ssr snapshot test renders ./src/stepper/_example/disable-input.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/stepper/_example/disabled.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/stepper/_example/event.jsx correctly 1`] = `"
最大值(999)
"`; - -exports[`ssr snapshot test renders ./src/stepper/_example/index.jsx correctly 1`] = `"

Stepper 步进器

用户通过调整“+”按钮、“-”按钮、数字输入框来调整具体需要的数值，可设置最大值和最小值

01 类型

基本步进器

文字标题

带单位步进器

标题文字（单位）

纯步进器

02 状态

步进器状态

禁用
禁用(单位)
最大值(999)
最小值(5)
"`; - -exports[`ssr snapshot test renders ./src/steps/_example/click.jsx correctly 1`] = `"
1
步骤描述
2
选中步骤
1
步骤描述
辅助信息文字最多两行
2
选中步骤
辅助信息文字最多两行
1
步骤描述
2
选中步骤
3
步骤描述
1
步骤描述
辅助信息文字最多两行
2
选中步骤
辅助信息文字最多两行
3
步骤描述
辅助信息文字最多两行
1
步骤描述
2
选中步骤
3
步骤描述
4
选中步骤
1
步骤描述
辅助信息文字最多两行
2
选中步骤
辅助信息文字最多两行
3
步骤描述
辅助信息文字最多两行
4
选中步骤
辅助信息文字最多两行
"`; - -exports[`ssr snapshot test renders ./src/steps/_example/content.jsx correctly 1`] = `"
已完成步骤
可自定义此处内容，可自定义此处内容，可自定义此处内容可自定义此处内容可自定义此处内容。\\"\\"/
2
当前步骤
可自定义此处内容，可自定义此处内容，可自定义此处内容可自定义此处内容可自定义此处内容。
3
未完成步骤
可自定义此处内容，可自定义此处内容，可自定义此处内容可自定义此处内容可自定义此处内容。
"`; - -exports[`ssr snapshot test renders ./src/steps/_example/horizontal.jsx correctly 1`] = `"
1
当前步骤
2
未完成步骤
1
当前步骤
辅助信息文字最多两行
2
未完成步骤
辅助信息文字最多两行
错误步骤
辅助信息文字最多两行
2
未完成步骤
辅助信息文字最多两行
已完成步骤
2
当前步骤
3
未完成步骤
已完成步骤
辅助信息文字最多两行
2
当前步骤
辅助信息文字最多两行
3
未完成步骤
辅助信息文字最多两行
已完成步骤
辅助信息文字最多两行
错误步骤
辅助信息文字最多两行
3
未完成步骤
辅助信息文字最多两行
已完成步骤
2
当前步骤
3
未完成步骤
4
未完成步骤
已完成步骤
辅助信息文字最多两行
2
当前步骤
辅助信息文字最多两行
3
未完成步骤
辅助信息文字最多两行
4
未完成步骤
辅助信息文字最多两行
已完成步骤
辅助信息文字最多两行
错误步骤
辅助信息文字最多两行
3
未完成步骤
辅助信息文字最多两行
4
未完成步骤
辅助信息文字最多两行
"`; - -exports[`ssr snapshot test renders ./src/steps/_example/icon.jsx correctly 1`] = `"
步骤描述
选中步骤
步骤描述
步骤描述
辅助信息文字最多两行
选中步骤
辅助信息文字最多两行
步骤描述
辅助信息文字最多两行
"`; - -exports[`ssr snapshot test renders ./src/steps/_example/index.jsx correctly 1`] = `"

Steps 步骤条

用于用户对某个任务的时间节点

01 类型

横向可操作步骤条

1
步骤描述
2
选中步骤
1
步骤描述
辅助信息文字最多两行
2
选中步骤
辅助信息文字最多两行
1
步骤描述
2
选中步骤
3
步骤描述
1
步骤描述
辅助信息文字最多两行
2
选中步骤
辅助信息文字最多两行
3
步骤描述
辅助信息文字最多两行
1
步骤描述
2
选中步骤
3
步骤描述
4
选中步骤
1
步骤描述
辅助信息文字最多两行
2
选中步骤
辅助信息文字最多两行
3
步骤描述
辅助信息文字最多两行
4
选中步骤
辅助信息文字最多两行

横向带图标可操作步骤条

步骤描述
选中步骤
步骤描述
步骤描述
辅助信息文字最多两行
选中步骤
辅助信息文字最多两行
步骤描述
辅助信息文字最多两行

横向只读步骤条

1
当前步骤
2
未完成步骤
1
当前步骤
辅助信息文字最多两行
2
未完成步骤
辅助信息文字最多两行
错误步骤
辅助信息文字最多两行
2
未完成步骤
辅助信息文字最多两行
已完成步骤
2
当前步骤
3
未完成步骤
已完成步骤
辅助信息文字最多两行
2
当前步骤
辅助信息文字最多两行
3
未完成步骤
辅助信息文字最多两行
已完成步骤
辅助信息文字最多两行
错误步骤
辅助信息文字最多两行
3
未完成步骤
辅助信息文字最多两行
已完成步骤
2
当前步骤
3
未完成步骤
4
未完成步骤
已完成步骤
辅助信息文字最多两行
2
当前步骤
辅助信息文字最多两行
3
未完成步骤
辅助信息文字最多两行
4
未完成步骤
辅助信息文字最多两行
已完成步骤
辅助信息文字最多两行
错误步骤
辅助信息文字最多两行
3
未完成步骤
辅助信息文字最多两行
4
未完成步骤
辅助信息文字最多两行

竖向只读步骤条

已完成步骤
辅助信息文字最多两行
2
当前步骤
辅助信息文字最多两行
3
未完成步骤
辅助信息文字最多两行
已完成步骤
辅助信息文字最多两行
错误步骤
辅助信息文字最多两行
3
未完成步骤
辅助信息文字最多两行

竖向简化只读步骤条

事件描述
事件描述
事件描述

自定义内容步骤条

已完成步骤
可自定义此处内容，可自定义此处内容，可自定义此处内容可自定义此处内容可自定义此处内容。\\"\\"/
2
当前步骤
可自定义此处内容，可自定义此处内容，可自定义此处内容可自定义此处内容可自定义此处内容。
3
未完成步骤
可自定义此处内容，可自定义此处内容，可自定义此处内容可自定义此处内容可自定义此处内容。
"`; - -exports[`ssr snapshot test renders ./src/steps/_example/vertical.jsx correctly 1`] = `"
事件描述
事件描述
事件描述
"`; - -exports[`ssr snapshot test renders ./src/sticky/_example/base.jsx correctly 1`] = `"

Sticky 吸顶

用于常驻页面顶部的信息，操作展示

01 类型

基础吸顶

吸顶距离

指定容器

"`; - -exports[`ssr snapshot test renders ./src/swipe-cell/_example/bind.jsx correctly 1`] = `"

通过 expanded 实现父子组件联动

开关
父子组件联动
"`; - -exports[`ssr snapshot test renders ./src/swipe-cell/_example/btns.jsx correctly 1`] = `"

左右两侧都有菜单

左右两侧都有菜单
"`; - -exports[`ssr snapshot test renders ./src/swipe-cell/_example/content.jsx correctly 1`] = `"

通过直接传入内容或者使用 slot#content 来渲染

使用slot#content
"`; - -exports[`ssr snapshot test renders ./src/swipe-cell/_example/disabled.jsx correctly 1`] = `"

是否启用滑动功能

开关
是否启用滑动功能
"`; - -exports[`ssr snapshot test renders ./src/swipe-cell/_example/event.jsx correctly 1`] = `"

点击事件

点击事件
辅助信息
"`; - -exports[`ssr snapshot test renders ./src/swipe-cell/_example/index.jsx correctly 1`] = `"

SwipeCell 滑动单元格

用来承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。

左滑单操作

列表-左滑单操作
辅助信息
列表-左滑单操作
辅助信息

左滑双操作

列表-左滑双操作
双操作
列表-左滑双操作
双操作

左滑多操作

列表-左滑多操作
多操作
列表-左滑多操作
多操作

左滑大列表

左滑大列表
一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字
左滑大列表
一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字

右滑单操作

列表-右滑单操作
辅助信息
列表-右滑单操作
辅助信息

通过 expanded 实现父子组件联动

开关
父子组件联动
"`; - -exports[`ssr snapshot test renders ./src/swipe-cell/_example/left-card.jsx correctly 1`] = `"

左滑大列表

左滑大列表
一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字
左滑大列表
一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字
"`; - -exports[`ssr snapshot test renders ./src/swipe-cell/_example/left-menu.jsx correctly 1`] = `"

左侧菜单

左侧菜单
"`; - -exports[`ssr snapshot test renders ./src/swipe-cell/_example/left-more-menu.jsx correctly 1`] = `"

左滑多操作

列表-左滑多操作
多操作
列表-左滑多操作
多操作
"`; - -exports[`ssr snapshot test renders ./src/swipe-cell/_example/left-one-menu.jsx correctly 1`] = `"

左滑单操作

列表-左滑单操作
辅助信息
列表-左滑单操作
辅助信息
"`; - -exports[`ssr snapshot test renders ./src/swipe-cell/_example/left-two-menu.jsx correctly 1`] = `"

左滑双操作

列表-左滑双操作
双操作
列表-左滑双操作
双操作
"`; - -exports[`ssr snapshot test renders ./src/swipe-cell/_example/right-menu.jsx correctly 1`] = `"

右滑单操作

列表-右滑单操作
辅助信息
列表-右滑单操作
辅助信息
"`; - -exports[`ssr snapshot test renders ./src/swiper/_example/base.jsx correctly 1`] = `"
itme3
itme1
itme2
itme3
itme1
"`; - -exports[`ssr snapshot test renders ./src/swiper/_example/control.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/swiper/_example/direction.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/swiper/_example/index.jsx correctly 1`] = `"

Swiper 轮播图

用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置

01 类型

轮播图的多种样式

1/5
"`; - -exports[`ssr snapshot test renders ./src/swiper/_example/pagination-type.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/swiper/_example/test.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/switch/_example/base.jsx correctly 1`] = `"
开关
开关
自定义颜色
"`; - -exports[`ssr snapshot test renders ./src/switch/_example/desc.jsx correctly 1`] = `"
开关
开关
自定义颜色
"`; - -exports[`ssr snapshot test renders ./src/switch/_example/disabled.jsx correctly 1`] = `"
开关开启禁用
开关关闭禁用
开关开启禁用
开关关闭禁用
"`; - -exports[`ssr snapshot test renders ./src/switch/_example/index.jsx correctly 1`] = `"

Switch 开关

开关用于切换当个设置项的状态，开启、关闭为两个互斥的操作

01 类型

基础开关

开关
开关
自定义颜色

带描述信息开关

开关
开关
自定义颜色

02 状态

开关状态

开关开启禁用
开关关闭禁用
开关开启禁用
开关关闭禁用
"`; - -exports[`ssr snapshot test renders ./src/tab-bar/_example/base.jsx correctly 1`] = `"
标签一
标签二
标签一
标签二
标签三
标签一
标签二
标签三
标签四
"`; - -exports[`ssr snapshot test renders ./src/tab-bar/_example/icon-text.jsx correctly 1`] = `"
hello world
标签一
标签二
hello world
标签一
标签二
标签三
hello world
标签一
标签二
标签三
标签四
hello world
标签一
标签二
标签三
标签四
标签五
"`; - -exports[`ssr snapshot test renders ./src/tab-bar/_example/mobile.jsx correctly 1`] = `"

TabBar 标签栏

移动端的主导航，用做功能模块之间的切换

01 类型

单层级纯文本标签栏

标签一
标签二
标签一
标签二
标签三
标签一
标签二
标签三
标签四

文本加图标标签栏

标签一
标签二
标签一
标签二
标签三
标签一
标签二
标签三
标签四
标签一
标签二
标签三
标签四
标签五
16
标签一
标签二
New
标签三
···
标签四

纯图标标签栏

双层级纯文本标签栏

标签一
标签二
此处展开
"`; - -exports[`ssr snapshot test renders ./src/tab-bar/_example/pure-icon.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/tab-bar/_example/text-spread.jsx correctly 1`] = `"
标签一
标签二
此处展开
"`; - -exports[`ssr snapshot test renders ./src/tabs/_example/base.jsx correctly 1`] = `"
  • 标签页一
    标签页二
  • 标签页一
    标签页二
    标签页三
  • 标签页一
    标签页二
    标签页三
    标签页四
"`; - -exports[`ssr snapshot test renders ./src/tabs/_example/bottom.jsx correctly 1`] = `"

底部选项卡

  • 标签页一
    标签页二
    标签页三
    标签页四
    标签一内容
"`; - -exports[`ssr snapshot test renders ./src/tabs/_example/horizontal.jsx correctly 1`] = `"

02 状态

选项卡状态

  • 标签页一
    标签页二
    禁用状态
"`; - -exports[`ssr snapshot test renders ./src/tabs/_example/index.jsx correctly 1`] = `"

Tabs 选项卡

用于切换不同场景

01 类型

横向选项卡

  • 标签页一
    标签页二
  • 标签页一
    标签页二
    标签页三
  • 标签页一
    标签页二
    标签页三
    标签页四

超过屏幕滚动

  • 标签页一
    标签页二
    标签页三
    标签页四
    标签页五
    标签页六
    标签一内容

无下划线

  • 标签页一
    标签页二
    标签页三
    标签页四
    标签页五
    标签页六
    标签一内容

02 状态

选项卡状态

  • 标签页一
    标签页二
    禁用状态

03 特殊类型

竖向选项卡

  • 标签页一
    标签页二
    标签页三
    标签页四
    标签页五

底部选项卡

  • 标签页一
    标签页二
    标签页三
    标签页四
    标签一内容

04 规格

选中态文字尺寸规格

  • 大尺寸
    标签页二
    标签页三
    标签页四
  • 小尺寸
    标签页二
    标签页三
    标签页四
"`; - -exports[`ssr snapshot test renders ./src/tabs/_example/noline.jsx correctly 1`] = `"

无下划线

  • 标签页一
    标签页二
    标签页三
    标签页四
    标签页五
    标签页六
    标签一内容
"`; - -exports[`ssr snapshot test renders ./src/tabs/_example/scroll.jsx correctly 1`] = `"
  • 标签页一
    标签页二
    标签页三
    标签页四
    标签页五
    标签页六
    标签一内容
"`; - -exports[`ssr snapshot test renders ./src/tabs/_example/size.jsx correctly 1`] = `"

04 规格

选中态文字尺寸规格

  • 大尺寸
    标签页二
    标签页三
    标签页四
  • 小尺寸
    标签页二
    标签页三
    标签页四
"`; - -exports[`ssr snapshot test renders ./src/tabs/_example/test.jsx correctly 1`] = `"
test1
"`; - -exports[`ssr snapshot test renders ./src/tabs/_example/vertical.jsx correctly 1`] = `"
  • 标签页一
    标签页二
    标签页三
    标签页四
    标签页五
"`; - -exports[`ssr snapshot test renders ./src/tag/_example/checkable.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/tag/_example/closable.jsx correctly 1`] = `"
标签
"`; - -exports[`ssr snapshot test renders ./src/tag/_example/ellipsis.jsx correctly 1`] = `"
标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签
"`; - -exports[`ssr snapshot test renders ./src/tag/_example/index.jsx correctly 1`] = `"

Tag标签

用于标记表示主体属性、类型、状态等，由底部图形和标签文字组成

01类型

展示型标签

标签成功警告危险信息
镂空标签浅底标签标签
圆角标签半圆角标签

可关闭标签

标签

02 状态

标签状态

03 规格

标签规格

展示标签大号展示标签中号展示标签小号
"`; - -exports[`ssr snapshot test renders ./src/tag/_example/shape.jsx correctly 1`] = `"
圆角标签半圆角标签
"`; - -exports[`ssr snapshot test renders ./src/tag/_example/size.jsx correctly 1`] = `"
展示标签大号展示标签中号展示标签小号
"`; - -exports[`ssr snapshot test renders ./src/tag/_example/theme.jsx correctly 1`] = `"
标签成功警告危险信息
"`; - -exports[`ssr snapshot test renders ./src/tag/_example/variant.jsx correctly 1`] = `"
镂空标签浅底标签标签
"`; - -exports[`ssr snapshot test renders ./src/textarea/_example/autosize.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/textarea/_example/base.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/textarea/_example/events.jsx correctly 1`] = `"
标签文字
"`; - -exports[`ssr snapshot test renders ./src/textarea/_example/index.jsx correctly 1`] = `"

Textarea 多行文本框

用于多行文本的输入

01 类型

基础多行文本框

带标题多行文本框

标签文字

自动增高多行文本框

02 状态

禁用多行文本框

03 字符限制

设置最大字符个数

标签文字
0/20

设置最大字符个数，一个汉字表示两个字符

标签文字
0/10

04 事件

带事件文本框

标签文字
"`; - -exports[`ssr snapshot test renders ./src/textarea/_example/label.jsx correctly 1`] = `"
标签文字
"`; - -exports[`ssr snapshot test renders ./src/textarea/_example/maxcharacter.jsx correctly 1`] = `"
标签文字
0/10
"`; - -exports[`ssr snapshot test renders ./src/textarea/_example/maxlength.jsx correctly 1`] = `"
标签文字
0/20
"`; - -exports[`ssr snapshot test renders ./src/textarea/_example/type.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/toast/_example/base.jsx correctly 1`] = `"

默认提示-竖向

"`; - -exports[`ssr snapshot test renders ./src/toast/_example/icon.jsx correctly 1`] = `"
"`; - -exports[`ssr snapshot test renders ./src/toast/_example/iconText.jsx correctly 1`] = `"

默认提示-横向

"`; - -exports[`ssr snapshot test renders ./src/toast/_example/index.jsx correctly 1`] = `"

Toast 轻提示

用于轻量级反馈或提示，不会打断用户操作

01 类型

基础提示

默认提示-横向

默认提示-竖向

02 展示位置和展示时间

展示位置为顶部、中部、底部三种，展示时间自定义

03 展示遮罩

弹窗可显示遮罩，禁止滑动和点击

"`; - -exports[`ssr snapshot test renders ./src/toast/_example/mask.jsx correctly 1`] = `"

03 展示遮罩

弹窗可显示遮罩，禁止滑动和点击

"`; - -exports[`ssr snapshot test renders ./src/toast/_example/position.jsx correctly 1`] = `"

02 展示位置和展示时间

展示位置为顶部、中部、底部三种，展示时间自定义

"`; - -exports[`ssr snapshot test renders ./src/toast/_example/text.jsx correctly 1`] = `"

01 类型

基础提示

"`; - -exports[`ssr snapshot test renders ./src/upload/_example/base.jsx correctly 1`] = `"

上传图片

  • \\"uploaded1.png\\"/
"`; - -exports[`ssr snapshot test renders ./src/upload/_example/index.jsx correctly 1`] = `"

Upload 上传

用于上传一个媒体资源，包含图片及视频，点击可以进行图片或视频预览

01 类型

单选上传图片

上传图片

  • \\"uploaded1.png\\"/

多选上传图片

上传图片

  • \\"uploaded1.png\\"/
  • \\"uploaded2.png\\"/
  • \\"uploaded3.png\\"/
"`; - -exports[`ssr snapshot test renders ./src/upload/_example/multiple.jsx correctly 1`] = `"

上传图片

  • \\"uploaded1.png\\"/
  • \\"uploaded2.png\\"/
  • \\"uploaded3.png\\"/
"`; diff --git a/test/ssr/ssr.test.js b/test/ssr/ssr.test.js deleted file mode 100644 index 9f15289a..00000000 --- a/test/ssr/ssr.test.js +++ /dev/null @@ -1,27 +0,0 @@ -import glob from 'glob'; -import React from 'react'; -import { renderToString } from 'react-dom/server'; - -function ssrSnapshotTest() { - const files = glob.sync('./src/**/_example/**.*sx'); - describe('ssr snapshot test', () => { - beforeAll(() => { - jest.useFakeTimers().setSystemTime(new Date('2021-12-31').getTime()); - }); - files.forEach((file) => { - if (file.indexOf('temp') > -1) { - return; - } - it(`renders ${file} correctly`, async () => { - const demo = require(`../.${file}`); - const RealDemoComp = demo.default ? demo.default : demo; - if (typeof RealDemoComp === 'function') { - const ElementImageHtml = renderToString(); - expect(ElementImageHtml).toMatchSnapshot(); - } - }, 2000); - }); - }); -} - -ssrSnapshotTest(); diff --git a/test/utils/index.ts b/test/utils/index.ts index 18fc31da..dc474e68 100644 --- a/test/utils/index.ts +++ b/test/utils/index.ts @@ -1,4 +1,3 @@ import '@testing-library/jest-dom'; export * from '@testing-library/react'; -export * from './test-examples'; diff --git a/test/utils/test-examples.ts b/test/utils/test-examples.ts deleted file mode 100644 index 4f7a3016..00000000 --- a/test/utils/test-examples.ts +++ /dev/null @@ -1,39 +0,0 @@ -/* eslint-disable */ -import * as fs from 'fs'; -import * as path from 'path'; -import React, { FunctionComponent, ComponentClass } from 'react'; -import { render } from '@testing-library/react'; - -export interface TestExampleOverrides { - [exampleFileName: string]: (Component: FunctionComponent | ComponentClass) => void | Promise; -} - -/** - * 测试组件的所有 Example - */ -export function testExamples(dirname: string, overrides: TestExampleOverrides = {}) { - const exampleDir = path.resolve(dirname, '../_example'); - if (!fs.existsSync(exampleDir)) { - return; - } - - // eslint-disable-next-line no-restricted-syntax - for (const exampleFilename of fs.readdirSync(exampleDir)) { - if (!/\.jsx$/.test(exampleFilename)) { - // eslint-disable-next-line no-continue - continue; - } - - const Example = require(path.join(exampleDir, exampleFilename)).default; - if (Example) { - // prettier-ignore - const runner = overrides[exampleFilename] - || (() => { - const { asFragment } = render(React.createElement(Example)); - expect(asFragment()).toMatchSnapshot(); - }); - - test(exampleFilename, runner); - } - } -} diff --git a/tsconfig.build.json b/tsconfig.build.json new file mode 100644 index 00000000..94446d9c --- /dev/null +++ b/tsconfig.build.json @@ -0,0 +1,16 @@ +{ + "extends": "./tsconfig", + "include": ["./src", "./globals.d.ts"], + "exclude": [ + "**/**/__tests__/*", + "**/**/_example/*", + "node_modules", + "src/_common", + "dist", + "lib", + "cjs", + "esm", + "es", + "site" + ] +} diff --git a/tsconfig.json b/tsconfig.json index 15b8a014..c755a0eb 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "jsx": "react-jsx", + "jsx": "react", "experimentalDecorators": true, "moduleResolution": "node", "module": "esnext", @@ -26,7 +26,6 @@ }, "include": ["./src", "./global.d.ts"], "exclude": [ - "**/**/__tests__/*", "**/**/_example/*", "node_modules", "src/_common", @@ -34,7 +33,8 @@ "lib", "cjs", "esm", - "es" + "es", + "site" ], "compileOnSave": false } diff --git a/vitest.config.ts b/vitest.config.ts new file mode 100644 index 00000000..52b10b39 --- /dev/null +++ b/vitest.config.ts @@ -0,0 +1,34 @@ +import path from 'path'; +import { defineConfig } from 'vitest/config'; +import { InlineConfig } from 'vitest'; + +// 单元测试相关配置 +const testConfig: InlineConfig = { + include: + process.env.NODE_ENV === 'test-snap' + ? ['test/snap/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'] + : ['src/**/__tests__/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + globals: true, + environment: 'jsdom', + testTimeout: 16000, + transformMode: { + web: [/\.[jt]sx$/], + }, + coverage: { + provider: 'istanbul', + exclude: ['src/**.{js,ts}', 'src/_common/**', 'src/_util/**', 'src/**/{__test__,_example,style}/**'], + reporter: ['text', 'json', 'html'], + reportsDirectory: 'test/coverage', + }, +}; + +export default defineConfig({ + resolve: { + alias: { + 'tdesign-mobile-react/es': path.resolve(__dirname, './src/'), + 'tdesign-mobile-react': path.resolve(__dirname, './src/'), + '@test/utils': path.resolve(__dirname, './test/utils'), + }, + }, + test: testConfig, +});