From 5260a161feffce267442a34b11fb11b0f3e3fe10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A9=AC=E6=B3=BD=E5=9D=A4?= <984757534@qq.com> Date: Thu, 28 Nov 2024 15:03:12 +0800 Subject: [PATCH 1/7] test: drop jest & migrate to vitest --- .github/workflows/node.js.yml | 6 +- jest.config.js | 176 ------------------ package.json | 16 +- src/_internal/scrollbar/tests/server.spec.tsx | 3 - src/affix/tests/server.spec.tsx | 3 - src/alert/tests/Alert.spec.ts | 13 +- .../tests/__snapshots__/Alert.spec.ts.snap | 10 +- src/alert/tests/server.spec.tsx | 3 - src/anchor/tests/server.spec.tsx | 3 - src/auto-complete/tests/AutoComplete.spec.ts | 20 +- .../__snapshots__/AutoComplete.spec.ts.snap | 8 +- src/auto-complete/tests/server.spec.tsx | 3 - src/avatar-group/tests/server.spec.tsx | 3 - src/avatar/tests/Avatar.spec.tsx | 2 +- .../tests/__snapshots__/Avatar.spec.tsx.snap | 18 +- src/avatar/tests/server.spec.tsx | 3 - src/back-top/tests/server.spec.tsx | 3 - src/badge/tests/server.spec.tsx | 3 - src/breadcrumb/tests/Breadcrumb.spec.ts | 6 +- src/breadcrumb/tests/server.spec.tsx | 3 - src/button-group/tests/server.spec.tsx | 3 - src/button/tests/Button.spec.tsx | 6 +- .../tests/__snapshots__/Button.spec.tsx.snap | 14 +- src/button/tests/server.spec.tsx | 3 - src/calendar/tests/Calendar.spec.tsx | 2 +- src/calendar/tests/server.spec.tsx | 3 - src/card/tests/Card.spec.ts | 2 +- .../tests/__snapshots__/Card.spec.ts.snap | 4 +- src/card/tests/server.spec.tsx | 3 - src/carousel/tests/Carousel.spec.tsx | 2 +- src/carousel/tests/server.spec.tsx | 3 - src/cascader/tests/Cascader.spec.ts | 29 +-- .../tests/__snapshots__/Cascader.spec.ts.snap | 8 +- src/cascader/tests/server.spec.tsx | 3 - src/checkbox/tests/Checkbox.spec.tsx | 6 +- .../__snapshots__/Checkbox.spec.tsx.snap | 10 +- src/checkbox/tests/server.spec.tsx | 3 - src/code/tests/Code.spec.tsx | 2 +- src/code/tests/server.spec.tsx | 3 - src/collapse-transition/tests/server.spec.tsx | 3 - src/collapse/tests/Collapse.spec.tsx | 2 +- src/collapse/tests/server.spec.tsx | 3 - src/color-picker/tests/ColorPicker.spec.tsx | 6 +- src/color-picker/tests/server.spec.tsx | 3 - src/config-provider/tests/server.spec.tsx | 3 - src/countdown/tests/Countdown.spec.ts | 2 +- src/countdown/tests/server.spec.tsx | 3 - src/data-table/tests/DataTable.spec.tsx | 18 +- .../__snapshots__/DataTable.spec.tsx.snap | 8 +- src/data-table/tests/server.spec.tsx | 3 - src/date-picker/tests/DatePicker.spec.tsx | 123 +++++++----- .../__snapshots__/DatePicker.spec.tsx.snap | 8 +- src/date-picker/tests/server.spec.tsx | 3 - src/descriptions/tests/server.spec.tsx | 3 - src/dialog/tests/Dialog.spec.tsx | 2 +- src/dialog/tests/server.spec.tsx | 3 - src/divider/tests/server.spec.tsx | 3 - src/drawer/tests/Drawer.spec.tsx | 4 +- src/drawer/tests/server.spec.tsx | 3 - src/dropdown/tests/Dropdown.spec.tsx | 8 +- .../__snapshots__/Dropdown.spec.tsx.snap | 14 +- src/dropdown/tests/server.spec.tsx | 3 - src/dynamic-input/tests/DynamicInput.spec.ts | 4 +- src/dynamic-input/tests/server.spec.tsx | 3 - src/dynamic-tags/tests/DynamicTags.spec.ts | 4 +- .../__snapshots__/DynamicTags.spec.ts.snap | 18 +- src/dynamic-tags/tests/server.spec.tsx | 3 - src/element/tests/server.spec.tsx | 3 - src/ellipsis/tests/server.spec.tsx | 3 - .../tests/__snapshots__/Empty.spec.ts.snap | 10 +- src/empty/tests/server.spec.tsx | 3 - src/flex/tests/Flex.spec.tsx | 4 +- .../tests/__snapshots__/Flex.spec.tsx.snap | 14 +- src/flex/tests/server.spec.tsx | 3 - .../tests/NFloatButtonGroup.spec.tsx | 4 +- .../NFloatButtonGroup.spec.tsx.snap | 4 +- src/float-button-group/tests/server.spec.tsx | 3 - src/float-button/tests/FloatButton.spec.tsx | 4 +- .../__snapshots__/FloatButton.spec.tsx.snap | 4 +- src/float-button/tests/server.spec.tsx | 3 - src/form/tests/server.spec.tsx | 3 - src/global-style/tests/server.spec.tsx | 3 - .../__snapshots__/GradientText.spec.ts.snap | 6 +- src/gradient-text/tests/server.spec.tsx | 3 - src/grid/tests/server.spec.tsx | 3 - src/icon-wrapper/tests/server.spec.tsx | 3 - .../tests/__snapshots__/Icon.spec.ts.snap | 4 +- src/icon/tests/server.spec.tsx | 3 - src/image/tests/Image.spec.tsx | 4 +- src/image/tests/server.spec.tsx | 3 - src/input-number/tests/InputNumber.spec.tsx | 14 +- src/input-number/tests/server.spec.tsx | 3 - src/input/tests/Input.spec.tsx | 57 +++--- .../tests/__snapshots__/Input.spec.tsx.snap | 8 +- src/input/tests/server.spec.tsx | 3 - src/jest-setup.ts | 6 - .../tests/__snapshots__/Layout.spec.ts.snap | 10 +- src/layout/tests/server.spec.tsx | 3 - src/legacy-grid/tests/server.spec.tsx | 3 - src/legacy-transfer/tests/Transfer.spec.ts | 2 +- .../tests/__snapshots__/Transfer.spec.ts.snap | 8 +- src/legacy-transfer/tests/server.spec.tsx | 3 - src/list/tests/server.spec.tsx | 3 - .../__snapshots__/index.spec.tsx.snap | 58 +++--- src/locales/{ => tests}/index.spec.tsx | 12 +- src/log/tests/Log.spec.tsx | 14 +- src/log/tests/server.spec.tsx | 3 - src/marquee/tests/server.spec.tsx | 3 - src/mention/tests/Mention.spec.ts | 71 ++++--- src/mention/tests/server.spec.tsx | 3 - src/menu/tests/server.spec.tsx | 3 - src/message/tests/server.spec.tsx | 3 - src/modal/tests/server.spec.tsx | 3 - src/notification/tests/Notification.spec.tsx | 2 +- src/number-animation/tests/server.spec.tsx | 3 - src/page-header/tests/PageHeader.spec.tsx | 2 +- src/page-header/tests/server.spec.tsx | 3 - src/pagination/tests/server.spec.tsx | 3 - src/popconfirm/tests/Popconfirm.spec.ts | 4 +- src/popconfirm/tests/server.spec.tsx | 3 - src/popover/tests/server.spec.tsx | 3 - src/popselect/tests/server.spec.tsx | 3 - src/progress/tests/server.spec.tsx | 3 - src/radio/tests/Radio.spec.ts | 21 ++- .../tests/__snapshots__/Radio.spec.ts.snap | 14 +- src/radio/tests/server.spec.tsx | 3 - src/rate/tests/Rate.spec.ts | 6 +- .../tests/__snapshots__/Rate.spec.ts.snap | 8 +- src/rate/tests/server.spec.tsx | 3 - .../tests/__snapshots__/Result.spec.ts.snap | 10 +- src/result/tests/server.spec.tsx | 3 - src/scrollbar/tests/server.spec.tsx | 3 - src/select/tests/Select.spec.tsx | 11 +- .../tests/__snapshots__/Select.spec.tsx.snap | 8 +- src/select/tests/server.spec.tsx | 3 - .../__snapshots__/Skeleton.spec.tsx.snap | 18 +- src/skeleton/tests/server.spec.tsx | 3 - src/slider/tests/server.spec.tsx | 3 - src/space/tests/Space.spec.tsx | 4 +- .../tests/__snapshots__/Space.spec.tsx.snap | 44 ++--- src/space/tests/server.spec.tsx | 3 - .../tests/__snapshots__/Spin.spec.ts.snap | 10 +- src/spin/tests/server.spec.tsx | 3 - src/statistic/tests/server.spec.tsx | 3 - src/steps/tests/server.spec.tsx | 3 - src/switch/tests/Switch.spec.tsx | 4 +- .../tests/__snapshots__/Switch.spec.tsx.snap | 8 +- src/switch/tests/server.spec.tsx | 3 - .../tests/__snapshots__/Table.spec.ts.snap | 8 +- src/table/tests/server.spec.tsx | 3 - src/tabs/tests/Tabs.spec.tsx | 4 +- .../tests/__snapshots__/Tabs.spec.tsx.snap | 8 +- src/tabs/tests/server.spec.tsx | 3 - src/tag/tests/Tag.spec.ts | 8 +- src/tag/tests/__snapshots__/Tag.spec.ts.snap | 20 +- src/tag/tests/server.spec.tsx | 3 - src/thing/tests/server.spec.tsx | 3 - src/time-picker/tests/TimePicker.spec.ts | 6 +- .../__snapshots__/TimePicker.spec.ts.snap | 8 +- src/time-picker/tests/server.spec.tsx | 3 - src/time/tests/server.spec.tsx | 3 - src/timeline/tests/server.spec.tsx | 3 - src/tooltip/tests/server.spec.tsx | 3 - src/transfer/tests/Transfer.spec.ts | 2 +- .../tests/__snapshots__/Transfer.spec.ts.snap | 8 +- src/transfer/tests/server.spec.tsx | 3 - src/tree-select/tests/server.spec.tsx | 3 - src/tree/tests/Tree.spec.ts | 6 +- src/tree/tests/server.spec.tsx | 3 - .../__snapshots__/Typography.spec.ts.snap | 44 ++--- src/typography/tests/server.spec.tsx | 3 - src/upload/tests/Upload.spec.tsx | 10 +- src/upload/tests/server.spec.tsx | 3 - tsconfig.json | 3 +- vite.config.js | 10 +- vitest.workspace.ts | 21 +++ 176 files changed, 558 insertions(+), 948 deletions(-) delete mode 100644 jest.config.js delete mode 100644 src/jest-setup.ts rename src/locales/{ => tests}/__snapshots__/index.spec.tsx.snap (99%) rename src/locales/{ => tests}/index.spec.tsx (96%) create mode 100644 vitest.workspace.ts diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 97dca1eb766..e416c9a16ff 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -44,13 +44,13 @@ jobs: matrix: node-version: [18, 20] steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Install pnpm run: corepack enable - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} @@ -67,6 +67,6 @@ jobs: run: pnpm run test:cov - name: Code coverage - uses: codecov/codecov-action@v3 + uses: codecov/codecov-action@v5 with: token: ${{ secrets.CODECOV_TOKEN }} diff --git a/jest.config.js b/jest.config.js deleted file mode 100644 index 841ff9255b1..00000000000 --- a/jest.config.js +++ /dev/null @@ -1,176 +0,0 @@ -// For a detailed explanation regarding each configuration property, visit: -// https://jestjs.io/docs/en/configuration.html - -module.exports = { - // All imported modules in your tests should be mocked automatically - // automock: false, - - // Stop running tests after `n` failures - // bail: 0, - - // The directory where Jest should store its cached dependency information - // cacheDirectory: "/private/var/folders/hn/7dgj6pfx27xdj2ctyrytjzqw0000gn/T/jest_dx", - - // Automatically clear mock calls and instances between every test - clearMocks: true, - - // Indicates whether the coverage information should be collected while executing the test - collectCoverage: true, - - // An array of glob patterns indicating a set of files for which coverage information should be collected - collectCoverageFrom: ['/src/**/*.(ts|tsx)'], - - // The directory where Jest should output its coverage files - coverageDirectory: 'coverage', - - // An array of regexp pattern strings used to skip coverage collection - coveragePathIgnorePatterns: [ - '/node_modules/' - // '/src/**/__tests__/**/*.[jt]s', - // '/src/**/*.(spec|test).[tj]s' - ], - - // A list of reporter names that Jest uses when writing coverage reports - coverageReporters: ['text', 'lcov'], - - // An object that configures minimum threshold enforcement for coverage results - // coverageThreshold: undefined, - - // A path to a custom dependency extractor - // dependencyExtractor: undefined, - - // Make calling deprecated APIs throw helpful error messages - // errorOnDeprecated: false, - - // Force coverage collection from ignored files using an array of glob patterns - // forceCoverageMatch: [], - - // A path to a module which exports an async function that is triggered once before all test suites - // globalSetup: undefined, - - // A path to a module which exports an async function that is triggered once after all test suites - // globalTeardown: undefined, - - // A set of global variables that need to be available in all test environments - globals: { - __DEV__: true - }, - - // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers. - // maxWorkers: "50%", - - // An array of directory names to be searched recursively up from the requiring module's location - moduleDirectories: ['node_modules'], - - // An array of file extensions your modules use - moduleFileExtensions: ['js', 'json', 'ts', 'tsx'], - - // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module - moduleNameMapper: { - '^lodash-es$': 'lodash' - }, - - // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader - // modulePathIgnorePatterns: [], - - // Activates notifications for test results - // notify: false, - - // An enum that specifies notification mode. Requires { notify: true } - // notifyMode: "failure-change", - - // A preset that is used as a base for Jest's configuration - // preset: undefined, - - // Run tests from one or more projects - // projects: undefined, - - // Use this configuration option to add custom reporters to Jest - // reporters: undefined, - - // Automatically reset mock state between every test - // resetMocks: false, - - // Reset the module registry before running each individual test - // resetModules: false, - - // A path to a custom resolver - // resolver: undefined, - - // Automatically restore mock state between every test - // restoreMocks: false, - - // The root directory that Jest should scan for tests and modules within - // rootDir: undefined, - - // A list of paths to directories that Jest should use to search for files in - // roots: [ - // '' - // ], - - // Allows you to use a custom runner instead of Jest's default test runner - // runner: "jest-runner", - - // The paths to modules that run some code to configure or set up the testing environment before each test - setupFiles: ['jest-canvas-mock'], - - // A list of paths to modules that run some code to configure or set up the testing framework before each test - setupFilesAfterEnv: ['/src/jest-setup.ts'], - - // A list of paths to snapshot serializer modules Jest should use for snapshot testing - // snapshotSerializers: [], - - // The test environment that will be used for testing - testEnvironment: 'jest-environment-jsdom', - - // Options that will be passed to the testEnvironment - testEnvironmentOptions: { - // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href - url: 'http://localhost', - customExportConditions: ['node'] - }, - - // Adds a location field to test results - // testLocationInResults: false, - - // The glob patterns Jest uses to detect test files - testMatch: [ - // '/src/**/__tests__/**/*.[jt]s', - '/src/**/*.(spec|test).(ts|tsx)' - ], - - // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped - testPathIgnorePatterns: ['/node_modules/'], - - // The regexp pattern or array of patterns that Jest uses to detect test files - // testRegex: [], - - // This option allows the use of a custom results processor - // testResultsProcessor: undefined, - - // This option allows use of a custom test runner - // testRunner: "jasmine2", - - // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout" - // timers: "real", - - // A map from regular expressions to paths to transformers - transform: { - '^.+\\.(jsx|js|mjs)?$': 'babel-jest', - '^.+\\.(tsx|ts)?$': [ - 'ts-jest', - { - tsconfig: 'tsconfig.test.json' - } - ] - }, - - // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation - transformIgnorePatterns: ['!node_modules/'], - - // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them - // unmockedModulePathPatterns: undefined, - - // Indicates whether each individual test should be reported during the run - verbose: false -} diff --git a/package.json b/package.json index 96a05adb0c4..9de180931f8 100644 --- a/package.json +++ b/package.json @@ -48,10 +48,10 @@ "format": "pnpm run format:code && pnpm run format:md && pnpm run lint:fix", "format:code": "prettier --write \"(src|demo)/**/*.(vue|js)\"", "format:md": "prettier --write --parser markdown --prose-wrap never \"(src|demo)/**/*.md\"", - "test": "NODE_ENV=test jest --collectCoverage=false", - "test:update": "NODE_ENV=test jest -u --collectCoverage=false", - "test:cov": "NODE_ENV=test NODE_OPTIONS=--unhandled-rejections=warn jest", - "test:watch": "NODE_ENV=test jest ---watch --verbose --coverage", + "test": "NODE_ENV=test vitest", + "test:update": "NODE_ENV=test vitest -u", + "test:cov": "NODE_ENV=test NODE_OPTIONS=--unhandled-rejections=warn vitest --coverage", + "test:watch": "NODE_ENV=test vitest", "test:umd": "jest --collectCoverage=false --testMatch=\"/umd-test/index.spec.js\"", "test:esm": "jest --collectCoverage=false --testMatch=\"/esm-test/index.spec.js\"", "gen-version": "node scripts/gen-version", @@ -100,16 +100,15 @@ "@rollup/plugin-replace": "^5.0.2", "@rollup/plugin-terser": "^0.4.3", "@types/estree": "^1.0.1", - "@types/jest": "^29.5.4", "@vicons/fluent": "^0.12.0", "@vicons/ionicons4": "^0.12.0", "@vicons/ionicons5": "^0.12.0", "@vitejs/plugin-vue": "^5.0.3", + "@vitest/coverage-v8": "^2.1.6", "@vue/compiler-sfc": "^3.4.15", "@vue/server-renderer": "^3.5.13", "@vue/test-utils": "^2.4.1", "autoprefixer": "^10.4.15", - "babel-jest": "^29.6.4", "codesandbox": "^2.2.3", "cssnano": "^7.0.4", "deepmerge": "^4.3.1", @@ -121,9 +120,6 @@ "grapheme-splitter": "^1.0.4", "husky": "^9.0.6", "inquirer": "^10.0.3", - "jest": "^29.6.4", - "jest-canvas-mock": "^2.5.2", - "jest-environment-jsdom": "^29.6.4", "katex": "^0.16.8", "lint-staged": "^15.1.0", "marked": "^12.0.2", @@ -132,10 +128,10 @@ "rollup": "^4.3.0", "rollup-plugin-esbuild": "^6.1.0", "superagent": "^10.0.0", - "ts-jest": "^29.1.1", "typescript": "5.5.4", "vfonts": "^0.0.3", "vite": "^5.0.4", + "vitest": "^2.1.6", "vue": "~3.5.13", "vue-router": "^4.2.4", "vue-tsc": "^2.0.6" diff --git a/src/_internal/scrollbar/tests/server.spec.tsx b/src/_internal/scrollbar/tests/server.spec.tsx index b459ac7eacf..c115ae3aee0 100644 --- a/src/_internal/scrollbar/tests/server.spec.tsx +++ b/src/_internal/scrollbar/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NScrollbar } from '../index' diff --git a/src/affix/tests/server.spec.tsx b/src/affix/tests/server.spec.tsx index 50457f1e633..ecaa5c345e6 100644 --- a/src/affix/tests/server.spec.tsx +++ b/src/affix/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NAffix } from '../..' diff --git a/src/alert/tests/Alert.spec.ts b/src/alert/tests/Alert.spec.ts index de862e9182c..a34a57e5d34 100644 --- a/src/alert/tests/Alert.spec.ts +++ b/src/alert/tests/Alert.spec.ts @@ -127,8 +127,8 @@ describe('n-alert', () => { }) it('should trigger callback when closed', async () => { - const handleCloseClick = jest.fn() - const handleOnAfterLeave = jest.fn() + const handleCloseClick = vi.fn() + const handleOnAfterLeave = vi.fn() const wrapper = mount(NAlert, { props: { closable: true, @@ -138,15 +138,12 @@ describe('n-alert', () => { }) const closeBtn = wrapper.find('.n-base-close.n-alert__close') expect(closeBtn.exists()).toBe(true) - await closeBtn.trigger('click') expect(wrapper.emitted()).toHaveProperty('click') - expect(handleCloseClick).toHaveBeenCalled() - - setTimeout(() => { + vi.waitFor(() => { expect(handleOnAfterLeave).toHaveBeenCalled() - wrapper.unmount() - }, 0) + }) + wrapper.unmount() }) }) diff --git a/src/alert/tests/__snapshots__/Alert.spec.ts.snap b/src/alert/tests/__snapshots__/Alert.spec.ts.snap index 62019f79e8e..be74a851790 100644 --- a/src/alert/tests/__snapshots__/Alert.spec.ts.snap +++ b/src/alert/tests/__snapshots__/Alert.spec.ts.snap @@ -1,9 +1,9 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-alert should work with type prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(237, 245, 254, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #2080f0; --n-border: 1px solid rgba(199, 223, 251, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`; +exports[`n-alert > should work with type prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(237, 245, 254, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #2080f0; --n-border: 1px solid rgba(199, 223, 251, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`; -exports[`n-alert should work with type prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(237, 247, 242, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #18a058; --n-border: 1px solid rgba(197, 231, 213, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`; +exports[`n-alert > should work with type prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(237, 247, 242, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #18a058; --n-border: 1px solid rgba(197, 231, 213, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`; -exports[`n-alert should work with type prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(254, 247, 237, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #f0a020; --n-border: 1px solid rgba(250, 224, 181, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`; +exports[`n-alert > should work with type prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(254, 247, 237, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #f0a020; --n-border: 1px solid rgba(250, 224, 181, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`; -exports[`n-alert should work with type prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(251, 238, 241, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #d03050; --n-border: 1px solid rgba(243, 203, 211, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`; +exports[`n-alert > should work with type prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(251, 238, 241, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #d03050; --n-border: 1px solid rgba(243, 203, 211, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`; diff --git a/src/alert/tests/server.spec.tsx b/src/alert/tests/server.spec.tsx index f8668f5862b..c56d7823317 100644 --- a/src/alert/tests/server.spec.tsx +++ b/src/alert/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NAlert } from '../..' diff --git a/src/anchor/tests/server.spec.tsx b/src/anchor/tests/server.spec.tsx index 45a606243f7..b5f8b7f5d51 100644 --- a/src/anchor/tests/server.spec.tsx +++ b/src/anchor/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NAnchor } from '../..' diff --git a/src/auto-complete/tests/AutoComplete.spec.ts b/src/auto-complete/tests/AutoComplete.spec.ts index a3d17a0d98f..918a13ac415 100644 --- a/src/auto-complete/tests/AutoComplete.spec.ts +++ b/src/auto-complete/tests/AutoComplete.spec.ts @@ -95,8 +95,10 @@ describe('n-auto-complete', () => { }) expect(document.querySelector('.n-auto-complete-menu')).toEqual(null) wrapper.find('input').setValue('a') - await wrapper.find('input').trigger('focus') - expect(document.querySelector('.n-auto-complete-menu')).not.toEqual(null) + wrapper.find('input').trigger('focus') + vi.waitFor(() => { + expect(document.querySelector('.n-auto-complete-menu')).not.toEqual(null) + }) wrapper.unmount() }) @@ -120,8 +122,10 @@ describe('n-auto-complete', () => { }) expect(document.querySelector('.n-auto-complete-menu')).toEqual(null) wrapper.find('input').setValue('@') - await wrapper.find('input').trigger('focus') - expect(document.querySelector('.n-auto-complete-menu')).not.toEqual(null) + wrapper.find('input').trigger('focus') + vi.waitFor(() => { + expect(document.querySelector('.n-auto-complete-menu')).not.toEqual(null) + }) wrapper.unmount() }) @@ -139,7 +143,7 @@ describe('n-auto-complete', () => { }) it('should work with `on-blur` prop', async () => { - const onBlur = jest.fn() + const onBlur = vi.fn() const wrapper = mount(NAutoComplete, { props: { onBlur } }) @@ -150,7 +154,7 @@ describe('n-auto-complete', () => { }) it('should work with `on-focus` prop', async () => { - const onFocus = jest.fn() + const onFocus = vi.fn() const wrapper = mount(NAutoComplete, { props: { onFocus } }) @@ -188,14 +192,14 @@ describe('n-auto-complete', () => { ] as const ).forEach((placement) => { const wrapper = mount(NAutoComplete, { props: { placement } }) - setTimeout(() => { + vi.waitFor(() => { expect( document .querySelector('.v-binder-follower-content') ?.getAttribute('v-placement') ).toBe(placement) - wrapper.unmount() }) + wrapper.unmount() }) }) }) diff --git a/src/auto-complete/tests/__snapshots__/AutoComplete.spec.ts.snap b/src/auto-complete/tests/__snapshots__/AutoComplete.spec.ts.snap index 8520ad97d9f..a4f79df4115 100644 --- a/src/auto-complete/tests/__snapshots__/AutoComplete.spec.ts.snap +++ b/src/auto-complete/tests/__snapshots__/AutoComplete.spec.ts.snap @@ -1,7 +1,7 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-auto-complete should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 28px; --n-padding-left: 10px; --n-padding-right: 10px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; +exports[`n-auto-complete > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 28px; --n-padding-left: 10px; --n-padding-right: 10px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; -exports[`n-auto-complete should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; +exports[`n-auto-complete > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; -exports[`n-auto-complete should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 15px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 40px; --n-padding-left: 14px; --n-padding-right: 14px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; +exports[`n-auto-complete > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 15px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 40px; --n-padding-left: 14px; --n-padding-right: 14px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; diff --git a/src/auto-complete/tests/server.spec.tsx b/src/auto-complete/tests/server.spec.tsx index 50ddfb75d27..4a7d294c719 100644 --- a/src/auto-complete/tests/server.spec.tsx +++ b/src/auto-complete/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NAutoComplete } from '../..' diff --git a/src/avatar-group/tests/server.spec.tsx b/src/avatar-group/tests/server.spec.tsx index 8949100a874..f22061a5560 100644 --- a/src/avatar-group/tests/server.spec.tsx +++ b/src/avatar-group/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NAvatar } from '../..' diff --git a/src/avatar/tests/Avatar.spec.tsx b/src/avatar/tests/Avatar.spec.tsx index e30972c2cc7..e09932e3816 100644 --- a/src/avatar/tests/Avatar.spec.tsx +++ b/src/avatar/tests/Avatar.spec.tsx @@ -135,7 +135,7 @@ describe('n-avatar', () => { }) it('image avatar error handle when load failed', async () => { - const onError = jest.fn() + const onError = vi.fn() const wrapper = mount(NAvatar, { props: { src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg', diff --git a/src/avatar/tests/__snapshots__/Avatar.spec.tsx.snap b/src/avatar/tests/__snapshots__/Avatar.spec.tsx.snap index b5ddc0111f7..4c6f261e1ad 100644 --- a/src/avatar/tests/__snapshots__/Avatar.spec.tsx.snap +++ b/src/avatar/tests/__snapshots__/Avatar.spec.tsx.snap @@ -1,23 +1,23 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-avatar avatar adjust text 1`] = ` +exports[`n-avatar > avatar adjust text 1`] = ` "adjust text " `; -exports[`n-avatar bordered avatar 1`] = `""`; +exports[`n-avatar > bordered avatar 1`] = `""`; -exports[`n-avatar custom style 1`] = `""`; +exports[`n-avatar > custom style 1`] = `""`; -exports[`n-avatar icon avatar 1`] = ` +exports[`n-avatar > icon avatar 1`] = ` " " `; -exports[`n-avatar image avatar 1`] = `""`; +exports[`n-avatar > image avatar 1`] = `""`; -exports[`n-avatar round avatar 1`] = `""`; +exports[`n-avatar > round avatar 1`] = `""`; -exports[`n-avatar size is number 1`] = `""`; +exports[`n-avatar > size is number 1`] = `""`; -exports[`n-avatar size is string 1`] = `""`; +exports[`n-avatar > size is string 1`] = `""`; diff --git a/src/avatar/tests/server.spec.tsx b/src/avatar/tests/server.spec.tsx index 8949100a874..f22061a5560 100644 --- a/src/avatar/tests/server.spec.tsx +++ b/src/avatar/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NAvatar } from '../..' diff --git a/src/back-top/tests/server.spec.tsx b/src/back-top/tests/server.spec.tsx index 1b1aa3ed86d..f41b0a05beb 100644 --- a/src/back-top/tests/server.spec.tsx +++ b/src/back-top/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NBackTop } from '../..' diff --git a/src/badge/tests/server.spec.tsx b/src/badge/tests/server.spec.tsx index 0ca9319b279..d50ac901908 100644 --- a/src/badge/tests/server.spec.tsx +++ b/src/badge/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NBadge } from '../..' diff --git a/src/breadcrumb/tests/Breadcrumb.spec.ts b/src/breadcrumb/tests/Breadcrumb.spec.ts index 0faa4812177..d8255bc1a9c 100644 --- a/src/breadcrumb/tests/Breadcrumb.spec.ts +++ b/src/breadcrumb/tests/Breadcrumb.spec.ts @@ -8,7 +8,9 @@ describe('n-breadcrumb', () => { }) it('should raise an error if breadcrumbItem is not inside a BreadCrumb', () => { - const mockErrorLogger = jest.spyOn(console, 'error').mockImplementation() + const mockErrorLogger = vi + .spyOn(console, 'error') + .mockImplementation(() => {}) const wrapper = mount(NBreadcrumbItem) expect(wrapper.isVisible()).toBe(false) @@ -107,7 +109,7 @@ describe('n-breadcrumb', () => { it('should add `aria-current` if the item is the current location', () => { const originalWindow = window - const windowSpy = jest.spyOn(globalThis, 'window', 'get') + const windowSpy = vi.spyOn(globalThis, 'window', 'get') const currentUrl = 'http://some-domaine/path2' const url = 'http://some-domaine/path1' windowSpy.mockImplementation(() => { diff --git a/src/breadcrumb/tests/server.spec.tsx b/src/breadcrumb/tests/server.spec.tsx index 806122b8229..24366ee04f0 100644 --- a/src/breadcrumb/tests/server.spec.tsx +++ b/src/breadcrumb/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NBreadcrumb } from '../..' diff --git a/src/button-group/tests/server.spec.tsx b/src/button-group/tests/server.spec.tsx index 42a5e3fcefe..0be21cc7e82 100644 --- a/src/button-group/tests/server.spec.tsx +++ b/src/button-group/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NButtonGroup } from '../..' diff --git a/src/button/tests/Button.spec.tsx b/src/button/tests/Button.spec.tsx index 8bdb20d79fb..ea4de8bd412 100644 --- a/src/button/tests/Button.spec.tsx +++ b/src/button/tests/Button.spec.tsx @@ -9,7 +9,7 @@ describe('n-button', () => { mount(NButton) }) it('clickable', async () => { - const onClick = jest.fn() + const onClick = vi.fn() const inst = mount(NButton, { props: { onClick @@ -20,7 +20,7 @@ describe('n-button', () => { inst.unmount() }) it('keyboard', async () => { - const onClick = jest.fn() + const onClick = vi.fn() const inst = mount(NButton, { props: { keyboard: false, @@ -36,7 +36,7 @@ describe('n-button', () => { inst.unmount() }) it('disabled', async () => { - const onClick = jest.fn() + const onClick = vi.fn() const inst = mount(NButton, { props: { disabled: true, diff --git a/src/button/tests/__snapshots__/Button.spec.tsx.snap b/src/button/tests/__snapshots__/Button.spec.tsx.snap index 7091fdc6a4d..d86fc80d8ab 100644 --- a/src/button/tests/__snapshots__/Button.spec.tsx.snap +++ b/src/button/tests/__snapshots__/Button.spec.tsx.snap @@ -1,13 +1,13 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-button should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 22px; --n-font-size: 12px; --n-padding: 0 6px; --n-icon-size: 14px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; +exports[`n-button > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 22px; --n-font-size: 12px; --n-padding: 0 6px; --n-icon-size: 14px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; -exports[`n-button should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 28px; --n-font-size: 14px; --n-padding: 0 10px; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; +exports[`n-button > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 28px; --n-font-size: 14px; --n-padding: 0 10px; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; -exports[`n-button should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 34px; --n-font-size: 14px; --n-padding: 0 14px; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; +exports[`n-button > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 34px; --n-font-size: 14px; --n-padding: 0 14px; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; -exports[`n-button should work with \`size\` prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 40px; --n-font-size: 15px; --n-padding: 0 18px; --n-icon-size: 20px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; +exports[`n-button > should work with \`size\` prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 40px; --n-font-size: 15px; --n-padding: 0 18px; --n-icon-size: 20px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; -exports[`n-button should work with \`tag\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #0000; --n-text-color: #18a058; --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: none; --n-border-hover: none; --n-border-pressed: none; --n-border-focus: none; --n-border-disabled: none; --n-width: initial; --n-height: initial; --n-font-size: 14px; --n-padding: initial; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: initial;"`; +exports[`n-button > should work with \`tag\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #0000; --n-text-color: #18a058; --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: none; --n-border-hover: none; --n-border-pressed: none; --n-border-focus: none; --n-border-disabled: none; --n-width: initial; --n-height: initial; --n-font-size: 14px; --n-padding: initial; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: initial;"`; -exports[`n-button should work with \`text\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #0000; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: none; --n-border-hover: none; --n-border-pressed: none; --n-border-focus: none; --n-border-disabled: none; --n-width: initial; --n-height: initial; --n-font-size: 14px; --n-padding: initial; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: initial;"`; +exports[`n-button > should work with \`text\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #0000; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: none; --n-border-hover: none; --n-border-pressed: none; --n-border-focus: none; --n-border-disabled: none; --n-width: initial; --n-height: initial; --n-font-size: 14px; --n-padding: initial; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: initial;"`; diff --git a/src/button/tests/server.spec.tsx b/src/button/tests/server.spec.tsx index 01094171b9b..8adc2a68799 100644 --- a/src/button/tests/server.spec.tsx +++ b/src/button/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NButton } from '../..' diff --git a/src/calendar/tests/Calendar.spec.tsx b/src/calendar/tests/Calendar.spec.tsx index a1ae781892c..fe51b5e55a2 100644 --- a/src/calendar/tests/Calendar.spec.tsx +++ b/src/calendar/tests/Calendar.spec.tsx @@ -58,7 +58,7 @@ describe('n-calendar', () => { }) it('should work with `on-update:value` prop', async () => { - const onUpdate = jest.fn() + const onUpdate = vi.fn() const wrapper = mount(NCalendar, { props: { 'on-update:value': onUpdate } }) await wrapper.findAll('.n-calendar-date')[1].trigger('click') diff --git a/src/calendar/tests/server.spec.tsx b/src/calendar/tests/server.spec.tsx index 9859832a837..aa51ad47ca4 100644 --- a/src/calendar/tests/server.spec.tsx +++ b/src/calendar/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NCalendar } from '../..' diff --git a/src/card/tests/Card.spec.ts b/src/card/tests/Card.spec.ts index eec63d6faa4..32fcc98b48e 100644 --- a/src/card/tests/Card.spec.ts +++ b/src/card/tests/Card.spec.ts @@ -111,7 +111,7 @@ describe('n-card', () => { }) it('should work with `closable` and `on-close` prop', async () => { - const onClose = jest.fn() + const onClose = vi.fn() const wrapper = mount(NCard, { props: { closable: true, diff --git a/src/card/tests/__snapshots__/Card.spec.ts.snap b/src/card/tests/__snapshots__/Card.spec.ts.snap index f70aa5eb26c..dd61aa1b7c8 100644 --- a/src/card/tests/__snapshots__/Card.spec.ts.snap +++ b/src/card/tests/__snapshots__/Card.spec.ts.snap @@ -1,3 +1,3 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-card should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 3px; --n-color: #fff; --n-color-modal: #fff; --n-color-popover: #fff; --n-color-embedded: rgb(250, 250, 252); --n-color-embedded-modal: rgb(250, 250, 252); --n-color-embedded-popover: rgb(250, 250, 252); --n-color-target: #18a058; --n-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-action-color: rgb(250, 250, 252); --n-title-text-color: rgb(31, 34, 37); --n-title-font-weight: 500; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-border-color: rgb(239, 239, 245); --n-box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04); --n-padding-top: 12px; --n-padding-bottom: 12px; --n-padding-left: 16px; --n-font-size: 14px; --n-title-font-size: 16px; --n-close-size: 22px; --n-close-icon-size: 18px; --n-close-border-radius: 3px;"`; +exports[`n-card > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 3px; --n-color: #fff; --n-color-modal: #fff; --n-color-popover: #fff; --n-color-embedded: rgb(250, 250, 252); --n-color-embedded-modal: rgb(250, 250, 252); --n-color-embedded-popover: rgb(250, 250, 252); --n-color-target: #18a058; --n-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-action-color: rgb(250, 250, 252); --n-title-text-color: rgb(31, 34, 37); --n-title-font-weight: 500; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-border-color: rgb(239, 239, 245); --n-box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04); --n-padding-top: 12px; --n-padding-bottom: 12px; --n-padding-left: 16px; --n-font-size: 14px; --n-title-font-size: 16px; --n-close-size: 22px; --n-close-icon-size: 18px; --n-close-border-radius: 3px;"`; diff --git a/src/card/tests/server.spec.tsx b/src/card/tests/server.spec.tsx index aadb7541372..e89273c4db7 100644 --- a/src/card/tests/server.spec.tsx +++ b/src/card/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NCard } from '../..' diff --git a/src/carousel/tests/Carousel.spec.tsx b/src/carousel/tests/Carousel.spec.tsx index 68f5768929e..455a72ea737 100644 --- a/src/carousel/tests/Carousel.spec.tsx +++ b/src/carousel/tests/Carousel.spec.tsx @@ -396,7 +396,7 @@ describe('n-carousel', () => { }) it('should work with `on-update:current-index` prop', async () => { - const onUpdate = jest.fn() + const onUpdate = vi.fn() const wrapper = mount(NCarousel, { props: { onUpdateCurrentIndex: onUpdate diff --git a/src/carousel/tests/server.spec.tsx b/src/carousel/tests/server.spec.tsx index 1e8ff4fd501..6051c2e91a9 100644 --- a/src/carousel/tests/server.spec.tsx +++ b/src/carousel/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NCarousel } from '../..' diff --git a/src/cascader/tests/Cascader.spec.ts b/src/cascader/tests/Cascader.spec.ts index 2e7ed6624ad..b1aa8428e20 100644 --- a/src/cascader/tests/Cascader.spec.ts +++ b/src/cascader/tests/Cascader.spec.ts @@ -1,6 +1,5 @@ import type { CascaderOption } from '../src/interface' import { mount } from '@vue/test-utils' -import { nextTick } from 'vue' import { NCascader } from '../index' function getOptions(depth = 3, iterator = 1, prefix = ''): CascaderOption[] { @@ -100,14 +99,14 @@ describe('n-cascader', () => { ] as const ).forEach((placement) => { const wrapper = mount(NCascader, { props: { placement } }) - setTimeout(() => { + vi.waitFor(() => { expect( document .querySelector('.v-binder-follower-content') ?.getAttribute('v-placement') ).toBe(placement) - wrapper.unmount() }) + wrapper.unmount() }) }) @@ -190,7 +189,7 @@ describe('n-cascader', () => { }) it('should work with `on-blur` prop', async () => { - const onBlur = jest.fn() + const onBlur = vi.fn() const wrapper = mount(NCascader, { props: { options: getOptions(), onBlur } }) @@ -200,7 +199,7 @@ describe('n-cascader', () => { }) it('should work with `on-focus` prop', async () => { - const onFocus = jest.fn() + const onFocus = vi.fn() const wrapper = mount(NCascader, { props: { options: getOptions(), onFocus } }) @@ -217,10 +216,11 @@ describe('n-cascader', () => { } }) - await wrapper.find('.n-base-selection').trigger('click') - expect(wrapper.find('.n-base-selection--active').exists()).toBe(true) - expect(document.querySelector('.n-cascader-menu')).not.toEqual(null) - + wrapper.find('.n-base-selection').trigger('click') + vi.waitFor(() => { + expect(wrapper.find('.n-base-selection--active').exists()).toBe(true) + expect(document.querySelector('.n-cascader-menu')).not.toEqual(null) + }) await wrapper.find('.n-base-selection').trigger('click') expect(wrapper.find('.n-base-selection--active').exists()).toBe(false) expect(document.querySelector('.n-cascader-menu')).toEqual(null) @@ -237,13 +237,16 @@ describe('n-cascader', () => { } }) - await wrapper.find('.n-base-selection').trigger('click') - expect(document.querySelector('.n-cascader-menu')).not.toEqual(null) + wrapper.find('.n-base-selection').trigger('click') + vi.waitFor(() => { + expect(document.querySelector('.n-cascader-menu')).not.toEqual(null) + }) document.body.click() document.body.dispatchEvent(mousedownEvent) document.body.dispatchEvent(mouseupEvent) - await nextTick() - expect(document.querySelector('.n-cascader-menu')).toEqual(null) + vi.waitFor(() => { + expect(document.querySelector('.n-cascader-menu')).toEqual(null) + }) wrapper.unmount() }) }) diff --git a/src/cascader/tests/__snapshots__/Cascader.spec.ts.snap b/src/cascader/tests/__snapshots__/Cascader.spec.ts.snap index b6013ea4e54..2d1bcd8232a 100644 --- a/src/cascader/tests/__snapshots__/Cascader.spec.ts.snap +++ b/src/cascader/tests/__snapshots__/Cascader.spec.ts.snap @@ -1,7 +1,7 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-cascader should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 28px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; +exports[`n-cascader > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 28px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; -exports[`n-cascader should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 34px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; +exports[`n-cascader > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 34px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; -exports[`n-cascader should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 15px; --n-height: 40px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; +exports[`n-cascader > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 15px; --n-height: 40px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; diff --git a/src/cascader/tests/server.spec.tsx b/src/cascader/tests/server.spec.tsx index 399fc36eba4..1ea291ddfda 100644 --- a/src/cascader/tests/server.spec.tsx +++ b/src/cascader/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NCascader } from '../..' diff --git a/src/checkbox/tests/Checkbox.spec.tsx b/src/checkbox/tests/Checkbox.spec.tsx index 21851d87794..c36618c2d7d 100644 --- a/src/checkbox/tests/Checkbox.spec.tsx +++ b/src/checkbox/tests/Checkbox.spec.tsx @@ -37,7 +37,7 @@ describe('n-checkbox', () => { }) it('should work with `checked-value` prop', async () => { - const onUpdateChecked = jest.fn() + const onUpdateChecked = vi.fn() const wrapper = mount(NCheckbox, { props: { checkedValue: 'fooo', @@ -136,7 +136,7 @@ describe('n-checkbox', () => { }) it('should work with `on-update:checked` & `onUpdateChecked` prop', async () => { - const onClick = jest.fn() + const onClick = vi.fn() const wrapper = mount(NCheckbox, { props: { 'onUpdate:checked': onClick, @@ -235,7 +235,7 @@ describe('n-checkbox-group', () => { }) it('should work with `on-update:value` prop', async () => { - const onClick = jest.fn() + const onClick = vi.fn() const wrapper = mount(NCheckboxGroup, { props: { 'on-update:value': onClick diff --git a/src/checkbox/tests/__snapshots__/Checkbox.spec.tsx.snap b/src/checkbox/tests/__snapshots__/Checkbox.spec.tsx.snap index fc766d0119a..7c15ad7b73f 100644 --- a/src/checkbox/tests/__snapshots__/Checkbox.spec.tsx.snap +++ b/src/checkbox/tests/__snapshots__/Checkbox.spec.tsx.snap @@ -1,9 +1,9 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-checkbox should show correct style with \`NForm\` component 1`] = `"--n-label-line-height: 1.6; --n-label-font-weight: 400; --n-size: 16px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-border-checked: 1px solid #18a058; --n-border-focus: 1px solid #18a058; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-disabled-checked: 1px solid rgb(224, 224, 230); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.3); --n-color: #FFF; --n-color-checked: #18a058; --n-color-table: #fff; --n-color-table-modal: #fff; --n-color-table-popover: #fff; --n-color-disabled: rgb(250, 250, 252); --n-color-disabled-checked: rgb(250, 250, 252); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color: #FFF; --n-check-mark-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color-disabled-checked: rgba(194, 194, 194, 1); --n-font-size: 14px; --n-label-padding: 0 8px;"`; +exports[`n-checkbox > should show correct style with \`NForm\` component 1`] = `"--n-label-line-height: 1.6; --n-label-font-weight: 400; --n-size: 16px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-border-checked: 1px solid #18a058; --n-border-focus: 1px solid #18a058; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-disabled-checked: 1px solid rgb(224, 224, 230); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.3); --n-color: #FFF; --n-color-checked: #18a058; --n-color-table: #fff; --n-color-table-modal: #fff; --n-color-table-popover: #fff; --n-color-disabled: rgb(250, 250, 252); --n-color-disabled-checked: rgb(250, 250, 252); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color: #FFF; --n-check-mark-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color-disabled-checked: rgba(194, 194, 194, 1); --n-font-size: 14px; --n-label-padding: 0 8px;"`; -exports[`n-checkbox should work with \`size\` prop 1`] = `"--n-label-line-height: 1.6; --n-label-font-weight: 400; --n-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-border-checked: 1px solid #18a058; --n-border-focus: 1px solid #18a058; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-disabled-checked: 1px solid rgb(224, 224, 230); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.3); --n-color: #FFF; --n-color-checked: #18a058; --n-color-table: #fff; --n-color-table-modal: #fff; --n-color-table-popover: #fff; --n-color-disabled: rgb(250, 250, 252); --n-color-disabled-checked: rgb(250, 250, 252); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color: #FFF; --n-check-mark-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color-disabled-checked: rgba(194, 194, 194, 1); --n-font-size: 14px; --n-label-padding: 0 8px;"`; +exports[`n-checkbox > should work with \`size\` prop 1`] = `"--n-label-line-height: 1.6; --n-label-font-weight: 400; --n-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-border-checked: 1px solid #18a058; --n-border-focus: 1px solid #18a058; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-disabled-checked: 1px solid rgb(224, 224, 230); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.3); --n-color: #FFF; --n-color-checked: #18a058; --n-color-table: #fff; --n-color-table-modal: #fff; --n-color-table-popover: #fff; --n-color-disabled: rgb(250, 250, 252); --n-color-disabled-checked: rgb(250, 250, 252); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color: #FFF; --n-check-mark-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color-disabled-checked: rgba(194, 194, 194, 1); --n-font-size: 14px; --n-label-padding: 0 8px;"`; -exports[`n-checkbox should work with \`size\` prop 2`] = `"--n-label-line-height: 1.6; --n-label-font-weight: 400; --n-size: 16px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-border-checked: 1px solid #18a058; --n-border-focus: 1px solid #18a058; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-disabled-checked: 1px solid rgb(224, 224, 230); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.3); --n-color: #FFF; --n-color-checked: #18a058; --n-color-table: #fff; --n-color-table-modal: #fff; --n-color-table-popover: #fff; --n-color-disabled: rgb(250, 250, 252); --n-color-disabled-checked: rgb(250, 250, 252); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color: #FFF; --n-check-mark-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color-disabled-checked: rgba(194, 194, 194, 1); --n-font-size: 14px; --n-label-padding: 0 8px;"`; +exports[`n-checkbox > should work with \`size\` prop 2`] = `"--n-label-line-height: 1.6; --n-label-font-weight: 400; --n-size: 16px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-border-checked: 1px solid #18a058; --n-border-focus: 1px solid #18a058; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-disabled-checked: 1px solid rgb(224, 224, 230); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.3); --n-color: #FFF; --n-color-checked: #18a058; --n-color-table: #fff; --n-color-table-modal: #fff; --n-color-table-popover: #fff; --n-color-disabled: rgb(250, 250, 252); --n-color-disabled-checked: rgb(250, 250, 252); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color: #FFF; --n-check-mark-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color-disabled-checked: rgba(194, 194, 194, 1); --n-font-size: 14px; --n-label-padding: 0 8px;"`; -exports[`n-checkbox should work with \`size\` prop 3`] = `"--n-label-line-height: 1.6; --n-label-font-weight: 400; --n-size: 18px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-border-checked: 1px solid #18a058; --n-border-focus: 1px solid #18a058; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-disabled-checked: 1px solid rgb(224, 224, 230); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.3); --n-color: #FFF; --n-color-checked: #18a058; --n-color-table: #fff; --n-color-table-modal: #fff; --n-color-table-popover: #fff; --n-color-disabled: rgb(250, 250, 252); --n-color-disabled-checked: rgb(250, 250, 252); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color: #FFF; --n-check-mark-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color-disabled-checked: rgba(194, 194, 194, 1); --n-font-size: 15px; --n-label-padding: 0 8px;"`; +exports[`n-checkbox > should work with \`size\` prop 3`] = `"--n-label-line-height: 1.6; --n-label-font-weight: 400; --n-size: 18px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-border-checked: 1px solid #18a058; --n-border-focus: 1px solid #18a058; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-disabled-checked: 1px solid rgb(224, 224, 230); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.3); --n-color: #FFF; --n-color-checked: #18a058; --n-color-table: #fff; --n-color-table-modal: #fff; --n-color-table-popover: #fff; --n-color-disabled: rgb(250, 250, 252); --n-color-disabled-checked: rgb(250, 250, 252); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color: #FFF; --n-check-mark-color-disabled: rgba(194, 194, 194, 1); --n-check-mark-color-disabled-checked: rgba(194, 194, 194, 1); --n-font-size: 15px; --n-label-padding: 0 8px;"`; diff --git a/src/checkbox/tests/server.spec.tsx b/src/checkbox/tests/server.spec.tsx index 00e5898e0cd..a92df856c62 100644 --- a/src/checkbox/tests/server.spec.tsx +++ b/src/checkbox/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NCheckbox } from '../..' diff --git a/src/code/tests/Code.spec.tsx b/src/code/tests/Code.spec.tsx index e00081735fc..727f9da5578 100644 --- a/src/code/tests/Code.spec.tsx +++ b/src/code/tests/Code.spec.tsx @@ -8,7 +8,7 @@ hljs.registerLanguage('javascript', javascript) describe('n-code', () => { it('should warn when no hljs is set', () => { - const spy = jest.spyOn(console, 'error').mockImplementation() + const spy = vi.spyOn(console, 'error').mockImplementation(() => {}) mount(NCode) expect(spy).toHaveBeenCalled() }) diff --git a/src/code/tests/server.spec.tsx b/src/code/tests/server.spec.tsx index fd6d1225690..0da07306ce2 100644 --- a/src/code/tests/server.spec.tsx +++ b/src/code/tests/server.spec.tsx @@ -2,9 +2,6 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' import hljs from 'highlight.js/lib/core' import javascript from 'highlight.js/lib/languages/javascript' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NCode } from '../..' import { NConfigProvider } from '../../config-provider' diff --git a/src/collapse-transition/tests/server.spec.tsx b/src/collapse-transition/tests/server.spec.tsx index 9a1801cdb9f..deb7a33dc7e 100644 --- a/src/collapse-transition/tests/server.spec.tsx +++ b/src/collapse-transition/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NCollapse } from '../..' diff --git a/src/collapse/tests/Collapse.spec.tsx b/src/collapse/tests/Collapse.spec.tsx index 2a91ddd2219..e9665bc9160 100644 --- a/src/collapse/tests/Collapse.spec.tsx +++ b/src/collapse/tests/Collapse.spec.tsx @@ -152,7 +152,7 @@ describe('n-collapse', () => { }) it('should work with `on-item-header-click` prop', async () => { - const onClick = jest.fn() + const onClick = vi.fn() const wrapper = mount(NCollapse, { props: { onItemHeaderClick: onClick diff --git a/src/collapse/tests/server.spec.tsx b/src/collapse/tests/server.spec.tsx index 9a1801cdb9f..deb7a33dc7e 100644 --- a/src/collapse/tests/server.spec.tsx +++ b/src/collapse/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NCollapse } from '../..' diff --git a/src/color-picker/tests/ColorPicker.spec.tsx b/src/color-picker/tests/ColorPicker.spec.tsx index c9337da1672..da7bbbd66b3 100644 --- a/src/color-picker/tests/ColorPicker.spec.tsx +++ b/src/color-picker/tests/ColorPicker.spec.tsx @@ -128,7 +128,7 @@ describe('n-color-picker', () => { wrapper.unmount() }) it('output according to mode', async () => { - const onUpdateValue = jest.fn() + const onUpdateValue = vi.fn() const output = { RGBA: { mode: 'rgb', @@ -215,14 +215,14 @@ describe('n-color-picker 2', () => { ] as const ).forEach((placement) => { const wrapper = mount(NColorPicker, { props: { placement } }) - setTimeout(() => { + vi.waitFor(() => { expect( document .querySelector('.v-binder-follower-content') ?.getAttribute('v-placement') ).toBe(placement) - wrapper.unmount() }) + wrapper.unmount() }) }) diff --git a/src/color-picker/tests/server.spec.tsx b/src/color-picker/tests/server.spec.tsx index cc18a92ca97..45de3c05796 100644 --- a/src/color-picker/tests/server.spec.tsx +++ b/src/color-picker/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NColorPicker } from '../..' diff --git a/src/config-provider/tests/server.spec.tsx b/src/config-provider/tests/server.spec.tsx index 549974c3af9..3d1390d94e8 100644 --- a/src/config-provider/tests/server.spec.tsx +++ b/src/config-provider/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NButton, NConfigProvider } from '../..' diff --git a/src/countdown/tests/Countdown.spec.ts b/src/countdown/tests/Countdown.spec.ts index 44b17929949..8ff30ef575f 100644 --- a/src/countdown/tests/Countdown.spec.ts +++ b/src/countdown/tests/Countdown.spec.ts @@ -51,7 +51,7 @@ describe('n-countdown', () => { wrapper.unmount() }) it('should work with `on-finish` prop', async () => { - const onFinish = jest.fn() + const onFinish = vi.fn() const wrapper = mount(NCountdown, { props: { duration: 1, diff --git a/src/countdown/tests/server.spec.tsx b/src/countdown/tests/server.spec.tsx index a3c28f3bae3..51535b5b9e9 100644 --- a/src/countdown/tests/server.spec.tsx +++ b/src/countdown/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NCountdown } from '../..' diff --git a/src/data-table/tests/DataTable.spec.tsx b/src/data-table/tests/DataTable.spec.tsx index fea293061db..f6e86b75fed 100644 --- a/src/data-table/tests/DataTable.spec.tsx +++ b/src/data-table/tests/DataTable.spec.tsx @@ -72,7 +72,7 @@ describe('n-data-table', () => { name: index } }) - const onPageChange = jest.fn((page: number): void => { + const onPageChange = vi.fn((page: number): void => { setTimeout(() => { pagination.page = page pagination.itemCount = data.length @@ -830,17 +830,17 @@ describe('n-data-table', () => { name: index } }) - let wrapper = mount(() => ) + const wrapper = mount(() => ) expect(wrapper.find('tbody').element.children.length).not.toBe(0) - wrapper = mount(() => ( - - )) - expect(wrapper.find('tbody').element.children.length).toBe(0) + vi.waitFor(() => { + wrapper.setProps({ virtualScroll: true }) + expect(wrapper.find('tbody').element.children.length).toBe(0) + }) wrapper.unmount() }) it('should work with `on-update:checked-row-keys` prop', async () => { - const handleCheck = jest.fn() + const handleCheck = vi.fn() const columns: DataTableColumns = [ { type: 'selection' @@ -1343,10 +1343,10 @@ describe('props.columns', () => { await radios[1].trigger('click') - setTimeout(() => { + vi.waitFor(() => { expect(radios[1].classes()).toContain('n-radio--checked') expect(radios[4].classes()).not.toContain('n-radio--checked') - }, 0) + }) wrapper.unmount() }) }) diff --git a/src/data-table/tests/__snapshots__/DataTable.spec.tsx.snap b/src/data-table/tests/__snapshots__/DataTable.spec.tsx.snap index f185571118c..482897913cb 100644 --- a/src/data-table/tests/__snapshots__/DataTable.spec.tsx.snap +++ b/src/data-table/tests/__snapshots__/DataTable.spec.tsx.snap @@ -1,7 +1,7 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-data-table should work with \`size\` prop 1`] = `"--n-font-size: 14px; --n-th-padding: 8px; --n-td-padding: 8px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 3px; --n-line-height: 1.6; --n-border-color: rgba(239, 239, 245, 1); --n-border-color-modal: rgba(239, 239, 245, 1); --n-border-color-popover: rgba(239, 239, 245, 1); --n-th-color: rgba(250, 250, 252, 1); --n-th-color-hover: rgba(243, 243, 247, 1); --n-th-color-modal: rgba(250, 250, 252, 1); --n-th-color-hover-modal: rgba(243, 243, 247, 1); --n-th-color-popover: rgba(250, 250, 252, 1); --n-th-color-hover-popover: rgba(243, 243, 247, 1); --n-td-color: #fff; --n-td-color-hover: rgba(247, 247, 250, 1); --n-td-color-modal: #fff; --n-td-color-hover-modal: rgba(247, 247, 250, 1); --n-td-color-popover: #fff; --n-td-color-hover-popover: rgba(247, 247, 250, 1); --n-th-text-color: rgb(31, 34, 37); --n-td-text-color: rgb(51, 54, 57); --n-th-font-weight: 500; --n-th-button-color-hover: rgba(0, 0, 100, 0.03); --n-th-icon-color: rgba(194, 194, 194, 1); --n-th-icon-color-active: #18a058; --n-filter-size: 15px; --n-pagination-margin: 12px 0 0 0; --n-empty-padding: 48px 0; --n-box-shadow-before: inset -12px 0 8px -12px rgba(0, 0, 0, .18); --n-box-shadow-after: inset 12px 0 8px -12px rgba(0, 0, 0, .18); --n-sorter-size: 15px; --n-resizable-container-size: 8px; --n-resizable-size: 2px; --n-loading-size: 28px; --n-loading-color: #18a058; --n-opacity-loading: 0.5; --n-td-color-striped: rgba(250, 250, 252, 1); --n-td-color-striped-modal: rgba(250, 250, 252, 1); --n-td-color-striped-popover: rgba(250, 250, 252, 1);"`; +exports[`n-data-table > should work with \`size\` prop 1`] = `"--n-font-size: 14px; --n-th-padding: 8px; --n-td-padding: 8px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 3px; --n-line-height: 1.6; --n-border-color: rgba(239, 239, 245, 1); --n-border-color-modal: rgba(239, 239, 245, 1); --n-border-color-popover: rgba(239, 239, 245, 1); --n-th-color: rgba(250, 250, 252, 1); --n-th-color-hover: rgba(243, 243, 247, 1); --n-th-color-modal: rgba(250, 250, 252, 1); --n-th-color-hover-modal: rgba(243, 243, 247, 1); --n-th-color-popover: rgba(250, 250, 252, 1); --n-th-color-hover-popover: rgba(243, 243, 247, 1); --n-td-color: #fff; --n-td-color-hover: rgba(247, 247, 250, 1); --n-td-color-modal: #fff; --n-td-color-hover-modal: rgba(247, 247, 250, 1); --n-td-color-popover: #fff; --n-td-color-hover-popover: rgba(247, 247, 250, 1); --n-th-text-color: rgb(31, 34, 37); --n-td-text-color: rgb(51, 54, 57); --n-th-font-weight: 500; --n-th-button-color-hover: rgba(0, 0, 100, 0.03); --n-th-icon-color: rgba(194, 194, 194, 1); --n-th-icon-color-active: #18a058; --n-filter-size: 15px; --n-pagination-margin: 12px 0 0 0; --n-empty-padding: 48px 0; --n-box-shadow-before: inset -12px 0 8px -12px rgba(0, 0, 0, .18); --n-box-shadow-after: inset 12px 0 8px -12px rgba(0, 0, 0, .18); --n-sorter-size: 15px; --n-resizable-container-size: 8px; --n-resizable-size: 2px; --n-loading-size: 28px; --n-loading-color: #18a058; --n-opacity-loading: 0.5; --n-td-color-striped: rgba(250, 250, 252, 1); --n-td-color-striped-modal: rgba(250, 250, 252, 1); --n-td-color-striped-popover: rgba(250, 250, 252, 1);"`; -exports[`n-data-table should work with \`size\` prop 2`] = `"--n-font-size: 14px; --n-th-padding: 12px; --n-td-padding: 12px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 3px; --n-line-height: 1.6; --n-border-color: rgba(239, 239, 245, 1); --n-border-color-modal: rgba(239, 239, 245, 1); --n-border-color-popover: rgba(239, 239, 245, 1); --n-th-color: rgba(250, 250, 252, 1); --n-th-color-hover: rgba(243, 243, 247, 1); --n-th-color-modal: rgba(250, 250, 252, 1); --n-th-color-hover-modal: rgba(243, 243, 247, 1); --n-th-color-popover: rgba(250, 250, 252, 1); --n-th-color-hover-popover: rgba(243, 243, 247, 1); --n-td-color: #fff; --n-td-color-hover: rgba(247, 247, 250, 1); --n-td-color-modal: #fff; --n-td-color-hover-modal: rgba(247, 247, 250, 1); --n-td-color-popover: #fff; --n-td-color-hover-popover: rgba(247, 247, 250, 1); --n-th-text-color: rgb(31, 34, 37); --n-td-text-color: rgb(51, 54, 57); --n-th-font-weight: 500; --n-th-button-color-hover: rgba(0, 0, 100, 0.03); --n-th-icon-color: rgba(194, 194, 194, 1); --n-th-icon-color-active: #18a058; --n-filter-size: 15px; --n-pagination-margin: 12px 0 0 0; --n-empty-padding: 48px 0; --n-box-shadow-before: inset -12px 0 8px -12px rgba(0, 0, 0, .18); --n-box-shadow-after: inset 12px 0 8px -12px rgba(0, 0, 0, .18); --n-sorter-size: 15px; --n-resizable-container-size: 8px; --n-resizable-size: 2px; --n-loading-size: 28px; --n-loading-color: #18a058; --n-opacity-loading: 0.5; --n-td-color-striped: rgba(250, 250, 252, 1); --n-td-color-striped-modal: rgba(250, 250, 252, 1); --n-td-color-striped-popover: rgba(250, 250, 252, 1);"`; +exports[`n-data-table > should work with \`size\` prop 2`] = `"--n-font-size: 14px; --n-th-padding: 12px; --n-td-padding: 12px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 3px; --n-line-height: 1.6; --n-border-color: rgba(239, 239, 245, 1); --n-border-color-modal: rgba(239, 239, 245, 1); --n-border-color-popover: rgba(239, 239, 245, 1); --n-th-color: rgba(250, 250, 252, 1); --n-th-color-hover: rgba(243, 243, 247, 1); --n-th-color-modal: rgba(250, 250, 252, 1); --n-th-color-hover-modal: rgba(243, 243, 247, 1); --n-th-color-popover: rgba(250, 250, 252, 1); --n-th-color-hover-popover: rgba(243, 243, 247, 1); --n-td-color: #fff; --n-td-color-hover: rgba(247, 247, 250, 1); --n-td-color-modal: #fff; --n-td-color-hover-modal: rgba(247, 247, 250, 1); --n-td-color-popover: #fff; --n-td-color-hover-popover: rgba(247, 247, 250, 1); --n-th-text-color: rgb(31, 34, 37); --n-td-text-color: rgb(51, 54, 57); --n-th-font-weight: 500; --n-th-button-color-hover: rgba(0, 0, 100, 0.03); --n-th-icon-color: rgba(194, 194, 194, 1); --n-th-icon-color-active: #18a058; --n-filter-size: 15px; --n-pagination-margin: 12px 0 0 0; --n-empty-padding: 48px 0; --n-box-shadow-before: inset -12px 0 8px -12px rgba(0, 0, 0, .18); --n-box-shadow-after: inset 12px 0 8px -12px rgba(0, 0, 0, .18); --n-sorter-size: 15px; --n-resizable-container-size: 8px; --n-resizable-size: 2px; --n-loading-size: 28px; --n-loading-color: #18a058; --n-opacity-loading: 0.5; --n-td-color-striped: rgba(250, 250, 252, 1); --n-td-color-striped-modal: rgba(250, 250, 252, 1); --n-td-color-striped-popover: rgba(250, 250, 252, 1);"`; -exports[`n-data-table should work with \`size\` prop 3`] = `"--n-font-size: 15px; --n-th-padding: 12px; --n-td-padding: 12px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 3px; --n-line-height: 1.6; --n-border-color: rgba(239, 239, 245, 1); --n-border-color-modal: rgba(239, 239, 245, 1); --n-border-color-popover: rgba(239, 239, 245, 1); --n-th-color: rgba(250, 250, 252, 1); --n-th-color-hover: rgba(243, 243, 247, 1); --n-th-color-modal: rgba(250, 250, 252, 1); --n-th-color-hover-modal: rgba(243, 243, 247, 1); --n-th-color-popover: rgba(250, 250, 252, 1); --n-th-color-hover-popover: rgba(243, 243, 247, 1); --n-td-color: #fff; --n-td-color-hover: rgba(247, 247, 250, 1); --n-td-color-modal: #fff; --n-td-color-hover-modal: rgba(247, 247, 250, 1); --n-td-color-popover: #fff; --n-td-color-hover-popover: rgba(247, 247, 250, 1); --n-th-text-color: rgb(31, 34, 37); --n-td-text-color: rgb(51, 54, 57); --n-th-font-weight: 500; --n-th-button-color-hover: rgba(0, 0, 100, 0.03); --n-th-icon-color: rgba(194, 194, 194, 1); --n-th-icon-color-active: #18a058; --n-filter-size: 15px; --n-pagination-margin: 12px 0 0 0; --n-empty-padding: 48px 0; --n-box-shadow-before: inset -12px 0 8px -12px rgba(0, 0, 0, .18); --n-box-shadow-after: inset 12px 0 8px -12px rgba(0, 0, 0, .18); --n-sorter-size: 15px; --n-resizable-container-size: 8px; --n-resizable-size: 2px; --n-loading-size: 28px; --n-loading-color: #18a058; --n-opacity-loading: 0.5; --n-td-color-striped: rgba(250, 250, 252, 1); --n-td-color-striped-modal: rgba(250, 250, 252, 1); --n-td-color-striped-popover: rgba(250, 250, 252, 1);"`; +exports[`n-data-table > should work with \`size\` prop 3`] = `"--n-font-size: 15px; --n-th-padding: 12px; --n-td-padding: 12px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 3px; --n-line-height: 1.6; --n-border-color: rgba(239, 239, 245, 1); --n-border-color-modal: rgba(239, 239, 245, 1); --n-border-color-popover: rgba(239, 239, 245, 1); --n-th-color: rgba(250, 250, 252, 1); --n-th-color-hover: rgba(243, 243, 247, 1); --n-th-color-modal: rgba(250, 250, 252, 1); --n-th-color-hover-modal: rgba(243, 243, 247, 1); --n-th-color-popover: rgba(250, 250, 252, 1); --n-th-color-hover-popover: rgba(243, 243, 247, 1); --n-td-color: #fff; --n-td-color-hover: rgba(247, 247, 250, 1); --n-td-color-modal: #fff; --n-td-color-hover-modal: rgba(247, 247, 250, 1); --n-td-color-popover: #fff; --n-td-color-hover-popover: rgba(247, 247, 250, 1); --n-th-text-color: rgb(31, 34, 37); --n-td-text-color: rgb(51, 54, 57); --n-th-font-weight: 500; --n-th-button-color-hover: rgba(0, 0, 100, 0.03); --n-th-icon-color: rgba(194, 194, 194, 1); --n-th-icon-color-active: #18a058; --n-filter-size: 15px; --n-pagination-margin: 12px 0 0 0; --n-empty-padding: 48px 0; --n-box-shadow-before: inset -12px 0 8px -12px rgba(0, 0, 0, .18); --n-box-shadow-after: inset 12px 0 8px -12px rgba(0, 0, 0, .18); --n-sorter-size: 15px; --n-resizable-container-size: 8px; --n-resizable-size: 2px; --n-loading-size: 28px; --n-loading-color: #18a058; --n-opacity-loading: 0.5; --n-td-color-striped: rgba(250, 250, 252, 1); --n-td-color-striped-modal: rgba(250, 250, 252, 1); --n-td-color-striped-popover: rgba(250, 250, 252, 1);"`; diff --git a/src/data-table/tests/server.spec.tsx b/src/data-table/tests/server.spec.tsx index 40fa7cc8524..56ac1958a47 100644 --- a/src/data-table/tests/server.spec.tsx +++ b/src/data-table/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NDataTable } from '../..' diff --git a/src/date-picker/tests/DatePicker.spec.tsx b/src/date-picker/tests/DatePicker.spec.tsx index 94b47d21288..d228c663c27 100644 --- a/src/date-picker/tests/DatePicker.spec.tsx +++ b/src/date-picker/tests/DatePicker.spec.tsx @@ -248,32 +248,46 @@ describe('n-date-picker', () => { props: { type: 'date' } }) - await wrapper.find('.n-input__input').trigger('click') - expect(document.querySelector('.n-date-panel--date')).not.toEqual(null) + wrapper.find('.n-input__input').trigger('click') + vi.waitFor(() => { + expect(document.querySelector('.n-date-panel--date')).not.toEqual(null) + }) await wrapper.setProps({ type: 'datetime' }) - await wrapper.find('.n-input__input').trigger('click') - expect(document.querySelector('.n-date-panel--datetime')).not.toEqual(null) + vi.waitFor(() => { + wrapper.find('.n-input__input').trigger('click') + expect(document.querySelector('.n-date-panel--datetime')).not.toEqual( + null + ) + }) await wrapper.setProps({ type: 'daterange' }) - await wrapper.find('.n-input__input').trigger('click') - expect(document.querySelector('.n-date-panel--daterange')).not.toEqual(null) + vi.waitFor(() => { + wrapper.find('.n-input__input').trigger('click') + expect(document.querySelector('.n-date-panel--daterange')).not.toEqual( + null + ) + }) await wrapper.setProps({ type: 'datetimerange' }) - await wrapper.find('.n-input__input').trigger('click') - expect(document.querySelector('.n-date-panel--datetimerange')).not.toEqual( - null - ) + vi.waitFor(() => { + wrapper.find('.n-input__input').trigger('click') + expect( + document.querySelector('.n-date-panel--datetimerange') + ).not.toEqual(null) + }) - await wrapper.setProps({ type: 'month' }) - await wrapper.find('.n-input__input').trigger('click') - expect(document.querySelector('.n-date-panel--month')).not.toEqual(null) + vi.waitFor(() => { + wrapper.setProps({ type: 'month' }) + wrapper.find('.n-input__input').trigger('click') + expect(document.querySelector('.n-date-panel--month')).not.toEqual(null) + }) wrapper.unmount() }) it('should work with `onBlur` prop', async () => { - const onBlur = jest.fn() + const onBlur = vi.fn() const wrapper = mount(NDatePicker, { props: { onBlur } }) @@ -286,7 +300,7 @@ describe('n-date-picker', () => { }) it('should work with `onFocus` prop', async () => { - const onFocus = jest.fn() + const onFocus = vi.fn() const wrapper = mount(NDatePicker, { props: { onFocus } }) @@ -328,45 +342,54 @@ describe('n-date-picker', () => { } }) - await wrapper.find('.n-input__input').trigger('click') - expect( - document.querySelectorAll( - '.n-date-panel-month-calendar__picker-col-item' - )[0].textContent - ).toBe('1') - - await wrapper.setProps({ monthFormat: 'MM' }) - await wrapper.find('.n-input__input').trigger('click') - expect( - document.querySelectorAll( - '.n-date-panel-month-calendar__picker-col-item' - )[0].textContent - ).toBe('01') + wrapper.find('.n-input__input').trigger('click') + vi.waitFor(() => { + expect( + document.querySelectorAll( + '.n-date-panel-month-calendar__picker-col-item' + )[0].textContent + ).toBe('1') + }) - await wrapper.setProps({ monthFormat: 'MMMM' }) - await wrapper.find('.n-input__input').trigger('click') - expect( - document.querySelectorAll( - '.n-date-panel-month-calendar__picker-col-item' - )[0].textContent - ).toBe('January') + vi.waitFor(() => { + wrapper.setProps({ monthFormat: 'MM' }) + wrapper.find('.n-input__input').trigger('click') + expect( + document.querySelectorAll( + '.n-date-panel-month-calendar__picker-col-item' + )[0].textContent + ).toBe('01') + }) - await wrapper.setProps({ monthFormat: 'MMM' }) - await wrapper.find('.n-input__input').trigger('click') - expect( - document.querySelectorAll( - '.n-date-panel-month-calendar__picker-col-item' - )[0].textContent - ).toBe('Jan') + vi.waitFor(() => { + wrapper.setProps({ monthFormat: 'MMMM' }) + wrapper.find('.n-input__input').trigger('click') + expect( + document.querySelectorAll( + '.n-date-panel-month-calendar__picker-col-item' + )[0].textContent + ).toBe('January') + }) - await wrapper.setProps({ monthFormat: 'MMMMM' }) - await wrapper.find('.n-input__input').trigger('click') - expect( - document.querySelectorAll( - '.n-date-panel-month-calendar__picker-col-item' - )[0].textContent - ).toBe('J') + vi.waitFor(() => { + wrapper.setProps({ monthFormat: 'MMM' }) + wrapper.find('.n-input__input').trigger('click') + expect( + document.querySelectorAll( + '.n-date-panel-month-calendar__picker-col-item' + )[0].textContent + ).toBe('Jan') + }) + vi.waitFor(() => { + wrapper.setProps({ monthFormat: 'MMMMM' }) + wrapper.find('.n-input__input').trigger('click') + expect( + document.querySelectorAll( + '.n-date-panel-month-calendar__picker-col-item' + )[0].textContent + ).toBe('J') + }) wrapper.unmount() }) }) diff --git a/src/date-picker/tests/__snapshots__/DatePicker.spec.tsx.snap b/src/date-picker/tests/__snapshots__/DatePicker.spec.tsx.snap index 3eeaa317149..6efcd5d087d 100644 --- a/src/date-picker/tests/__snapshots__/DatePicker.spec.tsx.snap +++ b/src/date-picker/tests/__snapshots__/DatePicker.spec.tsx.snap @@ -1,7 +1,7 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-date-picker should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 28px; --n-padding-left: 10px; --n-padding-right: 10px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; +exports[`n-date-picker > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 28px; --n-padding-left: 10px; --n-padding-right: 10px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; -exports[`n-date-picker should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; +exports[`n-date-picker > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; -exports[`n-date-picker should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 15px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 40px; --n-padding-left: 14px; --n-padding-right: 14px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; +exports[`n-date-picker > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 15px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 40px; --n-padding-left: 14px; --n-padding-right: 14px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; diff --git a/src/date-picker/tests/server.spec.tsx b/src/date-picker/tests/server.spec.tsx index ca8f05fed34..5818743ef4a 100644 --- a/src/date-picker/tests/server.spec.tsx +++ b/src/date-picker/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NDatePicker } from '../..' diff --git a/src/descriptions/tests/server.spec.tsx b/src/descriptions/tests/server.spec.tsx index b5e0d09d820..719cda63a1e 100644 --- a/src/descriptions/tests/server.spec.tsx +++ b/src/descriptions/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NDescriptions } from '../..' diff --git a/src/dialog/tests/Dialog.spec.tsx b/src/dialog/tests/Dialog.spec.tsx index 0714f55a0b2..063b3360954 100644 --- a/src/dialog/tests/Dialog.spec.tsx +++ b/src/dialog/tests/Dialog.spec.tsx @@ -120,7 +120,7 @@ describe('n-dialog', () => { }) it('onMaskClick', async () => { - const onMaskClick = jest.fn() + const onMaskClick = vi.fn() const Test = defineComponent({ setup() { const dialog = useDialog() diff --git a/src/dialog/tests/server.spec.tsx b/src/dialog/tests/server.spec.tsx index a3a646341b7..62b48901a70 100644 --- a/src/dialog/tests/server.spec.tsx +++ b/src/dialog/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NDialog } from '../..' diff --git a/src/divider/tests/server.spec.tsx b/src/divider/tests/server.spec.tsx index 0bf2fe680fe..b9786f06722 100644 --- a/src/divider/tests/server.spec.tsx +++ b/src/divider/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NDivider } from '../..' diff --git a/src/drawer/tests/Drawer.spec.tsx b/src/drawer/tests/Drawer.spec.tsx index 0693e64ce6d..9758c048137 100644 --- a/src/drawer/tests/Drawer.spec.tsx +++ b/src/drawer/tests/Drawer.spec.tsx @@ -139,7 +139,7 @@ describe('n-drawer', () => { }) it('should work with `on-update:show` prop', async () => { - const onUpdate = jest.fn() + const onUpdate = vi.fn() const wrapper = mountDrawer({ hasOnUpdateShow: true, drawerProps: { onUpdateShow: onUpdate }, @@ -153,7 +153,7 @@ describe('n-drawer', () => { }) it('should work with `mask-closable` prop', async () => { - const onUpdate = jest.fn() + const onUpdate = vi.fn() const mousedownEvent = new MouseEvent('mousedown', { bubbles: true }) const mouseupEvent = new MouseEvent('mouseup', { bubbles: true }) const wrapper = mountDrawer({ diff --git a/src/drawer/tests/server.spec.tsx b/src/drawer/tests/server.spec.tsx index e73c14848ad..605c94a5aab 100644 --- a/src/drawer/tests/server.spec.tsx +++ b/src/drawer/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NDrawer } from '../..' diff --git a/src/dropdown/tests/Dropdown.spec.tsx b/src/dropdown/tests/Dropdown.spec.tsx index 56e4a17e364..10d6050e879 100644 --- a/src/dropdown/tests/Dropdown.spec.tsx +++ b/src/dropdown/tests/Dropdown.spec.tsx @@ -122,7 +122,7 @@ describe('n-dropdown', () => { }) it('keyboard event', async () => { - const onSelect = jest.fn() + const onSelect = vi.fn() let wrapper = mountDropdown({ onSelect }) let triggerNodeWrapper = wrapper.find('span') @@ -177,7 +177,7 @@ describe('n-dropdown', () => { }) it('option mouse event', async () => { - const onSelect = jest.fn() + const onSelect = vi.fn() const wrapper = mountDropdown({ onSelect }) const triggerNodeWrapper = wrapper.find('span') @@ -215,7 +215,7 @@ describe('n-dropdown', () => { }) it('dropdown disabled', async () => { - const onSelect = jest.fn() + const onSelect = vi.fn() const wrapper = mountDropdown({ onSelect }) const triggerNodeWrapper = wrapper.find('span') @@ -239,7 +239,7 @@ describe('n-dropdown', () => { const mousedownEvent = new MouseEvent('mousedown', { bubbles: true }) const mouseupEvent = new MouseEvent('mouseup', { bubbles: true }) - const onClickoutside = jest.fn() + const onClickoutside = vi.fn() const wrapper = mountDropdown({ onClickoutside }) const triggerNodeWrapper = wrapper.find('span') diff --git a/src/dropdown/tests/__snapshots__/Dropdown.spec.tsx.snap b/src/dropdown/tests/__snapshots__/Dropdown.spec.tsx.snap index a317240ed66..36933a01f66 100644 --- a/src/dropdown/tests/__snapshots__/Dropdown.spec.tsx.snap +++ b/src/dropdown/tests/__snapshots__/Dropdown.spec.tsx.snap @@ -1,6 +1,6 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-dropdown dropdown clickoutside 1`] = ` +exports[`n-dropdown > dropdown clickoutside 1`] = `
`; -exports[`n-dropdown inverted style 1`] = ` +exports[`n-dropdown > inverted style 1`] = `
`; -exports[`n-dropdown should work with \`render-icon\` props 1`] = ` +exports[`n-dropdown > should work with \`render-icon\` props 1`] = `
`; -exports[`n-dropdown should work with \`render-label\` props 1`] = ` +exports[`n-dropdown > should work with \`render-label\` props 1`] = `
`; -exports[`n-dropdown shows arrow 1`] = `null`; +exports[`n-dropdown > shows arrow 1`] = `null`; -exports[`n-dropdown shows menu after click 1`] = ` +exports[`n-dropdown > shows menu after click 1`] = `
{ }) it('should work with `on-create` prop', async () => { - const onCreate = jest.fn() + const onCreate = vi.fn() const wrapper = mount(NDynamicInput, { props: { value: [''], @@ -151,7 +151,7 @@ describe('n-dynamic-input', () => { }) it('should work with `on-remove` prop', async () => { - const onRemove = jest.fn() + const onRemove = vi.fn() const wrapper = mount(NDynamicInput, { props: { value: [''], diff --git a/src/dynamic-input/tests/server.spec.tsx b/src/dynamic-input/tests/server.spec.tsx index 86d82cc0aed..47d3ef5ffc3 100644 --- a/src/dynamic-input/tests/server.spec.tsx +++ b/src/dynamic-input/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NDynamicInput } from '../..' diff --git a/src/dynamic-tags/tests/DynamicTags.spec.ts b/src/dynamic-tags/tests/DynamicTags.spec.ts index 672bb4fe49e..b3cb899fb35 100644 --- a/src/dynamic-tags/tests/DynamicTags.spec.ts +++ b/src/dynamic-tags/tests/DynamicTags.spec.ts @@ -46,7 +46,7 @@ describe('n-dynamic-tags', () => { }) it('should work with `disabled` prop', async () => { - const onClose = jest.fn() + const onClose = vi.fn() const wrapper = mount(NDynamicTags, { props: { disabled: true, @@ -150,7 +150,7 @@ describe('n-dynamic-tags', () => { }) it('should work with `on-update:value` prop', () => { - const onUpdateValue = jest.fn() + const onUpdateValue = vi.fn() const wrapper = mount(NDynamicTags, { props: { value: ['教师', '程序员'], diff --git a/src/dynamic-tags/tests/__snapshots__/DynamicTags.spec.ts.snap b/src/dynamic-tags/tests/__snapshots__/DynamicTags.spec.ts.snap index d71bbfda804..580cf2a0081 100644 --- a/src/dynamic-tags/tests/__snapshots__/DynamicTags.spec.ts.snap +++ b/src/dynamic-tags/tests/__snapshots__/DynamicTags.spec.ts.snap @@ -1,17 +1,17 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-dynamic-tags should work with \`size\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-dynamic-tags > should work with \`size\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-dynamic-tags should work with \`size\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-dynamic-tags > should work with \`size\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-dynamic-tags should work with \`size\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(34px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 34px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-dynamic-tags > should work with \`size\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(34px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 34px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-dynamic-tags should work with \`type\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-dynamic-tags > should work with \`type\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-dynamic-tags should work with \`type\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(32, 128, 240, 0.3); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(32, 128, 240, 0.18); --n-close-color-hover: rgba(32, 128, 240, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #2080f0; --n-close-icon-color-hover: #2080f0; --n-close-icon-color-pressed: #2080f0; --n-close-icon-color-disabled: #2080f0; --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgba(32, 128, 240, 0.1); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #2080f0; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-dynamic-tags > should work with \`type\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(32, 128, 240, 0.3); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(32, 128, 240, 0.18); --n-close-color-hover: rgba(32, 128, 240, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #2080f0; --n-close-icon-color-hover: #2080f0; --n-close-icon-color-pressed: #2080f0; --n-close-icon-color-disabled: #2080f0; --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgba(32, 128, 240, 0.1); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #2080f0; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-dynamic-tags should work with \`type\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(24, 160, 88, 0.3); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(24, 160, 88, 0.18); --n-close-color-hover: rgba(24, 160, 88, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #18a058; --n-close-icon-color-hover: #18a058; --n-close-icon-color-pressed: #18a058; --n-close-icon-color-disabled: #18a058; --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgba(24, 160, 88, 0.1); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #18a058; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-dynamic-tags > should work with \`type\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(24, 160, 88, 0.3); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(24, 160, 88, 0.18); --n-close-color-hover: rgba(24, 160, 88, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #18a058; --n-close-icon-color-hover: #18a058; --n-close-icon-color-pressed: #18a058; --n-close-icon-color-disabled: #18a058; --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgba(24, 160, 88, 0.1); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #18a058; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-dynamic-tags should work with \`type\` prop 4`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(240, 160, 32, 0.35); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(240, 160, 32, 0.18); --n-close-color-hover: rgba(240, 160, 32, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #f0a020; --n-close-icon-color-hover: #f0a020; --n-close-icon-color-pressed: #f0a020; --n-close-icon-color-disabled: #f0a020; --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgba(240, 160, 32, 0.12); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #f0a020; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-dynamic-tags > should work with \`type\` prop 4`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(240, 160, 32, 0.35); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(240, 160, 32, 0.18); --n-close-color-hover: rgba(240, 160, 32, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #f0a020; --n-close-icon-color-hover: #f0a020; --n-close-icon-color-pressed: #f0a020; --n-close-icon-color-disabled: #f0a020; --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgba(240, 160, 32, 0.12); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #f0a020; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-dynamic-tags should work with \`type\` prop 5`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(208, 48, 80, 0.23); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(208, 48, 80, 0.18); --n-close-color-hover: rgba(208, 48, 80, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #d03050; --n-close-icon-color-hover: #d03050; --n-close-icon-color-pressed: #d03050; --n-close-icon-color-disabled: #d03050; --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgba(208, 48, 80, 0.08); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #d03050; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-dynamic-tags > should work with \`type\` prop 5`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(22px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgba(208, 48, 80, 0.23); --n-close-icon-size: 12px; --n-close-color-pressed: rgba(208, 48, 80, 0.18); --n-close-color-hover: rgba(208, 48, 80, 0.12); --n-close-border-radius: 2px; --n-close-icon-color: #d03050; --n-close-icon-color-hover: #d03050; --n-close-icon-color-pressed: #d03050; --n-close-icon-color-disabled: #d03050; --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 16px; --n-color: rgba(208, 48, 80, 0.08); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 12px; --n-height: 22px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: #d03050; --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; diff --git a/src/dynamic-tags/tests/server.spec.tsx b/src/dynamic-tags/tests/server.spec.tsx index 2adfbd1bae1..a2eb236e6c6 100644 --- a/src/dynamic-tags/tests/server.spec.tsx +++ b/src/dynamic-tags/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NDynamicTags } from '../..' diff --git a/src/element/tests/server.spec.tsx b/src/element/tests/server.spec.tsx index 8bf50c6ff17..b46d0be2895 100644 --- a/src/element/tests/server.spec.tsx +++ b/src/element/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NElement } from '../..' diff --git a/src/ellipsis/tests/server.spec.tsx b/src/ellipsis/tests/server.spec.tsx index fb7be33302c..19aa21ce950 100644 --- a/src/ellipsis/tests/server.spec.tsx +++ b/src/ellipsis/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NEllipsis } from '../..' diff --git a/src/empty/tests/__snapshots__/Empty.spec.ts.snap b/src/empty/tests/__snapshots__/Empty.spec.ts.snap index 66c2c55d1f6..c691cadfa5e 100644 --- a/src/empty/tests/__snapshots__/Empty.spec.ts.snap +++ b/src/empty/tests/__snapshots__/Empty.spec.ts.snap @@ -1,9 +1,9 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-empty should work with \`size\` prop 1`] = `"--n-icon-size: 40px; --n-font-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgba(194, 194, 194, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-extra-text-color: rgb(51, 54, 57);"`; +exports[`n-empty > should work with \`size\` prop 1`] = `"--n-icon-size: 40px; --n-font-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgba(194, 194, 194, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-extra-text-color: rgb(51, 54, 57);"`; -exports[`n-empty should work with \`size\` prop 2`] = `"--n-icon-size: 34px; --n-font-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgba(194, 194, 194, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-extra-text-color: rgb(51, 54, 57);"`; +exports[`n-empty > should work with \`size\` prop 2`] = `"--n-icon-size: 34px; --n-font-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgba(194, 194, 194, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-extra-text-color: rgb(51, 54, 57);"`; -exports[`n-empty should work with \`size\` prop 3`] = `"--n-icon-size: 46px; --n-font-size: 15px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgba(194, 194, 194, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-extra-text-color: rgb(51, 54, 57);"`; +exports[`n-empty > should work with \`size\` prop 3`] = `"--n-icon-size: 46px; --n-font-size: 15px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgba(194, 194, 194, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-extra-text-color: rgb(51, 54, 57);"`; -exports[`n-empty should work with \`size\` prop 4`] = `"--n-icon-size: 52px; --n-font-size: 16px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgba(194, 194, 194, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-extra-text-color: rgb(51, 54, 57);"`; +exports[`n-empty > should work with \`size\` prop 4`] = `"--n-icon-size: 52px; --n-font-size: 16px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgba(194, 194, 194, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-extra-text-color: rgb(51, 54, 57);"`; diff --git a/src/empty/tests/server.spec.tsx b/src/empty/tests/server.spec.tsx index 4dc5bcd936f..056a559b33f 100644 --- a/src/empty/tests/server.spec.tsx +++ b/src/empty/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NEmpty } from '../..' diff --git a/src/flex/tests/Flex.spec.tsx b/src/flex/tests/Flex.spec.tsx index 3840b46e640..ec1dd5688e4 100644 --- a/src/flex/tests/Flex.spec.tsx +++ b/src/flex/tests/Flex.spec.tsx @@ -17,7 +17,9 @@ describe('n-flex', () => { return } }) - expect(wrapper.find('.n-flex')).not.toBe(null) + vi.waitFor(() => { + expect(wrapper.find('.n-flex').exists()).toBe(true) + }) expect(wrapper.html()).toMatchSnapshot() wrapper.unmount() }) diff --git a/src/flex/tests/__snapshots__/Flex.spec.tsx.snap b/src/flex/tests/__snapshots__/Flex.spec.tsx.snap index bf4c5062379..b5a95b5da44 100644 --- a/src/flex/tests/__snapshots__/Flex.spec.tsx.snap +++ b/src/flex/tests/__snapshots__/Flex.spec.tsx.snap @@ -1,26 +1,26 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-flex render empty children 1`] = `""`; +exports[`n-flex > render empty children 1`] = `""`; -exports[`n-flex render flex string size 1`] = `"
kirby
"`; +exports[`n-flex > render flex string size 1`] = `"
kirby
"`; -exports[`n-flex render vertical flex 1`] = ` +exports[`n-flex > render vertical flex 1`] = ` "
1
2
" `; -exports[`n-flex should not render comment node 1`] = ` +exports[`n-flex > should not render comment node 1`] = ` "
" `; -exports[`n-flex should render while slot is Comment 1`] = ` +exports[`n-flex > should render while slot is Comment 1`] = ` "
" `; -exports[`n-flex should render with invalidElement 1`] = `"
text1text1text1
"`; +exports[`n-flex > should render with invalidElement 1`] = `"
text1text1text1
"`; diff --git a/src/flex/tests/server.spec.tsx b/src/flex/tests/server.spec.tsx index ba33f111a49..42c4c83aaf7 100644 --- a/src/flex/tests/server.spec.tsx +++ b/src/flex/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NFlex } from '../..' diff --git a/src/float-button-group/tests/NFloatButtonGroup.spec.tsx b/src/float-button-group/tests/NFloatButtonGroup.spec.tsx index 9685f3ea46c..06fac749ea0 100644 --- a/src/float-button-group/tests/NFloatButtonGroup.spec.tsx +++ b/src/float-button-group/tests/NFloatButtonGroup.spec.tsx @@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils' import { h } from 'vue' import { NFloatButtonGroup } from '../index' -describe('n-flex', () => { +describe('n-float-button-group', () => { it('should work with import on demand', () => { mount(NFloatButtonGroup) }) @@ -13,7 +13,7 @@ describe('n-flex', () => { return } }) - expect(wrapper.find('.n-flex')).not.toBe(null) + expect(wrapper.find('.n-float-button-group').exists()).toBe(true) expect(wrapper.html()).toMatchSnapshot() wrapper.unmount() }) diff --git a/src/float-button-group/tests/__snapshots__/NFloatButtonGroup.spec.tsx.snap b/src/float-button-group/tests/__snapshots__/NFloatButtonGroup.spec.tsx.snap index ef804b75aa2..0604e448b61 100644 --- a/src/float-button-group/tests/__snapshots__/NFloatButtonGroup.spec.tsx.snap +++ b/src/float-button-group/tests/__snapshots__/NFloatButtonGroup.spec.tsx.snap @@ -1,3 +1,3 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-flex render empty children 1`] = `"
"`; +exports[`n-float-button-group > render empty children 1`] = `"
"`; diff --git a/src/float-button-group/tests/server.spec.tsx b/src/float-button-group/tests/server.spec.tsx index f1116f405a2..7561a80a97d 100644 --- a/src/float-button-group/tests/server.spec.tsx +++ b/src/float-button-group/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NFloatButtonGroup } from '../..' diff --git a/src/float-button/tests/FloatButton.spec.tsx b/src/float-button/tests/FloatButton.spec.tsx index ee14d52364a..f26597be8df 100644 --- a/src/float-button/tests/FloatButton.spec.tsx +++ b/src/float-button/tests/FloatButton.spec.tsx @@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils' import { h } from 'vue' import { NFloatButton } from '../index' -describe('n-flex', () => { +describe('n-float-button', () => { it('should work with import on demand', () => { mount(NFloatButton) }) @@ -13,7 +13,7 @@ describe('n-flex', () => { return } }) - expect(wrapper.find('.n-flex')).not.toBe(null) + expect(wrapper.find('.n-float-button').exists()).toBe(true) expect(wrapper.html()).toMatchSnapshot() wrapper.unmount() }) diff --git a/src/float-button/tests/__snapshots__/FloatButton.spec.tsx.snap b/src/float-button/tests/__snapshots__/FloatButton.spec.tsx.snap index 2d002b15ebe..3f28620b349 100644 --- a/src/float-button/tests/__snapshots__/FloatButton.spec.tsx.snap +++ b/src/float-button/tests/__snapshots__/FloatButton.spec.tsx.snap @@ -1,6 +1,6 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-flex render empty children 1`] = ` +exports[`n-float-button > render empty children 1`] = ` "
diff --git a/src/float-button/tests/server.spec.tsx b/src/float-button/tests/server.spec.tsx index cf0b3456de1..8b10d414f94 100644 --- a/src/float-button/tests/server.spec.tsx +++ b/src/float-button/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NFloatButton } from '../..' diff --git a/src/form/tests/server.spec.tsx b/src/form/tests/server.spec.tsx index cd68d4d35a6..a96936af1d5 100644 --- a/src/form/tests/server.spec.tsx +++ b/src/form/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NForm } from '../..' diff --git a/src/global-style/tests/server.spec.tsx b/src/global-style/tests/server.spec.tsx index 9d42d8552c3..cb33403781e 100644 --- a/src/global-style/tests/server.spec.tsx +++ b/src/global-style/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NGlobalStyle } from '../..' diff --git a/src/gradient-text/tests/__snapshots__/GradientText.spec.ts.snap b/src/gradient-text/tests/__snapshots__/GradientText.spec.ts.snap index cf5bb893893..4e19152d867 100644 --- a/src/gradient-text/tests/__snapshots__/GradientText.spec.ts.snap +++ b/src/gradient-text/tests/__snapshots__/GradientText.spec.ts.snap @@ -1,5 +1,5 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-gradient-text should work with \`gradient\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-rotate: 252deg; --n-color-start: rgba(24, 160, 88, 0.6); --n-color-end: #18a058; --n-font-weight: 500;"`; +exports[`n-gradient-text > should work with \`gradient\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-rotate: 252deg; --n-color-start: rgba(24, 160, 88, 0.6); --n-color-end: #18a058; --n-font-weight: 500;"`; -exports[`n-gradient-text should work with \`gradient\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-rotate: 252deg; --n-color-start: rgba(24, 160, 88, 0.6); --n-color-end: #18a058; --n-font-weight: 500;"`; +exports[`n-gradient-text > should work with \`gradient\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-rotate: 252deg; --n-color-start: rgba(24, 160, 88, 0.6); --n-color-end: #18a058; --n-font-weight: 500;"`; diff --git a/src/gradient-text/tests/server.spec.tsx b/src/gradient-text/tests/server.spec.tsx index 9678a09a460..3eaf8d715ff 100644 --- a/src/gradient-text/tests/server.spec.tsx +++ b/src/gradient-text/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NGradientText } from '../..' diff --git a/src/grid/tests/server.spec.tsx b/src/grid/tests/server.spec.tsx index 888a59ff059..c56b5ccdea4 100644 --- a/src/grid/tests/server.spec.tsx +++ b/src/grid/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NGrid, NGridItem } from '../..' diff --git a/src/icon-wrapper/tests/server.spec.tsx b/src/icon-wrapper/tests/server.spec.tsx index 199a5abacc9..65d57eae131 100644 --- a/src/icon-wrapper/tests/server.spec.tsx +++ b/src/icon-wrapper/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NIconWrapper } from '../..' diff --git a/src/icon/tests/__snapshots__/Icon.spec.ts.snap b/src/icon/tests/__snapshots__/Icon.spec.ts.snap index e5a637f0b6a..0ccc40bc4ee 100644 --- a/src/icon/tests/__snapshots__/Icon.spec.ts.snap +++ b/src/icon/tests/__snapshots__/Icon.spec.ts.snap @@ -1,3 +1,3 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-icon should work with \`depth\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: #000; --n-opacity: 0.18;"`; +exports[`n-icon > should work with \`depth\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: #000; --n-opacity: 0.18;"`; diff --git a/src/icon/tests/server.spec.tsx b/src/icon/tests/server.spec.tsx index 82abce56b21..0a811e34d8b 100644 --- a/src/icon/tests/server.spec.tsx +++ b/src/icon/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NIcon } from '../..' diff --git a/src/image/tests/Image.spec.tsx b/src/image/tests/Image.spec.tsx index fdf2e83d006..bacbf1e2e7b 100644 --- a/src/image/tests/Image.spec.tsx +++ b/src/image/tests/Image.spec.tsx @@ -118,7 +118,7 @@ describe('n-image', () => { }) it('should work with `onError` prop', async () => { - const onError = jest.fn() + const onError = vi.fn() const wrapper = mount(NImage, { props: { src: 'https:// 07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg', @@ -161,7 +161,7 @@ describe('n-image', () => { }) it('should work with `onLoad` prop', async () => { - const onLoad = jest.fn() + const onLoad = vi.fn() const wrapper = mount(NImage, { props: { src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg', diff --git a/src/image/tests/server.spec.tsx b/src/image/tests/server.spec.tsx index 4f063a57d4e..4d597354d26 100644 --- a/src/image/tests/server.spec.tsx +++ b/src/image/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NImage } from '../..' diff --git a/src/input-number/tests/InputNumber.spec.tsx b/src/input-number/tests/InputNumber.spec.tsx index 767a711bf86..520bbe5058d 100644 --- a/src/input-number/tests/InputNumber.spec.tsx +++ b/src/input-number/tests/InputNumber.spec.tsx @@ -41,7 +41,7 @@ describe('n-input-number', () => { }) it('should not trigger update if value is same', async () => { - const onUpdateValue = jest.fn() + const onUpdateValue = vi.fn() const wrapper = mount(NInputNumber, { attachTo: document.body, props: { @@ -56,8 +56,8 @@ describe('n-input-number', () => { }) it('trigger focus & blur event', () => { - const onFocus = jest.fn() - const onBlur = jest.fn() + const onFocus = vi.fn() + const onBlur = vi.fn() const wrapper = mount(NInputNumber, { attachTo: document.body, props: { @@ -157,7 +157,7 @@ describe('n-input-number', () => { }) it('should work with `updateValueOnInput` prop', async () => { - const onUpdateValue = jest.fn() + const onUpdateValue = vi.fn() const wrapper = mount(NInputNumber, { attachTo: document.body, props: { @@ -192,7 +192,7 @@ describe('n-input-number', () => { }) it('should work with negative decimal value', async () => { - const onUpdateValue = jest.fn() + const onUpdateValue = vi.fn() const wrapper = mount(NInputNumber, { attachTo: document.body, props: { @@ -216,7 +216,7 @@ describe('n-input-number', () => { }) it('should work with decimal value ends at 0', async () => { - const onUpdateValue = jest.fn() + const onUpdateValue = vi.fn() const wrapper = mount(NInputNumber, { attachTo: document.body, props: { @@ -249,7 +249,7 @@ describe('n-input-number', () => { }) it('should work with integer value ends with 0', async () => { - const onUpdateValue = jest.fn() + const onUpdateValue = vi.fn() const wrapper = mount(NInputNumber, { attachTo: document.body, props: { diff --git a/src/input-number/tests/server.spec.tsx b/src/input-number/tests/server.spec.tsx index f4e73f3e979..aa7c07c9ee5 100644 --- a/src/input-number/tests/server.spec.tsx +++ b/src/input-number/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NInputNumber } from '../..' diff --git a/src/input/tests/Input.spec.tsx b/src/input/tests/Input.spec.tsx index 6df3364c6a2..dad25a7515f 100644 --- a/src/input/tests/Input.spec.tsx +++ b/src/input/tests/Input.spec.tsx @@ -1,5 +1,5 @@ import { mount } from '@vue/test-utils' -import { defineComponent, h, onMounted, ref } from 'vue' +import { h } from 'vue' import { NInput } from '../index' import InputGroup from '../src/InputGroup' import InputGroupLabel from '../src/InputGroupLabel' @@ -11,7 +11,7 @@ describe('n-input', () => { }) it('should call input callbacks', async () => { - const onUpdateValue = jest.fn() + const onUpdateValue = vi.fn() const wrapper = mount(NInput, { props: { onUpdateValue @@ -176,7 +176,7 @@ describe('n-input', () => { }) it('should work with `on-blur` prop', async () => { - const onBlur = jest.fn() + const onBlur = vi.fn() const wrapper = mount(NInput, { props: { onBlur } }) @@ -187,7 +187,7 @@ describe('n-input', () => { }) it('should work with `on-change` prop', async () => { - const onChange = jest.fn() + const onChange = vi.fn() const wrapper = mount(NInput, { props: { onChange } }) @@ -199,7 +199,7 @@ describe('n-input', () => { }) it('should work with `on-focus` prop', async () => { - const onFocus = jest.fn() + const onFocus = vi.fn() const wrapper = mount(NInput, { props: { onFocus } }) @@ -209,7 +209,7 @@ describe('n-input', () => { }) it('should work with `on-input` prop', async () => { - const onInput = jest.fn() + const onInput = vi.fn() const wrapper = mount(NInput, { props: { onInput } }) @@ -220,7 +220,7 @@ describe('n-input', () => { }) it('should work with `on-update:value` prop', async () => { - const onUpdateValue = jest.fn() + const onUpdateValue = vi.fn() const wrapper = mount(NInput, { props: { onUpdateValue } }) @@ -291,38 +291,23 @@ describe('n-input', () => { }) it('should work with `blur` `focus` `select` methods', async () => { - const onBlur = jest.fn() - const onFocus = jest.fn() - const onSelect = jest.fn() - const Mock = defineComponent({ - setup() { - const inputInstRef: any = ref(null) - onMounted(() => { - inputInstRef.value?.focus() - inputInstRef.value?.blur() - inputInstRef.value?.select() - }) - return () => { - return ( - - ) - } + const onBlur = vi.fn() + const onFocus = vi.fn() + const onSelect = vi.fn() + const wrapper = mount(NInput, { + props: { + onBlur, + onFocus, + onSelect } }) - const wrapper = mount(() => ) - setTimeout(() => { - expect(onBlur).toHaveBeenCalled() - expect(onFocus).toHaveBeenCalled() - expect(onSelect).toHaveBeenCalled() - }, 0) - + wrapper.find('input').trigger('focus') + expect(onFocus).toHaveBeenCalled() + wrapper.find('input').trigger('blur') + expect(onBlur).toHaveBeenCalled() + wrapper.find('input').trigger('select') + expect(onSelect).toHaveBeenCalled() wrapper.unmount() }) }) diff --git a/src/input/tests/__snapshots__/Input.spec.tsx.snap b/src/input/tests/__snapshots__/Input.spec.tsx.snap index e8e431ec665..89ca152bb96 100644 --- a/src/input/tests/__snapshots__/Input.spec.tsx.snap +++ b/src/input/tests/__snapshots__/Input.spec.tsx.snap @@ -1,7 +1,7 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-input should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 28px; --n-padding-left: 10px; --n-padding-right: 10px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; +exports[`n-input > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 28px; --n-padding-left: 10px; --n-padding-right: 10px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; -exports[`n-input should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; +exports[`n-input > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; -exports[`n-input should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 15px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 40px; --n-padding-left: 14px; --n-padding-right: 14px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; +exports[`n-input > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 15px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 40px; --n-padding-left: 14px; --n-padding-right: 14px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; diff --git a/src/input/tests/server.spec.tsx b/src/input/tests/server.spec.tsx index f95fb2bc9bb..a472c030360 100644 --- a/src/input/tests/server.spec.tsx +++ b/src/input/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NInput } from '../..' diff --git a/src/jest-setup.ts b/src/jest-setup.ts deleted file mode 100644 index 3866fcc8d51..00000000000 --- a/src/jest-setup.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { isBrowser } from './_utils' - -// https://github.com/jsdom/jsdom/issues/1422 -if (isBrowser) { - HTMLDivElement.prototype.scrollTo = () => {} -} diff --git a/src/layout/tests/__snapshots__/Layout.spec.ts.snap b/src/layout/tests/__snapshots__/Layout.spec.ts.snap index d2f33777e90..46611294d82 100644 --- a/src/layout/tests/__snapshots__/Layout.spec.ts.snap +++ b/src/layout/tests/__snapshots__/Layout.spec.ts.snap @@ -1,9 +1,9 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-layout should work with \`embedded\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgb(250, 250, 252); --n-text-color: rgb(51, 54, 57);"`; +exports[`n-layout > should work with \`embedded\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgb(250, 250, 252); --n-text-color: rgb(51, 54, 57);"`; -exports[`n-layout should work with \`inverted\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgb(0, 20, 40); --n-text-color: #FFF; --n-border-color: rgb(0, 20, 40);"`; +exports[`n-layout > should work with \`inverted\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgb(0, 20, 40); --n-text-color: #FFF; --n-border-color: rgb(0, 20, 40);"`; -exports[`n-layout should work with \`inverted\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-toggle-button-color: #FFF; --n-toggle-button-border: 1px solid rgb(239, 239, 245); --n-toggle-bar-color: rgba(191, 191, 191, 1); --n-toggle-bar-color-hover: rgba(153, 153, 153, 1); --n-color: rgb(0, 20, 40); --n-text-color: #FFF; --n-border-color: rgb(0, 20, 40); --n-toggle-button-icon-color: rgb(51, 54, 57); max-width: 272px; width: 272px;"`; +exports[`n-layout > should work with \`inverted\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-toggle-button-color: #FFF; --n-toggle-button-border: 1px solid rgb(239, 239, 245); --n-toggle-bar-color: rgba(191, 191, 191, 1); --n-toggle-bar-color-hover: rgba(153, 153, 153, 1); --n-color: rgb(0, 20, 40); --n-text-color: #FFF; --n-border-color: rgb(0, 20, 40); --n-toggle-button-icon-color: rgb(51, 54, 57); max-width: 272px; width: 272px;"`; -exports[`n-layout should work with \`inverted\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgb(0, 20, 40); --n-text-color: #FFF; --n-border-color: rgb(0, 20, 40);"`; +exports[`n-layout > should work with \`inverted\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgb(0, 20, 40); --n-text-color: #FFF; --n-border-color: rgb(0, 20, 40);"`; diff --git a/src/layout/tests/server.spec.tsx b/src/layout/tests/server.spec.tsx index 79268e02748..6a7c87d9141 100644 --- a/src/layout/tests/server.spec.tsx +++ b/src/layout/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NLayout } from '../..' diff --git a/src/legacy-grid/tests/server.spec.tsx b/src/legacy-grid/tests/server.spec.tsx index 2b513b5865c..1352ff5de84 100644 --- a/src/legacy-grid/tests/server.spec.tsx +++ b/src/legacy-grid/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NCol, NRow } from '../..' diff --git a/src/legacy-transfer/tests/Transfer.spec.ts b/src/legacy-transfer/tests/Transfer.spec.ts index 10bf96f089d..f6b82e5dfcc 100644 --- a/src/legacy-transfer/tests/Transfer.spec.ts +++ b/src/legacy-transfer/tests/Transfer.spec.ts @@ -30,7 +30,7 @@ describe('n-legacy-transfer', () => { value: 'test1' } ] - const onFilter = jest.fn() + const onFilter = vi.fn() const wrapper = mount(NLegacyTransfer, { props: { filterable: true, filter: onFilter, options } }) diff --git a/src/legacy-transfer/tests/__snapshots__/Transfer.spec.ts.snap b/src/legacy-transfer/tests/__snapshots__/Transfer.spec.ts.snap index c914da3b835..a4ada3e9431 100644 --- a/src/legacy-transfer/tests/__snapshots__/Transfer.spec.ts.snap +++ b/src/legacy-transfer/tests/__snapshots__/Transfer.spec.ts.snap @@ -1,7 +1,7 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-legacy-transfer should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-border-color: rgb(224, 224, 230); --n-border-radius: 3px; --n-extra-font-size: 12px; --n-filter-divider-color: rgb(224, 224, 230); --n-font-size: 14px; --n-header-color: rgba(250, 250, 252, 1); --n-header-extra-text-color: rgb(51, 54, 57); --n-header-font-weight: 400; --n-header-text-color: rgb(31, 34, 37); --n-header-text-color-disabled: rgba(194, 194, 194, 1); --n-item-color-pending: rgb(243, 243, 245); --n-item-height: 28px; --n-item-text-color: rgb(51, 54, 57); --n-item-text-color-disabled: rgba(194, 194, 194, 1); --n-list-color: #fff; --n-width: 440px; --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1);"`; +exports[`n-legacy-transfer > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-border-color: rgb(224, 224, 230); --n-border-radius: 3px; --n-extra-font-size: 12px; --n-filter-divider-color: rgb(224, 224, 230); --n-font-size: 14px; --n-header-color: rgba(250, 250, 252, 1); --n-header-extra-text-color: rgb(51, 54, 57); --n-header-font-weight: 400; --n-header-text-color: rgb(31, 34, 37); --n-header-text-color-disabled: rgba(194, 194, 194, 1); --n-item-color-pending: rgb(243, 243, 245); --n-item-height: 28px; --n-item-text-color: rgb(51, 54, 57); --n-item-text-color-disabled: rgba(194, 194, 194, 1); --n-list-color: #fff; --n-width: 440px; --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1);"`; -exports[`n-legacy-transfer should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-border-color: rgb(224, 224, 230); --n-border-radius: 3px; --n-extra-font-size: 12px; --n-filter-divider-color: rgb(224, 224, 230); --n-font-size: 14px; --n-header-color: rgba(250, 250, 252, 1); --n-header-extra-text-color: rgb(51, 54, 57); --n-header-font-weight: 400; --n-header-text-color: rgb(31, 34, 37); --n-header-text-color-disabled: rgba(194, 194, 194, 1); --n-item-color-pending: rgb(243, 243, 245); --n-item-height: 34px; --n-item-text-color: rgb(51, 54, 57); --n-item-text-color-disabled: rgba(194, 194, 194, 1); --n-list-color: #fff; --n-width: 440px; --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1);"`; +exports[`n-legacy-transfer > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-border-color: rgb(224, 224, 230); --n-border-radius: 3px; --n-extra-font-size: 12px; --n-filter-divider-color: rgb(224, 224, 230); --n-font-size: 14px; --n-header-color: rgba(250, 250, 252, 1); --n-header-extra-text-color: rgb(51, 54, 57); --n-header-font-weight: 400; --n-header-text-color: rgb(31, 34, 37); --n-header-text-color-disabled: rgba(194, 194, 194, 1); --n-item-color-pending: rgb(243, 243, 245); --n-item-height: 34px; --n-item-text-color: rgb(51, 54, 57); --n-item-text-color-disabled: rgba(194, 194, 194, 1); --n-list-color: #fff; --n-width: 440px; --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1);"`; -exports[`n-legacy-transfer should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-border-color: rgb(224, 224, 230); --n-border-radius: 3px; --n-extra-font-size: 12px; --n-filter-divider-color: rgb(224, 224, 230); --n-font-size: 15px; --n-header-color: rgba(250, 250, 252, 1); --n-header-extra-text-color: rgb(51, 54, 57); --n-header-font-weight: 400; --n-header-text-color: rgb(31, 34, 37); --n-header-text-color-disabled: rgba(194, 194, 194, 1); --n-item-color-pending: rgb(243, 243, 245); --n-item-height: 40px; --n-item-text-color: rgb(51, 54, 57); --n-item-text-color-disabled: rgba(194, 194, 194, 1); --n-list-color: #fff; --n-width: 440px; --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1);"`; +exports[`n-legacy-transfer > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-border-color: rgb(224, 224, 230); --n-border-radius: 3px; --n-extra-font-size: 12px; --n-filter-divider-color: rgb(224, 224, 230); --n-font-size: 15px; --n-header-color: rgba(250, 250, 252, 1); --n-header-extra-text-color: rgb(51, 54, 57); --n-header-font-weight: 400; --n-header-text-color: rgb(31, 34, 37); --n-header-text-color-disabled: rgba(194, 194, 194, 1); --n-item-color-pending: rgb(243, 243, 245); --n-item-height: 40px; --n-item-text-color: rgb(51, 54, 57); --n-item-text-color-disabled: rgba(194, 194, 194, 1); --n-list-color: #fff; --n-width: 440px; --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1);"`; diff --git a/src/legacy-transfer/tests/server.spec.tsx b/src/legacy-transfer/tests/server.spec.tsx index ad938718d69..352b4440691 100644 --- a/src/legacy-transfer/tests/server.spec.tsx +++ b/src/legacy-transfer/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NTransfer } from '../..' diff --git a/src/list/tests/server.spec.tsx b/src/list/tests/server.spec.tsx index 4e351b2ff00..d06d42caab6 100644 --- a/src/list/tests/server.spec.tsx +++ b/src/list/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NList } from '../..' diff --git a/src/locales/__snapshots__/index.spec.tsx.snap b/src/locales/tests/__snapshots__/index.spec.tsx.snap similarity index 99% rename from src/locales/__snapshots__/index.spec.tsx.snap rename to src/locales/tests/__snapshots__/index.spec.tsx.snap index caf69c9aa97..870af7dd744 100644 --- a/src/locales/__snapshots__/index.spec.tsx.snap +++ b/src/locales/tests/__snapshots__/index.spec.tsx.snap @@ -1,6 +1,6 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`locale works 1`] = ` +exports[`locale > works 1`] = ` "
@@ -144,7 +144,7 @@ exports[`locale works 1`] = `
" `; -exports[`locale works 2`] = ` +exports[`locale > works 2`] = ` "
@@ -288,7 +288,7 @@ exports[`locale works 2`] = `
" `; -exports[`locale works 3`] = ` +exports[`locale > works 3`] = ` "
@@ -432,7 +432,7 @@ exports[`locale works 3`] = `
" `; -exports[`locale works 4`] = ` +exports[`locale > works 4`] = ` "
@@ -576,7 +576,7 @@ exports[`locale works 4`] = `
" `; -exports[`locale works 5`] = ` +exports[`locale > works 5`] = ` "
@@ -720,7 +720,7 @@ exports[`locale works 5`] = `
" `; -exports[`locale works 6`] = ` +exports[`locale > works 6`] = ` "
@@ -864,7 +864,7 @@ exports[`locale works 6`] = `
" `; -exports[`locale works 7`] = ` +exports[`locale > works 7`] = ` "
@@ -1008,7 +1008,7 @@ exports[`locale works 7`] = `
" `; -exports[`locale works 8`] = ` +exports[`locale > works 8`] = ` "
@@ -1152,7 +1152,7 @@ exports[`locale works 8`] = `
" `; -exports[`locale works 9`] = ` +exports[`locale > works 9`] = ` "
@@ -1296,7 +1296,7 @@ exports[`locale works 9`] = `
" `; -exports[`locale works 10`] = ` +exports[`locale > works 10`] = ` "
@@ -1440,7 +1440,7 @@ exports[`locale works 10`] = `
" `; -exports[`locale works 11`] = ` +exports[`locale > works 11`] = ` "
@@ -1584,7 +1584,7 @@ exports[`locale works 11`] = `
" `; -exports[`locale works 12`] = ` +exports[`locale > works 12`] = ` "
@@ -1728,7 +1728,7 @@ exports[`locale works 12`] = `
" `; -exports[`locale works 13`] = ` +exports[`locale > works 13`] = ` "
@@ -1872,7 +1872,7 @@ exports[`locale works 13`] = `
" `; -exports[`locale works 14`] = ` +exports[`locale > works 14`] = ` "
@@ -2016,7 +2016,7 @@ exports[`locale works 14`] = `
" `; -exports[`locale works 15`] = ` +exports[`locale > works 15`] = ` "
@@ -2160,7 +2160,7 @@ exports[`locale works 15`] = `
" `; -exports[`locale works 16`] = ` +exports[`locale > works 16`] = ` "
@@ -2304,7 +2304,7 @@ exports[`locale works 16`] = `
" `; -exports[`locale works 17`] = ` +exports[`locale > works 17`] = ` "
@@ -2448,7 +2448,7 @@ exports[`locale works 17`] = `
" `; -exports[`locale works 18`] = ` +exports[`locale > works 18`] = ` "
@@ -2592,7 +2592,7 @@ exports[`locale works 18`] = `
" `; -exports[`locale works 19`] = ` +exports[`locale > works 19`] = ` "
@@ -2736,7 +2736,7 @@ exports[`locale works 19`] = `
" `; -exports[`locale works 20`] = ` +exports[`locale > works 20`] = ` "
@@ -2880,7 +2880,7 @@ exports[`locale works 20`] = `
" `; -exports[`locale works 21`] = ` +exports[`locale > works 21`] = ` "
@@ -3024,7 +3024,7 @@ exports[`locale works 21`] = `
" `; -exports[`locale works 22`] = ` +exports[`locale > works 22`] = ` "
@@ -3168,7 +3168,7 @@ exports[`locale works 22`] = `
" `; -exports[`locale works 23`] = ` +exports[`locale > works 23`] = ` "
@@ -3312,7 +3312,7 @@ exports[`locale works 23`] = `
" `; -exports[`locale works 24`] = ` +exports[`locale > works 24`] = ` "
@@ -3456,7 +3456,7 @@ exports[`locale works 24`] = `
" `; -exports[`locale works 25`] = ` +exports[`locale > works 25`] = ` "
@@ -3600,7 +3600,7 @@ exports[`locale works 25`] = `
" `; -exports[`locale works 26`] = ` +exports[`locale > works 26`] = ` "
@@ -3744,7 +3744,7 @@ exports[`locale works 26`] = `
" `; -exports[`locale works 27`] = ` +exports[`locale > works 27`] = ` "
@@ -3888,7 +3888,7 @@ exports[`locale works 27`] = `
" `; -exports[`locale works 28`] = ` +exports[`locale > works 28`] = ` "
diff --git a/src/locales/index.spec.tsx b/src/locales/tests/index.spec.tsx similarity index 96% rename from src/locales/index.spec.tsx rename to src/locales/tests/index.spec.tsx index f0302b6fded..a6725daf421 100644 --- a/src/locales/index.spec.tsx +++ b/src/locales/tests/index.spec.tsx @@ -1,9 +1,10 @@ -import type { NLocale } from './common/enUS' -import type { NDateLocale } from './date/enUS' +import type { NLocale } from '../common/enUS' +import type { NDateLocale } from '../date/enUS' import { mount } from '@vue/test-utils' import { defineComponent, h, onMounted, type PropType, ref } from 'vue' -import { NConfigProvider } from '../config-provider/index' -import { NDatePicker } from '../date-picker/index' +import { NConfigProvider } from '../../config-provider/index' +import { NDatePicker } from '../../date-picker/index' +import { NInput } from '../../input/index' import { arDZ, azAZ, @@ -62,8 +63,7 @@ import { zhCN, zhTW } from '../index' -import { NInput } from '../input/index' -import { createLocale } from './utils/index' +import { createLocale } from '../utils/index' const Wrapper = defineComponent({ props: { diff --git a/src/log/tests/Log.spec.tsx b/src/log/tests/Log.spec.tsx index b77e8065342..799ccd2d4b9 100644 --- a/src/log/tests/Log.spec.tsx +++ b/src/log/tests/Log.spec.tsx @@ -4,7 +4,7 @@ import { NLog } from '../index' describe('n-log', () => { it('should warn with language setted & no hljs is set', () => { - const spy = jest.spyOn(console, 'error').mockImplementation() + const spy = vi.spyOn(console, 'error').mockImplementation(() => {}) mount(NLog) expect(spy).not.toHaveBeenCalled() mount(NLog, { @@ -87,9 +87,9 @@ describe('n-log', () => { it('should work with `scrollTo` `on-require-more` `on-reach-top` `on-reach-bottom` prop', async () => { const lines = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6'] - const onRequireMore = jest.fn() - const onReachTop = jest.fn() - const onReachBottom = jest.fn() + const onRequireMore = vi.fn() + const onReachTop = vi.fn() + const onReachBottom = vi.fn() const wrapper = mount( defineComponent({ setup() { @@ -117,11 +117,11 @@ describe('n-log', () => { attachTo: document.body } ) - setTimeout(() => { + vi.waitFor(() => { expect(onRequireMore).toHaveBeenCalled() expect(onReachTop).toHaveBeenCalled() expect(onReachBottom).toHaveBeenCalled() - wrapper.unmount() - }, 0) + }) + wrapper.unmount() }) }) diff --git a/src/log/tests/server.spec.tsx b/src/log/tests/server.spec.tsx index d62a97415ac..876e29dff97 100644 --- a/src/log/tests/server.spec.tsx +++ b/src/log/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NLog } from '../..' diff --git a/src/marquee/tests/server.spec.tsx b/src/marquee/tests/server.spec.tsx index 4dc5bcd936f..056a559b33f 100644 --- a/src/marquee/tests/server.spec.tsx +++ b/src/marquee/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NEmpty } from '../..' diff --git a/src/mention/tests/Mention.spec.ts b/src/mention/tests/Mention.spec.ts index a04130022ad..878adadd858 100644 --- a/src/mention/tests/Mention.spec.ts +++ b/src/mention/tests/Mention.spec.ts @@ -1,6 +1,6 @@ import { mount } from '@vue/test-utils' import { sleep } from 'seemly' -import { h, nextTick } from 'vue' +import { h } from 'vue' import { NIcon } from '../../icon' import { NMention } from '../index' @@ -37,11 +37,13 @@ describe('n-mention', () => { props: { options } }) - wrapper.find('input').element.focus() - await wrapper.find('input').setValue('@') + wrapper.find('input').trigger('focus') + wrapper.find('input').setValue('@') await sleep(150) - expect(document.querySelector('.n-mention-menu')).not.toEqual(null) - expect(document.querySelectorAll('.n-base-select-option').length).toBe(4) + vi.waitFor(async () => { + expect(document.querySelector('.n-mention-menu')).not.toEqual(null) + expect(document.querySelectorAll('.n-base-select-option').length).toBe(4) + }) wrapper.unmount() }) @@ -141,43 +143,50 @@ describe('n-mention', () => { props: { options, prefix: '#' } }) - wrapper.find('input').element.focus() - await wrapper.find('input').setValue('#') + wrapper.find('input').trigger('focus') + wrapper.find('input').setValue('#') await sleep(150) - expect(document.querySelector('.n-mention-menu')).not.toEqual(null) - expect(document.querySelectorAll('.n-base-select-option').length).toBe(4) + vi.waitFor(() => { + expect(document.querySelector('.n-mention-menu')).not.toEqual(null) + expect(document.querySelectorAll('.n-base-select-option').length).toBe(4) + }) wrapper.unmount() }) it('should work with `on-update:value` prop', async () => { - const onUpdate = jest.fn() + const onUpdate = vi.fn() const wrapper = mount(NMention, { attachTo: document.body, props: { options, 'on-update:value': onUpdate } }) - wrapper.find('input').element.focus() - await wrapper.find('input').setValue('@') + wrapper.find('input').trigger('focus') + wrapper.find('input').setValue('@') await sleep(150) - expect(onUpdate).toHaveBeenCalled() + vi.waitFor(() => { + expect(onUpdate).toHaveBeenCalled() + }) wrapper.unmount() }) it('should work with `on-focus` prop', async () => { - const onFocus = jest.fn() + const onFocus = vi.fn() const wrapper = mount(NMention, { attachTo: document.body, props: { options, 'on-focus': onFocus } }) - wrapper.find('input').element.focus() - expect(onFocus).toHaveBeenCalled() + wrapper.find('input').trigger('focus') + await sleep(150) + vi.waitFor(() => { + expect(onFocus).toHaveBeenCalled() + }) wrapper.unmount() }) // Test with problems // it('should work with `on-search` prop', async () => { - // const onSearch = jest.fn() + // const onSearch = vi.fn() // const wrapper = mount(NMention, { // attachTo: document.body, // props: { options, 'on-search': onSearch, type: 'text' } @@ -190,15 +199,16 @@ describe('n-mention', () => { // }) it('should work with `on-blur` prop', async () => { - const onBlur = jest.fn() + const onBlur = vi.fn() const wrapper = mount(NMention, { attachTo: document.body, props: { options, 'on-blur': onBlur } }) - - wrapper.find('input').element.focus() - wrapper.find('input').element.blur() - expect(onBlur).toHaveBeenCalled() + wrapper.find('.n-input').trigger('focus') + wrapper.find('.n-input').trigger('blur') + vi.waitFor(() => { + expect(onBlur).toHaveBeenCalled() + }) wrapper.unmount() }) @@ -207,9 +217,10 @@ describe('n-mention', () => { attachTo: document.body, props: { options } }) - wrapper.vm.focus() - await nextTick() - expect(wrapper.find('.n-input').classes()).toContain('n-input--focus') + wrapper.find('.n-input').trigger('focus') + vi.waitFor(() => { + expect(wrapper.find('.n-input').classes()).toContain('n-input--focus') + }) wrapper.unmount() }) @@ -218,10 +229,12 @@ describe('n-mention', () => { attachTo: document.body, props: { options } }) - wrapper.vm.focus() - wrapper.vm.blur() - await nextTick() - expect(wrapper.find('.n-input').classes()).not.toContain('n-input--focus') + + wrapper.find('.n-input').trigger('focus') + wrapper.find('.n-input').trigger('blur') + vi.waitFor(() => { + expect(wrapper.find('.n-input').classes()).not.toContain('n-input--focus') + }) wrapper.unmount() }) }) diff --git a/src/mention/tests/server.spec.tsx b/src/mention/tests/server.spec.tsx index fc9d7ae31b5..6b718622ede 100644 --- a/src/mention/tests/server.spec.tsx +++ b/src/mention/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NMention } from '../..' diff --git a/src/menu/tests/server.spec.tsx b/src/menu/tests/server.spec.tsx index df29169c86a..6d4af7eacc7 100644 --- a/src/menu/tests/server.spec.tsx +++ b/src/menu/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NMenu } from '../..' diff --git a/src/message/tests/server.spec.tsx b/src/message/tests/server.spec.tsx index 7e52d4e58d2..11d1bc04aa6 100644 --- a/src/message/tests/server.spec.tsx +++ b/src/message/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, defineComponent, h } from 'vue' import { NMessageProvider, useMessage } from '../..' diff --git a/src/modal/tests/server.spec.tsx b/src/modal/tests/server.spec.tsx index 24ad9d21c0a..cb20e2301b6 100644 --- a/src/modal/tests/server.spec.tsx +++ b/src/modal/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NModal } from '../..' diff --git a/src/notification/tests/Notification.spec.tsx b/src/notification/tests/Notification.spec.tsx index 2104dc3c1e0..d5ab37a49fa 100644 --- a/src/notification/tests/Notification.spec.tsx +++ b/src/notification/tests/Notification.spec.tsx @@ -40,7 +40,7 @@ describe('n-notification', () => { }) it('can change content', async () => { - const changeContent = jest.fn((nRef: Ref) => { + const changeContent = vi.fn((nRef: Ref) => { nRef.value.content = 'change info' }) const Test = defineComponent({ diff --git a/src/number-animation/tests/server.spec.tsx b/src/number-animation/tests/server.spec.tsx index 57a28a611ca..279f18e93c3 100644 --- a/src/number-animation/tests/server.spec.tsx +++ b/src/number-animation/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NNumberAnimation } from '../..' diff --git a/src/page-header/tests/PageHeader.spec.tsx b/src/page-header/tests/PageHeader.spec.tsx index 77c53b6013a..efb412ade10 100644 --- a/src/page-header/tests/PageHeader.spec.tsx +++ b/src/page-header/tests/PageHeader.spec.tsx @@ -33,7 +33,7 @@ describe('n-page-header', () => { }) it('should work with `on-back` prop', async () => { - const handleOnBack = jest.fn() + const handleOnBack = vi.fn() const wrapper = mount(NPageHeader, { props: { onBack: handleOnBack } }) expect(wrapper.find('.n-page-header__back').exists()).toBe(true) diff --git a/src/page-header/tests/server.spec.tsx b/src/page-header/tests/server.spec.tsx index c94c2659b40..38a9e2bf88f 100644 --- a/src/page-header/tests/server.spec.tsx +++ b/src/page-header/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NPageHeader } from '../..' diff --git a/src/pagination/tests/server.spec.tsx b/src/pagination/tests/server.spec.tsx index 8fb0bd03e20..3e2d2e2d90f 100644 --- a/src/pagination/tests/server.spec.tsx +++ b/src/pagination/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NPagination } from '../..' diff --git a/src/popconfirm/tests/Popconfirm.spec.ts b/src/popconfirm/tests/Popconfirm.spec.ts index 21e82c11988..87aa9327d78 100644 --- a/src/popconfirm/tests/Popconfirm.spec.ts +++ b/src/popconfirm/tests/Popconfirm.spec.ts @@ -53,7 +53,7 @@ describe('n-popconfirm', () => { }) it('should work with `on-positive-click` prop', async () => { - const onClick = jest.fn() + const onClick = vi.fn() const wrapper = mount(NPopconfirm, { attachTo: document.body, props: { @@ -75,7 +75,7 @@ describe('n-popconfirm', () => { }) it('should work with `on-negative-click` prop', async () => { - const onClick = jest.fn() + const onClick = vi.fn() const wrapper = mount(NPopconfirm, { attachTo: document.body, props: { diff --git a/src/popconfirm/tests/server.spec.tsx b/src/popconfirm/tests/server.spec.tsx index ab13b0de65f..01b491b3a38 100644 --- a/src/popconfirm/tests/server.spec.tsx +++ b/src/popconfirm/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NPopconfirm } from '../..' diff --git a/src/popover/tests/server.spec.tsx b/src/popover/tests/server.spec.tsx index 2249aff720b..9c9ec399f39 100644 --- a/src/popover/tests/server.spec.tsx +++ b/src/popover/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NPopover } from '../..' diff --git a/src/popselect/tests/server.spec.tsx b/src/popselect/tests/server.spec.tsx index 73c1c1e61b9..cc489babc6a 100644 --- a/src/popselect/tests/server.spec.tsx +++ b/src/popselect/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NPopselect } from '../..' diff --git a/src/progress/tests/server.spec.tsx b/src/progress/tests/server.spec.tsx index 258ab271544..8e0a8e38a36 100644 --- a/src/progress/tests/server.spec.tsx +++ b/src/progress/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NProgress } from '../..' diff --git a/src/radio/tests/Radio.spec.ts b/src/radio/tests/Radio.spec.ts index 7ba95d0fe65..b9c880bf033 100644 --- a/src/radio/tests/Radio.spec.ts +++ b/src/radio/tests/Radio.spec.ts @@ -91,17 +91,18 @@ describe('n-radio', () => { }) it('should work with `onUpdate:checked` prop', async () => { - const onUpdate1 = jest.fn() - const onUpdate2 = jest.fn() + const onUpdate1 = vi.fn() + const onUpdate2 = vi.fn() const wrapper = mount(NRadio, { props: { 'onUpdate:checked': onUpdate1, onUpdateChecked: onUpdate2 } }) - await wrapper.find('.n-radio').trigger('click') - setTimeout(() => { + wrapper.find('.n-radio').trigger('click') + vi.waitFor(() => { expect(onUpdate1).toHaveBeenCalled() expect(onUpdate2).toHaveBeenCalled() - }, 0) + }) + wrapper.unmount() }) }) @@ -215,7 +216,7 @@ describe('n-radio-group', () => { }) it('should work with `on-update:value` prop', async () => { - const onUpdate = jest.fn() + const onUpdate = vi.fn() const wrapper = mount(NRadioGroup, { props: { onUpdateValue: onUpdate @@ -228,10 +229,10 @@ describe('n-radio-group', () => { } }) - await wrapper.findAll('.n-radio')[1].trigger('click') - setTimeout(() => { + wrapper.findAll('.n-radio')[1].trigger('click') + vi.waitFor(() => { expect(onUpdate).toHaveBeenCalled() - wrapper.unmount() - }, 0) + }) + wrapper.unmount() }) }) diff --git a/src/radio/tests/__snapshots__/Radio.spec.ts.snap b/src/radio/tests/__snapshots__/Radio.spec.ts.snap index 30098b92d82..5d25b370a24 100644 --- a/src/radio/tests/__snapshots__/Radio.spec.ts.snap +++ b/src/radio/tests/__snapshots__/Radio.spec.ts.snap @@ -1,13 +1,13 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-radio should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-label-line-height: 1.6; --n-label-font-weight: 400; --n-box-shadow: inset 0 0 0 1px rgb(224, 224, 230); --n-box-shadow-active: inset 0 0 0 1px #18a058; --n-box-shadow-disabled: inset 0 0 0 1px rgb(224, 224, 230); --n-box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: inset 0 0 0 1px #18a058; --n-color: #FFF; --n-color-active: #0000; --n-color-disabled: rgb(250, 250, 252); --n-dot-color-active: #18a058; --n-dot-color-disabled: rgb(224, 224, 230); --n-font-size: 14px; --n-radio-size: 14px; --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-label-padding: 0 8px;"`; +exports[`n-radio > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-label-line-height: 1.6; --n-label-font-weight: 400; --n-box-shadow: inset 0 0 0 1px rgb(224, 224, 230); --n-box-shadow-active: inset 0 0 0 1px #18a058; --n-box-shadow-disabled: inset 0 0 0 1px rgb(224, 224, 230); --n-box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: inset 0 0 0 1px #18a058; --n-color: #FFF; --n-color-active: #0000; --n-color-disabled: rgb(250, 250, 252); --n-dot-color-active: #18a058; --n-dot-color-disabled: rgb(224, 224, 230); --n-font-size: 14px; --n-radio-size: 14px; --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-label-padding: 0 8px;"`; -exports[`n-radio should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-label-line-height: 1.6; --n-label-font-weight: 400; --n-box-shadow: inset 0 0 0 1px rgb(224, 224, 230); --n-box-shadow-active: inset 0 0 0 1px #18a058; --n-box-shadow-disabled: inset 0 0 0 1px rgb(224, 224, 230); --n-box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: inset 0 0 0 1px #18a058; --n-color: #FFF; --n-color-active: #0000; --n-color-disabled: rgb(250, 250, 252); --n-dot-color-active: #18a058; --n-dot-color-disabled: rgb(224, 224, 230); --n-font-size: 14px; --n-radio-size: 16px; --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-label-padding: 0 8px;"`; +exports[`n-radio > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-label-line-height: 1.6; --n-label-font-weight: 400; --n-box-shadow: inset 0 0 0 1px rgb(224, 224, 230); --n-box-shadow-active: inset 0 0 0 1px #18a058; --n-box-shadow-disabled: inset 0 0 0 1px rgb(224, 224, 230); --n-box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: inset 0 0 0 1px #18a058; --n-color: #FFF; --n-color-active: #0000; --n-color-disabled: rgb(250, 250, 252); --n-dot-color-active: #18a058; --n-dot-color-disabled: rgb(224, 224, 230); --n-font-size: 14px; --n-radio-size: 16px; --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-label-padding: 0 8px;"`; -exports[`n-radio should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-label-line-height: 1.6; --n-label-font-weight: 400; --n-box-shadow: inset 0 0 0 1px rgb(224, 224, 230); --n-box-shadow-active: inset 0 0 0 1px #18a058; --n-box-shadow-disabled: inset 0 0 0 1px rgb(224, 224, 230); --n-box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: inset 0 0 0 1px #18a058; --n-color: #FFF; --n-color-active: #0000; --n-color-disabled: rgb(250, 250, 252); --n-dot-color-active: #18a058; --n-dot-color-disabled: rgb(224, 224, 230); --n-font-size: 15px; --n-radio-size: 18px; --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-label-padding: 0 8px;"`; +exports[`n-radio > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-label-line-height: 1.6; --n-label-font-weight: 400; --n-box-shadow: inset 0 0 0 1px rgb(224, 224, 230); --n-box-shadow-active: inset 0 0 0 1px #18a058; --n-box-shadow-disabled: inset 0 0 0 1px rgb(224, 224, 230); --n-box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: inset 0 0 0 1px #18a058; --n-color: #FFF; --n-color-active: #0000; --n-color-disabled: rgb(250, 250, 252); --n-dot-color-active: #18a058; --n-dot-color-disabled: rgb(224, 224, 230); --n-font-size: 15px; --n-radio-size: 18px; --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-label-padding: 0 8px;"`; -exports[`n-radio-group should work with \`size\` prop 1`] = `"--n-font-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-button-border-color: rgb(224, 224, 230); --n-button-border-color-active: #18a058; --n-button-border-radius: 3px; --n-button-box-shadow: inset 0 0 0 1px #0000; --n-button-box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.3); --n-button-box-shadow-hover: inset 0 0 0 1px #0000; --n-button-color: #FFF; --n-button-color-active: #FFF; --n-button-text-color: rgb(51, 54, 57); --n-button-text-color-hover: #18a058; --n-button-text-color-active: #18a058; --n-height: 28px; --n-opacity-disabled: 0.5;"`; +exports[`n-radio-group > should work with \`size\` prop 1`] = `"--n-font-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-button-border-color: rgb(224, 224, 230); --n-button-border-color-active: #18a058; --n-button-border-radius: 3px; --n-button-box-shadow: inset 0 0 0 1px #0000; --n-button-box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.3); --n-button-box-shadow-hover: inset 0 0 0 1px #0000; --n-button-color: #FFF; --n-button-color-active: #FFF; --n-button-text-color: rgb(51, 54, 57); --n-button-text-color-hover: #18a058; --n-button-text-color-active: #18a058; --n-height: 28px; --n-opacity-disabled: 0.5;"`; -exports[`n-radio-group should work with \`size\` prop 2`] = `"--n-font-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-button-border-color: rgb(224, 224, 230); --n-button-border-color-active: #18a058; --n-button-border-radius: 3px; --n-button-box-shadow: inset 0 0 0 1px #0000; --n-button-box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.3); --n-button-box-shadow-hover: inset 0 0 0 1px #0000; --n-button-color: #FFF; --n-button-color-active: #FFF; --n-button-text-color: rgb(51, 54, 57); --n-button-text-color-hover: #18a058; --n-button-text-color-active: #18a058; --n-height: 34px; --n-opacity-disabled: 0.5;"`; +exports[`n-radio-group > should work with \`size\` prop 2`] = `"--n-font-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-button-border-color: rgb(224, 224, 230); --n-button-border-color-active: #18a058; --n-button-border-radius: 3px; --n-button-box-shadow: inset 0 0 0 1px #0000; --n-button-box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.3); --n-button-box-shadow-hover: inset 0 0 0 1px #0000; --n-button-color: #FFF; --n-button-color-active: #FFF; --n-button-text-color: rgb(51, 54, 57); --n-button-text-color-hover: #18a058; --n-button-text-color-active: #18a058; --n-height: 34px; --n-opacity-disabled: 0.5;"`; -exports[`n-radio-group should work with \`size\` prop 3`] = `"--n-font-size: 15px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-button-border-color: rgb(224, 224, 230); --n-button-border-color-active: #18a058; --n-button-border-radius: 3px; --n-button-box-shadow: inset 0 0 0 1px #0000; --n-button-box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.3); --n-button-box-shadow-hover: inset 0 0 0 1px #0000; --n-button-color: #FFF; --n-button-color-active: #FFF; --n-button-text-color: rgb(51, 54, 57); --n-button-text-color-hover: #18a058; --n-button-text-color-active: #18a058; --n-height: 40px; --n-opacity-disabled: 0.5;"`; +exports[`n-radio-group > should work with \`size\` prop 3`] = `"--n-font-size: 15px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-button-border-color: rgb(224, 224, 230); --n-button-border-color-active: #18a058; --n-button-border-radius: 3px; --n-button-box-shadow: inset 0 0 0 1px #0000; --n-button-box-shadow-focus: inset 0 0 0 1px #18a058, 0 0 0 2px rgba(24, 160, 88, 0.3); --n-button-box-shadow-hover: inset 0 0 0 1px #0000; --n-button-color: #FFF; --n-button-color-active: #FFF; --n-button-text-color: rgb(51, 54, 57); --n-button-text-color-hover: #18a058; --n-button-text-color-active: #18a058; --n-height: 40px; --n-opacity-disabled: 0.5;"`; diff --git a/src/radio/tests/server.spec.tsx b/src/radio/tests/server.spec.tsx index 2e5ee442e24..00409568070 100644 --- a/src/radio/tests/server.spec.tsx +++ b/src/radio/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NRadio } from '../..' diff --git a/src/rate/tests/Rate.spec.ts b/src/rate/tests/Rate.spec.ts index 539c69605cd..aa32f074626 100644 --- a/src/rate/tests/Rate.spec.ts +++ b/src/rate/tests/Rate.spec.ts @@ -62,8 +62,8 @@ describe('n-rate', () => { }) it('should work with `onUpdateValue` prop', async () => { - const onUpdateValue = jest.fn() - const onUpdateValue2 = jest.fn() + const onUpdateValue = vi.fn() + const onUpdateValue2 = vi.fn() const wrapper = mount(NRate) const testNumber = 2 @@ -105,7 +105,7 @@ describe('n-rate', () => { }) it('should work with `allowHalf` prop', async () => { - const onUpdateValue = jest.fn() + const onUpdateValue = vi.fn() const wrapper = mount(NRate) await wrapper.setProps({ allowHalf: true }) diff --git a/src/rate/tests/__snapshots__/Rate.spec.ts.snap b/src/rate/tests/__snapshots__/Rate.spec.ts.snap index 47b6d84e407..93d5632d8a8 100644 --- a/src/rate/tests/__snapshots__/Rate.spec.ts.snap +++ b/src/rate/tests/__snapshots__/Rate.spec.ts.snap @@ -1,7 +1,7 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-rate should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-item-color: rgb(219, 219, 223); --n-item-color-active: #FFCC33; --n-item-size: 16px;"`; +exports[`n-rate > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-item-color: rgb(219, 219, 223); --n-item-color-active: #FFCC33; --n-item-size: 16px;"`; -exports[`n-rate should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-item-color: rgb(219, 219, 223); --n-item-color-active: #FFCC33; --n-item-size: 20px;"`; +exports[`n-rate > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-item-color: rgb(219, 219, 223); --n-item-color-active: #FFCC33; --n-item-size: 20px;"`; -exports[`n-rate should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-item-color: rgb(219, 219, 223); --n-item-color-active: #FFCC33; --n-item-size: 24px;"`; +exports[`n-rate > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-item-color: rgb(219, 219, 223); --n-item-color-active: #FFCC33; --n-item-size: 24px;"`; diff --git a/src/rate/tests/server.spec.tsx b/src/rate/tests/server.spec.tsx index 41ac0e5de8e..639a94b036c 100644 --- a/src/rate/tests/server.spec.tsx +++ b/src/rate/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NRate } from '../..' diff --git a/src/result/tests/__snapshots__/Result.spec.ts.snap b/src/result/tests/__snapshots__/Result.spec.ts.snap index fed8d7dab82..289cb248488 100644 --- a/src/result/tests/__snapshots__/Result.spec.ts.snap +++ b/src/result/tests/__snapshots__/Result.spec.ts.snap @@ -1,9 +1,9 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-result should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-icon-size: 64px; --n-line-height: 1.6; --n-text-color: rgb(51, 54, 57); --n-title-font-size: 26px; --n-title-font-weight: 500; --n-title-text-color: rgb(31, 34, 37); --n-icon-color: #2080f0;"`; +exports[`n-result > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-icon-size: 64px; --n-line-height: 1.6; --n-text-color: rgb(51, 54, 57); --n-title-font-size: 26px; --n-title-font-weight: 500; --n-title-text-color: rgb(31, 34, 37); --n-icon-color: #2080f0;"`; -exports[`n-result should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-icon-size: 80px; --n-line-height: 1.6; --n-text-color: rgb(51, 54, 57); --n-title-font-size: 32px; --n-title-font-weight: 500; --n-title-text-color: rgb(31, 34, 37); --n-icon-color: #2080f0;"`; +exports[`n-result > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-icon-size: 80px; --n-line-height: 1.6; --n-text-color: rgb(51, 54, 57); --n-title-font-size: 32px; --n-title-font-weight: 500; --n-title-text-color: rgb(31, 34, 37); --n-icon-color: #2080f0;"`; -exports[`n-result should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 15px; --n-icon-size: 100px; --n-line-height: 1.6; --n-text-color: rgb(51, 54, 57); --n-title-font-size: 40px; --n-title-font-weight: 500; --n-title-text-color: rgb(31, 34, 37); --n-icon-color: #2080f0;"`; +exports[`n-result > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 15px; --n-icon-size: 100px; --n-line-height: 1.6; --n-text-color: rgb(51, 54, 57); --n-title-font-size: 40px; --n-title-font-weight: 500; --n-title-text-color: rgb(31, 34, 37); --n-icon-color: #2080f0;"`; -exports[`n-result should work with \`size\` prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 16px; --n-icon-size: 125px; --n-line-height: 1.6; --n-text-color: rgb(51, 54, 57); --n-title-font-size: 48px; --n-title-font-weight: 500; --n-title-text-color: rgb(31, 34, 37); --n-icon-color: #2080f0;"`; +exports[`n-result > should work with \`size\` prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 16px; --n-icon-size: 125px; --n-line-height: 1.6; --n-text-color: rgb(51, 54, 57); --n-title-font-size: 48px; --n-title-font-weight: 500; --n-title-text-color: rgb(31, 34, 37); --n-icon-color: #2080f0;"`; diff --git a/src/result/tests/server.spec.tsx b/src/result/tests/server.spec.tsx index a83a35e5957..55f38494cd8 100644 --- a/src/result/tests/server.spec.tsx +++ b/src/result/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NResult } from '../..' diff --git a/src/scrollbar/tests/server.spec.tsx b/src/scrollbar/tests/server.spec.tsx index caf448bb6f0..c613c26bd69 100644 --- a/src/scrollbar/tests/server.spec.tsx +++ b/src/scrollbar/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NScrollbar } from '../' diff --git a/src/select/tests/Select.spec.tsx b/src/select/tests/Select.spec.tsx index dd68f69f89f..b497f8c6821 100644 --- a/src/select/tests/Select.spec.tsx +++ b/src/select/tests/Select.spec.tsx @@ -1,6 +1,6 @@ import type { SelectBaseOption } from '../src/interface' import { mount } from '@vue/test-utils' -import { h, nextTick, type VNode } from 'vue' +import { h, type VNode } from 'vue' import { NInternalSelection, NInternalSelectMenu } from '../../_internal' import { NTag } from '../../tag' import { @@ -248,10 +248,11 @@ describe('n-select', () => { expect(wrapper.find('.n-base-selection-input').text()).toBe('render-test') await wrapper.setProps({ show: true }) - await nextTick() - expect( - document.querySelector('.n-base-select-option--selected')?.innerHTML - ).toContain('render-test') + vi.waitFor(() => { + expect( + document.querySelector('.n-base-select-option--selected')?.innerHTML + ).toContain('render-test') + }) wrapper.unmount() }) diff --git a/src/select/tests/__snapshots__/Select.spec.tsx.snap b/src/select/tests/__snapshots__/Select.spec.tsx.snap index d09b01ee3e2..17f836fb0b5 100644 --- a/src/select/tests/__snapshots__/Select.spec.tsx.snap +++ b/src/select/tests/__snapshots__/Select.spec.tsx.snap @@ -1,7 +1,7 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-select should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 28px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; +exports[`n-select > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 28px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; -exports[`n-select should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 34px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; +exports[`n-select > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 34px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; -exports[`n-select should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 15px; --n-height: 40px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; +exports[`n-select > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 15px; --n-height: 40px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; diff --git a/src/select/tests/server.spec.tsx b/src/select/tests/server.spec.tsx index 728944e88ab..376a724baf0 100644 --- a/src/select/tests/server.spec.tsx +++ b/src/select/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NSelect } from '../..' diff --git a/src/skeleton/tests/__snapshots__/Skeleton.spec.tsx.snap b/src/skeleton/tests/__snapshots__/Skeleton.spec.tsx.snap index 92100f901e6..5ba33f4e54b 100644 --- a/src/skeleton/tests/__snapshots__/Skeleton.spec.tsx.snap +++ b/src/skeleton/tests/__snapshots__/Skeleton.spec.tsx.snap @@ -1,17 +1,17 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-skeleton should work with \`circle\` prop 1`] = `"border-radius: 50%; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd;"`; +exports[`n-skeleton > should work with \`circle\` prop 1`] = `"border-radius: 50%; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd;"`; -exports[`n-skeleton should work with \`round\` prop 1`] = `"border-radius: 4096px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd;"`; +exports[`n-skeleton > should work with \`round\` prop 1`] = `"border-radius: 4096px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd;"`; -exports[`n-skeleton should work with \`sharp\` prop 1`] = `"border-radius: 3px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd;"`; +exports[`n-skeleton > should work with \`sharp\` prop 1`] = `"border-radius: 3px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd;"`; -exports[`n-skeleton should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd; height: 28px;"`; +exports[`n-skeleton > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd; height: 28px;"`; -exports[`n-skeleton should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd; height: 34px;"`; +exports[`n-skeleton > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd; height: 34px;"`; -exports[`n-skeleton should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd; height: 40px;"`; +exports[`n-skeleton > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd; height: 40px;"`; -exports[`n-skeleton should work with \`text\` prop 1`] = `"display: inline-block; vertical-align: -0.125em; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd;"`; +exports[`n-skeleton > should work with \`text\` prop 1`] = `"display: inline-block; vertical-align: -0.125em; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd;"`; -exports[`n-skeleton should work with box 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd;"`; +exports[`n-skeleton > should work with box 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-start: #eee; --n-color-end: #ddd;"`; diff --git a/src/skeleton/tests/server.spec.tsx b/src/skeleton/tests/server.spec.tsx index 2c42da79c5c..d9b2b7527a1 100644 --- a/src/skeleton/tests/server.spec.tsx +++ b/src/skeleton/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NSkeleton } from '../..' diff --git a/src/slider/tests/server.spec.tsx b/src/slider/tests/server.spec.tsx index 329eb981ea1..b8143a63be8 100644 --- a/src/slider/tests/server.spec.tsx +++ b/src/slider/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NSlider } from '../..' diff --git a/src/space/tests/Space.spec.tsx b/src/space/tests/Space.spec.tsx index fe0afa01d9b..a85213c1b4e 100644 --- a/src/space/tests/Space.spec.tsx +++ b/src/space/tests/Space.spec.tsx @@ -24,7 +24,9 @@ describe('n-space', () => { return } }) - expect(wrapper.find('.n-space')).not.toBe(null) + vi.waitFor(() => { + expect(wrapper.find('.n-space').exists()).toBe(true) + }) expect(wrapper.html()).toMatchSnapshot() wrapper.unmount() }) diff --git a/src/space/tests/__snapshots__/Space.spec.tsx.snap b/src/space/tests/__snapshots__/Space.spec.tsx.snap index ef226c7ea21..389f15e1307 100644 --- a/src/space/tests/__snapshots__/Space.spec.tsx.snap +++ b/src/space/tests/__snapshots__/Space.spec.tsx.snap @@ -1,14 +1,14 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-space render custom style space 1`] = ` +exports[`n-space > render custom style space 1`] = ` "
div
" `; -exports[`n-space render empty children 1`] = `""`; +exports[`n-space > render empty children 1`] = `""`; -exports[`n-space render justify space 1`] = ` +exports[`n-space > render justify space 1`] = ` "
1
@@ -19,7 +19,7 @@ exports[`n-space render justify space 1`] = `
" `; -exports[`n-space render justify space 2`] = ` +exports[`n-space > render justify space 2`] = ` "
1
@@ -30,7 +30,7 @@ exports[`n-space render justify space 2`] = `
" `; -exports[`n-space render justify space 3`] = ` +exports[`n-space > render justify space 3`] = ` "
1
@@ -41,7 +41,7 @@ exports[`n-space render justify space 3`] = `
" `; -exports[`n-space render justify space 4`] = ` +exports[`n-space > render justify space 4`] = ` "
1
@@ -52,7 +52,7 @@ exports[`n-space render justify space 4`] = `
" `; -exports[`n-space render justify space 5`] = ` +exports[`n-space > render justify space 5`] = ` "
1
@@ -63,7 +63,7 @@ exports[`n-space render justify space 5`] = `
" `; -exports[`n-space render justify space 6`] = ` +exports[`n-space > render justify space 6`] = ` "
1
@@ -74,7 +74,7 @@ exports[`n-space render justify space 6`] = `
" `; -exports[`n-space render justify space 7`] = ` +exports[`n-space > render justify space 7`] = ` "
@@ -87,7 +87,7 @@ exports[`n-space render justify space 7`] = `
" `; -exports[`n-space render justify space 8`] = ` +exports[`n-space > render justify space 8`] = ` "
@@ -100,7 +100,7 @@ exports[`n-space render justify space 8`] = `
" `; -exports[`n-space render justify space 9`] = ` +exports[`n-space > render justify space 9`] = ` "
@@ -113,7 +113,7 @@ exports[`n-space render justify space 9`] = `
" `; -exports[`n-space render justify space 10`] = ` +exports[`n-space > render justify space 10`] = ` "
@@ -126,7 +126,7 @@ exports[`n-space render justify space 10`] = `
" `; -exports[`n-space render justify space 11`] = ` +exports[`n-space > render justify space 11`] = ` "
@@ -139,7 +139,7 @@ exports[`n-space render justify space 11`] = `
" `; -exports[`n-space render justify space 12`] = ` +exports[`n-space > render justify space 12`] = ` "
@@ -152,19 +152,19 @@ exports[`n-space render justify space 12`] = `
" `; -exports[`n-space render space number size 1`] = ` +exports[`n-space > render space number size 1`] = ` "
kirby
" `; -exports[`n-space render space string size 1`] = ` +exports[`n-space > render space string size 1`] = ` "
kirby
" `; -exports[`n-space render vertical space 1`] = ` +exports[`n-space > render vertical space 1`] = ` "
1
@@ -175,19 +175,19 @@ exports[`n-space render vertical space 1`] = `
" `; -exports[`n-space should not render while slot is Comment 1`] = ` +exports[`n-space > should not render while slot is Comment 1`] = ` "
" `; -exports[`n-space should not render while v-if is false 1`] = ` +exports[`n-space > should not render while v-if is false 1`] = ` "
" `; -exports[`n-space should render with invalidElement 1`] = ` +exports[`n-space > should render with invalidElement 1`] = ` "
text1
text1
@@ -195,7 +195,7 @@ exports[`n-space should render with invalidElement 1`] = `
" `; -exports[`n-space shound not render a container to wrap child elements 1`] = ` +exports[`n-space > shound not render a container to wrap child elements 1`] = ` "
1
2
diff --git a/src/space/tests/server.spec.tsx b/src/space/tests/server.spec.tsx index 4594b647066..f4a40a4859f 100644 --- a/src/space/tests/server.spec.tsx +++ b/src/space/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NSpace } from '../..' diff --git a/src/spin/tests/__snapshots__/Spin.spec.ts.snap b/src/spin/tests/__snapshots__/Spin.spec.ts.snap index 2e934134807..9701c1fbd62 100644 --- a/src/spin/tests/__snapshots__/Spin.spec.ts.snap +++ b/src/spin/tests/__snapshots__/Spin.spec.ts.snap @@ -1,9 +1,9 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-spin should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-opacity-spinning: 0.5; --n-size: 28px; --n-color: #18a058; --n-text-color: #18a058;"`; +exports[`n-spin > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-opacity-spinning: 0.5; --n-size: 28px; --n-color: #18a058; --n-text-color: #18a058;"`; -exports[`n-spin should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-opacity-spinning: 0.5; --n-size: 34px; --n-color: #18a058; --n-text-color: #18a058;"`; +exports[`n-spin > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-opacity-spinning: 0.5; --n-size: 34px; --n-color: #18a058; --n-text-color: #18a058;"`; -exports[`n-spin should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-opacity-spinning: 0.5; --n-size: 40px; --n-color: #18a058; --n-text-color: #18a058;"`; +exports[`n-spin > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-opacity-spinning: 0.5; --n-size: 40px; --n-color: #18a058; --n-text-color: #18a058;"`; -exports[`n-spin should work with \`size\` prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-opacity-spinning: 0.5; --n-size: 71px; --n-color: #18a058; --n-text-color: #18a058;"`; +exports[`n-spin > should work with \`size\` prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-opacity-spinning: 0.5; --n-size: 71px; --n-color: #18a058; --n-text-color: #18a058;"`; diff --git a/src/spin/tests/server.spec.tsx b/src/spin/tests/server.spec.tsx index de211519601..7a614b84a4a 100644 --- a/src/spin/tests/server.spec.tsx +++ b/src/spin/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NSpin } from '../..' diff --git a/src/statistic/tests/server.spec.tsx b/src/statistic/tests/server.spec.tsx index b9b929efc75..30cb03a7262 100644 --- a/src/statistic/tests/server.spec.tsx +++ b/src/statistic/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NStatistic } from '../..' diff --git a/src/steps/tests/server.spec.tsx b/src/steps/tests/server.spec.tsx index e8294225aa6..fca7ff6712b 100644 --- a/src/steps/tests/server.spec.tsx +++ b/src/steps/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NSteps } from '../..' diff --git a/src/switch/tests/Switch.spec.tsx b/src/switch/tests/Switch.spec.tsx index b8b198cd22e..eebfc176808 100644 --- a/src/switch/tests/Switch.spec.tsx +++ b/src/switch/tests/Switch.spec.tsx @@ -16,7 +16,7 @@ describe('n-switch', () => { }) it('should work with `checked-value` prop', async () => { - const onUpdateValue = jest.fn() + const onUpdateValue = vi.fn() const wrapper = mount(NSwitch, { props: { checkedValue: 'fooo', @@ -76,7 +76,7 @@ describe('n-switch', () => { }) it('should work with `on-update:value` prop', async () => { - const onUpdate = jest.fn() + const onUpdate = vi.fn() const wrapper = mount(NSwitch, { props: { 'onUpdate:value': onUpdate } }) await wrapper.trigger('click') diff --git a/src/switch/tests/__snapshots__/Switch.spec.tsx.snap b/src/switch/tests/__snapshots__/Switch.spec.tsx.snap index d886a7d445b..52abf7300a5 100644 --- a/src/switch/tests/__snapshots__/Switch.spec.tsx.snap +++ b/src/switch/tests/__snapshots__/Switch.spec.tsx.snap @@ -1,7 +1,7 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-switch should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-button-border-radius: 3px; --n-button-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05); --n-button-color: #FFF; --n-button-width: 14px; --n-button-width-pressed: 20px; --n-button-height: 14px; --n-height: max(18px, 14px); --n-offset: calc((18px - 14px) / 2); --n-opacity-disabled: 0.5; --n-rail-border-radius: 3px; --n-rail-color: rgba(0, 0, 0, .14); --n-rail-color-active: #18a058; --n-rail-height: 18px; --n-rail-width: 32px; --n-width: max(32px, calc(32px + 14px - 18px)); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-text-color: white; --n-icon-color: rgb(118, 124, 130);"`; +exports[`n-switch > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-button-border-radius: 3px; --n-button-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05); --n-button-color: #FFF; --n-button-width: 14px; --n-button-width-pressed: 20px; --n-button-height: 14px; --n-height: max(18px, 14px); --n-offset: calc((18px - 14px) / 2); --n-opacity-disabled: 0.5; --n-rail-border-radius: 3px; --n-rail-color: rgba(0, 0, 0, .14); --n-rail-color-active: #18a058; --n-rail-height: 18px; --n-rail-width: 32px; --n-width: max(32px, calc(32px + 14px - 18px)); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-text-color: white; --n-icon-color: rgb(118, 124, 130);"`; -exports[`n-switch should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-button-border-radius: 3px; --n-button-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05); --n-button-color: #FFF; --n-button-width: 18px; --n-button-width-pressed: 24px; --n-button-height: 18px; --n-height: max(22px, 18px); --n-offset: calc((22px - 18px) / 2); --n-opacity-disabled: 0.5; --n-rail-border-radius: 3px; --n-rail-color: rgba(0, 0, 0, .14); --n-rail-color-active: #18a058; --n-rail-height: 22px; --n-rail-width: 40px; --n-width: max(40px, calc(40px + 18px - 22px)); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-text-color: white; --n-icon-color: rgb(118, 124, 130);"`; +exports[`n-switch > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-button-border-radius: 3px; --n-button-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05); --n-button-color: #FFF; --n-button-width: 18px; --n-button-width-pressed: 24px; --n-button-height: 18px; --n-height: max(22px, 18px); --n-offset: calc((22px - 18px) / 2); --n-opacity-disabled: 0.5; --n-rail-border-radius: 3px; --n-rail-color: rgba(0, 0, 0, .14); --n-rail-color-active: #18a058; --n-rail-height: 22px; --n-rail-width: 40px; --n-width: max(40px, calc(40px + 18px - 22px)); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-text-color: white; --n-icon-color: rgb(118, 124, 130);"`; -exports[`n-switch should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-button-border-radius: 3px; --n-button-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05); --n-button-color: #FFF; --n-button-width: 22px; --n-button-width-pressed: 28px; --n-button-height: 22px; --n-height: max(26px, 22px); --n-offset: calc((26px - 22px) / 2); --n-opacity-disabled: 0.5; --n-rail-border-radius: 3px; --n-rail-color: rgba(0, 0, 0, .14); --n-rail-color-active: #18a058; --n-rail-height: 26px; --n-rail-width: 48px; --n-width: max(48px, calc(48px + 22px - 26px)); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-text-color: white; --n-icon-color: rgb(118, 124, 130);"`; +exports[`n-switch > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-button-border-radius: 3px; --n-button-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05); --n-button-color: #FFF; --n-button-width: 22px; --n-button-width-pressed: 28px; --n-button-height: 22px; --n-height: max(26px, 22px); --n-offset: calc((26px - 22px) / 2); --n-opacity-disabled: 0.5; --n-rail-border-radius: 3px; --n-rail-color: rgba(0, 0, 0, .14); --n-rail-color-active: #18a058; --n-rail-height: 26px; --n-rail-width: 48px; --n-width: max(48px, calc(48px + 22px - 26px)); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-text-color: white; --n-icon-color: rgb(118, 124, 130);"`; diff --git a/src/switch/tests/server.spec.tsx b/src/switch/tests/server.spec.tsx index 3bac5c33828..a3dd7f071e2 100644 --- a/src/switch/tests/server.spec.tsx +++ b/src/switch/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NSwitch } from '../..' diff --git a/src/table/tests/__snapshots__/Table.spec.ts.snap b/src/table/tests/__snapshots__/Table.spec.ts.snap index 43e4887069c..3530c7be1bf 100644 --- a/src/table/tests/__snapshots__/Table.spec.ts.snap +++ b/src/table/tests/__snapshots__/Table.spec.ts.snap @@ -1,7 +1,7 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-table should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-td-color: #fff; --n-td-color-modal: #fff; --n-td-color-popover: #fff; --n-td-text-color: rgb(51, 54, 57); --n-border-color: rgba(239, 239, 245, 1); --n-border-color-modal: rgba(239, 239, 245, 1); --n-border-color-popover: rgba(239, 239, 245, 1); --n-border-radius: 3px; --n-font-size: 14px; --n-th-color: rgba(250, 250, 252, 1); --n-th-color-modal: rgba(250, 250, 252, 1); --n-th-color-popover: rgba(250, 250, 252, 1); --n-th-font-weight: 500; --n-th-text-color: rgb(31, 34, 37); --n-line-height: 1.6; --n-td-padding: 6px; --n-th-padding: 6px; --n-td-color-striped: rgba(250, 250, 252, 1); --n-td-color-striped-modal: rgba(250, 250, 252, 1); --n-td-color-striped-popover: rgba(250, 250, 252, 1);"`; +exports[`n-table > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-td-color: #fff; --n-td-color-modal: #fff; --n-td-color-popover: #fff; --n-td-text-color: rgb(51, 54, 57); --n-border-color: rgba(239, 239, 245, 1); --n-border-color-modal: rgba(239, 239, 245, 1); --n-border-color-popover: rgba(239, 239, 245, 1); --n-border-radius: 3px; --n-font-size: 14px; --n-th-color: rgba(250, 250, 252, 1); --n-th-color-modal: rgba(250, 250, 252, 1); --n-th-color-popover: rgba(250, 250, 252, 1); --n-th-font-weight: 500; --n-th-text-color: rgb(31, 34, 37); --n-line-height: 1.6; --n-td-padding: 6px; --n-th-padding: 6px; --n-td-color-striped: rgba(250, 250, 252, 1); --n-td-color-striped-modal: rgba(250, 250, 252, 1); --n-td-color-striped-popover: rgba(250, 250, 252, 1);"`; -exports[`n-table should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-td-color: #fff; --n-td-color-modal: #fff; --n-td-color-popover: #fff; --n-td-text-color: rgb(51, 54, 57); --n-border-color: rgba(239, 239, 245, 1); --n-border-color-modal: rgba(239, 239, 245, 1); --n-border-color-popover: rgba(239, 239, 245, 1); --n-border-radius: 3px; --n-font-size: 14px; --n-th-color: rgba(250, 250, 252, 1); --n-th-color-modal: rgba(250, 250, 252, 1); --n-th-color-popover: rgba(250, 250, 252, 1); --n-th-font-weight: 500; --n-th-text-color: rgb(31, 34, 37); --n-line-height: 1.6; --n-td-padding: 12px; --n-th-padding: 12px; --n-td-color-striped: rgba(250, 250, 252, 1); --n-td-color-striped-modal: rgba(250, 250, 252, 1); --n-td-color-striped-popover: rgba(250, 250, 252, 1);"`; +exports[`n-table > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-td-color: #fff; --n-td-color-modal: #fff; --n-td-color-popover: #fff; --n-td-text-color: rgb(51, 54, 57); --n-border-color: rgba(239, 239, 245, 1); --n-border-color-modal: rgba(239, 239, 245, 1); --n-border-color-popover: rgba(239, 239, 245, 1); --n-border-radius: 3px; --n-font-size: 14px; --n-th-color: rgba(250, 250, 252, 1); --n-th-color-modal: rgba(250, 250, 252, 1); --n-th-color-popover: rgba(250, 250, 252, 1); --n-th-font-weight: 500; --n-th-text-color: rgb(31, 34, 37); --n-line-height: 1.6; --n-td-padding: 12px; --n-th-padding: 12px; --n-td-color-striped: rgba(250, 250, 252, 1); --n-td-color-striped-modal: rgba(250, 250, 252, 1); --n-td-color-striped-popover: rgba(250, 250, 252, 1);"`; -exports[`n-table should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-td-color: #fff; --n-td-color-modal: #fff; --n-td-color-popover: #fff; --n-td-text-color: rgb(51, 54, 57); --n-border-color: rgba(239, 239, 245, 1); --n-border-color-modal: rgba(239, 239, 245, 1); --n-border-color-popover: rgba(239, 239, 245, 1); --n-border-radius: 3px; --n-font-size: 15px; --n-th-color: rgba(250, 250, 252, 1); --n-th-color-modal: rgba(250, 250, 252, 1); --n-th-color-popover: rgba(250, 250, 252, 1); --n-th-font-weight: 500; --n-th-text-color: rgb(31, 34, 37); --n-line-height: 1.6; --n-td-padding: 12px; --n-th-padding: 12px; --n-td-color-striped: rgba(250, 250, 252, 1); --n-td-color-striped-modal: rgba(250, 250, 252, 1); --n-td-color-striped-popover: rgba(250, 250, 252, 1);"`; +exports[`n-table > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-td-color: #fff; --n-td-color-modal: #fff; --n-td-color-popover: #fff; --n-td-text-color: rgb(51, 54, 57); --n-border-color: rgba(239, 239, 245, 1); --n-border-color-modal: rgba(239, 239, 245, 1); --n-border-color-popover: rgba(239, 239, 245, 1); --n-border-radius: 3px; --n-font-size: 15px; --n-th-color: rgba(250, 250, 252, 1); --n-th-color-modal: rgba(250, 250, 252, 1); --n-th-color-popover: rgba(250, 250, 252, 1); --n-th-font-weight: 500; --n-th-text-color: rgb(31, 34, 37); --n-line-height: 1.6; --n-td-padding: 12px; --n-th-padding: 12px; --n-td-color-striped: rgba(250, 250, 252, 1); --n-td-color-striped-modal: rgba(250, 250, 252, 1); --n-td-color-striped-popover: rgba(250, 250, 252, 1);"`; diff --git a/src/table/tests/server.spec.tsx b/src/table/tests/server.spec.tsx index 8c12135a89f..4d159906680 100644 --- a/src/table/tests/server.spec.tsx +++ b/src/table/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NTable } from '../..' diff --git a/src/tabs/tests/Tabs.spec.tsx b/src/tabs/tests/Tabs.spec.tsx index f0af7fc1e30..16860d981a6 100644 --- a/src/tabs/tests/Tabs.spec.tsx +++ b/src/tabs/tests/Tabs.spec.tsx @@ -47,7 +47,7 @@ describe('n-tabs', () => { }) it('should show AddIcon with `addable` `on-add` prop', async () => { - const onAdd = jest.fn() + const onAdd = vi.fn() const wrapper = mount(NTabs, { props: { type: 'card', @@ -308,7 +308,7 @@ describe('n-tabs', () => { }) it('should work with `on-close` prop', async () => { - const onClose = jest.fn() + const onClose = vi.fn() const wrapper = mount(NTabs, { props: { type: 'card', diff --git a/src/tabs/tests/__snapshots__/Tabs.spec.tsx.snap b/src/tabs/tests/__snapshots__/Tabs.spec.tsx.snap index 435e6c7db44..bb5acb5262b 100644 --- a/src/tabs/tests/__snapshots__/Tabs.spec.tsx.snap +++ b/src/tabs/tests/__snapshots__/Tabs.spec.tsx.snap @@ -1,7 +1,7 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-tabs should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-segment: rgb(247, 247, 250); --n-bar-color: #18a058; --n-tab-font-size: 14px; --n-tab-text-color: rgb(31, 34, 37); --n-tab-text-color-active: #18a058; --n-tab-text-color-disabled: rgba(194, 194, 194, 1); --n-tab-text-color-hover: #18a058; --n-pane-text-color: rgb(51, 54, 57); --n-tab-border-color: rgb(239, 239, 245); --n-tab-border-radius: 3px; --n-close-size: 18px; --n-close-icon-size: 14px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-border-radius: 3px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-tab-color: rgb(247, 247, 250); --n-tab-font-weight: 400; --n-tab-font-weight-active: 400; --n-tab-padding: 4px 0; --n-tab-padding-vertical: 6px 12px; --n-tab-gap: 36px; --n-tab-gap-vertical: 8px; --n-pane-padding-left: 0; --n-pane-padding-right: 0; --n-pane-padding-top: 8px; --n-pane-padding-bottom: 0; --n-font-weight-strong: 500; --n-tab-color-segment: #FFF;"`; +exports[`n-tabs > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-segment: rgb(247, 247, 250); --n-bar-color: #18a058; --n-tab-font-size: 14px; --n-tab-text-color: rgb(31, 34, 37); --n-tab-text-color-active: #18a058; --n-tab-text-color-disabled: rgba(194, 194, 194, 1); --n-tab-text-color-hover: #18a058; --n-pane-text-color: rgb(51, 54, 57); --n-tab-border-color: rgb(239, 239, 245); --n-tab-border-radius: 3px; --n-close-size: 18px; --n-close-icon-size: 14px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-border-radius: 3px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-tab-color: rgb(247, 247, 250); --n-tab-font-weight: 400; --n-tab-font-weight-active: 400; --n-tab-padding: 4px 0; --n-tab-padding-vertical: 6px 12px; --n-tab-gap: 36px; --n-tab-gap-vertical: 8px; --n-pane-padding-left: 0; --n-pane-padding-right: 0; --n-pane-padding-top: 8px; --n-pane-padding-bottom: 0; --n-font-weight-strong: 500; --n-tab-color-segment: #FFF;"`; -exports[`n-tabs should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-segment: rgb(247, 247, 250); --n-bar-color: #18a058; --n-tab-font-size: 14px; --n-tab-text-color: rgb(31, 34, 37); --n-tab-text-color-active: #18a058; --n-tab-text-color-disabled: rgba(194, 194, 194, 1); --n-tab-text-color-hover: #18a058; --n-pane-text-color: rgb(51, 54, 57); --n-tab-border-color: rgb(239, 239, 245); --n-tab-border-radius: 3px; --n-close-size: 18px; --n-close-icon-size: 14px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-border-radius: 3px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-tab-color: rgb(247, 247, 250); --n-tab-font-weight: 400; --n-tab-font-weight-active: 400; --n-tab-padding: 6px 0; --n-tab-padding-vertical: 8px 16px; --n-tab-gap: 36px; --n-tab-gap-vertical: 8px; --n-pane-padding-left: 0; --n-pane-padding-right: 0; --n-pane-padding-top: 12px; --n-pane-padding-bottom: 0; --n-font-weight-strong: 500; --n-tab-color-segment: #FFF;"`; +exports[`n-tabs > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-segment: rgb(247, 247, 250); --n-bar-color: #18a058; --n-tab-font-size: 14px; --n-tab-text-color: rgb(31, 34, 37); --n-tab-text-color-active: #18a058; --n-tab-text-color-disabled: rgba(194, 194, 194, 1); --n-tab-text-color-hover: #18a058; --n-pane-text-color: rgb(51, 54, 57); --n-tab-border-color: rgb(239, 239, 245); --n-tab-border-radius: 3px; --n-close-size: 18px; --n-close-icon-size: 14px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-border-radius: 3px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-tab-color: rgb(247, 247, 250); --n-tab-font-weight: 400; --n-tab-font-weight-active: 400; --n-tab-padding: 6px 0; --n-tab-padding-vertical: 8px 16px; --n-tab-gap: 36px; --n-tab-gap-vertical: 8px; --n-pane-padding-left: 0; --n-pane-padding-right: 0; --n-pane-padding-top: 12px; --n-pane-padding-bottom: 0; --n-font-weight-strong: 500; --n-tab-color-segment: #FFF;"`; -exports[`n-tabs should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-segment: rgb(247, 247, 250); --n-bar-color: #18a058; --n-tab-font-size: 16px; --n-tab-text-color: rgb(31, 34, 37); --n-tab-text-color-active: #18a058; --n-tab-text-color-disabled: rgba(194, 194, 194, 1); --n-tab-text-color-hover: #18a058; --n-pane-text-color: rgb(51, 54, 57); --n-tab-border-color: rgb(239, 239, 245); --n-tab-border-radius: 3px; --n-close-size: 18px; --n-close-icon-size: 14px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-border-radius: 3px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-tab-color: rgb(247, 247, 250); --n-tab-font-weight: 400; --n-tab-font-weight-active: 400; --n-tab-padding: 10px 0; --n-tab-padding-vertical: 10px 20px; --n-tab-gap: 36px; --n-tab-gap-vertical: 8px; --n-pane-padding-left: 0; --n-pane-padding-right: 0; --n-pane-padding-top: 16px; --n-pane-padding-bottom: 0; --n-font-weight-strong: 500; --n-tab-color-segment: #FFF;"`; +exports[`n-tabs > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color-segment: rgb(247, 247, 250); --n-bar-color: #18a058; --n-tab-font-size: 16px; --n-tab-text-color: rgb(31, 34, 37); --n-tab-text-color-active: #18a058; --n-tab-text-color-disabled: rgba(194, 194, 194, 1); --n-tab-text-color-hover: #18a058; --n-pane-text-color: rgb(51, 54, 57); --n-tab-border-color: rgb(239, 239, 245); --n-tab-border-radius: 3px; --n-close-size: 18px; --n-close-icon-size: 14px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-border-radius: 3px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-tab-color: rgb(247, 247, 250); --n-tab-font-weight: 400; --n-tab-font-weight-active: 400; --n-tab-padding: 10px 0; --n-tab-padding-vertical: 10px 20px; --n-tab-gap: 36px; --n-tab-gap-vertical: 8px; --n-pane-padding-left: 0; --n-pane-padding-right: 0; --n-pane-padding-top: 16px; --n-pane-padding-bottom: 0; --n-font-weight-strong: 500; --n-tab-color-segment: #FFF;"`; diff --git a/src/tabs/tests/server.spec.tsx b/src/tabs/tests/server.spec.tsx index 9d2e927693a..b8957ca6776 100644 --- a/src/tabs/tests/server.spec.tsx +++ b/src/tabs/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NTabs } from '../..' diff --git a/src/tag/tests/Tag.spec.ts b/src/tag/tests/Tag.spec.ts index a02fb03cadd..e59257073f1 100644 --- a/src/tag/tests/Tag.spec.ts +++ b/src/tag/tests/Tag.spec.ts @@ -19,7 +19,7 @@ describe('n-tag', () => { }) it('should be clickable', () => { - const onClick = jest.fn() + const onClick = vi.fn() const wrapper = mount(NTag, { props: { onClick @@ -45,7 +45,7 @@ describe('n-tag', () => { }) it('should work with `on-update:checked` prop', () => { - const onChecked = jest.fn() + const onChecked = vi.fn() const wrapper = mount(NTag, { props: { checkable: true, @@ -60,7 +60,7 @@ describe('n-tag', () => { }) it('should work with `closable` `on-close` prop', () => { - const onClose = jest.fn() + const onClose = vi.fn() const wrapper = mount(NTag, { props: { closable: true, @@ -74,7 +74,7 @@ describe('n-tag', () => { }) it('should work with `disabled` prop', async () => { - const onClose = jest.fn() + const onClose = vi.fn() const wrapper = mount(NTag, { props: { disabled: true, diff --git a/src/tag/tests/__snapshots__/Tag.spec.ts.snap b/src/tag/tests/__snapshots__/Tag.spec.ts.snap index 2637d0b8ca2..fbe2923bf27 100644 --- a/src/tag/tests/__snapshots__/Tag.spec.ts.snap +++ b/src/tag/tests/__snapshots__/Tag.spec.ts.snap @@ -1,19 +1,19 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-tag should work with \`size\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-tag > should work with \`size\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-tag should work with \`size\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-tag > should work with \`size\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-tag should work with \`size\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-tag > should work with \`size\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-tag should work with \`type\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-tag > should work with \`type\` prop 1`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-tag should work with \`type\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-tag > should work with \`type\` prop 2`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-tag should work with \`type\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-tag > should work with \`type\` prop 3`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-tag should work with \`type\` prop 4`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-tag > should work with \`type\` prop 4`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-tag should work with \`type\` prop 5`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; +exports[`n-tag > should work with \`type\` prop 5`] = `"--n-font-weight-strong: 500; --n-avatar-size-override: calc(28px - 8px); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 2px; --n-border: 1px solid rgb(224, 224, 230); --n-close-icon-size: 14px; --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-border-radius: 2px; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-icon-color-disabled: rgba(102, 102, 102, 1); --n-close-margin-top: 0; --n-close-margin-right: 0; --n-close-margin-bottom: 0; --n-close-margin-left: 4px; --n-close-size: 18px; --n-color: rgb(250, 250, 252); --n-color-checkable: #0000; --n-color-checked: #18a058; --n-color-checked-hover: #36ad6a; --n-color-checked-pressed: #0c7a43; --n-color-hover-checkable: rgba(46, 51, 56, .09); --n-color-pressed-checkable: rgba(46, 51, 56, .13); --n-font-size: 14px; --n-height: 28px; --n-opacity-disabled: 0.5; --n-padding: 0 7px; --n-text-color: rgb(51, 54, 57); --n-text-color-checkable: rgb(51, 54, 57); --n-text-color-checked: #FFF; --n-text-color-hover-checkable: rgb(51, 54, 57); --n-text-color-pressed-checkable: rgb(51, 54, 57);"`; -exports[`n-tag should work with default slot 1`] = `"default"`; +exports[`n-tag > should work with default slot 1`] = `"default"`; diff --git a/src/tag/tests/server.spec.tsx b/src/tag/tests/server.spec.tsx index af46c0a803a..e867df15cbf 100644 --- a/src/tag/tests/server.spec.tsx +++ b/src/tag/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NTag } from '../..' diff --git a/src/thing/tests/server.spec.tsx b/src/thing/tests/server.spec.tsx index 426cb8f7a99..048f0dfb903 100644 --- a/src/thing/tests/server.spec.tsx +++ b/src/thing/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NThing } from '../..' diff --git a/src/time-picker/tests/TimePicker.spec.ts b/src/time-picker/tests/TimePicker.spec.ts index 79740b7c6ff..a7291890b1c 100644 --- a/src/time-picker/tests/TimePicker.spec.ts +++ b/src/time-picker/tests/TimePicker.spec.ts @@ -104,7 +104,7 @@ describe('n-time-picker', () => { }) it('should work with `on-blur` prop', async () => { - const onBlur = jest.fn() + const onBlur = vi.fn() const wrapper = mount(NTimePicker, { props: { onBlur } }) @@ -114,7 +114,7 @@ describe('n-time-picker', () => { wrapper.unmount() }) it('should work with `on-blur` prop when use `ok` button', async () => { - const onBlur = jest.fn() + const onBlur = vi.fn() const Render = () => { return h('div', null, [ h(NTimePicker, { @@ -145,7 +145,7 @@ describe('n-time-picker', () => { }) it('should work with `on-focus` prop', async () => { - const onFocus = jest.fn() + const onFocus = vi.fn() const wrapper = mount(NTimePicker, { props: { onFocus } }) diff --git a/src/time-picker/tests/__snapshots__/TimePicker.spec.ts.snap b/src/time-picker/tests/__snapshots__/TimePicker.spec.ts.snap index f2393ce2a94..a7273c4c686 100644 --- a/src/time-picker/tests/__snapshots__/TimePicker.spec.ts.snap +++ b/src/time-picker/tests/__snapshots__/TimePicker.spec.ts.snap @@ -1,7 +1,7 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-time-picker should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 28px; --n-padding-left: 10px; --n-padding-right: 10px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; +exports[`n-time-picker > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 28px; --n-padding-left: 10px; --n-padding-right: 10px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; -exports[`n-time-picker should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; +exports[`n-time-picker > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; -exports[`n-time-picker should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 15px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 40px; --n-padding-left: 14px; --n-padding-right: 14px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; +exports[`n-time-picker > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 15px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 40px; --n-padding-left: 14px; --n-padding-right: 14px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; diff --git a/src/time-picker/tests/server.spec.tsx b/src/time-picker/tests/server.spec.tsx index 3992f080ab2..71064c07189 100644 --- a/src/time-picker/tests/server.spec.tsx +++ b/src/time-picker/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NTimePicker } from '../..' diff --git a/src/time/tests/server.spec.tsx b/src/time/tests/server.spec.tsx index 3246ad9ad35..bf117e4192f 100644 --- a/src/time/tests/server.spec.tsx +++ b/src/time/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NTime } from '../..' diff --git a/src/timeline/tests/server.spec.tsx b/src/timeline/tests/server.spec.tsx index 44a4f05f19b..b6ee04837ab 100644 --- a/src/timeline/tests/server.spec.tsx +++ b/src/timeline/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NTimeline } from '../..' diff --git a/src/tooltip/tests/server.spec.tsx b/src/tooltip/tests/server.spec.tsx index 0fcf2ffb43c..b27d598f736 100644 --- a/src/tooltip/tests/server.spec.tsx +++ b/src/tooltip/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NTooltip } from '../..' diff --git a/src/transfer/tests/Transfer.spec.ts b/src/transfer/tests/Transfer.spec.ts index 360af8d77f9..633b33f4188 100644 --- a/src/transfer/tests/Transfer.spec.ts +++ b/src/transfer/tests/Transfer.spec.ts @@ -30,7 +30,7 @@ describe('n-transfer', () => { value: 'test1' } ] - const onFilter = jest.fn() + const onFilter = vi.fn() const wrapper = mount(NTransfer, { props: { sourceFilterable: true, filter: onFilter, options } }) diff --git a/src/transfer/tests/__snapshots__/Transfer.spec.ts.snap b/src/transfer/tests/__snapshots__/Transfer.spec.ts.snap index e7ac829f452..d471414aa39 100644 --- a/src/transfer/tests/__snapshots__/Transfer.spec.ts.snap +++ b/src/transfer/tests/__snapshots__/Transfer.spec.ts.snap @@ -1,7 +1,7 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-transfer should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-color: rgb(224, 224, 230); --n-border-radius: 3px; --n-extra-font-size: 12px; --n-font-size: 14px; --n-header-font-size: 14px; --n-header-extra-text-color: rgb(118, 124, 130); --n-header-extra-text-color-disabled: rgba(194, 194, 194, 1); --n-header-font-weight: 400; --n-header-text-color: rgb(31, 34, 37); --n-header-text-color-disabled: rgba(194, 194, 194, 1); --n-item-color-pending: rgb(243, 243, 245); --n-item-height: 34px; --n-item-text-color: rgb(51, 54, 57); --n-item-text-color-disabled: rgba(194, 194, 194, 1); --n-list-color: #fff; --n-header-height: 44px; --n-close-size: 20px; --n-close-icon-size: 16px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-divider-color: rgb(224, 224, 230);"`; +exports[`n-transfer > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-color: rgb(224, 224, 230); --n-border-radius: 3px; --n-extra-font-size: 12px; --n-font-size: 14px; --n-header-font-size: 14px; --n-header-extra-text-color: rgb(118, 124, 130); --n-header-extra-text-color-disabled: rgba(194, 194, 194, 1); --n-header-font-weight: 400; --n-header-text-color: rgb(31, 34, 37); --n-header-text-color-disabled: rgba(194, 194, 194, 1); --n-item-color-pending: rgb(243, 243, 245); --n-item-height: 34px; --n-item-text-color: rgb(51, 54, 57); --n-item-text-color-disabled: rgba(194, 194, 194, 1); --n-list-color: #fff; --n-header-height: 44px; --n-close-size: 20px; --n-close-icon-size: 16px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-divider-color: rgb(224, 224, 230);"`; -exports[`n-transfer should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-color: rgb(224, 224, 230); --n-border-radius: 3px; --n-extra-font-size: 12px; --n-font-size: 14px; --n-header-font-size: 16px; --n-header-extra-text-color: rgb(118, 124, 130); --n-header-extra-text-color-disabled: rgba(194, 194, 194, 1); --n-header-font-weight: 400; --n-header-text-color: rgb(31, 34, 37); --n-header-text-color-disabled: rgba(194, 194, 194, 1); --n-item-color-pending: rgb(243, 243, 245); --n-item-height: 34px; --n-item-text-color: rgb(51, 54, 57); --n-item-text-color-disabled: rgba(194, 194, 194, 1); --n-list-color: #fff; --n-header-height: 44px; --n-close-size: 20px; --n-close-icon-size: 16px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-divider-color: rgb(224, 224, 230);"`; +exports[`n-transfer > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-color: rgb(224, 224, 230); --n-border-radius: 3px; --n-extra-font-size: 12px; --n-font-size: 14px; --n-header-font-size: 16px; --n-header-extra-text-color: rgb(118, 124, 130); --n-header-extra-text-color-disabled: rgba(194, 194, 194, 1); --n-header-font-weight: 400; --n-header-text-color: rgb(31, 34, 37); --n-header-text-color-disabled: rgba(194, 194, 194, 1); --n-item-color-pending: rgb(243, 243, 245); --n-item-height: 34px; --n-item-text-color: rgb(51, 54, 57); --n-item-text-color-disabled: rgba(194, 194, 194, 1); --n-list-color: #fff; --n-header-height: 44px; --n-close-size: 20px; --n-close-icon-size: 16px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-divider-color: rgb(224, 224, 230);"`; -exports[`n-transfer should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-color: rgb(224, 224, 230); --n-border-radius: 3px; --n-extra-font-size: 14px; --n-font-size: 15px; --n-header-font-size: 16px; --n-header-extra-text-color: rgb(118, 124, 130); --n-header-extra-text-color-disabled: rgba(194, 194, 194, 1); --n-header-font-weight: 400; --n-header-text-color: rgb(31, 34, 37); --n-header-text-color-disabled: rgba(194, 194, 194, 1); --n-item-color-pending: rgb(243, 243, 245); --n-item-height: 40px; --n-item-text-color: rgb(51, 54, 57); --n-item-text-color-disabled: rgba(194, 194, 194, 1); --n-list-color: #fff; --n-header-height: 50px; --n-close-size: 20px; --n-close-icon-size: 16px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-divider-color: rgb(224, 224, 230);"`; +exports[`n-transfer > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-color: rgb(224, 224, 230); --n-border-radius: 3px; --n-extra-font-size: 14px; --n-font-size: 15px; --n-header-font-size: 16px; --n-header-extra-text-color: rgb(118, 124, 130); --n-header-extra-text-color-disabled: rgba(194, 194, 194, 1); --n-header-font-weight: 400; --n-header-text-color: rgb(31, 34, 37); --n-header-text-color-disabled: rgba(194, 194, 194, 1); --n-item-color-pending: rgb(243, 243, 245); --n-item-height: 40px; --n-item-text-color: rgb(51, 54, 57); --n-item-text-color-disabled: rgba(194, 194, 194, 1); --n-list-color: #fff; --n-header-height: 50px; --n-close-size: 20px; --n-close-icon-size: 16px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-divider-color: rgb(224, 224, 230);"`; diff --git a/src/transfer/tests/server.spec.tsx b/src/transfer/tests/server.spec.tsx index ad938718d69..352b4440691 100644 --- a/src/transfer/tests/server.spec.tsx +++ b/src/transfer/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NTransfer } from '../..' diff --git a/src/tree-select/tests/server.spec.tsx b/src/tree-select/tests/server.spec.tsx index aa5bd4c209c..4293f8004a3 100644 --- a/src/tree-select/tests/server.spec.tsx +++ b/src/tree-select/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NTreeSelect } from '../..' diff --git a/src/tree/tests/Tree.spec.ts b/src/tree/tests/Tree.spec.ts index 9991cb9a4af..5b0780b2afb 100644 --- a/src/tree/tests/Tree.spec.ts +++ b/src/tree/tests/Tree.spec.ts @@ -386,7 +386,7 @@ describe('n-tree', () => { }) it('should work with `onLoad`', async () => { - const onLoad = jest.fn() + const onLoad = vi.fn() const wrapper = mount(NTree, { props: { data: [ @@ -418,12 +418,12 @@ describe('n-tree', () => { onLoad } }) - setTimeout(() => { + vi.waitFor(() => { expect(onLoad).toHaveBeenCalled() wrapper.setProps({ expandedKeys: [1, 2] }).then(() => { expect(onLoad).toHaveBeenCalled() }) - }, 0) + }) }) it('should work witch `multiple`', async () => { diff --git a/src/tree/tests/server.spec.tsx b/src/tree/tests/server.spec.tsx index eaba588b9d5..82c9418c721 100644 --- a/src/tree/tests/server.spec.tsx +++ b/src/tree/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NTree } from '../..' diff --git a/src/typography/tests/__snapshots__/Typography.spec.ts.snap b/src/typography/tests/__snapshots__/Typography.spec.ts.snap index 2f739b3d01a..025747e52ee 100644 --- a/src/typography/tests/__snapshots__/Typography.spec.ts.snap +++ b/src/typography/tests/__snapshots__/Typography.spec.ts.snap @@ -1,43 +1,43 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`n-blockquote should work with normal 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-line-height: 1.6; --n-prefix-color: rgb(224, 224, 230); --n-text-color: rgb(51, 54, 57);"`; +exports[`n-blockquote > should work with normal 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-line-height: 1.6; --n-prefix-color: rgb(224, 224, 230); --n-text-color: rgb(51, 54, 57);"`; -exports[`n-h1 n-h2 n-h3 n-h4 n-h5 n-h6 should work with normal 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 30px; --n-margin: 28px 0 20px 0; --n-bar-color: #18a058; --n-bar-width: 4px; --n-font-weight: 500; --n-text-color: rgb(31, 34, 37); --n-prefix-width: 16px;"`; +exports[`n-h1 n-h2 n-h3 n-h4 n-h5 n-h6 > should work with normal 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 30px; --n-margin: 28px 0 20px 0; --n-bar-color: #18a058; --n-bar-width: 4px; --n-font-weight: 500; --n-text-color: rgb(31, 34, 37); --n-prefix-width: 16px;"`; -exports[`n-h1 n-h2 n-h3 n-h4 n-h5 n-h6 should work with normal 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 22px; --n-margin: 28px 0 20px 0; --n-bar-color: #18a058; --n-bar-width: 4px; --n-font-weight: 500; --n-text-color: rgb(31, 34, 37); --n-prefix-width: 16px;"`; +exports[`n-h1 n-h2 n-h3 n-h4 n-h5 n-h6 > should work with normal 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 22px; --n-margin: 28px 0 20px 0; --n-bar-color: #18a058; --n-bar-width: 4px; --n-font-weight: 500; --n-text-color: rgb(31, 34, 37); --n-prefix-width: 16px;"`; -exports[`n-h1 n-h2 n-h3 n-h4 n-h5 n-h6 should work with normal 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 18px; --n-margin: 28px 0 20px 0; --n-bar-color: #18a058; --n-bar-width: 3px; --n-font-weight: 500; --n-text-color: rgb(31, 34, 37); --n-prefix-width: 12px;"`; +exports[`n-h1 n-h2 n-h3 n-h4 n-h5 n-h6 > should work with normal 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 18px; --n-margin: 28px 0 20px 0; --n-bar-color: #18a058; --n-bar-width: 3px; --n-font-weight: 500; --n-text-color: rgb(31, 34, 37); --n-prefix-width: 12px;"`; -exports[`n-h1 n-h2 n-h3 n-h4 n-h5 n-h6 should work with normal 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 16px; --n-margin: 28px 0 18px 0; --n-bar-color: #2080f0; --n-bar-width: 3px; --n-font-weight: 500; --n-text-color: rgb(31, 34, 37); --n-prefix-width: 12px;"`; +exports[`n-h1 n-h2 n-h3 n-h4 n-h5 n-h6 > should work with normal 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 16px; --n-margin: 28px 0 18px 0; --n-bar-color: #2080f0; --n-bar-width: 3px; --n-font-weight: 500; --n-text-color: rgb(31, 34, 37); --n-prefix-width: 12px;"`; -exports[`n-h1 n-h2 n-h3 n-h4 n-h5 n-h6 should work with normal 5`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 16px; --n-margin: 28px 0 18px 0; --n-bar-color: #f0a020; --n-bar-width: 3px; --n-font-weight: 500; --n-text-color: rgb(31, 34, 37); --n-prefix-width: 12px;"`; +exports[`n-h1 n-h2 n-h3 n-h4 n-h5 n-h6 > should work with normal 5`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 16px; --n-margin: 28px 0 18px 0; --n-bar-color: #f0a020; --n-bar-width: 3px; --n-font-weight: 500; --n-text-color: rgb(31, 34, 37); --n-prefix-width: 12px;"`; -exports[`n-h1 n-h2 n-h3 n-h4 n-h5 n-h6 should work with normal 6`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 16px; --n-margin: 28px 0 18px 0; --n-bar-color: #d03050; --n-bar-width: 3px; --n-font-weight: 500; --n-text-color: rgb(31, 34, 37); --n-prefix-width: 12px;"`; +exports[`n-h1 n-h2 n-h3 n-h4 n-h5 n-h6 > should work with normal 6`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 16px; --n-margin: 28px 0 18px 0; --n-bar-color: #d03050; --n-bar-width: 3px; --n-font-weight: 500; --n-text-color: rgb(31, 34, 37); --n-prefix-width: 12px;"`; -exports[`n-p should work with \`depth\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-line-height: 1.6; --n-margin: 16px 0 16px 0; --n-text-color: rgb(31, 34, 37);"`; +exports[`n-p > should work with \`depth\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-line-height: 1.6; --n-margin: 16px 0 16px 0; --n-text-color: rgb(31, 34, 37);"`; -exports[`n-p should work with \`depth\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-line-height: 1.6; --n-margin: 16px 0 16px 0; --n-text-color: rgb(51, 54, 57);"`; +exports[`n-p > should work with \`depth\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-line-height: 1.6; --n-margin: 16px 0 16px 0; --n-text-color: rgb(51, 54, 57);"`; -exports[`n-p should work with \`depth\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-line-height: 1.6; --n-margin: 16px 0 16px 0; --n-text-color: rgb(118, 124, 130);"`; +exports[`n-p > should work with \`depth\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-line-height: 1.6; --n-margin: 16px 0 16px 0; --n-text-color: rgb(118, 124, 130);"`; -exports[`n-text should work with \`depth\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgb(51, 54, 57); --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; +exports[`n-text > should work with \`depth\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgb(51, 54, 57); --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; -exports[`n-text should work with \`depth\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgb(31, 34, 37); --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; +exports[`n-text > should work with \`depth\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgb(31, 34, 37); --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; -exports[`n-text should work with \`depth\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgb(51, 54, 57); --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; +exports[`n-text > should work with \`depth\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgb(51, 54, 57); --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; -exports[`n-text should work with \`depth\` prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgb(118, 124, 130); --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; +exports[`n-text > should work with \`depth\` prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgb(118, 124, 130); --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; -exports[`n-text should work with \`type\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgb(51, 54, 57); --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; +exports[`n-text > should work with \`type\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgb(51, 54, 57); --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; -exports[`n-text should work with \`type\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: #2080f0; --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; +exports[`n-text > should work with \`type\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: #2080f0; --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; -exports[`n-text should work with \`type\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: #18a058; --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; +exports[`n-text > should work with \`type\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: #18a058; --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; -exports[`n-text should work with \`type\` prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: #f0a020; --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; +exports[`n-text > should work with \`type\` prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: #f0a020; --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; -exports[`n-text should work with \`type\` prop 5`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: #d03050; --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; +exports[`n-text > should work with \`type\` prop 5`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: #d03050; --n-font-weight-strong: 500; --n-font-famliy-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; --n-code-border-radius: 2px; --n-code-text-color: rgb(51, 54, 57); --n-code-color: rgb(244, 244, 248); --n-code-border: 1px solid #0000;"`; -exports[`n-ul n-ol n-li should work with normal 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-line-height: 1.6; --n-text-color: rgb(51, 54, 57); --n-li-margin: .25em 0 0 0; --n-ol-padding: 0 0 0 2em; --n-ul-padding: 0 0 0 2em;"`; +exports[`n-ul n-ol n-li > should work with normal 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-line-height: 1.6; --n-text-color: rgb(51, 54, 57); --n-li-margin: .25em 0 0 0; --n-ol-padding: 0 0 0 2em; --n-ul-padding: 0 0 0 2em;"`; -exports[`n-ul n-ol n-li should work with normal 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-line-height: 1.6; --n-text-color: rgb(51, 54, 57); --n-li-margin: .25em 0 0 0; --n-ol-padding: 0 0 0 2em; --n-ul-padding: 0 0 0 2em;"`; +exports[`n-ul n-ol n-li > should work with normal 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-line-height: 1.6; --n-text-color: rgb(51, 54, 57); --n-li-margin: .25em 0 0 0; --n-ol-padding: 0 0 0 2em; --n-ul-padding: 0 0 0 2em;"`; diff --git a/src/typography/tests/server.spec.tsx b/src/typography/tests/server.spec.tsx index 6d426dd6af2..adbff337d9b 100644 --- a/src/typography/tests/server.spec.tsx +++ b/src/typography/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NText } from '../..' diff --git a/src/upload/tests/Upload.spec.tsx b/src/upload/tests/Upload.spec.tsx index cf30f60db8f..3d7512efc32 100644 --- a/src/upload/tests/Upload.spec.tsx +++ b/src/upload/tests/Upload.spec.tsx @@ -51,8 +51,8 @@ describe('n-upload', () => { }) it('should work with `on-before-upload` prop', async () => { - const onBeforeUpload = jest.fn(async () => true) - const onChange = jest.fn() + const onBeforeUpload = vi.fn(async () => true) + const onChange = vi.fn() const wrapper = mount(NUpload, { props: { onBeforeUpload, @@ -122,7 +122,7 @@ describe('n-upload', () => { }) it('should work with `on-preview` prop', async () => { - const onPreview = jest.fn() + const onPreview = vi.fn() const wrapper = mount(NUpload, { props: { defaultFileList: [ @@ -145,7 +145,7 @@ describe('n-upload', () => { }) it('should work with `show-remove-button` and `on-remove` prop', async () => { - const onRemove = jest.fn() + const onRemove = vi.fn() const wrapper = mount(NUpload, { props: { defaultFileList: [ @@ -177,7 +177,7 @@ describe('n-upload', () => { }) it('should work with `show-cancel-button` and `on-remove` prop', async () => { - const onRemove = jest.fn() + const onRemove = vi.fn() const wrapper = mount(NUpload, { props: { defaultFileList: [ diff --git a/src/upload/tests/server.spec.tsx b/src/upload/tests/server.spec.tsx index c66150a94b1..37cebb9949a 100644 --- a/src/upload/tests/server.spec.tsx +++ b/src/upload/tests/server.spec.tsx @@ -1,8 +1,5 @@ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' -/** - * @jest-environment node - */ import { createSSRApp, h } from 'vue' import { NUpload } from '../..' diff --git a/tsconfig.json b/tsconfig.json index 8d781407054..ac5d99777fd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,7 +11,8 @@ "paths": { "naive-ui": ["./src"] }, - "types": ["vue/jsx", "jest"], + + "types": ["vue/jsx", "vitest/globals"], "strict": true, "strictNullChecks": true, "noImplicitAny": true, diff --git a/vite.config.js b/vite.config.js index 282b7239657..34bd0a3d2ac 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,5 +1,5 @@ -const path = require('node:path') const dns = require('node:dns') +const path = require('node:path') const process = require('node:process') const { babel } = require('@rollup/plugin-babel') const createDemoPlugin = require('./build/vite-plugin-demo') @@ -12,6 +12,14 @@ dns.setDefaultResultOrder('verbatim') module.exports = { root: __dirname, plugins: createDemoPlugin(), + test: { + globals: true, + environment: 'jsdom', + coverage: { + provider: 'v8', + reporter: ['text', 'json-summary', 'json'] + } + }, resolve: { // In production site build, we want to import naive-ui from node_modules alias: diff --git a/vitest.workspace.ts b/vitest.workspace.ts new file mode 100644 index 00000000000..7dbfa98e63a --- /dev/null +++ b/vitest.workspace.ts @@ -0,0 +1,21 @@ +import { defineWorkspace } from 'vitest/config' + +export default defineWorkspace([ + { + extends: 'vite.config.js', + test: { + name: 'server', + environment: 'node', + include: ['src/**/tests/server.spec.{ts,tsx}'] + } + }, + { + extends: 'vite.config.js', + test: { + name: 'browser', + environment: 'jsdom', + include: ['src/**/tests/{**,}.spec.{ts,tsx}'], + exclude: ['src/**/tests/server.spec.{ts,tsx}'] + } + } +]) From 6e753b77fd4c16086868b0958a1c80249235e466 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A9=AC=E6=B3=BD=E5=9D=A4?= <984757534@qq.com> Date: Thu, 28 Nov 2024 15:11:51 +0800 Subject: [PATCH 2/7] chore: add jsdom --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 9de180931f8..b800adba6e0 100644 --- a/package.json +++ b/package.json @@ -120,6 +120,7 @@ "grapheme-splitter": "^1.0.4", "husky": "^9.0.6", "inquirer": "^10.0.3", + "jsdom": "^25.0.1", "katex": "^0.16.8", "lint-staged": "^15.1.0", "marked": "^12.0.2", From f59c020954e3aa6a7f55eab7902514a633ac4712 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A9=AC=E6=B3=BD=E5=9D=A4?= <984757534@qq.com> Date: Thu, 28 Nov 2024 15:26:51 +0800 Subject: [PATCH 3/7] chore: ++ --- .github/workflows/node.js.yml | 4 ++-- src/rate/tests/Rate.spec.ts | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index e416c9a16ff..636b006cb5f 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -20,13 +20,13 @@ jobs: node-version: [18, 20] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Install pnpm run: corepack enable - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} diff --git a/src/rate/tests/Rate.spec.ts b/src/rate/tests/Rate.spec.ts index aa32f074626..4e320bf81c0 100644 --- a/src/rate/tests/Rate.spec.ts +++ b/src/rate/tests/Rate.spec.ts @@ -113,8 +113,9 @@ describe('n-rate', () => { await wrapper.setProps({ onUpdateValue }) await wrapper.findAll('.n-rate__half')[testNumber].trigger('click') - expect(onUpdateValue).toHaveBeenCalledWith(testNumber + 0.5) - + vi.waitFor(() => { + expect(onUpdateValue).toHaveBeenCalledWith(testNumber + 0.5) + }) wrapper.unmount() }) From 0ff0be06d7f4412ebab95a4b78f38784df7f9af5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A9=AC=E6=B3=BD=E5=9D=A4?= <984757534@qq.com> Date: Fri, 29 Nov 2024 15:02:41 +0800 Subject: [PATCH 4/7] chore: ++ --- package.json | 2 +- src/tsconfig.demo.json | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b800adba6e0..477003ee49a 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "format": "pnpm run format:code && pnpm run format:md && pnpm run lint:fix", "format:code": "prettier --write \"(src|demo)/**/*.(vue|js)\"", "format:md": "prettier --write --parser markdown --prose-wrap never \"(src|demo)/**/*.md\"", - "test": "NODE_ENV=test vitest", + "test": "NODE_ENV=test vitest run", "test:update": "NODE_ENV=test vitest -u", "test:cov": "NODE_ENV=test NODE_OPTIONS=--unhandled-rejections=warn vitest --coverage", "test:watch": "NODE_ENV=test vitest", diff --git a/src/tsconfig.demo.json b/src/tsconfig.demo.json index 01669661823..9dbb4a08229 100644 --- a/src/tsconfig.demo.json +++ b/src/tsconfig.demo.json @@ -8,6 +8,7 @@ "noEmit": true, "rootDir": ".", "module": "CommonJS", - "target": "ES6" + "target": "ES6", + "types": ["vue/jsx"], } } From 129beb471f1f70f0099de566ac4d71c854d95644 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A9=AC=E6=B3=BD=E5=9D=A4?= <984757534@qq.com> Date: Fri, 29 Nov 2024 15:15:38 +0800 Subject: [PATCH 5/7] chore: make ci happy --- src/tsconfig.esm.json | 3 ++- themes/tusimple/tsconfig.esm.json | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/tsconfig.esm.json b/src/tsconfig.esm.json index 767a73988fd..7482b5c6313 100644 --- a/src/tsconfig.esm.json +++ b/src/tsconfig.esm.json @@ -6,6 +6,7 @@ "outDir": "../es", "module": "ES6", "target": "ES6", - "jsx": "react" + "jsx": "react", + "types": ["vue/jsx"], } } diff --git a/themes/tusimple/tsconfig.esm.json b/themes/tusimple/tsconfig.esm.json index e09b350e9d0..b7aee190c96 100644 --- a/themes/tusimple/tsconfig.esm.json +++ b/themes/tusimple/tsconfig.esm.json @@ -5,7 +5,8 @@ "outDir": "./es", "module": "ES6", "target": "ES6", - "jsx": "react" + "jsx": "react", + "types": ["vue/jsx"], }, "references": [{ "path": "../../src/tsconfig.esm.json" }] } From a2bb2e2135b4e96a685122b7c0d9b028bb6301c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A9=AC=E6=B3=BD=E5=9D=A4?= <984757534@qq.com> Date: Fri, 29 Nov 2024 16:38:14 +0800 Subject: [PATCH 6/7] chore: ++ --- vite.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/vite.config.js b/vite.config.js index 34bd0a3d2ac..80e9cecce4f 100644 --- a/vite.config.js +++ b/vite.config.js @@ -17,7 +17,8 @@ module.exports = { environment: 'jsdom', coverage: { provider: 'v8', - reporter: ['text', 'json-summary', 'json'] + reporter: ['text', 'json-summary', 'json'], + include: ['src/**/src/*.{ts,tsx}'] } }, resolve: { From 6ac800b19ad0658bba1ba8ae98cd4ff05f87b83b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A9=AC=E6=B3=BD=E5=9D=A4?= <984757534@qq.com> Date: Mon, 2 Dec 2024 09:46:45 +0800 Subject: [PATCH 7/7] chore: canvas mock --- package.json | 3 ++- tsconfig.json | 4 ++-- vite.config.js | 1 + vitest.setup.ts | 5 +++++ 4 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 vitest.setup.ts diff --git a/package.json b/package.json index 477003ee49a..7347bf6bfdb 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "format:md": "prettier --write --parser markdown --prose-wrap never \"(src|demo)/**/*.md\"", "test": "NODE_ENV=test vitest run", "test:update": "NODE_ENV=test vitest -u", - "test:cov": "NODE_ENV=test NODE_OPTIONS=--unhandled-rejections=warn vitest --coverage", + "test:cov": "NODE_ENV=test NODE_OPTIONS=--unhandled-rejections=warn vitest run --coverage", "test:watch": "NODE_ENV=test vitest", "test:umd": "jest --collectCoverage=false --testMatch=\"/umd-test/index.spec.js\"", "test:esm": "jest --collectCoverage=false --testMatch=\"/esm-test/index.spec.js\"", @@ -120,6 +120,7 @@ "grapheme-splitter": "^1.0.4", "husky": "^9.0.6", "inquirer": "^10.0.3", + "jest-canvas-mock": "^2.5.2", "jsdom": "^25.0.1", "katex": "^0.16.8", "lint-staged": "^15.1.0", diff --git a/tsconfig.json b/tsconfig.json index ac5d99777fd..af73ab73944 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,12 +1,12 @@ { "compilerOptions": { "composite": true, - "target": "ES6", + "target": "ESNext", "jsx": "preserve", "jsxFactory": "h", "jsxFragmentFactory": "Fragment", "lib": ["ESNext", "DOM"], - "module": "ES6", + "module": "ESNext", "moduleResolution": "Node", "paths": { "naive-ui": ["./src"] diff --git a/vite.config.js b/vite.config.js index 80e9cecce4f..b4972a62f8c 100644 --- a/vite.config.js +++ b/vite.config.js @@ -15,6 +15,7 @@ module.exports = { test: { globals: true, environment: 'jsdom', + setupFiles: ['vitest.setup.ts'], coverage: { provider: 'v8', reporter: ['text', 'json-summary', 'json'], diff --git a/vitest.setup.ts b/vitest.setup.ts new file mode 100644 index 00000000000..602767e1ee3 --- /dev/null +++ b/vitest.setup.ts @@ -0,0 +1,5 @@ +import { vi } from 'vitest' + +import('jest-canvas-mock') + +;(globalThis as any).jest = vi