@zohodesk/dot 1.0.0-temp-199.1 → 1.0.0-temp-200.1

package/README.md

@@ -4,7 +4,7 @@ In this Library, we Provide Some Basic Components to Build Your Application
 
 # 1.7.2
 
-- **Search** - renderChildren, isActive, hasSeparator & customStyle props supported & Some customization also opened for this compoenent.
+- **Lookup - Search** - renderChildren, isActive, hasSeparator & customStyle props supported & Some customization also opened for this compoenent.
 
 # 1.7.1
 

package/es/Attachment/Attachment.js

@@ -20,7 +20,8 @@ export default class Attachment extends React.Component {
       fileInfo,
       i18nKeys,
       dataSelectorId,
-      isDisabled
+      isDisabled,
+      iconPalette = "white"
     } = this.props;
     let {
       downloadTitle = 'Download'

package/es/Attachment/Attachment.module.css

@@ -14,15 +14,15 @@
   height: 100% ;
   width: 100% ;
   position: absolute;
-  top:0 
+  top: 0 
 }
 
 [dir=ltr] .disableLayer {
-  left:0 
+  left: 0 
 }
 
 [dir=rtl] .disableLayer {
-  right:0 
+  right: 0 
 }
 
 .attachmentHover {
@@ -66,6 +66,10 @@
   height: var(--zd_size40) ;
 }
 
+.attachleft {
+  padding: var(--zd_size3) ;
+}
+
 [dir=ltr] .attachleft {
   border-right: 1px solid var(--zdt_attachment_default_border);
 }

package/es/AttachmentViewer/Attachment.js

