@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
214 lines (213 loc) • 5.82 kB
JavaScript
import React from 'react';
import { render, cleanup } from '@testing-library/react';
import Label from "../Label"; // Hoisted enum values (PropTypes.oneOf enforcement)
const REQUIRED_TYPE_VALUES = ['asterisk', 'text'];
const SIZE_VALUES = ['small', 'medium'];
const PALETTE_VALUES = ['default', 'secondary'];
const TEXT_WEIGHT_VALUES = ['regular', 'semibold'];
const LAYOUT_VALUES = ['inline', 'block'];
afterEach(cleanup);
describe('Label - Snapshot', () => {
test('Render with default props', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text"
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(REQUIRED_TYPE_VALUES)('Render with requiredType=%s', value => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
isRequired: true,
requiredType: value
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(SIZE_VALUES)('Render with size=%s', value => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
size: value
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(PALETTE_VALUES)('Render with palette=%s', value => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
palette: value
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(TEXT_WEIGHT_VALUES)('Render with fontWeight=%s', value => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
fontWeight: value
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(LAYOUT_VALUES)('Render with layout=%s', value => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
layout: value
}));
expect(asFragment()).toMatchSnapshot();
});
test('Render with shouldHighlightRequired=true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
isRequired: true,
shouldHighlightRequired: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Render with isClipped=true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
isClipped: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Render with isRequired=true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
isRequired: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Render with isRequired=true isClipped=true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
isRequired: true,
isClipped: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Render with isDisabled=true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
isDisabled: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Render with isReadOnly=true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
isReadOnly: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Render with htmlFor', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
htmlFor: "input-id"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Render with i18nKeys', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
isRequired: true,
requiredType: "text",
i18nKeys: {
requiredText: 'Custom Required'
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('Render with customClass', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
customClass: {
container: 'custom-container',
label: 'custom-label'
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('Render with customProps', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
customProps: {
container: {
$flag_shrink: true
},
label: {
$ui_lineClamp: '2'
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('Render with customId and testId', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
customId: "label-customId",
testId: "label-testId"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Render with tag attributes', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
tagAttributes: {
container: {
'data-custom-attr': 'true'
},
label: {
'data-custom-attr': 'true'
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('Render with a11y attributes', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Label, {
text: "Label text",
a11yAttributes: {
container: {
role: 'group'
},
label: {
'aria-label': 'Custom label'
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
});