@zohodesk/components 1.0.0-temp-225-1 → 1.0.0-temp-227

package/README.md

@@ -1,47 +1,31 @@
 # DOT Style Guide
 
-In this Package, we Provide Some Basic Components to Build Web App
-
-- Avatar
-- AvatarTeam
-- Accordion
-- Animation
-- Button
-- Buttongroup
-- Card
-- CheckBox
-- DateTime
-- DropBox
-- Icon
-- Label
-- Layout
-- ListItem
-- MultiSelect
-- Popup
-- Radio
-- Responsive
-- Ribbon
-- Select
-- GroupSelect
-- Stencils
-- Switch
-- Tab
-- Tag
-- Textarea
-- TextBox
-- TextBoxIcon
-- Tooltip
+Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
+
+
+# 1.3.4
+
+- **MultiSelect** -  `renderCustomClearComponent` and `renderCustomToggleIndicator` props supported to customize the clear and toggle indicatior icon.
+- **Select** -  `renderCustomSearchClearComponent` and `renderCustomToggleIndicator` props supported to customize the search input clear and toggle indicatior icon.
+- **TextBoxIcon** -  `renderCustomClearComponent` prop supported to customize the input clear.  
 
 # 1.3.3
 
-- **ListItem**
-  - Added `SecondaryValue` prop to supported.
+- **Stencils**
+  - Added `isAnimated` prop to support Stencils without Animation.
+  - Added `square` shape in existing shape collection
+- **TabWrapper**
+  - Added `vertical-reverse, row-reverse` alignment suport in align propType
 
 # 1.3.2
 
 - **Popup**
   - Added `scrollDebounceTime` prop to support debounce control for fixed popup scroll behavior.
-
+- **VelocityAnimationGroup** - Added support for the following props:
+  - `onEnterComplete` - Callback triggered after enter animation completes.
+  - `onExitComplete` - Callback triggered after exit animation completes.
+  - `postEnterStyles` - Inline styles applied to the element once the enter animation has finished.  
+  
 # 1.3.1
 
 - **dropDownUtils** - The isObjectContainsSearchString function logic has been updated to use some instead of filter, and additional conditions have been added to prevent potential runtime issues.
@@ -49,7 +33,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 # 1.3.0
 
 - **AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar** - searchFields prop supported
-- **AdvancedMultiSelect, MultiSelectWithAvatar** - secondaryField prop supported
+-  **AdvancedMultiSelect, MultiSelectWithAvatar** - secondaryField prop supported
 - **ListContainer** - align prop supported
 - **ListItemWithAvatar** - secondaryValue, lhsAlignContent prop supported
 - **ListItemWithCheckBox, ListItemWithIcon, ListItemWithRadio** - secondaryValue, lhsAlignContent, lhsJustifyContent prop supported
@@ -67,11 +51,11 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.2.61
 
-- **Textarea** - Handled the default height and width appropriately based on the rows and cols props.
+- **Textarea** -  Handled the default height and width appropriately based on the rows and cols props.
 
 # 1.2.60
 
-- **Textarea** - Handled the default height and width appropriately based on the rows and cols props.
+- **Textarea** -  Handled the default height and width appropriately based on the rows and cols props.
 
 # 1.2.59
 
@@ -84,25 +68,23 @@ In this Package, we Provide Some Basic Components to Build Web App
 # 1.2.57
 
 - **Popup**
-
   - Fixed popup scroll behavior is now supported using the `isOutsideScrollBlocked` flag. When set to `false` (default).
 
 - **DropBoxElement**
   - **Attributes Added**: The `data-box-direction` and `data-arrow-position` attributes have been added to facilitate the use of component-level CSS selectors.
   - **CSS Selectors**: Added support for `arrow`, `paddingSpace`, `shadow`, and `boxdirection` to facilitate the behavior of the dropbox using CSS selectors.
-
+  
 # 1.2.56
 
-- **CheckBox**
+- **CheckBox** 
   - `data-selector-id` passing to Container component changed to `dataSelectorId`
 
 # 1.2.55
 
-- **ListItemWithAvatar**
-
+- **ListItemWithAvatar** 
   - `AvatarTeamProps` and `AvatarProps` props has been added under the `customProps` group.
 
-- **Tag**
+- **Tag** 
   - `avatarProps` and `iconProps` prop has been added under the `customProps` group.
 
 # 1.2.54
@@ -110,6 +92,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 - **Reverted 1.2.45 MultiSelect Fix**
   - The issue with the non-scrollable API call trigger in multiselect, introduced in version `1.2.45`, has been `reverted` in this version.
 
+
 # 1.2.53
 
 - **CheckBox** - Disabled State CheckBox Color Fixed
