@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
138 lines (137 loc) • 4.2 kB
JavaScript
import React from 'react';
import { render } from '@testing-library/react';
import AvatarTeam from "../AvatarTeam.js";
describe('AvatarTeam', () => {
test('rendering the defult props', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(AvatarTeam, null));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the Props of Avatar', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(AvatarTeam, {
name: "AvatarTeamName",
src: "https://www.w3schools.com/images/w3schools_green.jpg",
title: "AvatarTeam",
needTitle: true,
borderOnActive: true,
border: true,
needInnerBorder: true,
needBorder: true,
needDefaultBorder: true
}));
expect(asFragment()).toMatchSnapshot();
});
const palettes = ['primary', 'secondary', 'info'];
test.each(palettes)('rendering the palette of- %s', palette => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(AvatarTeam, {
palette: palette
}));
expect(asFragment()).toMatchSnapshot();
});
const sizes = ['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge'];
test.each(sizes)('rendering the sizes of- %s', size => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(AvatarTeam, {
size: size
}));
expect(asFragment()).toMatchSnapshot();
});
const textPalettes = ['white', 'black'];
test.each(textPalettes)('rendering the textPalette of- %s', textPalette => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(AvatarTeam, {
textPalette: textPalette
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering borderOnActive', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(AvatarTeam, {
borderOnActive: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering border is true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(AvatarTeam, {
borderOnHover: true
}));
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(AvatarTeam, {
onClick: onClickMock
}));
expect(asFragment()).toMatchSnapshot();
});
const palette = ['primary', 'secondary', 'info'];
test.each(palette)('rendering the palette with isFilled of- %s', palette => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(AvatarTeam, {
palette: palette,
isFilled: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering CustomClass - customAvatar', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(AvatarTeam, {
customClass: {
customAvatar: 'TeamCustomClass'
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering CustomClass - customAvatarTeam', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(AvatarTeam, {
customClass: {
customAvatarTeam: 'AvatarTeamCustomAvatar'
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering customProps - AvatarTeamProps', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(AvatarTeam, {
customProps: {
AvatarTeamProps: {
'data-team-avatar': true,
isbold: 'Prakash the King maker'
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering customProps - AvatarProps', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(AvatarTeam, {
src: "https://www.w3schools.com/images/w3schools_green.jpg",
customProps: {
AvatarProps: {
size: 'small',
isAnimate: false
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
});