@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
73 lines (72 loc) • 3.39 kB
JavaScript
import { render, screen } from '@testing-library/react';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Avatar } from '.';
import { Flowbite } from '../Flowbite';
describe('Components / Avatar', () => {
describe('Theme', () => {
it('should use custom sizes', () => {
const theme = {
avatar: {
root: {
size: {
xxl: 'h-64 w-64',
},
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Avatar, { size: "xxl" })));
expect(img()).toHaveClass('h-64 w-64');
});
it('should use custom colors', () => {
const theme = {
avatar: {
root: {
color: {
rose: 'ring-rose-500 dark:ring-rose-400',
},
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Avatar, { bordered: true, color: "rose", img: "https://flowbite.com/docs/images/people/profile-picture-5.jpg", alt: "Your avatar" })));
expect(img()).toHaveClass('ring-rose-500 dark:ring-rose-400');
});
});
describe('Placeholder', () => {
it('should display placeholder initials', () => {
render(React.createElement(Flowbite, null,
React.createElement(Avatar, { placeholderInitials: "RR" })));
expect(initialsPlaceholderText()).toHaveTextContent('RR');
});
it('should support explicit sizes with placeholder initials', () => {
render(React.createElement(Flowbite, null,
React.createElement(Avatar, { placeholderInitials: "RR", size: "xl" })));
expect(initialsPlaceholder()).toHaveClass('h-36 w-36');
});
it('should support border color with placeholder initials', () => {
render(React.createElement(Flowbite, null,
React.createElement(Avatar, { placeholderInitials: "RR", bordered: true, color: "success" })));
expect(initialsPlaceholder()).toHaveClass('ring-green-500 dark:ring-green-500');
});
});
describe('Image', () => {
it('should support custom image elements', () => {
render(React.createElement(Flowbite, null,
React.createElement(Avatar, { img: (props) => React.createElement("img", { alt: "", referrerPolicy: "no-referrer", ...props }) })));
expect(img()).toHaveAttribute('referrerpolicy', 'no-referrer');
});
});
describe('Status', () => {
it('should have online status indicator', () => {
render(React.createElement(Flowbite, null,
React.createElement(Avatar, { status: "online" })));
expect(status()).toHaveClass('bg-green-400');
});
});
});
const status = () => screen.getByTestId('flowbite-avatar-status');
const img = () => screen.getByTestId('flowbite-avatar-img');
const initialsPlaceholder = () => screen.getByTestId('flowbite-avatar-initials-placeholder');
const initialsPlaceholderText = () => screen.getByTestId('flowbite-avatar-initials-placeholder-text');