@@ -135,7 +118,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 - **DateTime (v0&v1), CalendarView (v0&v1)**
 
   - Week starting day customization support added with `weekStartDay` props and week holiday customization support with `holidays` prop
-
+  
 - **DateWidget (v0&v1)**
 
   - Support has been added for `weekStartDay`, `holidays` props
@@ -144,7 +127,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
   - `holidays` prop added for holiday column indication
 
-# 1.2.49
+# 1.2.49 
 
 - **Popup**
   - `isOutsideScrollBlocked` prop supported - Scroll blocking behaviours supported
@@ -157,6 +140,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 - **ResizeObserver**
 
   - The ResizeObserver PolyFill code has been removed, and a separate copy with the PolyFill included is saved under the filename ResizeObserverWithPolyfill.js
+  
 
 # 1.2.47
 
@@ -253,10 +237,10 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 - **MultiSelect**
 - `dataId` support has been added for the ResponsiveDropBox Component.
-- The `dataId` will be reflected as `dataId` with the suffix "\_dropbox".
+- The `dataId` will be reflected as `dataId` with the suffix "_dropbox".
 - **DateWidget**
 - `dataId` support has been added for the datePicker icon.
-- The `dataId` will be reflected as `dataId` with the suffix "\_datePicker".
+- The `dataId` will be reflected as `dataId` with the suffix "_datePicker".
 
 # 1.2.34
 
@@ -421,7 +405,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.1.1
 
-- ComponentTheme file --zdt\_ prefix missing changes
+- ComponentTheme file --zdt_ prefix missing changes
 
 # 1.1.0
 
@@ -449,7 +433,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-275
 
-- **DateTime** - millisecond and second should work only when customDateFormat is given issue fixed. this fix related to _1.0.0-alpha-272_
+- **DateTime** - millisecond and second should work only when customDateFormat is given issue fixed. this fix related to *1.0.0-alpha-272*
 
 # 1.0.0-alpha-274
 

