@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
157 lines (156 loc) • 4.54 kB
JavaScript
import React from 'react';
import { render } from '@testing-library/react';
import Label from "../Label.js";
describe('Label', () => {
test('rendering the defult props', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, null));
expect(asFragment()).toMatchSnapshot();
});
const type = ['title', 'subtitle'];
test.each(type)('rendering the type of- %s', type => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
type: type
}));
expect(asFragment()).toMatchSnapshot();
});
const palette = ['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark'];
test.each(palette)('rendering the palette of- %s', palette => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
palette: palette
}));
expect(asFragment()).toMatchSnapshot();
});
const size = ['xsmall', 'small', 'medium', 'large'];
test.each(size)('rendering the size of- %s', size => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
size: size
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the clipped is true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
clipped: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the title', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
title: "labelTitle"
}));
expect(asFragment()).toMatchSnapshot();
});
const variant = ['primary', 'default'];
test.each(variant)('rendering the variant of- %s', variant => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
variant: variant
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the customClass', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
customClass: "LabelCustomClass"
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the Id', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
id: "LabelID"
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the htmlFor', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
htmlFor: "LabelHtmlFor"
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the onClick prop with asFragment and toMatchSnapshot', () => {
// Define an onClick mock function
const onClickMock = jest.fn(); // Render the Label component with the onClick prop
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Click Me",
onClick: onClickMock
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering with renderRightPlaceholderNode', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "New Feature",
id: "label_new",
renderRightPlaceholderNode: /*#__PURE__*/React.createElement("span", {
style: {
background: '#27ae60',
color: 'white',
padding: '2px 6px',
borderRadius: '3px',
fontSize: '10px',
fontWeight: 'bold'
}
}, "NEW")
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering with customProps - containerProps & rightPlaceholderNodeProps', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Premium Feature",
id: "label_premium",
size: "large",
palette: "danger",
renderRightPlaceholderNode: /*#__PURE__*/React.createElement("span", {
style: {
fontSize: '10px',
background: '#f39c12',
color: 'white',
padding: '1px 4px',
borderRadius: '2px'
}
}, "PRO"),
customProps: {
containerProps: {
$ui_alignItems: 'center',
$tagAttributes_container: {
style: {
gap: '6px'
}
}
},
rightPlaceholderNodeProps: {
$ui_displayMode: 'flex',
$ui_alignItems: 'center',
$tagAttributes_container: {
style: {
gap: '6px'
}
}
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
});