@zohodesk/components 1.6.5 → 1.6.7-exp-0

package/lib/Typography/__tests__/Typography.spec.js

@@ -23,7 +23,7 @@ describe('Typography', function () {
   var ui_decoration = ['default', 'underline', 'strike', 'overline'];
   var ui_wordBreak = ['breakAll', 'keepAll', 'breakWord'];
   var ui_wordWrap = ['normal', 'break'];
-  var ui_whiteSpace = ['normal', 'noWrap', 'pre', 'preLine', 'preWrap'];
+  var ui_whiteSpace = ['normal', 'noWrap', 'pre', 'preLine', 'preWrap', 'breakSpaces'];
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], null)),
         asFragment = _render.asFragment;
@@ -44,197 +44,376 @@ describe('Typography', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering i18n_dataTitle', function () {
+  test('rendering h2 tag name with using as', function () {
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-      $i18n_dataTitle: "typoDataTitle"
+      as: "h2"
     }, "Heading 2 Test")),
         asFragment = _render4.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering testId', function () {
+  test('rendering i18n_dataTitle', function () {
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-      testId: "TypoTestId"
+      $i18n_dataTitle: "typoDataTitle"
     }, "Heading 2 Test")),
         asFragment = _render5.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering customId', function () {
+  test('rendering dataTitle', function () {
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-      customId: "TypoCustomId"
+      dataTitle: "typoDataTitle"
     }, "Heading 2 Test")),
         asFragment = _render6.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering tagAttributes_text', function () {
+  test('rendering testId', function () {
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      testId: "TypoTestId"
+    }, "Heading 2 Test")),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering customId', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      customId: "TypoCustomId"
+    }, "Heading 2 Test")),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering tagAttributes_text', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $tagAttributes_text: {
         id: "TypoCustomId"
       }
     }, "Heading 2 Test")),
-        asFragment = _render7.asFragment;
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering tagAttributes', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      tagAttributes: {
+        id: "TypoCustomId"
+      }
+    }, "Heading 2 Test")),
+        asFragment = _render10.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering a11yAttributes_text', function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $a11yAttributes_text: {
         'aria-haspopup': 'true',
         'aria-expanded': true,
         'aria-controls': 'uniqueId'
       }
     }, "Heading 2 Test")),
-        asFragment = _render8.asFragment;
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering a11yAttributes', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      a11yAttributes: {
+        'aria-haspopup': 'true',
+        'aria-expanded': true,
+        'aria-controls': 'uniqueId'
+      }
+    }, "Heading 2 Test")),
+        asFragment = _render12.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering flag_reset', function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $flag_reset: true
     }, "Heading 2 Test")),
-        asFragment = _render9.asFragment;
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering shouldReset', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      shouldReset: true
+    }, "Heading 2 Test")),
+        asFragment = _render14.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering flag_dotted', function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $flag_dotted: true
     }, "Heading 2 Test")),
-        asFragment = _render10.asFragment;
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isDotted', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isDotted: true
+    }, "Heading 2 Test")),
+        asFragment = _render16.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(ui_size)('Should render ui_size - %s', function (ui_size) {
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       isScrollAttribute: true,
       $ui_size: ui_size
     }, "Heading")),
-        asFragment = _render11.asFragment;
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_size)('Should render size - %s', function (size) {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      size: size
+    }, "Heading")),
+        asFragment = _render18.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(ui_lineClamp)('Should render ui_lineClamp - %s', function (ui_lineClamp) {
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       isScrollAttribute: true,
       $ui_lineClamp: ui_lineClamp
     }, "Heading")),
-        asFragment = _render12.asFragment;
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_lineClamp)('Should render lineClamp - %s', function (lineClamp) {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      lineClamp: lineClamp
+    }, "Heading")),
+        asFragment = _render20.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(ui_lineHeight)('Should render ui_lineHeight - %s', function (ui_lineHeight) {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       isScrollAttribute: true,
       $ui_lineHeight: ui_lineHeight
     }, "Heading")),
