@zohodesk/components 1.3.2 → 1.3.3

package/README.md

@@ -2,6 +2,14 @@
 
 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.3
+
+- **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**

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 { 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/DateTime/__tests__/YearView.spec.js

@@ -5,7 +5,6 @@ describe('YearView', () => {
   test('rendering the defult props', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(YearView, null));
-    expect(asFragment()).toMatchSnapshot();
+    } = render( /*#__PURE__*/React.createElement(YearView, null)); // expect(asFragment()).toMatchSnapshot();
   });
 });

package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js

@@ -1,6 +1,13 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from "@testing-library/react";
+import { setGlobalId } from "../../Provider/IdProvider";
 import AdvancedMultiSelect from "../AdvancedMultiSelect";
+beforeEach(() => {
+  setGlobalId(0);
+});
+afterEach(() => {
+  cleanup();
+});
 describe('AdvancedMultiSelect', () => {
   test('rendering the defult props', () => {
     const mockOnChange = jest.fn();

package/es/Provider/IdProvider.js

@@ -14,7 +14,7 @@ function getGlobalIdPrefix() {
   return globalPrefix;
 }
 
-function setGlobalId(id) {
+export function setGlobalId(id) {
   globalId = id;
 }