audio.spec.ts 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. import { config, mount } from '@vue/test-utils';
  2. import { nextTick, ref, toRefs, reactive, onMounted } from 'vue';
  3. import NutIcon from '../../icon/index.vue';
  4. import NutRange from '../../range/index.vue';
  5. import Audio from '../index.vue';
  6. import AudioOperate from '../../audiooperate/index.vue';
  7. import NutButton from '../../button/index.vue';
  8. function sleep(delay = 0): Promise<void> {
  9. return new Promise((resolve) => {
  10. setTimeout(resolve, delay);
  11. });
  12. }
  13. beforeAll(() => {
  14. config.global.components = {
  15. NutIcon,
  16. NutRange,
  17. AudioOperate,
  18. NutButton
  19. };
  20. });
  21. afterAll(() => {
  22. config.global.components = {};
  23. });
  24. test('audio init render', async () => {
  25. const wrapper = mount(Audio, {
  26. props: {
  27. type: 'icon',
  28. url: '//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav'
  29. }
  30. });
  31. await nextTick();
  32. expect(wrapper.find('.nut-audio__icon').exists()).toBeTruthy();
  33. });
  34. test('audio init render', async () => {
  35. const wrapper = mount({
  36. components: {
  37. 'nut-audio': Audio,
  38. 'nut-icon': NutIcon,
  39. 'nut-range': NutRange,
  40. 'nut-audio-operate': AudioOperate,
  41. 'nut-button': NutButton
  42. },
  43. template: `
  44. <nut-audio
  45. url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
  46. :muted="muted"
  47. :autoplay="autoplay"
  48. :loop="false"
  49. type="progress"
  50. @forward="forward"
  51. >
  52. <div class="nut-audio-operate-group">
  53. <nut-audio-operate type="forward"></nut-audio-operate>
  54. <nut-audio-operate type="back"></nut-audio-operate>
  55. <nut-audio-operate type="play"></nut-audio-operate>
  56. <nut-audio-operate type="mute"></nut-audio-operate>
  57. </div>
  58. </nut-audio>
  59. <div>{{time}}</div>
  60. `,
  61. setup() {
  62. const data = reactive({
  63. muted: false,
  64. autoplay: false,
  65. time: 0
  66. });
  67. const forward = (p: any) => {
  68. data.time = p;
  69. };
  70. return { ...toRefs(data), forward };
  71. }
  72. });
  73. await nextTick();
  74. expect(wrapper.find('.nut-audio-operate-item').exists()).toBeTruthy();
  75. wrapper.find('.nut-audio-operate-item').trigger('click');
  76. await nextTick();
  77. expect(wrapper.vm.time).toBe(1);
  78. });