quasar 2.15.2 → 2.15.4

package/src/components/breadcrumbs/QBreadcrumbsEl.test.js

@@ -1,133 +1,563 @@
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { describe, test, expect, vi } from 'vitest'
 
 import QBreadcrumbsEl from './QBreadcrumbsEl.js'
+import { getRouter } from 'testing/runtime/router.js'
 
 describe('[QBreadcrumbsEl API]', () => {
   describe('[Props]', () => {
-    describe('[(prop)label]', () => {
-      test('should render a label inside the breadcrumb element', () => {
-        const label = 'Breadcrumb label'
+    describe('[(prop)to]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbsEl.props.to).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const testRoute = '/home/dashboard'
+        const router = await getRouter(testRoute)
+
         const wrapper = mount(QBreadcrumbsEl, {
-          props: { label }
+          global: {
+            plugins: [ router ]
+          }
         })
 
         expect(
-          wrapper.get('.q-breadcrumbs__el')
-            .text()
-        ).toContain(label)
+          wrapper.find('a').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ to: testRoute })
+        await flushPromises()
+
+        expect(
+          wrapper.get('a').attributes('href')
+        ).toBe(testRoute)
+
+        const routerFn = vi.spyOn(router, 'push')
+
+        await wrapper.trigger('click')
+        await flushPromises()
+
+        expect(
+          router.currentRoute.value.path
+        ).toBe(testRoute)
+
+        expect(routerFn).toHaveBeenCalledTimes(1)
+        expect(routerFn).toHaveBeenCalledWith(testRoute)
+      })
+
+      test('type Object has effect', async () => {
+        const testRoute = '/my-route-name'
+        const propVal = { path: testRoute }
+        const router = await getRouter(testRoute)
+
+        const wrapper = mount(QBreadcrumbsEl, {
+          global: {
+            plugins: [ router ]
+          }
+        })
+
+        expect(
+          wrapper.find('a').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ to: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('a').attributes('href')
+        ).toBe(testRoute)
+
+        const routerFn = vi.spyOn(router, 'push')
+
+        await wrapper.trigger('click')
+        await flushPromises()
+
+        expect(
+          router.currentRoute.value.path
+        ).toBe(testRoute)
+
+        expect(routerFn).toHaveBeenCalledTimes(1)
+        expect(routerFn).toHaveBeenCalledWith(propVal)
       })
     })
 
-    describe('[(prop)icon]', () => {
-      test('should render on the left of the breadcrumb element', () => {
-        const icon = 'home'
+    describe('[(prop)exact]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbsEl.props.exact).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const activeClass = 'it-is-active'
+        const exactActiveClass = 'it-is-exact-active'
+        const router = await getRouter({ '/route': 'subRoute' })
+
         const wrapper = mount(QBreadcrumbsEl, {
-          props: { icon }
+          props: {
+            exact: true,
+            activeClass,
+            exactActiveClass
+          },
+          global: {
+            plugins: [ router ]
+          }
         })
 
         expect(
-          wrapper.get('.q-breadcrumbs__el')
-            .get('.q-icon')
-            .text()
-        ).toContain(icon)
+          wrapper.find('a').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ to: '/route/subRoute' })
+        await flushPromises()
+
+        expect(
+          wrapper.get('a').attributes('href')
+        ).toBe('/route/subRoute')
+
+        expect(
+          wrapper.get('a').classes()
+        ).not.toContain(
+          expect.$any([ activeClass, exactActiveClass ])
+        )
+
+        await router.push('/route')
+
+        expect(
+          router.currentRoute.value.path
+        ).toBe('/route')
+
+        expect(
+          wrapper.get('a').classes()
+        ).not.toContain(
+          expect.$any([ activeClass, exactActiveClass ])
+        )
+
+        await router.push('/route/subRoute')
+
+        const cls = wrapper.get('a').classes()
+
+        expect(cls).toContain(activeClass)
+        expect(cls).toContain(exactActiveClass)
       })
     })
 
-    describe('[(prop)tag]', () => {
-      test('should render a custom tag', () => {
-        const tag = 'a'
+    describe('[(prop)replace]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbsEl.props.replace).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const testRoute = '/test-route'
+        const router = await getRouter(testRoute)
+
         const wrapper = mount(QBreadcrumbsEl, {
-          props: { tag }
+          props: {
+            replace: true
+          },
+          global: {
+            plugins: [ router ]
+          }
         })
 
         expect(
-          wrapper.get('.q-breadcrumbs__el')
-            .element.tagName
-        ).toBe(tag.toUpperCase())
+          wrapper.find('a').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ to: testRoute })
+        await flushPromises()
+
+        expect(
+          wrapper.get('a').attributes('href')
+        ).toBe(testRoute)
+
+        const routerFn = vi.spyOn(router, 'replace')
+
+        await wrapper.trigger('click')
+        await flushPromises()
+
+        expect(
+          router.currentRoute.value.path
+        ).toBe(testRoute)
+
+        expect(routerFn).toHaveBeenCalledTimes(1)
+        expect(routerFn).toHaveBeenCalledWith(testRoute)
       })
     })
 
-    describe.todo('(prop): to', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)active-class]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbsEl.props.activeClass).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const activeClass = 'it-is-active'
+        const router = await getRouter({ '/route': 'subRoute' })
+
+        const wrapper = mount(QBreadcrumbsEl, {
+          props: {
+            activeClass
+          },
+          global: {
+            plugins: [ router ]
+          }
+        })
+
+        expect(
+          wrapper.find('a').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ to: '/route' })
+        await flushPromises()
+
+        expect(
+          wrapper.get('a').attributes('href')
+        ).toBe('/route')
+
+        expect(
+          wrapper.get('a').classes()
+        ).not.toContain(activeClass)
+
+        await router.push('/route')
+
+        expect(
+          router.currentRoute.value.path
+        ).toBe('/route')
+
+        expect(
+          wrapper.get('a').classes()
+        ).toContain(activeClass)
+
+        await router.push('/route/subRoute')
+
+        expect(
+          wrapper.get('a').classes()
+        ).toContain(activeClass)
       })
     })
 
