@zohodesk/dot/es/AudioPlayer/__tests__/AudioPlayer.spec.js

In this Library, we Provide Some Basic Components to Build Your Application

import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react';
import AudioPlayer from "../AudioPlayer";
const DEFAULT_PROPS = {
  minute: '02',
  second: '03',
  durationInSec: '203',
  src: 'https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3'
};
describe('AudioPlayer - Snapshot', () => {
  test('Render with default props', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Render with customId and testId', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      customId: "audio-player-customId",
      testId: "audio-player-testId"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Render with tag attributes', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      tagAttributes: {
        'data-custom-attr': 'true'
      }
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Render with a11y attributes', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      a11yAttributes: {
        role: 'region'
      }
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Render with customClass', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      customClass: "my-audio-player"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Render with i18nKeys', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      i18nKeys: {
        play: 'Play',
        pause: 'Pause'
      }
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Render with needClose=false', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      needClose: false
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Render with needDownload=false', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      needDownload: false
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Render with needMuteIcon=true', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      needMuteIcon: true
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Render with isPlay=true', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      isPlay: true
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Render with timerFormat=ss:mm', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      timerFormat: "ss:mm"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Render with forwardStepInSec=10', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      forwardStepInSec: 10
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Render with backwardStepInSec=10', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      backwardStepInSec: 10
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Render with range=50', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      range: 50
    }));
    expect(asFragment()).toMatchSnapshot();
  });
});
describe('AudioPlayer - Unit', () => {
  test('Should call togglePlayer on close button click', () => {
    const togglePlayer = jest.fn();
    render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      togglePlayer: togglePlayer
    }));
    const closeBtn = screen.queryByTestId('audioPlayerClose');

    if (closeBtn) {
      fireEvent.click(closeBtn);
      expect(togglePlayer).toHaveBeenCalled();
    }
  });
  test('Should call downloadFile on download button click', () => {
    const downloadFile = jest.fn();
    render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      downloadFile: downloadFile
    }));
    const downloadBtn = screen.queryByTestId('audioDownload');

    if (downloadBtn) {
      fireEvent.click(downloadBtn);
      expect(downloadFile).toHaveBeenCalled();
    }
  });
  test('Should toggle play/pause on play button click', () => {
    const togglePlayer = jest.fn();
    render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      togglePlayer: togglePlayer
    }));
    const playBtn = screen.queryByTestId('audioPlayPause');

    if (playBtn) {
      fireEvent.click(playBtn);
      expect(togglePlayer).toHaveBeenCalled();
    }
  });
  test('Should mute/unmute on mute button click', () => {
    render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      needMuteIcon: true
    }));
    const muteBtn = screen.queryByTestId('audioMute');

    if (muteBtn) {
      fireEvent.click(muteBtn); // Add assertion if mute state is exposed via prop or DOM
    }
  });
  test('Should change range on slider input', () => {
    render( /*#__PURE__*/React.createElement(AudioPlayer, { ...DEFAULT_PROPS,
      range: 0
    }));
    const rangeInput = screen.queryByTestId('audioRange');

    if (rangeInput) {
      fireEvent.change(rangeInput, {
        target: {
          value: 50
        }
      }); // Add assertion if range change is exposed via prop or DOM
    }
  });
});