@@ -2,7 +2,55 @@ const UNASSIGNED = 'Unassigned';
 const BROWSER_SUPPORTED_FILES = ['pdf', 'text', 'txt', 'css', 'jpg', 'jpeg', 'gif', 'png', 'bmp', 'ico', 'sh', 'mp3', 'wav', 'ogg'];
 export function isAudioFile(fileName) {
   const extension = getExtensionFromFileName(fileName);
-  return /mp3|wav|ogg/i.test(extension);
+  return /mp3|wav|ogg|oga|m4a|weba|opus|m4b|webma|aac/i.test(extension);
+}
+export function isVideoFile(fileName) {
+  const extension = getExtensionFromFileName(fileName);
+  return /mp4|webm|ogg/i.test(extension);
+}
+export function isPdfFile(fileName) {
+  const extension = getExtensionFromFileName(fileName);
+  return /pdf/i.test(extension);
+}
+export function isDocsFile(fileName) {
+  const extension = getExtensionFromFileName(fileName);
+  return /docx|doc|docm|rtf|odt|dot|dotm|dotx|pages/i.test(extension);
+}
+export function isSheetFile(fileName) {
+  const extension = getExtensionFromFileName(fileName);
+  return /xlsx|numbers/i.test(extension);
+}
+export function isShowFile(fileName) {
+  const extension = getExtensionFromFileName(fileName);
+  return /pptx|ppt|pps|ppsx|key/i.test(extension);
+}
+export function isEmailFile(fileName) {
+  const extension = getExtensionFromFileName(fileName);
+  return /eml|msg/i.test(extension);
+}
+export function isImageFile(fileName) {
+  const extension = getExtensionFromFileName(fileName);
+  return /jpeg|jpg|png|gif|bmp|tiff|tif|ico/i.test(extension);
+}
+export function docsFileTypes(fileName) {
+  const extension = getExtensionFromFileName(fileName);
+  return /docx|doc|docm|rtf|odt|dot|dotm|dotx|sxw|odt|ott|txt|pages/i.test(extension);
+}
+export function sheetFileTypes(fileName) {
+  const extension = getExtensionFromFileName(fileName);
+  return /xls|xlsx|sxc|ods|csv|tsv|ots|xlsm|xlsb|xlt|xltx|xltm|numbers/i.test(extension);
+}
+export function showFileTypes(fileName) {
+  const extension = getExtensionFromFileName(fileName);
+  return /pptx|ppt|pps|ppsx|odp|sxi|key|pot|potx/i.test(extension);
+}
+export function designFileTypes(fileName) {
+  const extension = getExtensionFromFileName(fileName);
+  return /sketch|xd|psd|ai|fig|svg/i.test(extension);
+}
+export function zipFileType(fileName) {
+  const extension = getExtensionFromFileName(fileName);
+  return /zip/i.test(extension);
 }
 export function getExtensionFromFileName(fileName) {
   if (fileName && fileName.indexOf(".") !== -1) {
@@ -14,4 +62,15 @@ export function getExtensionFromFileName(fileName) {
 export function isBrowserSupportedFile(fileName) {
   const extension = getExtensionFromFileName(fileName);
   return BROWSER_SUPPORTED_FILES.indexOf(extension) !== -1;
+}
+export function openInNewTabWithNoopener(url) {
+  let targetnName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_blank';
+  const aTag = document.createElement('a');
+  aTag.rel = 'noopener noreferrer';
+  aTag.target = targetnName;
+  aTag.href = url;
+  aTag.click();
+}
+export function openNewTab(href) {
+  openInNewTabWithNoopener(href);
 }

package/es/AttachmentViewer/AttachmentViewer.js

@@ -10,11 +10,11 @@ import AttachmentImage from "./AttachmentImage";
 import Link from "../Link/Link";
 import IconButton from "../IconButton/IconButton";
 import FreezeLayer from "../FreezeLayer/FreezeLayer";
-import { isAudioFile, getExtensionFromFileName } from "./Attachment";
+import { isAudioFile, getExtensionFromFileName, isVideoFile, isPdfFile, isDocsFile, isSheetFile, isShowFile, isEmailFile, isImageFile, openNewTab, sheetFileTypes, docsFileTypes, showFileTypes, designFileTypes, zipFileType } from "./Attachment";
 import { shallowDiff } from "../utils/General";
 import style from "./AttachmentViewer.module.css";
-import { checkFileSourcesValidation } from "./utils";
-import audioThumbNail from "../../images/audio_thumbnail.png";
+import { checkFileSourcesValidation } from "./utils"; // import audioThumbNail from '../../images/audio_thumbnail.png'
+
 export default class AttachmentViewer extends Component {
   constructor(props) {
     super(props);
@@ -310,6 +310,62 @@ export default class AttachmentViewer extends Component {
         customChildrenClass = ''
       } = customClass;
       const retainZoom = canZoom && selectedIndex == i && maintainZoom;
+      const {
+        previewurl
+      } = data;
+      const fileTypeIconList = [{
+        check: isAudioFile(data.name),
+        name: 'ZD-EF-fileMp3',
+        size: '50'
+      }, {
+        check: isVideoFile(data.name),
+        name: 'ZD-EF-fileMp4',
+        size: '50'
+      }, {
+        check: isPdfFile(data.name),
+        name: 'ZD-EF-filePdf',
+        size: '50'
+      }, {
+        check: docsFileTypes(data.name),
+        name: 'ZD-EF-fileWord',
+        size: '50'
+      }, {
+        check: sheetFileTypes(data.name),
+        name: 'ZD-EF-fileExcel',
+        size: '50'
+      }, {
+        check: showFileTypes(data.name),
+        name: 'ZD-SE-ppt',
+        size: '50'
+      }, {
+        check: designFileTypes(data.name),
+        name: 'ZD-EF-file',
+        size: '50'
+      }, {
+        check: isEmailFile(data.name),
+        name: 'ZD-CH-mail',
+        size: '50'
+      }, {
+        check: zipFileType(data.name),
+        name: 'ZD-EF-fileZip',
+        size: '50'
+      }];
+
+      const PreviewFileIcon = _ref3 => {
+        let {
+          data
+        } = _ref3;
+        const matchedIcon = fileTypeIconList.find(item => item.check);
+        const iconName = matchedIcon ? matchedIcon.name : 'ZD-EF-file';
+        const iconSize = matchedIcon ? matchedIcon.size : '50';
+        return /*#__PURE__*/React.createElement(Icon, {
+          iconClass: style.prevIcon,
+          name: iconName,
+          size: iconSize
+        });
+      };
+
+      console.log("...previewUrl", previewurl, "...data", data);
       return /*#__PURE__*/React.createElement(Container, {
         className: style.imgBox,
         id: `imgBox${i}`,
@@ -328,12 +384,27 @@ export default class AttachmentViewer extends Component {
         "data-test-id": `${dataId}_videoPreview`,
         ...audioProps
       }, /*#__PURE__*/React.createElement("source", {
-        src: viewUrl,
+        src: previewurl,
         type: `audio/${getExtensionFromFileName(name)}`
-      })) : null : /*#__PURE__*/React.createElement(AttachmentImage, {
+      })) : null : isVideoFile(data.name) ? selectedIndex == i ? /*#__PURE__*/React.createElement("video", {
+        autoPlay: true,
+        controls: true,
+        className: style.zoomIn
+      }, /*#__PURE__*/React.createElement("source", {
+        src: previewurl,
+        type: `video/${getExtensionFromFileName(data.name)}`
+      })) : null : isDocsFile(data.name) || isSheetFile(data.name) || isShowFile(data.name) ? selectedIndex == i ? (console.log("...previewurl", previewurl), /*#__PURE__*/React.createElement("iframe", {
+        src: previewurl,
+        className: style.pdfFrame
+      }) // <iframe src={previewurl+"&frameorigin=https://deskqa.localzoho.com"}  className={style.pdfFrame}></iframe>
+      ) : null : isPdfFile(data.name) || isEmailFile(data.name) ? selectedIndex == i ? /*#__PURE__*/React.createElement("iframe", {
+        src: previewurl,
+        className: style.pdfFrame
+      }) // <iframe src={previewurl+"&frameorigin=https://deskqa.localzoho.com"}  className={style.pdfFrame}/>
+      : null : isImageFile(data.name) ? /*#__PURE__*/React.createElement(AttachmentImage, {
         customClass: {
           customImageClass: `${style.img} ${style.altText}
-                    ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
+                        ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
           customChildrenClass
         },
         src: viewUrl,
@@ -345,7 +416,17 @@ export default class AttachmentViewer extends Component {
         id: `img${i}`,
         isCover: false,
         ...imageProps
-      }, children)));
+      }, children) : /*#__PURE__*/React.createElement("div", {
+        className: style.previewNone
+      }, /*#__PURE__*/React.createElement("div", {
+        className: style.fileTypeImg
+      }, /*#__PURE__*/React.createElement(PreviewFileIcon, {
+        data: data.name
+      })), "Preview not available for the selected file type.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Link, {
+        href: data.href,
+        className: style.downloadLink,
+        onClick: () => openNewTab(data.href)
+      }, "Download"))));
     });
   }
 
@@ -388,10 +469,10 @@ export default class AttachmentViewer extends Component {
     }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       responsiveId: responsiveId,
       query: this.responsiveFunc
-    }, _ref3 => {
+    }, _ref4 => {
       let {
         uptoTablet
-      } = _ref3;
+      } = _ref4;
       return /*#__PURE__*/React.createElement(Container, {
         scroll: "none",
         "data-scroll-palette": "dark"
@@ -580,17 +661,68 @@ export default class AttachmentViewer extends Component {
         const {
           customImageClass = '',
           customChildrenClass = ''
-        } = customClass;
-        thumbnail = isAudioFile(name) ? thumbnail || audioThumbNail : thumbnail; //fallback thumbnail for audio
+        } = customClass; // thumbnail= isAudioFile(name) ? thumbnail || audioThumbNail : thumbnail //fallback thumbnail for audio
+
+        const fileTypeIconList = [{
+          check: isAudioFile(name),
+          name: thumbnail || 'ZD-EF-fileMp3',
+          size: '30'
+        }, {
+          check: isVideoFile(name),
+          name: 'ZD-EF-fileMp4',
+          size: '30'
+        }, {
+          check: isPdfFile(name),
+          name: 'ZD-EF-filePdf',
+          size: '30'
+        }, {
+          check: docsFileTypes(name),
+          name: 'ZD-EF-fileWord',
+          size: '30'
+        }, {
+          check: sheetFileTypes(name),
+          name: 'ZD-EF-fileExcel',
+          size: '30'
+        }, {
+          check: showFileTypes(name),
+          name: 'ZD-SE-ppt',
+          size: '30'
+        }, {
+          check: designFileTypes(name),
+          name: 'ZD-EF-file',
+          size: '30'
+        }, {
+          check: isEmailFile(name),
+          name: 'ZD-CH-mail',
+          size: '30'
+        }, {
+          check: zipFileType(name),
+          name: 'ZD-EF-fileZip',
+          size: '30'
+        }];
+
+        const PreviewFileIcon = _ref5 => {
+          let {
+            data
+          } = _ref5;
+          const matchedIcon = fileTypeIconList.find(item => item.check);
+          const iconName = matchedIcon ? matchedIcon.name : 'ZD-EF-file';
+          const iconSize = matchedIcon ? matchedIcon.size : '30';
+          return /*#__PURE__*/React.createElement(Icon, {
+            iconClass: style.prevFooterIcon,
+            name: iconName,
+            size: iconSize
+          });
+        };
 
         return /*#__PURE__*/React.createElement(Box, {
-          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''}`,
+          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''} ${isImageFile(name) || thumbnail ? '' : style.previewIconDiv}`,
           key: index,
           onClick: this.changeSelectedIndex.bind(this, index),
           eleRef: el => this[`img_${index}`] = el,
           dataId: "attachPreviewList",
           "data-title": name
-        }, /*#__PURE__*/React.createElement(AttachmentImage, {
+        }, isImageFile(name) || thumbnail ? /*#__PURE__*/React.createElement(AttachmentImage, {
           src: thumbnail || viewUrl,
           size: "small",
           alt: name,
@@ -600,7 +732,9 @@ export default class AttachmentViewer extends Component {
           },
           dataId: dataId,
           ...customProps
-        }, children));
+        }, children) : /*#__PURE__*/React.createElement(PreviewFileIcon, {
+          data: name
+        }));
       }))))), totalLen !== 1 && /*#__PURE__*/React.createElement(IconButton, {
         dataId: "attachToggle",
         onClick: this.togglePViewList,

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -79,7 +79,7 @@
     font-size: var(--zd_font_size22) ;
     height: var(--zd_size38) ;
     width: var(--zd_size38) ;
-    line-height: 1.6364;
+    line-height: 1.6;
     border-radius: 50%;
     cursor: pointer;
 }
@@ -154,6 +154,7 @@
 .imgItem {
     height: var(--zd_size60) ;
     min-width: var(--zd_size40) ;
+    /* css:theme-validation:ignore */
     position: relative;
     transition: border var(--zd_transition3);
     border-width: 2px;
@@ -168,6 +169,10 @@
     border-color: var(--zdt_attachmentviewer_hover_border);
 }
 
+.imgItem+.imgItem {
+    /* margin-left: 6px; */
+}
+
 [dir=ltr] .imgItem+.imgItem {
     margin-left: var(--zd_size12) ;
 }
@@ -230,16 +235,71 @@
     transform: rotateX(0deg);
 }
 
+.isAudio,
+.isVideo,
+.isPdf,
+.isMail,
+.isWriter,
+.isSheet,
+.isShow,
+.otherFile {
+    width: var(--zd_size60) ;
+}
+
+.isAudio, .isVideo, .isPdf, .isMail, .isWriter, .isSheet, .isShow, .otherFile {
+    background-size: 100% 100%;
+}
+
 .isAudio {
     composes: audioImage from '../common/dot_common.module.css';
-    width: var(--zd_size100) ;
-    background-size: 100% 100%;
 }
 
-.isAudio .image {
+.isVideo {
+    composes: videoImage from '../common/dot_common.module.css';
+}
+
+.isPdf {
+    composes: pdfImage from '../common/dot_common.module.css';
+}
+
+.isWriter {
+    composes: writerImage from '../common/dot_common.module.css';
+}
+
+.isSheet {
+    composes: sheetImage from '../common/dot_common.module.css';
+}
+
+.isShow {
+    composes: showImage from '../common/dot_common.module.css';
+}
+
+
+.isMail {
+    composes: mailImage from '../common/dot_common.module.css';
+}
+
+.otherFile {
+    composes: otherImage from '../common/dot_common.module.css';
+}
+
+.isAudio .image,
+.isVideo .image,
+.isPdf .image,
+.isWriter .image,
+.isSheet .image,
+.isShow .image,
+.isMail .image,
+.otherFile .image {
     opacity: 0;
 }
 
+.pdfFrame {
+    height: 100% ;
+    width: 100% ;
+    border: 0;
+}
+
 .video {
     position: absolute;
     top: 0 ;
@@ -357,9 +417,69 @@
 }
 
 .btn {
+    /* css:theme-validation:ignore */
     height: 100% ;
     width: 100% ;
     background-color: var(--dot_mirror);
     border: 0;
     cursor: pointer;
+}
+
+.fileTypeImg {
+    margin: 0 auto var(--zd_size20) ;
+}
+
+.previewNone {
+    /* css:theme-validation:ignore */
+    color: #fff;
+    text-align: center;
+    margin: auto ;
+}
+
+.downloadLink {
+    /* css:theme-validation:ignore */
+    color: #0a73eb;
+    display: inline-block;
+    padding-top: var(--zd_size10) ;
+}
+
+.previewIconDiv {
+    width: var(--zd_size60) ;
+    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.prevFooterIcon,
+.prevIcon {
+    /* css:theme-validation:ignore */
+    color: #fff;
+}
+
+.prevFooterIcon, .prevIcon {
+    padding: var(--zd_size2) ;
+    margin: auto ;
+}
+
+.prevFooterIcon::before,
+.prevIcon::before {
+    /* css:theme-validation:ignore */
+}
+
+.prevFooterIcon::before, .prevIcon::before {
+    background-color: transparent;
+}
+
+[dir=ltr] .prevIcon::before {
+    border-radius: 10px 30px 10px 10px;
+}
+
+[dir=rtl] .prevIcon::before {
+    border-radius: 30px 10px 10px 10px;
+}
+
+[dir=ltr] .prevFooterIcon::before {
+    border-radius: 5px 17px 5px 5px
+}
+
+[dir=rtl] .prevFooterIcon::before {
+    border-radius: 17px 5px 5px 5px
 }

package/es/DotProvider/__tests__/DotProvider.spec.js

@@ -0,0 +1,174 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import DotProvider from "../DotProvider"; // snapshot test cases
+
+describe('DotProvider Snapshot', () => {
+  const THEME_APPEARANCE = ['light', 'dark', 'pureDark'];
+  const THEME_COLOR = ['blue', 'green', 'orange', 'red', 'yellow'];
+  const BASE_ZOOM_UNIT = ['0.5', '0.8', '1', '1.2'];
+  const BASE_FONT_UNIT = ['1px', '1rem', '1em', '1'];
+  test('rendering the default props', async () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DotProvider, null, "This is a DotProvider component")); // wait for the data attributes and styles to be applied
+
+    await waitFor(() => {}); // take the snapshot after the attributes and styles are applied
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the default attributes, styles and modified the tag props', async () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      tag: "span"
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the default attributes, styles and modifying the tag prop to React.Fragment', async () => {
+    render( /*#__PURE__*/React.createElement(DotProvider, {
+      tag: React.Fragment
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    expect(document.documentElement).toMatchSnapshot();
+  });
+  test('rendering the providerRef props', async () => {
+    const mockProviderRef = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      providerRef: mockProviderRef
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the additional ...rest props', async () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      className: "testClass",
+      "data-id": "test-id"
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the wrong themeAppearance and themeColor', async () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      themeAppearance: "ligt",
+      themeColor: "gren"
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    expect(asFragment()).toMatchSnapshot();
+  });
+  THEME_APPEARANCE.map(appearance => {
+    test.each(THEME_COLOR)(`rendering the theme-appearance of ${appearance} along with theme-color of %s`, async theme => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(DotProvider, {
+        themeAppearance: appearance,
+        themeColor: theme
+      }));
+      await waitFor(() => {});
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+  THEME_APPEARANCE.map(appearance => {
+    test.each(THEME_COLOR)(`rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of ${appearance} along with theme-color of %s`, async theme => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(DotProvider, {
+        themeAppearance: appearance,
+        themeColor: theme,
+        themeAppearanceAttr: "data-desk-mode",
+        themeColorAttr: "data-desk-theme"
+      }));
+      await waitFor(() => {});
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+  test.each(BASE_ZOOM_UNIT)(`rendering the baseZoomUnit props of %s`, async zoom => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      baseZoomUnit: zoom
+    }));
+    await waitFor(() => {});
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(BASE_FONT_UNIT)(`rendering the baseFontUnit props of %s`, async font => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      baseFontUnit: font
+    }));
+    await waitFor(() => {});
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the zoomUnitVariable prop along with baseZoomUnit props', async () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      baseZoomUnit: "1.1",
+      zoomUnitVariable: "--gc_baseUnit"
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the fontUnitVariable prop along with baseFontUnit props', async () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      baseFontUnit: "14px",
+      fontUnitVariable: "--gc_baseFontUnit"
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    expect(asFragment()).toMatchSnapshot();
+  });
+}); // unit test cases
+
+describe('DotProvider Unit-Test', () => {
+  test('rendering the ref function type props', async () => {
+    const mockFunctionRef = jest.fn();
+    render( /*#__PURE__*/React.createElement(DotProvider, {
+      id: "dot-provider",
+      ref: mockFunctionRef
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    const dotProviderElement = document.getElementById('dot-provider');
+    expect(mockFunctionRef).toHaveBeenCalledWith(dotProviderElement);
+  });
+  test('rendering the ref object type props', async () => {
+    const mockObjectRef = /*#__PURE__*/React.createRef();
+    render( /*#__PURE__*/React.createElement(DotProvider, {
+      id: "dot-provider",
+      ref: mockObjectRef
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    const dotProviderElement = document.getElementById('dot-provider');
+    expect(mockObjectRef.current).toBe(dotProviderElement);
+  });
+  test('rendering the onAssetsDownloadSuccess props', async () => {
+    const mockFunc = jest.fn();
+    render( /*#__PURE__*/React.createElement(DotProvider, {
+      onAssetsDownloadSuccess: mockFunc
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    expect(mockFunc).toHaveBeenCalled();
+  });
+  test('rendering the getAssetsPromises props', async () => {
+    const mockFunc = jest.fn();
+    render( /*#__PURE__*/React.createElement(DotProvider, {
+      getAssetsPromises: mockFunc
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    expect(mockFunc).toHaveBeenCalledWith(expect.objectContaining({
+      fontSizePromise: expect.any(Promise),
+      themeAppearancePromise: expect.arrayContaining([expect.any(Promise)]),
+      themeColorPromise: expect.arrayContaining([expect.any(Promise)]),
+      zoomSizePromise: expect.any(Promise)
+    }));
+  });
+}); // need to check error handling cases
+// onAssetsDownloadSuccess not called verification