-        asFragment = _render13.asFragment;
+        asFragment = _render21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_lineHeight)('Should render lineHeight - %s', function (lineHeight) {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      lineHeight: lineHeight
+    }, "Heading")),
+        asFragment = _render22.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(ui_display)('Should render ui_display - %s', function (ui_display) {
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       isScrollAttribute: true,
       $ui_display: ui_display
     }, "Heading")),
-        asFragment = _render14.asFragment;
+        asFragment = _render23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_display)('Should render display - %s', function (display) {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      display: display
+    }, "Heading")),
+        asFragment = _render24.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(ui_weight)('Should render ui_weight - %s', function (ui_weight) {
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       isScrollAttribute: true,
       $ui_weight: ui_weight
     }, "Heading")),
-        asFragment = _render15.asFragment;
+        asFragment = _render25.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_weight)('Should render weight - %s', function (weight) {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      weight: weight
+    }, "Heading")),
+        asFragment = _render26.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(ui_typeFace)('Should render ui_typeFace - %s', function (ui_typeFace) {
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       isScrollAttribute: true,
       $ui_typeFace: ui_typeFace
     }, "Heading")),
-        asFragment = _render16.asFragment;
+        asFragment = _render27.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_typeFace)('Should render typeFace - %s', function (typeFace) {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      typeFace: typeFace
+    }, "Heading")),
+        asFragment = _render28.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(ui_textAlign)('Should render ui_textAlign - %s', function (ui_textAlign) {
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       isScrollAttribute: true,
       $ui_textAlign: ui_textAlign
     }, "Heading")),
-        asFragment = _render17.asFragment;
+        asFragment = _render29.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_textAlign)('Should render textAlign - %s', function (textAlign) {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      textAlign: textAlign
+    }, "Heading")),
+        asFragment = _render30.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(ui_letterSpacing)('Should render ui_letterSpacing - %s', function (ui_letterSpacing) {
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       isScrollAttribute: true,
       $ui_letterSpacing: ui_letterSpacing
     }, "Heading")),
-        asFragment = _render18.asFragment;
+        asFragment = _render31.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_letterSpacing)('Should render letterSpacing - %s', function (letterSpacing) {
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      letterSpacing: letterSpacing
+    }, "Heading")),
+        asFragment = _render32.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(ui_transform)('Should render ui_transform - %s', function (ui_transform) {
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       isScrollAttribute: true,
       $ui_transform: ui_transform
     }, "Heading")),
-        asFragment = _render19.asFragment;
+        asFragment = _render33.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_transform)('Should render transform - %s', function (transform) {
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      transform: transform
+    }, "Heading")),
+        asFragment = _render34.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(ui_decoration)('Should render ui_decoration - %s', function (ui_decoration) {
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       isScrollAttribute: true,
       $ui_decoration: ui_decoration
     }, "Heading")),
-        asFragment = _render20.asFragment;
+        asFragment = _render35.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_decoration)('Should render decoration - %s', function (decoration) {
+    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      decoration: decoration
+    }, "Heading")),
+        asFragment = _render36.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering ui_className', function () {
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_className: "custom-class"
     }, "Heading 2 Test")),
-        asFragment = _render21.asFragment;
+        asFragment = _render37.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering customClass', function () {
+    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      customClass: "custom-class"
+    }, "Heading 2 Test")),
+        asFragment = _render38.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(ui_wordBreak)('Should render ui_wordBreak - %s', function (ui_wordBreak) {
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       isScrollAttribute: true,
       $ui_wordBreak: ui_wordBreak
     }, "Heading")),
-        asFragment = _render22.asFragment;
+        asFragment = _render39.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_wordBreak)('Should render wordBreak - %s', function (wordBreak) {
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      wordBreak: wordBreak
+    }, "Heading")),
+        asFragment = _render40.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(ui_wordWrap)('Should render ui_wordWrap - %s', function (ui_wordWrap) {
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       isScrollAttribute: true,
       $ui_wordWrap: ui_wordWrap
     }, "Heading")),