package/es/Accordion/Accordion.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Accordion_defaultProps } from './props/defaultProps';
-import { Accordion_propTypes } from './props/propTypes';
+import { Accordion_defaultProps } from "./props/defaultProps";
+import { Accordion_propTypes } from "./props/propTypes";
 export default class Accordion extends React.Component {
   constructor(props) {
     super(props);

package/es/Accordion/AccordionItem.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { AccordionItem_defaultProps } from './props/defaultProps';
-import { AccordionItem_propTypes } from './props/propTypes';
-import VelocityAnimation from '../VelocityAnimation/VelocityAnimation/VelocityAnimation';
-import VelocityAnimationGroup from '../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { AccordionItem_defaultProps } from "./props/defaultProps";
+import { AccordionItem_propTypes } from "./props/propTypes";
+import VelocityAnimation from "../VelocityAnimation/VelocityAnimation/VelocityAnimation";
+import VelocityAnimationGroup from "../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup";
 export default class AccordionItem extends React.Component {
   constructor(props) {
     super(props);

package/es/Accordion/__tests__/Accordion.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Accordion from '../Accordion';
+import Accordion from "../Accordion";
 describe('Accordion', () => {
   test('rendering the defult props', () => {
     const {

package/es/Accordion/__tests__/AccordionItem.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AccordionItem from '../AccordionItem';
+import AccordionItem from "../AccordionItem";
 describe('AccordionItem', () => {
   test('rendering the defult props', () => {
     const mockOnClick = jest.fn();

package/es/Accordion/index.js

@@ -1,2 +1,2 @@
-export { default as Accordion } from './Accordion';
-export { default as AccordionItem } from './AccordionItem';
+export { default as Accordion } from "./Accordion";
+export { default as AccordionItem } from "./AccordionItem";

package/es/Animation/Animation.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { CSSTransition } from 'react-transition-group';
-import { animationStyle } from './utils';
+import { animationStyle } from "./utils";
 export default class Animation extends React.Component {
   constructor(props) {
     super(props);

package/es/Animation/__tests__/Animation.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Animation from '../Animation';
+import Animation from "../Animation";
 describe('Animation', () => {
   test('rendering the defult props', () => {
     const {

package/es/Animation/utils.js

@@ -1,4 +1,4 @@
-import style from '../common/transition.module.css';
+import style from "../common/transition.module.css";
 export const animationStyle = {
   zoomIn: {
     enter: style.zoomInEnter,

package/es/AppContainer/AppContainer.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { Container, Box } from '../Layout';
-import Tooltip from '../Tooltip/Tooltip';
-import '../common/basic.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { Container, Box } from "../Layout";
+import Tooltip from "../Tooltip/Tooltip";
+import "../common/basic.module.css";
 import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
@@ -11,10 +11,10 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
-import '../common/a11y.module.css';
-import '../common/boxShadow.module.css';
-import style from './AppContainer.module.css';
-import { getLibraryConfig, setLibraryConfig } from '../Provider/Config';
+import "../common/a11y.module.css";
+import "../common/boxShadow.module.css";
+import style from "./AppContainer.module.css";
+import { getLibraryConfig, setLibraryConfig } from "../Provider/Config";
 export default class AppContainer extends React.Component {
   constructor(props) {
     super(props);
@@ -81,12 +81,13 @@ export default class AppContainer extends React.Component {
 
     if (this.containerElement && needTooltip) {
       this.containerElement.removeEventListener('mouseover', this.handleOver, false);
-      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+      this.containerElement.removeEventListener('mouseout', this.removeTimeout, false);
       this.tooltipRef.unObserveElement();
-      setLibraryConfig({
-        getTooltipContainer: () => null
-      });
     }
+
+    setLibraryConfig({
+      getTooltipContainer: () => null
+    });
   }
 
   render() {

package/es/AppContainer/__tests__/AppContainer.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AppContainer from '../AppContainer.js';
+import AppContainer from "../AppContainer.js";
 describe('AppContainer', () => {
   test('rendering the defult props', () => {
     const {

package/es/Avatar/Avatar.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { getInitial } from '../utils/getInitial';
-import AvatarSize from '../Provider/AvatarSize';
-import style from './Avatar.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { getInitial } from "../utils/getInitial";
+import AvatarSize from "../Provider/AvatarSize";
+import style from "./Avatar.module.css";
 /*
 1. need to change name into firstName lastName
 2. pattern support via context as well as props

package/es/Avatar/__tests__/Avatar.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Avatar from '../Avatar.js';
+import Avatar from "../Avatar.js";
 describe('Avatar', () => {
   test('rendering the defult props', () => {
     const {

package/es/AvatarTeam/AvatarTeam.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import Avatar from '../Avatar/Avatar';
-import style from './AvatarTeam.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import Avatar from "../Avatar/Avatar";
+import style from "./AvatarTeam.module.css";
 /* once avatar support firstname lastname and pattern
 pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
 

package/es/AvatarTeam/__tests__/AvatarTeam.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AvatarTeam from '../AvatarTeam.js';
+import AvatarTeam from "../AvatarTeam.js";
 describe('AvatarTeam', () => {
   test('rendering the defult props', () => {
     const {

package/es/AvatarTeam/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as AvatarProps } from '../../Avatar/props/propTypes';
+import { propTypes as AvatarProps } from "../../Avatar/props/propTypes";
 export const propTypes = {
   dataId: PropTypes.string,
   dataSelectorId: PropTypes.string,

package/es/Button/Button.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import cssJSLogic from './css/cssJSLogic';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import cssJSLogic from "./css/cssJSLogic";
 import { mergeStyle } from '@zohodesk/utils';
-import style from './css/Button.module.css';
+import style from "./css/Button.module.css";
 /*
 Button text and children props?
 use children for both cases

package/es/Button/__tests__/Button.spec.js

@@ -1,6 +1,11 @@
 import React from 'react';
-import Button from '../Button';
-import { render } from "@testing-library/react";
+import Button from "../Button";
+import { render, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+afterEach(() => {
+  cleanup();
+});
 describe('Button component', () => {
   test('Should be render with the basic set of default props', () => {
     const {
@@ -106,4 +111,132 @@ describe('Button component', () => {
   //     const { asFragment } = render(<Button customStyle={{$medium: "buttonMedium"}} />);
   //     expect(asFragment()).toMatchSnapshot();
   // });
+});
+describe('Button - Unit Testing', () => {
+  test('Should render with text prop', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      text: "Click Me"
+    }));
+    expect(getByText('Click Me')).toBeInTheDocument();
+  });
+  test('Should render with children prop', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Button, null, "Click Me"));
+    expect(getByText('Click Me')).toBeInTheDocument();
+  });
+  test('Should apply custom styles from customStyle prop', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customStyle: {
+        bold: 'customBoldClass'
+      }
+    })); // expect(getByRole('button').getAttribute('class')).toContain('customBoldClass');
+
+    expect(getByRole('button')).toHaveClass('customBoldClass');
+  });
+  test('Should apply custom classes from customClass prop', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customClass: {
+        customButton: 'customButtonClass'
+      }
+    }));
+    expect(getByRole('button')).toHaveClass('customButtonClass');
+  });
+  test('Should be disabled when disabled prop is true', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      disabled: true
+    }));
+    expect(getByRole('button')).toBeDisabled();
+  });
+  test('Should expose element with getRef prop', () => {
+    const getRef = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      getRef: getRef
+    }));
+    expect(getRef).toHaveBeenCalledWith(getByRole('button'));
+  });
+  test('Should trigger onClick function', () => {
+    const onClick = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      onClick: onClick
+    })); // fireEvent.click(getByRole('button'));
+
+    userEvent.click(getByRole('button'));
+    expect(onClick).toHaveBeenCalled();
+  });
+  test('Should not trigger onClick when disabled', () => {
+    const onClick = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      disabled: true,
+      onClick: onClick
+    }));
+    userEvent.click(getByRole('button'));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  test('Should render with correct data-id attribute', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      dataId: "testButton"
+    }));
+    expect(getByRole('button')).toHaveAttribute('data-id', 'testButton');
+  });
+  test('Should render with correct data-selector-id attribute', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      dataSelectorId: "testSelector"
+    }));
+    expect(getByRole('button')).toHaveAttribute('data-selector-id', 'testSelector');
+  });
+  test('Should render with correct title attribute', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      title: "Test Title"
+    }));
+    expect(getByRole('button')).toHaveAttribute('data-title', 'Test Title');
+  });
+  test('Should render with correct id attribute', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      id: "buttonElement"
+    }));
+    expect(getByRole('button')).toHaveAttribute('id', 'buttonElement');
+  });
+  test('Should apply a11y props correctly', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      a11y: {
+        'aria-label': 'test'
+      }
+    }));
+    expect(getByRole('button')).toHaveAttribute('aria-label', 'test');
+  });
+  test('Should apply customProps correctly', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customProps: {
+        'data-custom-attr': 'true'
+      }
+    }));
+    expect(getByRole('button')).toHaveAttribute('data-custom-attr', 'true');
+  });
 });

package/es/Button/index.js

@@ -1,2 +1,2 @@
-export { default as Button } from './Button';
-export { default as ButtonPropTypes } from './props/propTypes';
+export { default as Button } from "./Button";
+export { default as ButtonPropTypes } from "./props/propTypes";

package/es/Button/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { dummyFunction } from '../../utils/dummyFunction';
+import { dummyFunction } from "../../utils/dummyFunction";
 export const defaultProps = {
   children: null,
   dataId: 'buttonComp',

package/es/Buttongroup/Buttongroup.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from './Buttongroup.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "./Buttongroup.module.css";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
 'tab','alignleft','alignright','aligncenter' ] }] */
 

package/es/Buttongroup/__tests__/Buttongroup.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Buttongroup from '../Buttongroup.js';
+import Buttongroup from "../Buttongroup.js";
 import { render } from "@testing-library/react";
 describe('Buttongrop - ', () => {
   test('rendering the default props', () => {

package/es/Card/Card.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from './props/propTypes';
-import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from './props/defaultProps';
-import { Container, Box } from '../Layout';
-import { getLibraryConfig } from '../Provider/Config';
-import style from './Card.module.css';
+import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from "./props/propTypes";
+import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from "./props/defaultProps";
+import { Container, Box } from "../Layout";
+import { getLibraryConfig } from "../Provider/Config";
+import style from "./Card.module.css";
 /* eslint-disable react/forbid-component-props */
 
 /*

package/es/Card/__tests__/Card.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Card from '../Card';
+import Card from "../Card";
 describe('Card', () => {
   test('rendering the defult props', () => {
     const {

package/es/Card/index.js

@@ -1,4 +1,4 @@
-export { default as Card } from './Card';
-export { CardHeader } from './Card';
-export { CardContent } from './Card';
-export { CardFooter } from './Card';
+export { default as Card } from "./Card";
+export { CardHeader } from "./Card";
+export { CardContent } from "./Card";
+export { CardFooter } from "./Card";

package/es/CheckBox/CheckBox.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { propTypes } from './props/propTypes';
-import { defaultProps } from './props/defaultProps';
-import Label from '../Label/Label';
-import { Container, Box } from '../Layout';
-import CssProvider from '../Provider/CssProvider';
-import style from './CheckBox.module.css';
+import { propTypes } from "./props/propTypes";
+import { defaultProps } from "./props/defaultProps";
+import Label from "../Label/Label";
+import { Container, Box } from "../Layout";
+import CssProvider from "../Provider/CssProvider";
+import style from "./CheckBox.module.css";
 export default class CheckBox extends React.Component {
   constructor(props) {
     super(props);

package/es/CheckBox/__tests__/CheckBox.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import CheckBox from '../CheckBox';
+import CheckBox from "../CheckBox";
 import { render } from "@testing-library/react";
 describe('CheckBox component', () => {
   test('Should be render with the basic set of default props', () => {