@zohodesk/components 1.0.0-temp-233 → 1.0.0-temp-235

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

@@ -0,0 +1,342 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Typography = _interopRequireDefault(require("../Typography"));
+
+var _react2 = require("@testing-library/react");
+
+var _Tag = _interopRequireDefault(require("../../Tag/Tag"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Typography component', function () {
+  var weights = ['regular', 'light', 'semibold', 'bold'];
+  var decorations = ['default', 'underline', 'strike', 'overline'];
+  test('should be render with the basic set of default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should be render with text children', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Text testing")),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render highlighted word', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: ['sun'],
+        highlightsStyle: {
+          weight: 'bold'
+        }
+      }
+    }, "The sun was bright, the sun was warm, the sun was high in the sky.")),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render highlight by Index', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          index: [1, 2]
+        }, {
+          highlightText: 'under',
+          index: 1
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        }
+      }
+    }, "The sun was bright, I walked under the sun, I talked under the sun.")),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render separate Styles per Word', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          highlightsStyle: {
+            weight: 'bold'
+          }
+        }, {
+          highlightText: 'under',
+          highlightsStyle: {
+            decoration: 'underline'
+          }
+        }]
+      }
+    }, "The sun was bright, I walked under the sun, I talked under the sun.")),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render globally skip highlights at given indexes, with isExcludedIndex', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          index: 1
+        }, {
+          highlightText: 'moon',
+          index: [2, 3]
+        }],
+        isExcludedIndex: true,
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        }
+      }
+    }, "The sun was bright, the sun was warm, the sun was high in the sky.")),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate excluded index option per word', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          index: 1,
+          isExcludedIndex: true
+        }, {
+          highlightText: 'moon',
+          index: [2, 3],
+          isExcludedIndex: false
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        }
+      }
+    }, "The sun was bright, the moon was bright, the sun and moon again.")),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global tagName applied to all highlights', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        tagName: 'i'
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate tagName for each highlighted word', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          tagName: 'i'
+        }, {
+          highlightText: 'moon',
+          tagName: 'u'
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global case-sensitive option', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        },
+        isCaseSensitive: true
+      }
+    }, "The Sun was bright, the moon was bright, the sun was warm.")),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate case-sensitive option per word', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          isCaseSensitive: true
+        }, {
+          highlightText: 'Moon',
+          isCaseSensitive: false
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        }
+      }
+    }, "The Sun was bright, the Moon was bright, the sun was warm.")),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global whole-word match only', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        },
+        isWholeWord: true
+      }
+    }, "Sunflower is a flower. The Sun was bright, the moonlight was bright.")),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate whole-word option per word', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          isWholeWord: true
+        }, {
+          highlightText: 'moon',
+          isWholeWord: false
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        }
+      }
+    }, "Sunflower is a flower. The Sun was bright, the moonlight was bright.")),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global custom style for all highlights', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        customStyle: {
+          backgroundColor: 'lightgreen'
+        }
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate custom style per word', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        }, {
+          highlightText: 'moon',
+          customStyle: {
+            backgroundColor: 'orange'
+          }
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global custom class for all highlights', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        highlightsStyle: {
+          customClass: 'global_custom_class'
+        }
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate custom class for each highlighted word', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          highlightsStyle: {
+            customClass: 'separate_custom_class_sun'
+          }
+        }, {
+          highlightText: 'moon',
+          highlightsStyle: {
+            customClass: 'separate_custom_class_moon'
+          }
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render customised render the highlight element for all highlighted words', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun'
+        }],
+        render: /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          text: "Sun"
+        })
+      }
+    }, "The sun was bright.")),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render separate customised render the highlight element for each highlighted word', function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          render: /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+            text: "Sun"
+          })
+        }, {
+          highlightText: 'moon',
+          render: /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+            text: "Moon"
+          })
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});