button.test.tsx 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. import { markRaw, nextTick, ref } from 'vue'
  2. import { mount } from '@vue/test-utils'
  3. import { describe, expect, it, test } from 'vitest'
  4. import { Loading, Search } from '@element-plus/icons-vue'
  5. import Button from '../src/button.vue'
  6. import ButtonGroup from '../src/button-group.vue'
  7. import type { ComponentSize } from '@element-plus/constants'
  8. const AXIOM = 'Rem is the best girl'
  9. describe('Button.vue', () => {
  10. it('create', () => {
  11. const wrapper = mount(() => <Button type="primary" />)
  12. expect(wrapper.classes()).toContain('el-button--primary')
  13. })
  14. it('icon', () => {
  15. const wrapper = mount(() => <Button icon={markRaw(Search)} />)
  16. expect(wrapper.findComponent(Search).exists()).toBeTruthy()
  17. })
  18. it('nativeType', () => {
  19. const wrapper = mount(() => <Button nativeType="submit" />)
  20. expect(wrapper.attributes('type')).toBe('submit')
  21. })
  22. it('loading', () => {
  23. const wrapper = mount(() => <Button loading />)
  24. expect(wrapper.classes()).toContain('is-loading')
  25. expect(wrapper.findComponent(Loading).exists()).toBeTruthy()
  26. })
  27. it('size', () => {
  28. const wrapper = mount(() => <Button size="large" />)
  29. expect(wrapper.classes()).toContain('el-button--large')
  30. })
  31. it('plain', () => {
  32. const wrapper = mount(() => <Button plain />)
  33. expect(wrapper.classes()).toContain('is-plain')
  34. })
  35. it('round', () => {
  36. const wrapper = mount(() => <Button round />)
  37. expect(wrapper.classes()).toContain('is-round')
  38. })
  39. it('circle', () => {
  40. const wrapper = mount(() => <Button circle />)
  41. expect(wrapper.classes()).toContain('is-circle')
  42. })
  43. it('text', async () => {
  44. const bg = ref(false)
  45. const wrapper = mount(() => <Button text bg={bg.value} />)
  46. expect(wrapper.classes()).toContain('is-text')
  47. bg.value = true
  48. await nextTick()
  49. expect(wrapper.classes()).toContain('is-has-bg')
  50. })
  51. it('link', async () => {
  52. const wrapper = mount(() => <Button link />)
  53. expect(wrapper.classes()).toContain('is-link')
  54. })
  55. test('render text', () => {
  56. const wrapper = mount(() => (
  57. <Button
  58. v-slots={{
  59. default: () => AXIOM,
  60. }}
  61. />
  62. ))
  63. expect(wrapper.text()).toEqual(AXIOM)
  64. })
  65. test('handle click', async () => {
  66. const wrapper = mount(() => (
  67. <Button
  68. v-slots={{
  69. default: () => AXIOM,
  70. }}
  71. />
  72. ))
  73. await wrapper.trigger('click')
  74. expect(wrapper.emitted()).toBeDefined()
  75. })
  76. test('handle click inside', async () => {
  77. const wrapper = mount(() => (
  78. <Button
  79. v-slots={{
  80. default: () => <span class="inner-slot"></span>,
  81. }}
  82. />
  83. ))
  84. wrapper.find('.inner-slot').trigger('click')
  85. expect(wrapper.emitted()).toBeDefined()
  86. })
  87. test('loading implies disabled', async () => {
  88. const wrapper = mount(() => (
  89. <Button
  90. v-slots={{
  91. default: () => AXIOM,
  92. }}
  93. loading
  94. />
  95. ))
  96. await wrapper.trigger('click')
  97. expect(wrapper.emitted('click')).toBeUndefined()
  98. })
  99. it('disabled', async () => {
  100. const wrapper = mount(() => <Button disabled />)
  101. expect(wrapper.classes()).toContain('is-disabled')
  102. await wrapper.trigger('click')
  103. expect(wrapper.emitted('click')).toBeUndefined()
  104. })
  105. it('loading icon', () => {
  106. const wrapper = mount(() => (
  107. <Button loadingIcon={markRaw(Search)} loading />
  108. ))
  109. expect(wrapper.findComponent(Search).exists()).toBeTruthy()
  110. })
  111. it('loading slot', () => {
  112. const wrapper = mount({
  113. setup: () => () =>
  114. (
  115. <Button
  116. v-slots={{ loading: () => <span class="custom-loading">111</span> }}
  117. loading={true}
  118. >
  119. Loading
  120. </Button>
  121. ),
  122. })
  123. expect(wrapper.find('.custom-loading').exists()).toBeTruthy()
  124. })
  125. })
  126. describe('Button Group', () => {
  127. it('create', () => {
  128. const wrapper = mount({
  129. setup: () => () =>
  130. (
  131. <ButtonGroup>
  132. <Button type="primary">Prev</Button>
  133. <Button type="primary">Next</Button>
  134. </ButtonGroup>
  135. ),
  136. })
  137. expect(wrapper.classes()).toContain('el-button-group')
  138. expect(wrapper.findAll('button').length).toBe(2)
  139. })
  140. it('button group reactive size', async () => {
  141. const size = ref<ComponentSize>('small')
  142. const wrapper = mount({
  143. setup: () => () =>
  144. (
  145. <ButtonGroup size={size.value}>
  146. <Button type="primary">Prev</Button>
  147. <Button type="primary">Next</Button>
  148. </ButtonGroup>
  149. ),
  150. })
  151. expect(wrapper.classes()).toContain('el-button-group')
  152. expect(
  153. wrapper.findAll('.el-button-group button.el-button--small').length
  154. ).toBe(2)
  155. size.value = 'large'
  156. await nextTick()
  157. expect(
  158. wrapper.findAll('.el-button-group button.el-button--large').length
  159. ).toBe(2)
  160. })
  161. it('button group type', async () => {
  162. const wrapper = mount({
  163. setup: () => () =>
  164. (
  165. <ButtonGroup type="warning">
  166. <Button type="primary">Prev</Button>
  167. <Button>Next</Button>
  168. </ButtonGroup>
  169. ),
  170. })
  171. expect(wrapper.classes()).toContain('el-button-group')
  172. expect(
  173. wrapper.findAll('.el-button-group button.el-button--primary').length
  174. ).toBe(1)
  175. expect(
  176. wrapper.findAll('.el-button-group button.el-button--warning').length
  177. ).toBe(1)
  178. })
  179. it('add space in two Chinese characters', async () => {
  180. const wrapper = mount(() => (
  181. <Button
  182. v-slots={{
  183. default: () => '中文',
  184. }}
  185. autoInsertSpace
  186. />
  187. ))
  188. expect(wrapper.find('.el-button span').text()).toBe('中文')
  189. expect(wrapper.find('.el-button span').classes()).toContain(
  190. 'el-button__text--expand'
  191. )
  192. })
  193. it('add space between two Chinese characters even if there is whitespace at both ends', async () => {
  194. const wrapper = mount(() => (
  195. <Button autoInsertSpace>&nbsp;中文&nbsp;</Button>
  196. ))
  197. expect(wrapper.find('.el-button span').text()).toBe('中文')
  198. expect(wrapper.find('.el-button span').classes()).toContain(
  199. 'el-button__text--expand'
  200. )
  201. })
  202. })