-        asFragment = _render23.asFragment;
+        asFragment = _render41.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_wordWrap)('Should render wordWrap - %s', function (wordWrap) {
+    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      wordWrap: wordWrap
+    }, "Heading")),
+        asFragment = _render42.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test.each(ui_whiteSpace)('Should render ui_whiteSpace - %s', function (ui_whiteSpace) {
-    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       isScrollAttribute: true,
       $ui_whiteSpace: ui_whiteSpace
     }, "Heading")),
-        asFragment = _render24.asFragment;
+        asFragment = _render43.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_whiteSpace)('Should render whiteSpace - %s', function (whiteSpace) {
+    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      whiteSpace: whiteSpace
+    }, "Heading")),
+        asFragment = _render44.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
 });
 describe('Typography with highlight', function () {
   test('should render highlighted word', function () {
-    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: ['sun'],
         styleConfiguration: {
@@ -242,12 +421,25 @@ describe('Typography with highlight', function () {
         }
       }
     }, "The sun was bright, the sun was warm, the sun was high in the sky.")),
-        asFragment = _render25.asFragment;
+        asFragment = _render45.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render highlighted word with highlightConfig', function () {
+    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlightConfig: {
+        data: ['sun'],
+        styleConfiguration: {
+          $ui_weight: 'bold'
+        }
+      }
+    }, "The sun was bright, the sun was warm, the sun was high in the sky.")),
+        asFragment = _render46.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render highlight by Index', function () {
-    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'sun',
@@ -262,12 +454,12 @@ describe('Typography with highlight', function () {
         }
       }
     }, "The sun was bright, I walked under the sun, I talked under the sun.")),
-        asFragment = _render26.asFragment;
+        asFragment = _render47.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render separate Styles per Word', function () {
-    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'sun',
@@ -282,12 +474,12 @@ describe('Typography with highlight', function () {
         }]
       }
     }, "The sun was bright, I walked under the sun, I talked under the sun.")),
-        asFragment = _render27.asFragment;
+        asFragment = _render48.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render globally skip highlights at given indexes, with shouldExcludeIndices', function () {
-    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'sun',
@@ -303,12 +495,12 @@ describe('Typography with highlight', function () {
         }
       }
     }, "The sun was bright, the sun was warm, the sun was high in the sky.")),
-        asFragment = _render28.asFragment;
+        asFragment = _render49.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render with separate excluded index option per word', function () {
-    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'sun',
@@ -325,43 +517,43 @@ describe('Typography with highlight', function () {
         }
       }
     }, "The sun was bright, the moon was bright, the sun and moon again.")),
-        asFragment = _render29.asFragment;
+        asFragment = _render50.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('should render with global tagName applied to all highlights', function () {
-    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+  test('should render with global tag name applied to all highlights', function () {
+    var _render51 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'sun'
         }, {
           text: 'moon'
         }],
-        tagName: 'i'
+        as: 'i'
       }
     }, "The sun and moon were bright.")),
-        asFragment = _render30.asFragment;
+        asFragment = _render51.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('should render with separate tagName for each highlighted word', function () {
-    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+  test('should render with separate tag name for each highlighted word', function () {
+    var _render52 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'sun',
-          tagName: 'i'
+          as: 'i'
         }, {
           text: 'moon',
-          tagName: 'u'
+          as: 'u'
         }]
       }
     }, "The sun and moon were bright.")),
-        asFragment = _render31.asFragment;
+        asFragment = _render52.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render with global case-sensitive option', function () {
-    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render53 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'Sun'
@@ -375,12 +567,12 @@ describe('Typography with highlight', function () {
         isCaseSensitive: true
       }
     }, "The Sun was bright, the moon was bright, the sun was warm.")),
-        asFragment = _render32.asFragment;
+        asFragment = _render53.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render with separate case-sensitive option per word', function () {
-    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render54 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'Sun',
@@ -395,12 +587,12 @@ describe('Typography with highlight', function () {
         }
       }
     }, "The Sun was bright, the Moon was bright, the sun was warm.")),
-        asFragment = _render33.asFragment;
+        asFragment = _render54.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render with global whole-word match only', function () {
-    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render55 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'Sun'
@@ -414,12 +606,12 @@ describe('Typography with highlight', function () {
         isWholeWord: true
       }
     }, "Sunflower is a flower. The Sun was bright, the moonlight was bright.")),
