import { markRaw, nextTick } from 'vue' import { mount } from '@vue/test-utils' import { describe, expect, test } from 'vitest' import { Edit } from '@element-plus/icons-vue' import Steps from '../src/index.vue' import Step from '../src/item.vue' const _mount = (template: string) => mount( { components: { 'el-steps': Steps, 'el-step': Step, }, data() { return { iconEdit: markRaw(Edit), } }, template, }, { attachTo: document.body, global: { provide: { ElSteps: {}, }, }, } ) describe('Steps.vue', () => { test('render', () => { const wrapper = _mount(` `) expect(wrapper.findAll('.el-step').length).toBe(3) expect(wrapper.classes()).toContain('el-steps--horizontal') expect(wrapper.find('.el-step').classes()).toContain('is-horizontal') }) test('space', () => { const wrapper = _mount(` `) expect(wrapper.find('.el-step').attributes('style')).toMatch( 'flex-basis: 100px;' ) }) test('alignCenter', () => { const wrapper = _mount(` `) expect(wrapper.find('.el-step').classes()).toContain('is-center') }) test('direction', () => { const wrapper = _mount(` `) expect(wrapper.classes()).toContain('el-steps--vertical') expect(wrapper.find('.el-step').classes()).toContain('is-vertical') }) test('simple', () => { const wrapper = _mount(` `) expect(wrapper.classes()).toContain('el-steps--simple') expect(wrapper.find('is-center').exists()).toBe(false) expect(wrapper.find('is-vertical').exists()).toBe(false) }) test('active', async () => { const wrapper = _mount(` `) await nextTick() expect( wrapper.findAll('.el-step')[0].find('.el-step__head').classes() ).toContain('is-process') expect( wrapper.findAll('.el-step')[1].find('.el-step__head').classes() ).toContain('is-wait') expect( wrapper.findAll('.el-step')[2].find('.el-step__head').classes() ).toContain('is-wait') await wrapper.setProps({ active: 1 }) expect( wrapper.findAll('.el-step')[0].find('.el-step__head').classes() ).toContain('is-finish') expect( wrapper.findAll('.el-step')[1].find('.el-step__head').classes() ).toContain('is-process') expect( wrapper.findAll('.el-step')[2].find('.el-step__head').classes() ).toContain('is-wait') await wrapper.setProps({ active: 2 }) expect( wrapper.findAll('.el-step')[0].find('.el-step__head').classes() ).toContain('is-finish') expect( wrapper.findAll('.el-step')[1].find('.el-step__head').classes() ).toContain('is-finish') expect( wrapper.findAll('.el-step')[2].find('.el-step__head').classes() ).toContain('is-process') await wrapper.setProps({ active: 3 }) expect( wrapper.findAll('.el-step')[2].find('.el-step__head').classes() ).toContain('is-finish') }) test('process-status', async () => { const wrapper = _mount(` `) await nextTick() expect( wrapper.findAll('.el-step')[2].find('.el-step__head').classes() ).toContain('is-success') await wrapper.setProps({ processStatus: 'error' }) expect( wrapper.findAll('.el-step')[2].find('.el-step__head').classes() ).toContain('is-error') }) test('finish-status', async () => { const wrapper = _mount(` `) await nextTick() expect( wrapper.findAll('.el-step')[0].find('.el-step__head').classes() ).toContain('is-error') await wrapper.setProps({ finishStatus: 'success' }) expect( wrapper.findAll('.el-step')[0].find('.el-step__head').classes() ).toContain('is-success') }) test('step attribute', () => { const wrapper = _mount(` `) expect(wrapper.find('.el-step__head').classes()).toContain('is-wait') expect(wrapper.find('.el-step__title').text()).toBe('title') expect(wrapper.find('.el-step__description').text()).toBe('description') expect(wrapper.findComponent(Edit).exists()).toBe(true) }) test('step slot', () => { const wrapper = _mount(` `) expect(wrapper.find('.el-step__title').text()).toBe('A') expect(wrapper.find('.el-step__description').text()).toBe('B') }) })