-    describe.todo('(prop): exact', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)exact-active-class]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbsEl.props.exactActiveClass).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const exactActiveClass = 'it-is-exact-active'
+        const router = await getRouter({
+          '/route': { subRoute: 'other' }
+        })
+
+        const wrapper = mount(QBreadcrumbsEl, {
+          props: {
+            exact: true,
+            exactActiveClass
+          },
+          global: {
+            plugins: [ router ]
+          }
+        })
+
+        expect(
+          wrapper.find('a').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ to: '/route/subRoute' })
+        await flushPromises()
+
+        expect(
+          wrapper.get('a').attributes('href')
+        ).toBe('/route/subRoute')
+
+        expect(
+          wrapper.get('a').classes()
+        ).not.toContain(exactActiveClass)
+
+        await router.push('/route')
+
+        expect(
+          router.currentRoute.value.path
+        ).toBe('/route')
+
+        expect(
+          wrapper.get('a').classes()
+        ).not.toContain(exactActiveClass)
+
+        await router.push('/route/subRoute')
+
+        expect(
+          wrapper.get('a').classes()
+        ).toContain(exactActiveClass)
+
+        await router.push('/route/subRoute/other')
+
+        expect(
+          wrapper.get('a').classes()
+        ).not.toContain(exactActiveClass)
       })
     })
 
-    describe.todo('(prop): replace', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)href]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbsEl.props.href).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'https://quasar.dev'
+        const wrapper = mount(QBreadcrumbsEl)
+
+        expect(
+          wrapper.find('a').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ href: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('a').attributes('href')
+        ).toBe(propVal)
       })
     })
 
-    describe.todo('(prop): active-class', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)target]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbsEl.props.target).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = '_blank'
+        const href = 'https://quasar.dev'
+        const wrapper = mount(QBreadcrumbsEl, {
+          props: {
+            target: propVal
+          }
+        })
+
+        expect(
+          wrapper.find('a').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ href })
+        await flushPromises()
+
+        const link = wrapper.get('a')
+
+        expect(
+          link.attributes('href')
+        ).toBe(href)
+
+        expect(
+          link.attributes('target')
+        ).toBe(propVal)
       })
     })
 
-    describe.todo('(prop): exact-active-class', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)disable]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbsEl.props.disable).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const testRoute = '/home'
+        const router = await getRouter(testRoute)
+
+        const wrapper = mount(QBreadcrumbsEl, {
+          props: {
+            to: testRoute
+          },
+          global: {
+            plugins: [ router ]
+          }
+        })
+
+        expect(
+          wrapper.find('a').exists()
+        ).toBe(true)
+
+        await wrapper.setProps({ disable: true })
+        await flushPromises()
+
+        expect(
+          wrapper.find('a').exists()
+        ).toBe(false)
+
+        await wrapper.trigger('click')
+        await flushPromises()
+
+        expect(
+          router.currentRoute.value.path
+        ).not.toBe(testRoute)
       })
     })
 
-    describe.todo('(prop): href', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)label]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbsEl.props.label).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'Home'
+        const wrapper = mount(QBreadcrumbsEl)
+
+        expect(wrapper.text()).not.toContain(propVal)
+
+        await wrapper.setProps({ label: propVal })
+        await flushPromises()
+
+        expect(wrapper.text()).toContain(propVal)
       })
     })
 
-    describe.todo('(prop): target', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)icon]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbsEl.props.icon).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'map'
+        const wrapper = mount(QBreadcrumbsEl)
+
+        expect(
+          wrapper.find('.q-icon').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ icon: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-icon').text()
+        ).toContain(propVal)
       })
     })
 