-        asFragment = _render34.asFragment;
+        asFragment = _render55.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render with separate whole-word option per word', function () {
-    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render56 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'Sun',
@@ -434,12 +626,12 @@ describe('Typography with highlight', function () {
         }
       }
     }, "Sunflower is a flower. The Sun was bright, the moonlight was bright.")),
-        asFragment = _render35.asFragment;
+        asFragment = _render56.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render with global custom style for all highlights', function () {
-    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render57 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'Sun'
@@ -453,12 +645,12 @@ describe('Typography with highlight', function () {
         }
       }
     }, "The sun and moon were bright.")),
-        asFragment = _render36.asFragment;
+        asFragment = _render57.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render with separate custom style per word', function () {
-    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render58 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'Sun',
@@ -477,12 +669,12 @@ describe('Typography with highlight', function () {
         }]
       }
     }, "The sun and moon were bright.")),
-        asFragment = _render37.asFragment;
+        asFragment = _render58.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render with global custom class for all highlights', function () {
-    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render59 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'Sun'
@@ -494,12 +686,12 @@ describe('Typography with highlight', function () {
         }
       }
     }, "The sun and moon were bright.")),
-        asFragment = _render38.asFragment;
+        asFragment = _render59.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render with separate custom class for each highlighted word', function () {
-    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render60 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'Sun',
@@ -514,12 +706,12 @@ describe('Typography with highlight', function () {
         }]
       }
     }, "The sun and moon were bright.")),
-        asFragment = _render39.asFragment;
+        asFragment = _render60.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render customised render the highlight element for all highlighted words', function () {
-    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render61 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'sun'
@@ -529,12 +721,12 @@ describe('Typography with highlight', function () {
         })
       }
     }, "The sun was bright.")),
-        asFragment = _render40.asFragment;
+        asFragment = _render61.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render separate customised render the highlight element for each highlighted word', function () {
-    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render62 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'Sun',
@@ -549,12 +741,12 @@ describe('Typography with highlight', function () {
         }]
       }
     }, "The sun and moon were bright.")),
-        asFragment = _render41.asFragment;
+        asFragment = _render62.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render for RegEx Characters check', function () {
-    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render63 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: '$un'
@@ -568,12 +760,12 @@ describe('Typography with highlight', function () {
         }
       }
     }, "The sun and moon were bright. and the m**n get sunlight from the $un, The Sun provides light to its nearby stars")),
-        asFragment = _render42.asFragment;
+        asFragment = _render63.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render for combination of configuration check', function () {
-    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render64 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'Sun',
@@ -589,12 +781,12 @@ describe('Typography with highlight', function () {
         }
       }
     }, "The sun and moon were bright. and the moon get sunlight from the Sun, The Sun provides light to its nearby stars")),
-        asFragment = _render43.asFragment;
+        asFragment = _render64.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render for priority based check - it priorities the global renderHighlight over the style configurations from the global', function () {
-    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render65 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: ['sunlight'],
         styleConfiguration: {
@@ -609,12 +801,12 @@ describe('Typography with highlight', function () {
         }
       }
     }, "1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 sunlight moonlight")),
-        asFragment = _render44.asFragment;
+        asFragment = _render65.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render for priority based check - it priorities the style configurations from the data object over the global renderHighlight', function () {
-    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render66 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'sunlight',
@@ -631,12 +823,12 @@ describe('Typography with highlight', function () {
         }
       }
     }, "1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 sunlight moonlight")),
-        asFragment = _render45.asFragment;
+        asFragment = _render66.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('should render for priority based check - it priorities the renderHighlight from the data object over the global renderHighlight, global style configuration and style configuration from the data object', function () {
-    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    var _render67 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       $ui_highlightConfig: {
         data: [{
           text: 'sunlight',
@@ -661,7 +853,7 @@ describe('Typography with highlight', function () {
         }
       }
     }, "1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 sunlight moonlight")),
-        asFragment = _render46.asFragment;
+        asFragment = _render67.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });