@zohodesk/dot 1.7.19 → 1.7.20-exp.2

package/es/AudioPlayer/Timer/Timer.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Timer_propTypes } from "./propTypes/propTypes";
+import { Timer_defaultProps } from "./propTypes/defaultProps";
+import { Container } from '@zohodesk/components/lib/Layout';
+import { addLeadingZeros } from "../utils/utils";
+import style from "./Timer.module.css";
+export default class Timer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.constructTimer = this.constructTimer.bind(this);
+  }
+
+  constructTimer() {
+    let {
+      hour,
+      minute,
+      second,
+      amPm,
+      separator,
+      timerFormat,
+      needCharacter
+    } = this.props;
+    const timeSeparator = separator == 'space' ? ' ' : ':';
+    let timerValue = '';
+    const format = timerFormat.toLowerCase().split(':');
+    hour = addLeadingZeros(hour);
+    minute = addLeadingZeros(minute);
+    second = addLeadingZeros(second);
+
+    if (needCharacter) {
+      hour = `${hour}h`;
+      minute = `${minute}m`;
+      second = `${second}s`;
+    }
+
+    format.map(type => {
+      if (type == 'hh') {
+        timerValue += hour;
+      } else if (type == 'mm') {
+        timerValue += minute;
+      } else if (type == 'ss') {
+        timerValue += second;
+      }
+
+      timerValue += timeSeparator;
+    });
+    timerValue = timerValue.slice(0, -1);
+    amPm && (timerValue = `${timerValue} ${amPm}`);
+    return timerValue;
+  }
+
+  render() {
+    const {
+      dataId
+    } = this.props;
+    const timerValue = this.constructTimer();
+    return /*#__PURE__*/React.createElement(Container, {
+      dataId: dataId,
+      alignBox: "row",
+      className: style.container,
+      flexible: true
+    }, timerValue);
+  }
+
+}
+Timer.defaultProps = Timer_defaultProps;
+Timer.propTypes = Timer_propTypes;

package/es/AudioPlayer/Timer/Timer.module.css

@@ -0,0 +1,5 @@
+.container {
+  font-size: var(--zd_font_size11) ;
+  color: var(--zdt_timer_default_text);
+  text-align: center;
+}

package/es/AudioPlayer/Timer/__tests__/Timer.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Timer from "../Timer";
+const defaultProps = {
+  dataId: 'CBTimer'
+};
+describe('Timer test Cases', () => {
+  // const {props,renderedDOM} = setup(Timer,Object.assign({},defaultProps))
+  // it('Should render Component',()=>{
+  //     const component = TestUtils.scryRenderedComponentsWithTestid(renderedDOM,'CBTimer');
+  //     expect(component.length).toBe(1);
+  // })
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Timer, { ...defaultProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/AudioPlayer/Timer/__tests__/__snapshots__/Timer.spec.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Timer test Cases rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container flex cover rowdir"
+    data-id="CBTimer"
+    data-selector-id="container"
+    data-test-id="CBTimer"
+  >
+    undefined:undefined
+  </div>
+</DocumentFragment>
+`;

package/es/AudioPlayer/Timer/propTypes/defaultProps.js

@@ -0,0 +1,4 @@
+export const Timer_defaultProps = {
+  separator: 'colon',
+  timerFormat: 'mm:ss'
+};

package/es/AudioPlayer/Timer/propTypes/propTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export const Timer_propTypes = {
+  dataId: PropTypes.string,
+  amPm: PropTypes.string,
+  hour: PropTypes.string,
+  minute: PropTypes.string,
+  needCharacter: PropTypes.bool,
+  second: PropTypes.string,
+  separator: PropTypes.oneOf(['space', 'colon']),
+  timerFormat: PropTypes.string
+};

package/es/AudioPlayer/__tests__/AudioPlayer.spec.js

@@ -0,0 +1,192 @@
+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
+    }
+  });
+});