securityHtml/tests/unit/components/Breadcrumb.spec.js

import { mount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import Breadcrumb from '@/components/Breadcrumb/index.vue'

const localVue = createLocalVue()
localVue.use(VueRouter)
localVue.use(ElementUI)

const routes = [{
        path: '/',
        name: 'home',
        children: [{
            path: 'dashboard',
            name: 'dashboard'
        }]
    },
    {
        path: '/menu',
        name: 'menu',
        children: [{
            path: 'menu1',
            name: 'menu1',
            meta: { title: 'menu1' },
            children: [{
                    path: 'menu1-1',
                    name: 'menu1-1',
                    meta: { title: 'menu1-1' }
                },
                {
                    path: 'menu1-2',
                    name: 'menu1-2',
                    redirect: 'noredirect',
                    meta: { title: 'menu1-2' },
                    children: [{
                            path: 'menu1-2-1',
                            name: 'menu1-2-1',
                            meta: { title: 'menu1-2-1' }
                        },
                        {
                            path: 'menu1-2-2',
                            name: 'menu1-2-2'
                        }
                    ]
                }
            ]
        }]
    }
]

const router = new VueRouter({
    routes
})

describe('Breadcrumb.vue', () => {
    const wrapper = mount(Breadcrumb, {
        localVue,
        router
    })
    it('dashboard', () => {
        router.push('/dashboard')
        const len = wrapper.findAll('.el-breadcrumb__inner').length
        expect(len).toBe(1)
    })
    it('normal route', () => {
        router.push('/menu/menu1')
        const len = wrapper.findAll('.el-breadcrumb__inner').length
        expect(len).toBe(2)
    })
    it('nested route', () => {
        router.push('/menu/menu1/menu1-2/menu1-2-1')
        const len = wrapper.findAll('.el-breadcrumb__inner').length
        expect(len).toBe(4)
    })
    it('no meta.title', () => {
            router.push('/menu/menu1/menu1-2/menu1-2-2')
            const len = wrapper.findAll('.el-breadcrumb__inner').length
            expect(len).toBe(3)
        })
        // it('click link', () => {
        //   router.push('/menu/menu1/menu1-2/menu1-2-2')
        //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
        //   const second = breadcrumbArray.at(1)
        //   console.log(breadcrumbArray)
        //   const href = second.find('a').attributes().href
        //   expect(href).toBe('#/menu/menu1')
        // })
        // it('noRedirect', () => {
        //   router.push('/menu/menu1/menu1-2/menu1-2-1')
        //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
        //   const redirectBreadcrumb = breadcrumbArray.at(2)
        //   expect(redirectBreadcrumb.contains('a')).toBe(false)
        // })
    it('last breadcrumb', () => {
        router.push('/menu/menu1/menu1-2/menu1-2-1')
        const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
        const redirectBreadcrumb = breadcrumbArray.at(3)
        expect(redirectBreadcrumb.contains('a')).toBe(false)
    })
})