@zohodesk/dot 1.9.5 → 1.9.6

package/README.md

@@ -2,7 +2,7 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
-# 1.9.5
+# 1.9.5, # 1.9.6
 
 - **listCommon.module.css**  A css active ignore comment has been added to fix the hover and click pseudo-class collision issue on iOS tablets.
 - **list/Subject** dataId and testId have been moved back to the parent element as they were earlier.

package/es/list/Subject/Subject.js

@@ -48,8 +48,7 @@ export default class Subject extends Component {
       urlData: urlData,
       onClick: onClick,
       target: target,
-      customId: dataId,
-      testId: dataId
+      dataId: dataId
     }, LinkProps), children ? children : /*#__PURE__*/React.createElement(Typography, {
       $tagAttributes_text: linkTagAttributes,
       $i18n_dataTitle: text,

package/es/list/Subject/__tests__/Subject.spec.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Subject from "../Subject";
 describe('Subject', () => {
   test('rendering the defult props', () => {
@@ -26,4 +27,111 @@ describe('Subject', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('renders data attributes on link wrapper', () => {
+    const dataId = 'subject-id';
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      isLink: true,
+      dataId: dataId
+    }));
+    expect(container).toMatchSnapshot();
+    const anchor = container.querySelector('a');
+    expect(anchor.getAttribute('data-id')).toBe(dataId);
+    expect(anchor.getAttribute('data-test-id')).toBe(dataId);
+  });
+  test('renders text content', () => {
+    const text = 'Test Subject';
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      text: text
+    }));
+    expect(container.textContent).toContain(text);
+  });
+  test('renders with custom className', () => {
+    const customClass = 'custom-subject';
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      className: customClass
+    }));
+    expect(container.querySelector(`.${customClass}`)).not.toBeNull();
+  });
+  test('renders dotted text when isDotted is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      text: "Test",
+      isDotted: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders children when provided', () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      isLink: true
+    }, /*#__PURE__*/React.createElement("span", null, "Custom Child")));
+    expect(container.querySelector('span').textContent).toBe('Custom Child');
+  });
+  test('applies fontWeight prop', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      text: "Test",
+      fontWeight: "bold"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with href when isLink is true', () => {
+    const href = 'https://example.com';
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      isLink: true,
+      href: href
+    }));
+    expect(container.querySelector('a').getAttribute('href')).toBe(href);
+  });
+  test('calls onClick when link is clicked', () => {
+    const handleClick = jest.fn();
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      isLink: true,
+      onClick: handleClick
+    }));
+    container.querySelector('a').click();
+    expect(handleClick).toHaveBeenCalled();
+  });
+  test('renders as non-link when isLink is false', () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      text: "Test",
+      isLink: false
+    }));
+    expect(container.querySelector('a')).toBeNull();
+  });
+  test('applies custom className to non-link element', () => {
+    const customClass = 'test-class';
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      text: "Test",
+      className: customClass,
+      isLink: false
+    }));
+    expect(container.querySelector(`.${customClass}`)).not.toBeNull();
+  });
+  test('renders with target prop on link', () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      isLink: true,
+      target: "_blank"
+    }));
+    expect(container.querySelector('a').getAttribute('target')).toBe('_blank');
+  });
 });

package/es/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Subject applies fontWeight prop 1`] = `
+<DocumentFragment>
+  <div
+    class="dotted font_bold subject  whiteSpace_pre"
+    data-title="Test"
+    data-title-wrap="pre"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -152,3 +164,32 @@ exports[`Subject rendering the whiteSpace of -pre-wrap 2`] = `
   </a>
 </DocumentFragment>
 `;
