TypeScript Rollout Tier 5 - Navbar

packages/buefy-next/rollup.config.mjs

@@ -50,7 +50,6 @@ const JS_COMPONENTS = [
     'menu',
     'message',
     'modal',
-    'navbar',
     'notification',
     'numberinput',
     'pagination',

packages/buefy-next/src/components/navbar/NavBar.spec.js → packages/buefy-next/src/components/navbar/NavBar.spec.ts

@@ -1,8 +1,10 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
-import BNavbar from '@components/navbar/Navbar'
+import type { VueWrapper } from '@vue/test-utils'
+import BNavbar from '@components/navbar/Navbar.vue'
 
 describe('BNavbar', () => {
-    let wrapper
+    let wrapper: VueWrapper<InstanceType<typeof BNavbar>>
     beforeEach(() => {
         wrapper = mount(BNavbar)
     })
@@ -46,7 +48,7 @@ describe('BNavbar', () => {
     })
 
     it('manage closing the menu as expected', async () => {
-        wrapper.vm.emitUpdateParentEvent = jest.fn()
+        wrapper.vm.emitUpdateParentEvent = vi.fn()
 
         await wrapper.setProps({
             modelValue: true,
@@ -65,7 +67,7 @@ describe('BNavbar', () => {
     })
 
     it('set body classes as expected', async () => {
-        wrapper.vm.setBodyClass = jest.fn(() => wrapper.vm.setBodyClass)
+        wrapper.vm.setBodyClass = vi.fn(() => wrapper.vm.setBodyClass)
 
         await wrapper.setProps({ fixedTop: true })
         expect(wrapper.vm.setBodyClass).toHaveBeenCalled()

packages/buefy-next/src/components/navbar/NavBarBurger.spec.js → packages/buefy-next/src/components/navbar/NavBarBurger.spec.ts

@@ -1,8 +1,10 @@
+import { beforeEach, describe, expect, it } from 'vitest'
 import { shallowMount, mount } from '@vue/test-utils'
-import BNavbarBurger from '@components/navbar/NavbarBurger'
+import type { VueWrapper } from '@vue/test-utils'
+import BNavbarBurger from '@components/navbar/NavbarBurger.vue'
 
 describe('BNavbarBurger', () => {
-    let wrapper
+    let wrapper: VueWrapper<InstanceType<typeof BNavbarBurger>>
     beforeEach(() => {
         wrapper = shallowMount(BNavbarBurger)
     })

packages/buefy-next/src/components/navbar/NavBarItem.spec.js → packages/buefy-next/src/components/navbar/NavBarItem.spec.ts

@@ -1,19 +1,25 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent } from 'vue'
 import { mount, shallowMount } from '@vue/test-utils'
-import BNavbarItem from '@components/navbar/NavbarItem'
+import type { VueWrapper } from '@vue/test-utils'
+import BNavbarItem from '@components/navbar/NavbarItem.vue'
 
-let wrapper
+let wrapper: VueWrapper<InstanceType<typeof BNavbarItem>>
 
-const stubBNavBar = {
+const stubBNavBar = defineComponent({
     data() {
         return {
             _isNavBar: true
         }
     },
+    methods: {
+        closeMenu: vi.fn()
+    },
     template: `
         <div>
             <slot />
         </div>`
-}
+})
 
 describe('BNavbarItem', () => {
     const tag = 'div'
@@ -36,7 +42,7 @@ describe('BNavbarItem', () => {
     })
 
     it('emit event from tag and out', async () => {
-        const testStub = jest.fn()
+        const testStub = vi.fn()
 
         const emitWrap = shallowMount(BNavbarItem, {
             props: {
@@ -60,11 +66,12 @@ describe('BNavbarItem', () => {
                 default: BNavbarItem
             }
         }).findComponent(BNavbarItem)
-        wrapper.vm.$parent.closeMenu = jest.fn()
+        stubBNavBar.methods!.closeMenu.mockClear()
         const event = new KeyboardEvent('keyup', { key: 'Escape' })
         wrapper.vm.keyPress({})
         wrapper.vm.keyPress(event)
-        expect(wrapper.vm.$parent.closeMenu).toHaveBeenCalledTimes(1)
+        expect(stubBNavBar.methods!.closeMenu).toHaveBeenCalledTimes(1)
+        stubBNavBar.methods!.closeMenu.mockClear()
     })
 
     it('manage click as expected', () => {
@@ -73,12 +80,13 @@ describe('BNavbarItem', () => {
                 default: BNavbarItem
             }
         }).findComponent(BNavbarItem)
-        wrapper.vm.$parent.closeMenu = jest.fn()
+        stubBNavBar.methods!.closeMenu.mockClear()
         const event = new MouseEvent('click')
         wrapper.vm.handleClickEvent({
             ...event,
             target: { localName: 'a' }
         })
-        expect(wrapper.vm.$parent.closeMenu).toHaveBeenCalledTimes(1)
+        expect(stubBNavBar.methods!.closeMenu).toHaveBeenCalledTimes(1)
+        stubBNavBar.methods!.closeMenu.mockClear()
     })
 })

packages/buefy-next/src/components/navbar/Navbar.vue

@@ -1,13 +1,16 @@
-<script>
+<script lang="ts">
 import {
+    defineComponent,
     h as createElement,
     resolveComponent,
     resolveDirective,
     withDirectives
 } from 'vue'
+import type { PropType, StyleValue, VNode } from 'vue'
 
 import NavbarBurger from './NavbarBurger.vue'
 import clickOutside from '../../directives/clickOutside'
+import type { VueClassAttribute } from '../../utils/config'
 
 const FIXED_TOP_CLASS = 'is-fixed-top'
 const BODY_FIXED_TOP_CLASS = 'has-navbar-fixed-top'
@@ -17,9 +20,9 @@ const BODY_FIXED_BOTTOM_CLASS = 'has-navbar-fixed-bottom'
 const BODY_SPACED_FIXED_BOTTOM_CLASS = 'has-spaced-navbar-fixed-bottom'
 const BODY_CENTERED_CLASS = 'has-navbar-centered'
 
-const isFilled = (str) => !!str
+const isFilled = (str?: StyleValue) => !!str
 
-export default {
+export default defineComponent({
     name: 'BNavbar',
     components: {
         NavbarBurger
@@ -28,7 +31,7 @@ export default {
         clickOutside
     },
     props: {
-        type: [String, Object],
+        type: [String, Object] as PropType<VueClassAttribute>,
         transparent: {
             type: Boolean,
             default: false
@@ -50,7 +53,7 @@ export default {
             default: false
         },
         wrapperClass: {
-            type: [String, Array, Object]
+            type: [String, Array, Object] as PropType<StyleValue>
         },
         closeOnClick: {
             type: Boolean,
@@ -63,7 +66,10 @@ export default {
         spaced: Boolean,
         shadow: Boolean
     },
-    emits: ['update:modelValue'],
+    emits: {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        'update:modelValue': (_value: boolean) => true
+    },
     data() {
         return {
             internalIsActive: this.modelValue,
@@ -118,12 +124,12 @@ export default {
         emitUpdateParentEvent() {
             this.$emit('update:modelValue', this.internalIsActive)
         },
-        setBodyClass(className) {
+        setBodyClass(className: string) {
             if (typeof window !== 'undefined') {
                 document.body.classList.add(className)
             }
         },
-        removeBodyClass(className) {
+        removeBodyClass(className: string) {
             if (typeof window !== 'undefined') {
                 document.body.classList.remove(className)
             }
@@ -153,7 +159,7 @@ export default {
 
             return this.genNavbarSlots([navWrapper])
         },
-        genNavbarSlots(slots) {
+        genNavbarSlots(slots: VNode[]) {
             const vnode = createElement(
                 'nav',
                 {
@@ -184,7 +190,7 @@ export default {
                     {
                         isOpened: this.isOpened,
                         onClick: this.toggleActive,
-                        onKeyup: (event) => {
+                        onKeyup: (event: KeyboardEvent) => {
                             if (event.keyCode !== 13) return
                             this.toggleActive()
                         }
@@ -193,7 +199,7 @@ export default {
 
                 const hasBurgerSlot = !!this.$slots.burger
                 return hasBurgerSlot
-                    ? this.$slots.burger({
+                    ? this.$slots.burger!({
                         isOpened: this.isOpened,
                         toggleActive: this.toggleActive
                     })
@@ -210,16 +216,16 @@ export default {
                 ]
             )
         },
-        genMenuPosition(positionName) {
+        genMenuPosition(positionName: 'start' | 'end') {
             return createElement(
                 'div',
                 { class: `navbar-${positionName}` },
                 this.$slots[positionName] != null
-                    ? this.$slots[positionName]()
+                    ? this.$slots[positionName]!()
                     : []
             )
         },
-        setBodyFixedTopClass(isSet) {
+        setBodyFixedTopClass(isSet: boolean) {
             this.checkIfFixedPropertiesAreColliding()
             if (isSet) {
                 // TODO Apply only one of the classes once PR is merged in Bulma:
@@ -231,7 +237,7 @@ export default {
                 this.removeBodyClass(BODY_SPACED_FIXED_TOP_CLASS)
             }
         },
-        setBodyFixedBottomClass(isSet) {
+        setBodyFixedBottomClass(isSet: boolean) {
             this.checkIfFixedPropertiesAreColliding()
             if (isSet) {
                 // TODO Apply only one of the classes once PR is merged in Bulma:
@@ -264,5 +270,5 @@ export default {
     render() {
         return this.genNavbar()
     }
-}
+})
 </script>

packages/buefy-next/src/components/navbar/NavbarBurger.vue

@@ -14,14 +14,16 @@
     </a>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
     name: 'NavbarBurger',
     props: {
         isOpened: {
             type: Boolean,
             default: false
         }
     }
-}
+})
 </script>

packages/buefy-next/src/components/navbar/NavbarDropdown.spec.js → packages/buefy-next/src/components/navbar/NavbarDropdown.spec.ts

@@ -1,7 +1,9 @@
+import { beforeEach, describe, expect, it } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import BNavbarDropdown from '@components/navbar/NavbarDropdown'
+import type { VueWrapper } from '@vue/test-utils'
+import BNavbarDropdown from '@components/navbar/NavbarDropdown.vue'
 
-let wrapper
+let wrapper: VueWrapper<InstanceType<typeof BNavbarDropdown>>
 
 describe('BNavbarDropdown', () => {
     beforeEach(() => {

packages/buefy-next/src/components/navbar/NavbarDropdown.vue

@@ -40,11 +40,13 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import clickOutside from '../../directives/clickOutside'
 import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
 
-export default {
+export default defineComponent({
     name: 'BNavbarDropdown',
     directives: {
         clickOutside
@@ -67,7 +69,10 @@ export default {
             default: 'a'
         }
     },
-    emits: ['active-change'],
+    emits: {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        'active-change': (_active: boolean) => true
+    },
     data() {
         return {
             newActive: this.active,
@@ -91,7 +96,7 @@ export default {
         showMenu() {
             this.newActive = true
         },
-        /**
+        /*
         * See naming convetion of navbaritem
         */
         closeMenu() {
@@ -106,5 +111,5 @@ export default {
             }
         }
     }
-}
+})
 </script>