123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249 |
- import { markRaw, nextTick, ref } from 'vue'
- import { mount } from '@vue/test-utils'
- import { describe, expect, it, test } from 'vitest'
- import { Loading, Search } from '@element-plus/icons-vue'
- import Button from '../src/button.vue'
- import ButtonGroup from '../src/button-group.vue'
- import type { ComponentSize } from '@element-plus/constants'
- const AXIOM = 'Rem is the best girl'
- describe('Button.vue', () => {
- it('create', () => {
- const wrapper = mount(() => <Button type="primary" />)
- expect(wrapper.classes()).toContain('el-button--primary')
- })
- it('icon', () => {
- const wrapper = mount(() => <Button icon={markRaw(Search)} />)
- expect(wrapper.findComponent(Search).exists()).toBeTruthy()
- })
- it('nativeType', () => {
- const wrapper = mount(() => <Button nativeType="submit" />)
- expect(wrapper.attributes('type')).toBe('submit')
- })
- it('loading', () => {
- const wrapper = mount(() => <Button loading />)
- expect(wrapper.classes()).toContain('is-loading')
- expect(wrapper.findComponent(Loading).exists()).toBeTruthy()
- })
- it('size', () => {
- const wrapper = mount(() => <Button size="large" />)
- expect(wrapper.classes()).toContain('el-button--large')
- })
- it('plain', () => {
- const wrapper = mount(() => <Button plain />)
- expect(wrapper.classes()).toContain('is-plain')
- })
- it('round', () => {
- const wrapper = mount(() => <Button round />)
- expect(wrapper.classes()).toContain('is-round')
- })
- it('circle', () => {
- const wrapper = mount(() => <Button circle />)
- expect(wrapper.classes()).toContain('is-circle')
- })
- it('text', async () => {
- const bg = ref(false)
- const wrapper = mount(() => <Button text bg={bg.value} />)
- expect(wrapper.classes()).toContain('is-text')
- bg.value = true
- await nextTick()
- expect(wrapper.classes()).toContain('is-has-bg')
- })
- it('link', async () => {
- const wrapper = mount(() => <Button link />)
- expect(wrapper.classes()).toContain('is-link')
- })
- test('render text', () => {
- const wrapper = mount(() => (
- <Button
- v-slots={{
- default: () => AXIOM,
- }}
- />
- ))
- expect(wrapper.text()).toEqual(AXIOM)
- })
- test('handle click', async () => {
- const wrapper = mount(() => (
- <Button
- v-slots={{
- default: () => AXIOM,
- }}
- />
- ))
- await wrapper.trigger('click')
- expect(wrapper.emitted()).toBeDefined()
- })
- test('handle click inside', async () => {
- const wrapper = mount(() => (
- <Button
- v-slots={{
- default: () => <span class="inner-slot"></span>,
- }}
- />
- ))
- wrapper.find('.inner-slot').trigger('click')
- expect(wrapper.emitted()).toBeDefined()
- })
- test('loading implies disabled', async () => {
- const wrapper = mount(() => (
- <Button
- v-slots={{
- default: () => AXIOM,
- }}
- loading
- />
- ))
- await wrapper.trigger('click')
- expect(wrapper.emitted('click')).toBeUndefined()
- })
- it('disabled', async () => {
- const wrapper = mount(() => <Button disabled />)
- expect(wrapper.classes()).toContain('is-disabled')
- await wrapper.trigger('click')
- expect(wrapper.emitted('click')).toBeUndefined()
- })
- it('loading icon', () => {
- const wrapper = mount(() => (
- <Button loadingIcon={markRaw(Search)} loading />
- ))
- expect(wrapper.findComponent(Search).exists()).toBeTruthy()
- })
- it('loading slot', () => {
- const wrapper = mount({
- setup: () => () =>
- (
- <Button
- v-slots={{ loading: () => <span class="custom-loading">111</span> }}
- loading={true}
- >
- Loading
- </Button>
- ),
- })
- expect(wrapper.find('.custom-loading').exists()).toBeTruthy()
- })
- })
- describe('Button Group', () => {
- it('create', () => {
- const wrapper = mount({
- setup: () => () =>
- (
- <ButtonGroup>
- <Button type="primary">Prev</Button>
- <Button type="primary">Next</Button>
- </ButtonGroup>
- ),
- })
- expect(wrapper.classes()).toContain('el-button-group')
- expect(wrapper.findAll('button').length).toBe(2)
- })
- it('button group reactive size', async () => {
- const size = ref<ComponentSize>('small')
- const wrapper = mount({
- setup: () => () =>
- (
- <ButtonGroup size={size.value}>
- <Button type="primary">Prev</Button>
- <Button type="primary">Next</Button>
- </ButtonGroup>
- ),
- })
- expect(wrapper.classes()).toContain('el-button-group')
- expect(
- wrapper.findAll('.el-button-group button.el-button--small').length
- ).toBe(2)
- size.value = 'large'
- await nextTick()
- expect(
- wrapper.findAll('.el-button-group button.el-button--large').length
- ).toBe(2)
- })
- it('button group type', async () => {
- const wrapper = mount({
- setup: () => () =>
- (
- <ButtonGroup type="warning">
- <Button type="primary">Prev</Button>
- <Button>Next</Button>
- </ButtonGroup>
- ),
- })
- expect(wrapper.classes()).toContain('el-button-group')
- expect(
- wrapper.findAll('.el-button-group button.el-button--primary').length
- ).toBe(1)
- expect(
- wrapper.findAll('.el-button-group button.el-button--warning').length
- ).toBe(1)
- })
- it('add space in two Chinese characters', async () => {
- const wrapper = mount(() => (
- <Button
- v-slots={{
- default: () => '中文',
- }}
- autoInsertSpace
- />
- ))
- expect(wrapper.find('.el-button span').text()).toBe('中文')
- expect(wrapper.find('.el-button span').classes()).toContain(
- 'el-button__text--expand'
- )
- })
- it('add space between two Chinese characters even if there is whitespace at both ends', async () => {
- const wrapper = mount(() => (
- <Button autoInsertSpace> 中文 </Button>
- ))
- expect(wrapper.find('.el-button span').text()).toBe('中文')
- expect(wrapper.find('.el-button span').classes()).toContain(
- 'el-button__text--expand'
- )
- })
- })
|