+
+exports[`Subject renders data attributes on link wrapper 1`] = `
+<div>
+  <a
+    class="container  "
+    data-id="subject-id"
+    data-test-id="subject-id"
+    href="javascript:void(0);"
+    rel="noopener noreferrer"
+  >
+    <div
+      class="dotted font_regular subject whiteSpace_pre  cursorPointer"
+      data-title-wrap="pre"
+    />
+  </a>
+</div>
+`;
+
+exports[`Subject renders dotted text when isDotted is true 1`] = `
+<DocumentFragment>
+  <div
+    class="dotted font_regular subject  whiteSpace_pre"
+    data-title="Test"
+    data-title-wrap="pre"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/es/list/Subject/props/defaultProps.js

@@ -1,10 +1,11 @@
+import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 export const defaultProps = {
   isLink: false,
   fontWeight: 'regular',
   className: '',
   isDotted: true,
-  customProps: {},
+  customProps: DUMMY_OBJECT,
   whiteSpace: 'pre',
   isHighlighted: false,
-  highlightData: {}
+  highlightData: DUMMY_OBJECT
 };

package/lib/list/Subject/Subject.js

@@ -106,8 +106,7 @@ var Subject = /*#__PURE__*/function (_Component) {
         urlData: urlData,
         onClick: onClick,
         target: target,
-        customId: dataId,
-        testId: dataId
+        dataId: dataId
       }, LinkProps), children ? children : /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         $tagAttributes_text: linkTagAttributes,
         $i18n_dataTitle: text,

package/lib/list/Subject/__tests__/Subject.spec.js

@@ -4,6 +4,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+require("@testing-library/jest-dom");
+
 var _Subject = _interopRequireDefault(require("../Subject"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -33,4 +35,117 @@ describe('Subject', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('renders data attributes on link wrapper', function () {
+    var dataId = 'subject-id';
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      isLink: true,
+      dataId: dataId
+    })),
+        container = _render4.container;
+
+    expect(container).toMatchSnapshot();
+    var anchor = container.querySelector('a');
+    expect(anchor.getAttribute('data-id')).toBe(dataId);
+    expect(anchor.getAttribute('data-test-id')).toBe(dataId);
+  });
+  test('renders text content', function () {
+    var text = 'Test Subject';
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      text: text
+    })),
+        container = _render5.container;
+
+    expect(container.textContent).toContain(text);
+  });
+  test('renders with custom className', function () {
+    var customClass = 'custom-subject';
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      className: customClass
+    })),
+        container = _render6.container;
+
+    expect(container.querySelector(".".concat(customClass))).not.toBeNull();
+  });
+  test('renders dotted text when isDotted is true', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      text: "Test",
+      isDotted: true
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders children when provided', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      isLink: true
+    }, /*#__PURE__*/_react["default"].createElement("span", null, "Custom Child"))),
+        container = _render8.container;
+
+    expect(container.querySelector('span').textContent).toBe('Custom Child');
+  });
+  test('applies fontWeight prop', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      text: "Test",
+      fontWeight: "bold"
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with href when isLink is true', function () {
+    var href = 'https://example.com';
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      isLink: true,
+      href: href
+    })),
+        container = _render10.container;
+
+    expect(container.querySelector('a').getAttribute('href')).toBe(href);
+  });
+  test('calls onClick when link is clicked', function () {
+    var handleClick = jest.fn();
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      isLink: true,
+      onClick: handleClick
+    })),
+        container = _render11.container;
+
+    container.querySelector('a').click();
+    expect(handleClick).toHaveBeenCalled();
+  });
+  test('renders as non-link when isLink is false', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      text: "Test",
+      isLink: false
+    })),
+        container = _render12.container;
+
+    expect(container.querySelector('a')).toBeNull();
+  });
+  test('applies custom className to non-link element', function () {
+    var customClass = 'test-class';
+
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      text: "Test",
+      className: customClass,
+      isLink: false
+    })),
+        container = _render13.container;
+
+    expect(container.querySelector(".".concat(customClass))).not.toBeNull();
+  });
+  test('renders with target prop on link', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      isLink: true,
+      target: "_blank"
+    })),
+        container = _render14.container;
+
+    expect(container.querySelector('a').getAttribute('target')).toBe('_blank');
+  });
 });

package/lib/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Subject applies fontWeight prop 1`] = `
+<DocumentFragment>
+  <div
+    class="dotted font_bold subject  whiteSpace_pre"
+    data-title="Test"
+    data-title-wrap="pre"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -152,3 +164,32 @@ exports[`Subject rendering the whiteSpace of -pre-wrap 2`] = `
   </a>
 </DocumentFragment>
 `;
+
+exports[`Subject renders data attributes on link wrapper 1`] = `
+<div>
+  <a
+    class="container  "
+    data-id="subject-id"
+    data-test-id="subject-id"
+    href="javascript:void(0);"
+    rel="noopener noreferrer"
+  >
+    <div
+      class="dotted font_regular subject whiteSpace_pre  cursorPointer"
+      data-title-wrap="pre"
+    />
+  </a>
+</div>
+`;
+
+exports[`Subject renders dotted text when isDotted is true 1`] = `
+<DocumentFragment>
+  <div
+    class="dotted font_regular subject  whiteSpace_pre"
+    data-title="Test"
+    data-title-wrap="pre"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/lib/list/Subject/props/defaultProps.js

@@ -4,14 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultProps = void 0;
+
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
 var defaultProps = {
   isLink: false,
   fontWeight: 'regular',
   className: '',
   isDotted: true,
-  customProps: {},
+  customProps: _constants.DUMMY_OBJECT,
   whiteSpace: 'pre',
   isHighlighted: false,
-  highlightData: {}
+  highlightData: _constants.DUMMY_OBJECT
 };
 exports.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,