@navinc/base-react-components
Version:
Nav's Pattern Library
55 lines • 2.9 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { describe, expect, it } from 'vitest';
import { screen } from '@testing-library/react';
import { Avatar } from './avatar.js';
import { renderWithContext } from './tests/with-app-context.js';
describe('<Avatar />', () => {
describe('render Avatar', () => {
it('with image', () => {
renderWithContext(_jsx(Avatar, { src: "fake-src" }));
expect(screen.getByTestId('avatar:image')).toBeInTheDocument();
});
it('with image and label', () => {
const label = 'This is my name';
renderWithContext(_jsx(Avatar, { src: "fake-src", label: label }));
expect(screen.getByTestId('avatar:image')).toBeInTheDocument();
expect(screen.getByTestId('avatar:label')).toBeInTheDocument();
expect(screen.getByText(label)).toBeInTheDocument();
});
});
describe('render fallback', () => {
it('with the default fallback icon', () => {
renderWithContext(_jsx(Avatar, {}));
expect(screen.queryByTestId('avatar:image')).not.toBeInTheDocument();
expect(screen.queryByTestId('avatar:abbr')).not.toBeInTheDocument();
expect(screen.queryByTestId('avatar:label')).not.toBeInTheDocument();
expect(screen.getByTestId('avatar:icon people/profile')).toBeInTheDocument();
});
it('with a specific fallback icon', () => {
renderWithContext(_jsx(Avatar, { defaultIcon: "buildings/bank" }));
expect(screen.queryByTestId('avatar:image')).not.toBeInTheDocument();
expect(screen.queryByTestId('avatar:abbr')).not.toBeInTheDocument();
expect(screen.queryByTestId('avatar:label')).not.toBeInTheDocument();
expect(screen.getByTestId('avatar:icon buildings/bank')).toBeInTheDocument();
});
it('abbreviation avatar using multiple words', () => {
const label = 'the Olive garden';
renderWithContext(_jsx(Avatar, { label: label }));
expect(screen.getByTestId('avatar:label')).toBeInTheDocument();
expect(screen.getByText(label)).toBeInTheDocument();
const avatar = screen.queryByTestId('avatar:abbr');
expect(avatar).toBeInTheDocument();
expect(avatar).toHaveTextContent('TG');
});
it('abbreviation avatar using a single word', () => {
const label = 'Walmart';
renderWithContext(_jsx(Avatar, { label: label }));
expect(screen.getByTestId('avatar:label')).toBeInTheDocument();
expect(screen.getByText(label)).toBeInTheDocument();
const avatar = screen.queryByTestId('avatar:abbr');
expect(avatar).toBeInTheDocument();
expect(avatar).toHaveTextContent('WA');
});
});
});
//# sourceMappingURL=avatar.spec.js.map