TypeScript Rollout Tier 9 - Clockpicker (#376)

* feat(lib): rewrite clockpicker in TS Rewrites the clockpicker components in the `src/components/clockpicker` folder in TypeScript. In `ClockpickerFace.vue`: - Introduces a new interface `FaceNumber` which represents the item type of the `faceNumbers` prop Common changes: - Registers other Buefy components with "direct" names instead of the `name` fields so that they are type-checked * test(lib): rewrite clockpicker spec in TS Rewrites the specs for the clockpicker components in the `src/components/clockpicker` in TypeScript. All the changes are straightforward. Here are common changes: - Imports the spec building blocks from the `vitest` package - Replaces `jest` with `vi` In the `__snapshots__` subfolder, replaces the spec snapshots produced by Jest with those by Vitest: - `Clockpicker.spec.(js → ts).snap` - `ClockpickerFace.spec.(js → ts).snap` * chore(lib): bundle clockpicker in TS `rollup.config.mjs` removes "clockpicker" from `JS_COMPONENTS`. * feat(docs): rewrite clockpicker docs in TS Rewrites the documentation for the clockpicker components in the `src/pages/components/clockpicker` in TypeScript. All the changes are straightforward. Here is a TypeScript migration tip: - Explicitly import and register components so that they are type checked. No type-checking is performed for globally registered components.
ntohq · Jan 12, 2025 · 74775a8 · 74775a8
1 parent 248dad0
commit 74775a8
Show file tree

Hide file tree

Showing 17 changed files with 224 additions and 152 deletions.
diff --git a/packages/buefy-next/rollup.config.mjs b/packages/buefy-next/rollup.config.mjs
@@ -30,7 +30,6 @@ const components = fs
     )
 
 const JS_COMPONENTS = [
-    'clockpicker',
     'datepicker',
     'datetimepicker',
     'table',

diff --git a/...omponents/clockpicker/Clockpicker.spec.js → ...omponents/clockpicker/Clockpicker.spec.ts b/...omponents/clockpicker/Clockpicker.spec.js → ...omponents/clockpicker/Clockpicker.spec.ts
@@ -1,7 +1,9 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import BClockpicker from '@components/clockpicker/Clockpicker'
+import type { VueWrapper } from '@vue/test-utils'
+import BClockpicker from '@components/clockpicker/Clockpicker.vue'
 
-let wrapper
+let wrapper: VueWrapper<InstanceType<typeof BClockpicker>>
 
 describe('BClockpicker', () => {
     beforeEach(() => {
@@ -76,13 +78,13 @@ describe('BClockpicker', () => {
         const value = 5
 
         await wrapper.setData({ isSelectingHour: true })
-        wrapper.vm.onHoursChange = jest.fn()
+        wrapper.vm.onHoursChange = vi.fn()
         wrapper.vm.onClockInput(value)
         expect(wrapper.vm.hoursSelected).toBe(value)
         expect(wrapper.vm.onHoursChange).toHaveBeenCalledWith(value)
 
         await wrapper.setData({ isSelectingHour: false })
-        wrapper.vm.onMinutesChange = jest.fn()
+        wrapper.vm.onMinutesChange = vi.fn()
         wrapper.vm.onClockInput(value)
         expect(wrapper.vm.minutesSelected).toBe(value)
         expect(wrapper.vm.onMinutesChange).toHaveBeenCalledWith(value)
@@ -96,7 +98,7 @@ describe('BClockpicker', () => {
         expect(wrapper.vm.isSelectingHour).toBeFalsy()
     })
     it('react accordingly when changing meridien', async () => {
-        wrapper.vm.onMeridienChange = jest.fn()
+        wrapper.vm.onMeridienChange = vi.fn()
         await wrapper.setData({ meridienSelected: wrapper.vm.PM })
         wrapper.vm.onMeridienClick(wrapper.vm.PM)
         wrapper.vm.onMeridienClick(wrapper.vm.AM)

diff --git a/packages/buefy-next/src/components/clockpicker/Clockpicker.vue b/packages/buefy-next/src/components/clockpicker/Clockpicker.vue
@@ -127,7 +127,9 @@
                             :face-numbers="isSelectingHour ? hours : minutes"
                             :disabled-values="faceDisabledValues"
                             :double="isSelectingHour && isHourFormat24"
-                            :value="isSelectingHour ? hoursSelected : minutesSelected"
+                            :value="isSelectingHour
+                                ? hoursSelected ?? undefined
+                                : minutesSelected ?? undefined"
                             @input="onClockInput"
                             @change="onClockChange"
                         />
@@ -167,29 +169,27 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import TimepickerMixin from '../../utils/TimepickerMixin'
 import config from '../../utils/config'
 
-import Dropdown from '../dropdown/Dropdown.vue'
-import DropdownItem from '../dropdown/DropdownItem.vue'
-import Input from '../input/Input.vue'
-import Field from '../field/Field.vue'
-import Icon from '../icon/Icon.vue'
+import BDropdown from '../dropdown/Dropdown.vue'
+import BInput from '../input/Input.vue'
+
+import BClockpickerFace from './ClockpickerFace.vue'
 
-import ClockpickerFace from './ClockpickerFace.vue'
+type BDropdownInstance = InstanceType<typeof BDropdown>
 
 const outerPadding = 12
 
-export default {
+export default defineComponent({
     name: 'BClockpicker',
     components: {
-        [ClockpickerFace.name]: ClockpickerFace,
-        [Input.name]: Input,
-        [Field.name]: Field,
-        [Icon.name]: Icon,
-        [Dropdown.name]: Dropdown,
-        [DropdownItem.name]: DropdownItem
+        BClockpickerFace,
+        BInput,
+        BDropdown
     },
     mixins: [TimepickerMixin],
     props: {
@@ -265,7 +265,7 @@ export default {
         }
     },
     methods: {
-        onClockInput(value) {
+        onClockInput(value: number) {
             if (this.isSelectingHour) {
                 this.hoursSelected = value
                 this.onHoursChange(value)
@@ -274,12 +274,12 @@ export default {
                 this.onMinutesChange(value)
             }
         },
-        onClockChange(value) {
+        onClockChange() {
             if (this.autoSwitch && this.isSelectingHour) {
                 this.isSelectingHour = !this.isSelectingHour
             }
         },
-        onMeridienClick(value) {
+        onMeridienClick(value: string) {
             if (this.meridienSelected !== value) {
                 this.meridienSelected = value
                 this.onMeridienChange(value)
@@ -288,11 +288,11 @@ export default {
         /*
          * Avoid dropdown toggle when is already visible
          */
-        onInputClick(event) {
-            if (this.$refs.dropdown.isActive) {
+        onInputClick(event: MouseEvent) {
+            if ((this.$refs.dropdown as BDropdownInstance).isActive) {
                 event.stopPropagation()
             }
         }
     }
-}
+})
 </script>
diff --git a/...nents/clockpicker/ClockpickerFace.spec.js → ...nents/clockpicker/ClockpickerFace.spec.ts b/...nents/clockpicker/ClockpickerFace.spec.js → ...nents/clockpicker/ClockpickerFace.spec.ts
@@ -1,7 +1,9 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import BClockpickerFace from '@components/clockpicker/ClockpickerFace'
+import type { VueWrapper } from '@vue/test-utils'
+import BClockpickerFace from '@components/clockpicker/ClockpickerFace.vue'
 
-let wrapper
+let wrapper: VueWrapper<InstanceType<typeof BClockpickerFace>>
 const indicatorSize = 40
 const paddingInner = 5
 const pickerSize = 500
@@ -27,7 +29,7 @@ describe('BClockpickerFace', () => {
     })
 
     it('returns countPerRing correctly', async () => {
-        const count = wrapper.vm.max - wrapper.vm.min + 1
+        const count = wrapper.vm.max! - wrapper.vm.min! + 1
         expect(wrapper.vm.countPerRing).toEqual(count)
 
         await wrapper.setProps({ double: true })
@@ -63,17 +65,17 @@ describe('BClockpickerFace', () => {
     })
 
     it('calls disabledValues function when isDisabled is called', async () => {
-        await wrapper.setProps({ disabledValues: jest.fn() })
+        await wrapper.setProps({ disabledValues: vi.fn() })
         wrapper.vm.isDisabled(2)
         expect(wrapper.vm.disabledValues).toHaveBeenCalled()
     })
 
     it('manage onMouseDown', () => {
         const e = {
-            preventDefault: jest.fn()
+            preventDefault: vi.fn()
         }
-        wrapper.vm.onDragMove = jest.fn()
-        wrapper.vm.onMouseDown(e)
+        wrapper.vm.onDragMove = vi.fn()
+        wrapper.vm.onMouseDown(e as unknown as MouseEvent)
         expect(e.preventDefault).toHaveBeenCalled()
         expect(wrapper.vm.isDragging).toBeTruthy()
         expect(wrapper.vm.onDragMove).toHaveBeenCalled()
@@ -86,11 +88,11 @@ describe('BClockpickerFace', () => {
 
     it('manage onDragMove', async () => {
         const e = {
-            preventDefault: jest.fn()
+            preventDefault: vi.fn()
         }
         await wrapper.setData({ isDragging: true })
-        wrapper.vm.update = jest.fn()
-        wrapper.vm.onDragMove(e)
+        wrapper.vm.update = vi.fn()
+        wrapper.vm.onDragMove(e as unknown as MouseEvent)
         expect(e.preventDefault).toHaveBeenCalled()
         expect(wrapper.vm.update).toHaveBeenCalled()
     })