diff --git a/packages/varlet-shared/package.json b/packages/varlet-shared/package.json index b2925c66c6b..3e372c21a8c 100644 --- a/packages/varlet-shared/package.json +++ b/packages/varlet-shared/package.json @@ -37,7 +37,7 @@ "build": "tsup src/index.ts --format esm,cjs --out-dir=lib --dts --clean" }, "dependencies": { - "rattail": "1.0.14-alpha.1732130069953" + "rattail": "1.0.14" }, "devDependencies": { "@types/node": "^18.7.18", diff --git a/packages/varlet-ui/src/count-to/__tests__/index.spec.js b/packages/varlet-ui/src/count-to/__tests__/index.spec.js index 6bfa7e199a2..7d2bb39af43 100644 --- a/packages/varlet-ui/src/count-to/__tests__/index.spec.js +++ b/packages/varlet-ui/src/count-to/__tests__/index.spec.js @@ -1,8 +1,140 @@ import CountTo from '..' import { createApp } from 'vue' -import { expect, test } from 'vitest' +import { expect, test, vi } from 'vitest' +import { mount } from '@vue/test-utils' +import { delay } from '../../utils/test' test('test count-to plugin', () => { const app = createApp({}).use(CountTo) expect(app.component(CountTo.name)).toBeTruthy() }) + +const DURATION = 100 + +test('test count-to basic animation', async () => { + const wrapper = mount(CountTo, { + props: { + from: 0, + to: 100, + duration: DURATION, + }, + }) + + expect(wrapper.text()).toBe('0') + await delay(DURATION + 20) + expect(wrapper.text()).toBe('100') + wrapper.unmount() +}) + +test('test count-to props change', async () => { + const wrapper = mount(CountTo, { + props: { + from: 0, + to: 100, + duration: DURATION, + }, + }) + + expect(wrapper.text()).toBe('0') + await delay(DURATION + 20) + expect(wrapper.text()).toBe('100') + await wrapper.setProps({ from: -200, to: 200 }) + expect(wrapper.text()).toBe('-200') + await delay(DURATION + 20) + expect(wrapper.text()).toBe('200') + wrapper.unmount() +}) + +test('test count-to slot', async () => { + const wrapper = mount(CountTo, { + props: { + from: 0, + to: 100, + duration: DURATION, + }, + slots: { + default: ({ value }) => value * 2, + }, + }) + + expect(wrapper.text()).toBe('0') + await delay(DURATION + 20) + expect(wrapper.text()).toBe('200') + wrapper.unmount() +}) + +test('test count-to manual control', async () => { + const wrapper = mount(CountTo, { + props: { + from: 0, + to: 100, + duration: DURATION, + autoStart: false, + }, + }) + + expect(wrapper.text()).toBe('0') + await delay(DURATION + 20) + expect(wrapper.text()).toBe('0') + await wrapper.vm.start() + await delay(DURATION + 20) + expect(wrapper.text()).toBe('100') + await wrapper.vm.reset() + expect(wrapper.text()).toBe('0') + await wrapper.vm.pause() + await delay(DURATION + 20) + expect(wrapper.text()).toBe('0') + await wrapper.vm.start() + await delay(DURATION + 20) + expect(wrapper.text()).toBe('100') + + wrapper.unmount() +}) + +test('test count-to precision', async () => { + const wrapper = mount(CountTo, { + props: { + from: 0, + to: 33.333, + duration: DURATION, + precision: 2, + }, + }) + + expect(wrapper.text()).toBe('0') + await delay(DURATION + 20) + expect(wrapper.text()).toBe('33.33') + wrapper.unmount() +}) + +test('test count-to timing function', async () => { + const wrapper = mount(CountTo, { + props: { + from: 0, + to: 100, + duration: DURATION, + timingFunction: () => 1, + }, + }) + + await delay(20) + expect(wrapper.text()).toBe('100') + wrapper.unmount() +}) + +test('test count-to end event', async () => { + const onEnd = vi.fn() + + const wrapper = mount(CountTo, { + props: { + from: 0, + to: 100, + duration: DURATION, + onEnd, + }, + }) + + await delay(DURATION + 20) + expect(onEnd).toHaveBeenCalled() + wrapper.unmount() +}) diff --git a/packages/varlet-ui/types/styleVars.d.ts b/packages/varlet-ui/types/styleVars.d.ts index 095aa80989c..bb79000168b 100644 --- a/packages/varlet-ui/types/styleVars.d.ts +++ b/packages/varlet-ui/types/styleVars.d.ts @@ -263,6 +263,8 @@ interface BaseStyleVars { '--collapse-item-margin-top'?: string '--collapse-disable-color'?: string '--collapse-border-top'?: string + '--count-to-text-color'?: string + '--count-to-text-font-size'?: string '--countdown-text-color'?: string '--countdown-text-font-size'?: string '--counter-padding'?: string diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8952d6185d9..ff77e9473e1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -274,8 +274,8 @@ importers: packages/varlet-shared: dependencies: rattail: - specifier: 1.0.14-alpha.1732130069953 - version: 1.0.14-alpha.1732130069953 + specifier: 1.0.14 + version: 1.0.14 devDependencies: '@types/node': specifier: ^18.7.18 @@ -4242,8 +4242,8 @@ packages: resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==} engines: {node: '>= 0.6'} - rattail@1.0.14-alpha.1732130069953: - resolution: {integrity: sha512-W2d0P8QSdwyjGIfsw9UwlOTVPCe6XgehEoD74P/grHrbIRo7+yXQ2TSoQCJSYg2QYVxqvmaXK4x99j8LLhRGZw==} + rattail@1.0.14: + resolution: {integrity: sha512-PWwwg843q7awJltAziDbET54VtIJ5JKm57QfMb6G6p1dTMJ+/BPcUaVRJXAqhqvWKdmZBplBt6SCC8qwCjqHzQ==} engines: {pnpm: '>=9.0'} rc@1.2.8: @@ -9302,7 +9302,7 @@ snapshots: range-parser@1.2.1: {} - rattail@1.0.14-alpha.1732130069953: + rattail@1.0.14: dependencies: mitt: 3.0.1