一、初步调试
在/build/build-entry.js中将组件加入白名单
网络异常，图片无法展示
|
npm run dev
网络异常，图片无法展示
|
编译没出问题
浏览器打开element.eleme.cn/#/zh-CN/com…组件Example没有出来 发现有错误
网络异常，图片无法展示
|
断点调试一下
网络异常，图片无法展示
|
简单改一下
网络异常，图片无法展示
|
居然就OK了
网络异常，图片无法展示
|
哈哈 奥利给！！！ 可以PR了
二、修改文件结构
调整后的结构 这个地方就不仔细说了。
网络异常，图片无法展示
|
三、VTU测试
接下来我们来重新编写测试Case，换用Vue3后需要使用vue-test-utils-next进行单元测试。 其实从写法上讲比原有的测试方案要简便很多。
参考 /unit/mocks/timeline.spec.js下面的测试用例
网络异常，图片无法展示
|
运行测试
jest packages/timeline --watch
测试代码如下
import Timeline from '../Timeline.vue' import { mount } from '@vue/test-utils' describe('Timeline.vue', () => { it('should slot works', () => { const wrapper = mount(Timeline, { slots: { default: [`A`, `B`] } }) expect(wrapper.find('.el-timeline').text()).toBe('AB') }) it('should props reverse works', () => { const wrapper = mount(Timeline, { props: { reverse: true }, slots: { default: [`A`, `B`] } }) expect(wrapper.find('.el-timeline').text()).toBe('BA') }) it('should slot null', () => { const wrapper = mount(Timeline, {}) expect(wrapper.find('.el-timeline').text()).toBe('') }) it('should slot empty array', () => { const wrapper = mount(Timeline, { slots: { default: [] } }) expect(wrapper.find('.el-timeline').text()).toBe('') }) })
四、修改逻辑
实验中发下一个小bug 就是逆序属性修改后插槽中的元素没有响应重新排序。
经过调查发现这个是由于Vue的增加了Fragment节点造成的。也就是说如果插槽中的如果放入过个元素会增加Fragment节点。
这个本来是一个新特性。但是在这里需要增加相应的逻辑
修改后的结果
网络异常，图片无法展示
|
五、创建PR
网络异常，图片无法展示
|
相关ISSUE添加评论github.com/kkbjs/eleme…
网络异常，图片无法展示
|
这样PR上面会有相关的显示
网络异常，图片无法展示
|
OK大功告成
