@kadconsulting/dry
Version:
KAD Reusable Component Library
124 lines • 6.21 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import Avatar from './Avatar';
import { StatusIcon } from './AvatarTypes';
describe('Avatar', () => {
// Test for default behavior
it('renders with default className for image variant', () => {
const props = {
variant: 'image',
imageUrl: 'https://example.com/image.jpg',
};
const { container } = render(_jsx(Avatar, { ...props }));
expect(container.firstChild).toHaveClass('dry-avatar');
});
// Test for ref forwarding
it('forwards ref to its outermost element', async () => {
const Wrapper = () => {
const ref = useRef(null);
const [refWasPassed, setRefWasPassed] = useState(false);
useEffect(() => {
setRefWasPassed(!!ref.current);
}, []);
return (_jsxs(_Fragment, { children: [_jsx(Avatar, { variant: 'image', imageUrl: 'https://example.com/image.jpg', ref: ref }), refWasPassed && _jsx("div", { children: "Ref was passed!" })] }));
};
render(_jsx(Wrapper, {}));
await waitFor(() => screen.getByText('Ref was passed!'));
});
// Test for id forwarding
it('forwards downstream id', () => {
const id = 'test-id';
render(_jsx(Avatar, { variant: 'image', imageUrl: 'https://example.com/image.jpg', id: id }));
expect(screen.getByTestId('avatar')).toHaveAttribute('id', id);
});
// Test for className forwarding
it('forwards downstream className(s)', () => {
const className = 'first second third';
render(_jsx(Avatar, { variant: 'image', imageUrl: 'https://example.com/image.jpg', className: className }));
const avatarElement = screen.getByTestId('avatar');
expect(avatarElement).toHaveClass('first');
expect(avatarElement).toHaveClass('second');
expect(avatarElement).toHaveClass('third');
});
// Test for inline style forwarding
it('forwards downstream inline style(s)', () => {
const style = { color: 'red' };
render(_jsx(Avatar, { variant: 'image', imageUrl: 'https://example.com/image.jpg', style: style }));
const avatarElement = screen.getByTestId('avatar');
expect(avatarElement).toHaveStyle('color: red');
});
// Test for data-* attributes forwarding
it('forwards downstream data-* attribute(s)', () => {
const dataProduct = 'product-1234';
render(_jsx(Avatar, { variant: 'image', imageUrl: 'https://example.com/image.jpg', "data-product": dataProduct }));
const avatarElement = screen.getByTestId('avatar');
expect(avatarElement).toHaveAttribute('data-product', dataProduct);
});
// Test for Image variant
it('renders image variant correctly', () => {
const imageUrl = 'https://example.com/image.jpg';
const testId = 'image-test';
render(_jsx(Avatar, { variant: 'image', imageUrl: imageUrl, "data-testid": testId }));
const avatarElement = screen.getByTestId(testId);
expect(avatarElement).toHaveStyle(`background-image: url(${imageUrl})`);
});
// Test for Online variant
it('renders online variant correctly', () => {
const isOnline = true;
const testId = 'online-test';
render(_jsx(Avatar, { variant: 'online', isOnline: isOnline, "data-testid": testId }));
const avatarElement = screen.getByTestId(testId);
expect(avatarElement).toHaveTextContent('Online');
});
// Test for Company variant
it('renders company variant correctly', () => {
const testId = 'company-test';
render(_jsx(Avatar, { variant: 'company', "data-testid": testId }));
const avatarElement = screen.getByTestId(testId);
expect(avatarElement).toHaveTextContent('Company Icon');
});
// Test for Verified variant
it('renders verified variant correctly', () => {
const testId = 'verified-test';
render(_jsx(Avatar, { variant: 'verified', "data-testid": testId }));
const avatarElement = screen.getByTestId(testId);
expect(avatarElement).toHaveTextContent('✔');
});
// Test for AddButton variant
it('renders addButton variant correctly', () => {
const testId = 'addButton-test';
render(_jsx(Avatar, { variant: 'addButton', "data-testid": testId }));
const avatarElement = screen.getByTestId(testId);
expect(avatarElement).toHaveTextContent('+');
});
// Test for Group variant
it('renders group variant with moreUsers and addMoreButton correctly', () => {
const testId = 'group-test';
render(_jsx(Avatar, { variant: 'group', moreUsers: true, addMoreButton: true, "data-testid": testId }));
const avatarElement = screen.getByTestId(testId);
expect(avatarElement).toHaveTextContent('More Users');
expect(avatarElement).toHaveTextContent('Add More');
});
// Test for LabelGroup variant
it('renders labelGroup variant with statusIcon correctly', () => {
const statusIcon = StatusIcon.ONLINE;
const testId = 'labelGroup-test';
render(_jsx(Avatar, { variant: 'labelGroup', statusIcon: statusIcon, "data-testid": testId }));
const avatarElement = screen.getByTestId(testId);
expect(avatarElement).toHaveTextContent(statusIcon);
});
// Test for ProfilePhoto variant
it('renders profilePhoto variant with placeholder, text, and verified correctly', () => {
const placeholder = true;
const text = true;
const verified = true;
const testId = 'profilePhoto-test';
render(_jsx(Avatar, { variant: 'profilePhoto', placeholder: placeholder, text: text, verified: verified, "data-testid": testId }));
const avatarElement = screen.getByTestId(testId);
expect(avatarElement).toHaveTextContent('Placeholder');
expect(avatarElement).toHaveTextContent('Text');
expect(avatarElement).toHaveTextContent('✔');
});
});
//# sourceMappingURL=Avatar.test.js.map