@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
844 lines • 27 kB
JavaScript
import React from 'react';
import { render } from '@testing-library/react';
import Typography from "../Typography";
import Tag from "../../Tag/Tag";
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', 'breakSpaces'];
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 h2 tag name with using as', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
as: "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 dataTitle', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
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 tagAttributes', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
tagAttributes: {
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 a11yAttributes', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
a11yAttributes: {
'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 shouldReset', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
shouldReset: 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('rendering isDotted', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isDotted: 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_size)('Should render size - %s', size => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isScrollAttribute: true,
size: 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_lineClamp)('Should render lineClamp - %s', lineClamp => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isScrollAttribute: true,
lineClamp: 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_lineHeight)('Should render lineHeight - %s', lineHeight => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isScrollAttribute: true,
lineHeight: 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_display)('Should render display - %s', display => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isScrollAttribute: true,
display: 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_weight)('Should render weight - %s', weight => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isScrollAttribute: true,
weight: 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_typeFace)('Should render typeFace - %s', typeFace => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isScrollAttribute: true,
typeFace: 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_textAlign)('Should render textAlign - %s', textAlign => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isScrollAttribute: true,
textAlign: 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_letterSpacing)('Should render letterSpacing - %s', letterSpacing => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isScrollAttribute: true,
letterSpacing: 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_transform)('Should render transform - %s', transform => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isScrollAttribute: true,
transform: 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.each(ui_decoration)('Should render decoration - %s', decoration => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isScrollAttribute: true,
decoration: 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('rendering customClass', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
customClass: "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_wordBreak)('Should render wordBreak - %s', wordBreak => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isScrollAttribute: true,
wordBreak: 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_wordWrap)('Should render wordWrap - %s', wordWrap => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isScrollAttribute: true,
wordWrap: 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();
});
test.each(ui_whiteSpace)('Should render whiteSpace - %s', whiteSpace => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
isScrollAttribute: true,
whiteSpace: whiteSpace
}, "Heading"));
expect(asFragment()).toMatchSnapshot();
});
});
describe('Typography with highlight', () => {
test('should render highlighted word', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
$ui_highlightConfig: {
data: ['sun'],
styleConfiguration: {
$ui_weight: 'bold'
}
}
}, "The sun was bright, the sun was warm, the sun was high in the sky."));
expect(asFragment()).toMatchSnapshot();
});
test('should render highlighted word with highlightConfig', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
highlightConfig: {
data: ['sun'],
styleConfiguration: {
$ui_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, {
$ui_highlightConfig: {
data: [{
text: 'sun',
index: [1, 2]
}, {
text: 'under',
index: 1
}],
styleConfiguration: {
$ui_weight: 'bold',
$ui_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, {
$ui_highlightConfig: {
data: [{
text: 'sun',
styleConfiguration: {
$ui_weight: 'bold'
}
}, {
text: 'under',
styleConfiguration: {
$ui_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 shouldExcludeIndices', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
$ui_highlightConfig: {
data: [{
text: 'sun',
index: 1
}, {
text: 'moon',
index: [2, 3]
}],
shouldExcludeIndices: true,
styleConfiguration: {
$ui_weight: 'bold',
$ui_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, {
$ui_highlightConfig: {
data: [{
text: 'sun',
index: 1,
shouldExcludeIndices: true
}, {
text: 'moon',
index: [2, 3],
shouldExcludeIndices: false
}],
styleConfiguration: {
$ui_weight: 'bold',
$ui_decoration: 'underline'
}
}
}, "The sun was bright, the moon was bright, the sun and moon again."));
expect(asFragment()).toMatchSnapshot();
});
test('should render with global tag name applied to all highlights', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
$ui_highlightConfig: {
data: [{
text: 'sun'
}, {
text: 'moon'
}],
as: 'i'
}
}, "The sun and moon were bright."));
expect(asFragment()).toMatchSnapshot();
});
test('should render with separate tag name for each highlighted word', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
$ui_highlightConfig: {
data: [{
text: 'sun',
as: 'i'
}, {
text: 'moon',
as: '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, {
$ui_highlightConfig: {
data: [{
text: 'Sun'
}, {
text: 'moon'
}],
styleConfiguration: {
$ui_weight: 'bold',
$ui_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, {
$ui_highlightConfig: {
data: [{
text: 'Sun',
isCaseSensitive: true
}, {
text: 'Moon',
isCaseSensitive: false
}],
styleConfiguration: {
$ui_weight: 'bold',
$ui_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, {
$ui_highlightConfig: {
data: [{
text: 'Sun'
}, {
text: 'moon'
}],
styleConfiguration: {
$ui_weight: 'bold',
$ui_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, {
$ui_highlightConfig: {
data: [{
text: 'Sun',
isWholeWord: true
}, {
text: 'moon',
isWholeWord: false
}],
styleConfiguration: {
$ui_weight: 'bold',
$ui_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, {
$ui_highlightConfig: {
data: [{
text: 'Sun'
}, {
text: 'moon'
}],
styleConfiguration: {
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, {
$ui_highlightConfig: {
data: [{
text: 'Sun',
styleConfiguration: {
customStyle: {
backgroundColor: 'lightgreen'
}
}
}, {
text: 'moon',
styleConfiguration: {
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, {
$ui_highlightConfig: {
data: [{
text: 'Sun'
}, {
text: 'moon'
}],
styleConfiguration: {
$ui_className: '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, {
$ui_highlightConfig: {
data: [{
text: 'Sun',
styleConfiguration: {
$ui_className: 'separate_custom_class_sun'
}
}, {
text: 'moon',
styleConfiguration: {
$ui_className: '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, {
$ui_highlightConfig: {
data: [{
text: 'sun'
}],
renderHighlight: /*#__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, {
$ui_highlightConfig: {
data: [{
text: 'Sun',
renderHighlight: /*#__PURE__*/React.createElement(Tag, {
text: "Sun"
})
}, {
text: 'moon',
renderHighlight: /*#__PURE__*/React.createElement(Tag, {
text: "Moon"
})
}]
}
}, "The sun and moon were bright."));
expect(asFragment()).toMatchSnapshot();
});
test('should render for RegEx Characters check', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
$ui_highlightConfig: {
data: [{
text: '$un'
}, {
text: 'm**n'
}],
styleConfiguration: {
customStyle: {
backgroundColor: 'lightgreen'
}
}
}
}, "The sun and moon were bright. and the m**n get sunlight from the $un, The Sun provides light to its nearby stars"));
expect(asFragment()).toMatchSnapshot();
});
test('should render for combination of configuration check', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
$ui_highlightConfig: {
data: [{
text: 'Sun',
index: 1,
shouldExcludeIndices: true,
isWholeWord: true,
isCaseSensitive: true
}],
styleConfiguration: {
customStyle: {
backgroundColor: 'lightgreen'
}
}
}
}, "The sun and moon were bright. and the moon get sunlight from the Sun, The Sun provides light to its nearby stars"));
expect(asFragment()).toMatchSnapshot();
});
test('should render for priority based check - it priorities the global renderHighlight over the style configurations from the global', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
$ui_highlightConfig: {
data: ['sunlight'],
styleConfiguration: {
$ui_decoration: 'underline'
},
renderHighlight: text => /*#__PURE__*/React.createElement("a", {
href: "https://www.zoho.com",
target: "_blank",
rel: "noopener noreferrer"
}, " ", text, " ")
}
}, "1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 sunlight moonlight"));
expect(asFragment()).toMatchSnapshot();
});
test('should render for priority based check - it priorities the style configurations from the data object over the global renderHighlight', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
$ui_highlightConfig: {
data: [{
text: 'sunlight',
styleConfiguration: {
$ui_decoration: 'underline'
}
}],
renderHighlight: text => /*#__PURE__*/React.createElement("a", {
href: "https://www.zoho.com",
target: "_blank",
rel: "noopener noreferrer"
}, " ", text, " ")
}
}, "1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 sunlight moonlight"));
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', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Typography, {
$ui_highlightConfig: {
data: [{
text: 'sunlight',
styleConfiguration: {
$ui_decoration: 'underline'
},
renderHighlight: text => /*#__PURE__*/React.createElement("b", null, " ", text, " ")
}],
styleConfiguration: {
customStyle: {
backgroundColor: 'lightgreen'
}
},
renderHighlight: text => /*#__PURE__*/React.createElement("a", {
href: "https://www.zoho.com",
target: "_blank",
rel: "noopener noreferrer"
}, " ", text, " ")
}
}, "1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 sunlight moonlight"));
expect(asFragment()).toMatchSnapshot();
});
});