@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
95 lines (94 loc) • 5.36 kB
JavaScript
import { render, screen } from '@testing-library/react';
import { HiGlobe, HiLockClosed } from '@vertisanpro/react-icons/hi';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Button } from '../Button';
import { Checkbox } from '../Checkbox';
import { FileInput } from '../FileInput';
import { Flowbite } from '../Flowbite';
import { Radio } from '../Radio';
import { RangeSlider } from '../RangeSlider';
import { Select } from '../Select';
import { TextInput } from '../TextInput';
import { Textarea } from '../Textarea';
import { ToggleSwitch } from '../ToggleSwitch';
import { Label } from './Label';
describe.concurrent('Components / Label', () => {
describe.concurrent('A11y', () => {
it('should provide accessible name to any form control associated by `htmlFor`', () => {
const inputLabels = [
'Your email',
'Your password',
'Remember me',
'Enable notifications',
'Upload file',
'United States',
'Your message',
'Price',
];
const { getByLabelText } = render(React.createElement(TestForm, null));
inputLabels.forEach((label) => expect(getByLabelText(label)).toHaveAccessibleName(label));
});
describe('Theme', () => {
it('should use `disabled` classes', () => {
const theme = {
label: {
root: {
disabled: 'opacity-50',
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Label, { disabled: true })));
expect(label()).toHaveClass('opacity-50');
});
});
});
});
const label = () => screen.getByTestId('flowbite-label');
const TestForm = () => (React.createElement("form", null,
React.createElement("div", null,
React.createElement(ToggleSwitch, { checked: false, label: "Enable notifications", onChange: console.log })),
React.createElement("div", null,
React.createElement(Label, { htmlFor: "email" }, "Your email"),
React.createElement(TextInput, { id: "email", type: "email", placeholder: "name@flowbite.com", required: true })),
React.createElement("div", null,
React.createElement(Label, { htmlFor: "password" }, "Your password"),
React.createElement(TextInput, { addon: "Make sure it is at least 12 characters!", icon: HiLockClosed, id: "password", type: "password", required: true })),
React.createElement("div", null,
React.createElement(Checkbox, { id: "remember" }),
React.createElement(Label, { htmlFor: "remember" }, "Remember me")),
React.createElement("div", null,
React.createElement(Label, { htmlFor: "countries" }, "Select your country"),
React.createElement(Select, { addon: React.createElement("span", null, "Or just pick any country"), helperText: "Or just pick any country", icon: HiGlobe, id: "countries" },
React.createElement("option", null, "United States"),
React.createElement("option", null, "Canada"),
React.createElement("option", null, "France"),
React.createElement("option", null, "Germany"))),
React.createElement("div", null,
React.createElement(Label, { htmlFor: "file" }, "Upload file"),
React.createElement(FileInput, { id: "file", helperText: "A profile picture is useful to confirm your are logged into your account" })),
React.createElement("fieldset", null,
React.createElement("legend", null, "Choose your favorite country"),
React.createElement("div", null,
React.createElement(Radio, { id: "united-state", name: "countries", value: "USA", defaultChecked: true }),
React.createElement(Label, { htmlFor: "united-state" }, "United States")),
React.createElement("div", null,
React.createElement(Radio, { id: "germany", name: "countries", value: "Germany" }),
React.createElement(Label, { htmlFor: "germany" }, "Germany")),
React.createElement("div", null,
React.createElement(Radio, { id: "spain", name: "countries", value: "Spain" }),
React.createElement(Label, { htmlFor: "spain" }, "Spain")),
React.createElement("div", null,
React.createElement(Radio, { id: "uk", name: "countries", value: "United Kingdom" }),
React.createElement(Label, { htmlFor: "uk" }, "United Kingdom")),
React.createElement("div", null,
React.createElement(Radio, { id: "china", name: "countries", value: "China", disabled: true }),
React.createElement(Label, null, "China (disabled)")),
React.createElement("div", null,
React.createElement(Label, { htmlFor: "comment" }, "Your message"),
React.createElement(Textarea, { id: "comment", helperText: "Leave a comment...", required: true, rows: 4 })),
React.createElement("div", null,
React.createElement(Label, { htmlFor: "price" }, "Price"),
React.createElement(RangeSlider, { id: "price", min: 0, max: 100 }))),
React.createElement(Button, { type: "submit" }, "Submit")));