quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
514 lines (401 loc) • 12.6 kB
JavaScript
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)to]', () => {
test('type String has effect', async () => {
const testRoute = '/home/dashboard'
const router = await getRouter(testRoute)
const wrapper = mount(QBreadcrumbsEl, {
global: {
plugins: [ router ]
}
})
expect(
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)exact]', () => {
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: {
exact: true,
activeClass,
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(
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)replace]', () => {
test('type Boolean has effect', async () => {
const testRoute = '/test-route'
const router = await getRouter(testRoute)
const wrapper = mount(QBreadcrumbsEl, {
props: {
replace: true
},
global: {
plugins: [ router ]
}
})
expect(
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('[(prop)active-class]', () => {
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('[(prop)exact-active-class]', () => {
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('[(prop)href]', () => {
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('[(prop)target]', () => {
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('[(prop)disable]', () => {
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('[(prop)label]', () => {
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('[(prop)icon]', () => {
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('[(prop)tag]', () => {
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('renders the content', () => {
const slotContent = 'some-slot-content'
const wrapper = mount(QBreadcrumbsEl, {
slots: {
default: () => slotContent
}
})
expect(wrapper.html()).toContain(slotContent)
})
})
})
describe('[Events]', () => {
describe('[(event)click]', () => {
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: {
to: testRoute
},
global: {
plugins: [ router ]
}
})
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 ]
}
})
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)
})
})
})
})