@zohodesk/components 1.4.16 → 1.4.18

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

@@ -0,0 +1,225 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Typography from "../Typography";
+describe('Typography', () => {
+  const ui_size = ['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit'];
+  const ui_lineClamp = ['1', '2', '3', '4', '5'];
+  const ui_lineHeight = ['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit'];
+  const ui_display = ['block', 'inlineBlock', 'inline', 'initial'];
+  const ui_weight = ['regular', 'light', 'semibold', 'bold'];
+  const ui_typeFace = ['normal', 'italic'];
+  const ui_textAlign = ['left', 'center', 'right', 'justify'];
+  const ui_letterSpacing = ['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit'];
+  const ui_transform = ['default', 'upper', 'lower', 'capital'];
+  const ui_decoration = ['default', 'underline', 'strike', 'overline'];
+  const ui_wordBreak = ['breakAll', 'keepAll', 'breakWord'];
+  const ui_wordWrap = ['normal', 'break'];
+  const ui_whiteSpace = ['normal', 'noWrap', 'pre', 'preLine', 'preWrap'];
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the children ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, null, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ui_tagName as h2', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_tagName: "h2"
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering i18n_dataTitle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $i18n_dataTitle: "typoDataTitle"
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      testId: "TypoTestId"
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering customId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      customId: "TypoCustomId"
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering tagAttributes_text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $tagAttributes_text: {
+        id: "TypoCustomId"
+      }
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering a11yAttributes_text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $a11yAttributes_text: {
+        'aria-haspopup': 'true',
+        'aria-expanded': true,
+        'aria-controls': 'uniqueId'
+      }
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering flag_reset', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $flag_reset: true
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering flag_dotted', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $flag_dotted: true
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_size)('Should render ui_size - %s', ui_size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_size: ui_size
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_lineClamp)('Should render ui_lineClamp - %s', ui_lineClamp => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_lineClamp: ui_lineClamp
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_lineHeight)('Should render ui_lineHeight - %s', ui_lineHeight => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_lineHeight: ui_lineHeight
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_display)('Should render ui_display - %s', ui_display => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_display: ui_display
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_weight)('Should render ui_weight - %s', ui_weight => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_weight: ui_weight
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_typeFace)('Should render ui_typeFace - %s', ui_typeFace => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_typeFace: ui_typeFace
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_textAlign)('Should render ui_textAlign - %s', ui_textAlign => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_textAlign: ui_textAlign
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_letterSpacing)('Should render ui_letterSpacing - %s', ui_letterSpacing => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_letterSpacing: ui_letterSpacing
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_transform)('Should render ui_transform - %s', ui_transform => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_transform: ui_transform
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_decoration)('Should render ui_decoration - %s', ui_decoration => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_decoration: ui_decoration
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ui_className', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_className: "custom-class"
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_wordBreak)('Should render ui_wordBreak - %s', ui_wordBreak => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_wordBreak: ui_wordBreak
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_wordWrap)('Should render ui_wordWrap - %s', ui_wordWrap => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_wordWrap: ui_wordWrap
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_whiteSpace)('Should render ui_whiteSpace - %s', ui_whiteSpace => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_whiteSpace: ui_whiteSpace
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});