chore(components): [el-breadcrumb] enhancement (#6713)

- Remove some unnecessary code for breadcrumb
- Update tests

packages/components/breadcrumb/__tests__/breadcrumb.spec.tsx

@@ -4,17 +4,22 @@ import Breadcrumb from '../src/breadcrumb.vue'
 import BreadcrumbItem from '../src/breadcrumb-item.vue'
 import type { VNode } from 'vue'
 
-const _mount = (render: () => VNode) =>
+const _mount = (render: () => VNode, $router = {}) =>
   mount(render, {
     global: {
       provide: {
         breadcrumb: {},
       },
+      config: {
+        globalProperties: {
+          $router,
+        },
+      },
     },
   })
 
 describe('Breadcrumb.vue', () => {
-  test('separator', () => {
+  it('separator', () => {
     const wrapper = _mount(() => (
       <Breadcrumb separator="?">
         <BreadcrumbItem>A</BreadcrumbItem>
@@ -23,7 +28,7 @@ describe('Breadcrumb.vue', () => {
     expect(wrapper.find('.el-breadcrumb__separator').text()).toBe('?')
   })
 
-  test('separatorIcon', () => {
+  it('separatorIcon', () => {
     const wrapper = _mount(() => (
       <Breadcrumb separatorIcon={Check}>
         <BreadcrumbItem>A</BreadcrumbItem>
@@ -33,7 +38,7 @@ describe('Breadcrumb.vue', () => {
     expect(wrapper.findComponent(Check).exists()).toBe(true)
   })
 
-  test('to', () => {
+  it('to', () => {
     const wrapper = _mount(() => (
       <Breadcrumb separator="?" separatorIcon={Check}>
         <BreadcrumbItem to="/index">A</BreadcrumbItem>
@@ -42,9 +47,58 @@ describe('Breadcrumb.vue', () => {
     expect(wrapper.find('.el-breadcrumb__inner').classes()).toContain('is-link')
   })
 
-  test('single', () => {
+  it('single', () => {
     const wrapper = _mount(() => <BreadcrumbItem>A</BreadcrumbItem>)
     expect(wrapper.find('.el-breadcrumb__inner').text()).toBe('A')
     expect(wrapper.find('.el-breadcrumb__separator').text()).toBe('')
   })
+
+  describe('BreadcrumbItem', () => {
+    it('should set the last item as current page', () => {
+      const wrapper = _mount(() => (
+        <Breadcrumb>
+          <BreadcrumbItem>A</BreadcrumbItem>
+          <BreadcrumbItem>B</BreadcrumbItem>
+        </Breadcrumb>
+      ))
+
+      const items = wrapper.findAllComponents(BreadcrumbItem)
+      expect(items.at(1)!.element.getAttribute('aria-current')).toBe('page')
+    })
+
+    it('click event', async () => {
+      const replace = jest.fn()
+      const push = jest.fn()
+      let wrapper = _mount(
+        () => (
+          <Breadcrumb>
+            <BreadcrumbItem to="/path">A</BreadcrumbItem>
+          </Breadcrumb>
+        ),
+        {
+          replace,
+          push,
+        }
+      )
+      await wrapper.find('.el-breadcrumb__inner').trigger('click')
+      expect(push).toHaveBeenCalled()
+      wrapper.unmount()
+      wrapper = _mount(
+        () => (
+          <Breadcrumb>
+            <BreadcrumbItem to="/path" replace>
+              A
+            </BreadcrumbItem>
+          </Breadcrumb>
+        ),
+        {
+          replace,
+          push,
+        }
+      )
+
+      await wrapper.find('.el-breadcrumb__inner').trigger('click')
+      expect(replace).toHaveBeenCalled()
+    })
+  })
 })

packages/components/breadcrumb/src/breadcrumb-item.vue

@@ -1,6 +1,11 @@
 <template>
   <span :class="ns.e('item')">
-    <span ref="link" :class="[ns.e('inner'), ns.is('link', !!to)]" role="link">
+    <span
+      ref="link"
+      :class="[ns.e('inner'), ns.is('link', !!to)]"
+      role="link"
+      @click="onClick"
+    >
       <slot />
     </span>
     <el-icon v-if="separatorIcon" :class="ns.e('separator')">
@@ -13,13 +18,14 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, ref, onMounted, getCurrentInstance } from 'vue'
+import { inject, ref, getCurrentInstance } from 'vue'
 import ElIcon from '@element-plus/components/icon'
 import { breadcrumbKey } from '@element-plus/tokens'
 import { useNamespace } from '@element-plus/hooks'
 import { breadcrumbItemProps } from './breadcrumb-item'
 
 import type { Router } from 'vue-router'
+import type { BreadcrumbProps } from './breadcrumb'
 
 defineOptions({
   name: 'ElBreadcrumbItem',
@@ -29,18 +35,16 @@ const props = defineProps(breadcrumbItemProps)
 
 const instance = getCurrentInstance()!
 const router = instance.appContext.config.globalProperties.$router as Router
-const parent = inject(breadcrumbKey, undefined)
+const breadcrumbInjection = inject(breadcrumbKey, {} as BreadcrumbProps)!
+
 const ns = useNamespace('breadcrumb')
 
-const { separator, separatorIcon } = parent ?? {}
+const { separator, separatorIcon } = breadcrumbInjection
 
 const link = ref<HTMLSpanElement>()
 
-onMounted(() => {
-  link.value!.setAttribute('role', 'link')
-  link.value!.addEventListener('click', () => {
-    if (!props.to || !router) return
-    props.replace ? router.replace(props.to) : router.push(props.to)
-  })
-})
+const onClick = () => {
+  if (!props.to || !router) return
+  props.replace ? router.replace(props.to) : router.push(props.to)
+}
 </script>