-    describe.todo('(prop): disable', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)tag]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbsEl.props.tag).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'div'
+        const wrapper = mount(QBreadcrumbsEl)
+
+        expect(
+          // default is 'span'
+          wrapper.element.tagName
+        ).not.toBe(propVal.toUpperCase())
+
+        await wrapper.setProps({ tag: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.element.tagName
+        ).toBe(propVal.toUpperCase())
       })
     })
   })
 
   describe('[Slots]', () => {
     describe('[(slot)default]', () => {
-      test('should render the default slot', () => {
-        const label = 'Breadcrumb label'
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
         const wrapper = mount(QBreadcrumbsEl, {
-          slots: { default: label }
+          slots: {
+            default: () => slotContent
+          }
         })
 
-        expect(
-          wrapper.get('.q-breadcrumbs__el')
-            .text()
-        ).toContain(label)
+        expect(wrapper.html()).toContain(slotContent)
       })
     })
   })
 
   describe('[Events]', () => {
     describe('[(event)click]', () => {
-      test('should emit "click" event when clicked', () => {
-        const fn = vi.fn()
+      test('is defined correctly', () => {
+        expect(
+          QBreadcrumbsEl.emits?.includes('click')
+          ^ (QBreadcrumbsEl.props?.onClick !== void 0)
+        ).toBe(1)
+      })
+
+      test('is emitting without router', async () => {
+        const wrapper = mount(QBreadcrumbsEl)
+
+        await wrapper.trigger('click')
+
+        const eventList = wrapper.emitted()
+        expect(eventList).toHaveProperty('click')
+        expect(eventList.click).toHaveLength(1)
+
+        const [ evt, go ] = eventList.click[ 0 ]
+        expect(evt).toBeInstanceOf(Event)
+        expect(go).not.toBeDefined()
+      })
+
+      test('is emitting with router', async () => {
+        const testRoute = '/home/dashboard'
+        const router = await getRouter(testRoute)
+
         const wrapper = mount(QBreadcrumbsEl, {
           props: {
-            label: 'clicked breadcrumb',
-            onClick: fn
+            to: testRoute
+          },
+          global: {
+            plugins: [ router ]
           }
         })
 
-        wrapper.get('.q-breadcrumbs__el')
-          .trigger('click')
+        await wrapper.trigger('click')
+
+        const eventList = wrapper.emitted()
+        expect(eventList).toHaveProperty('click')
+        expect(eventList.click).toHaveLength(1)
+
+        const [ evt, go ] = eventList.click[ 0 ]
+        expect(evt).toBeInstanceOf(Event)
+        expect(go).toBeTypeOf('function')
+      })
+
+      test('does not navigates when prevented', async () => {
+        const testRoute = '/home/dashboard'
+        const router = await getRouter(testRoute)
+
+        const wrapper = mount(QBreadcrumbsEl, {
+          props: {
+            to: testRoute,
+            onClick: e => e.preventDefault()
+          },
+          global: {
+            plugins: [ router ]
+          }
+        })
 
-        expect(fn).toHaveBeenCalledTimes(1)
+        await wrapper.trigger('click')
+        await flushPromises()
+
+        expect(
+          router.currentRoute.value.path
+        ).not.toBe(testRoute)
+      })
+
+      test('can manually navigate by calling go()', async () => {
+        const testRoute = '/home/dashboard'
+        const router = await getRouter(testRoute)
+
+        const wrapper = mount(QBreadcrumbsEl, {
+          props: {
+            to: testRoute,
+            onClick: (e, go) => {
+              e.preventDefault()
+              go()
+            }
+          },
+          global: {
+            plugins: [ router ]
+          }
+        })
+
+        await wrapper.trigger('click')
+        await flushPromises()
+
+        expect(
+          router.currentRoute.value.path
+        ).toBe(testRoute)
       })
     })
   })

package/src/components/btn/QBtn.js

@@ -7,10 +7,10 @@ import Ripple from '../../directives/ripple/Ripple.js'
 
 import useBtn, { useBtnProps } from './use-btn.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hMergeSlot } from '../../utils/private/render.js'
-import { stop, prevent, stopAndPrevent, listenOpts } from '../../utils/event.js'
-import { isKeyCode } from '../../utils/private/key-composition.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hMergeSlot } from '../../utils/private.render/render.js'
+import { stop, prevent, stopAndPrevent, listenOpts } from '../../utils/event/event.js'
+import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
 
 const { passiveCapture } = listenOpts
 
@@ -289,7 +289,13 @@ export default createComponent({
     })
 
     // expose public methods
-    Object.assign(proxy, { click: onClick })
+    Object.assign(proxy, {
+      click: e => {
+        if (isActionable.value === true) {
+          onClick(e)
+        }
+      }
+    })
 
     return () => {
       let inner = []

package/src/components/btn/QBtn.json

@@ -42,7 +42,8 @@
         "evt": {
           "extends": "evt"
         }
-      }
+      },
+      "returns": null
     }
   },