@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
60 lines (59 loc) • 2.49 kB
JavaScript
import { render } from '@testing-library/react';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Flowbite } from '../Flowbite';
import { Spinner } from './Spinner';
describe('Components / Spinner', () => {
describe('A11y', () => {
it('should have `role="status"` by default', () => {
const spinner = getSpinner(render(React.createElement(Spinner, { "aria-label": "My spinner" })));
expect(spinner).toHaveAccessibleName('My spinner');
});
it('should be able to set no `role`', () => {
const { getByLabelText } = render(React.createElement(Spinner, { "aria-label": "My spinner", role: undefined }));
const spinner = getByLabelText('My spinner');
expect(spinner).not.toHaveAttribute('role');
});
});
describe('Theme', () => {
it('should use `base` classes', () => {
const theme = {
spinner: {
base: 'text-gray-100',
},
};
const spinner = getSpinner(render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Spinner, null))));
expect(spinner.firstElementChild).toHaveClass('text-gray-100');
});
it('should use `color` classes', () => {
const theme = {
spinner: {
color: {
primary: 'text-gray-200',
},
},
};
const spinner = getSpinner(render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Spinner, { color: "primary" }))));
expect(spinner.firstElementChild).toHaveClass('text-gray-200');
});
it('should use `light` classes', () => {
const theme = {
spinner: {
light: {
on: {
color: {
success: 'text-gray-300',
},
},
},
},
};
const spinner = getSpinner(render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Spinner, { color: "success", light: true }))));
expect(spinner.firstElementChild).toHaveClass('text-gray-300');
});
});
});
const getSpinner = ({ getByRole }) => getByRole('status');