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

package/es/Typography/__tests__/Typography.spec.js

@@ -0,0 +1,334 @@
+import React from 'react';
+import Typography from "../Typography";
+import { render } from "@testing-library/react";
+import Tag from "../../Tag/Tag";
+describe('Typography component', () => {
+  const weights = ['regular', 'light', 'semibold', 'bold'];
+  const decorations = ['default', 'underline', 'strike', 'overline'];
+  test('should be render with the basic set of default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should be render with text children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, null, "Text testing"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render highlighted word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      highlights: {
+        highlightData: ['sun'],
+        highlightsStyle: {
+          weight: 'bold'
+        }
+      }
+    }, "The sun was bright, the sun was warm, the sun was high in the sky."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render highlight by Index', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render separate Styles per Word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render globally skip highlights at given indexes, with isExcludedIndex', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate excluded index option per word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global tagName applied to all highlights', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        tagName: 'i'
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate tagName for each highlighted word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          tagName: 'i'
+        }, {
+          highlightText: 'moon',
+          tagName: 'u'
+        }]
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global case-sensitive option', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate case-sensitive option per word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global whole-word match only', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate whole-word option per word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global custom style for all highlights', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        customStyle: {
+          backgroundColor: 'lightgreen'
+        }
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate custom style per word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        }, {
+          highlightText: 'moon',
+          customStyle: {
+            backgroundColor: 'orange'
+          }
+        }]
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global custom class for all highlights', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        highlightsStyle: {
+          customClass: 'global_custom_class'
+        }
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate custom class for each highlighted word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          highlightsStyle: {
+            customClass: 'separate_custom_class_sun'
+          }
+        }, {
+          highlightText: 'moon',
+          highlightsStyle: {
+            customClass: 'separate_custom_class_moon'
+          }
+        }]
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render customised render the highlight element for all highlighted words', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun'
+        }],
+        render: /*#__PURE__*/React.createElement(Tag, {
+          text: "Sun"
+        })
+      }
+    }, "The sun was bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render separate customised render the highlight element for each highlighted word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          render: /*#__PURE__*/React.createElement(Tag, {
+            text: "Sun"
+          })
+        }, {
+          highlightText: 'moon',
+          render: /*#__PURE__*/React.createElement(Tag, {
+            text: "Moon"
+          })
+        }]
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});