@amsterdam/design-system-react/dist/src/Label/Label.test.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import { render, screen } from '@testing-library/react';
import { createRef } from 'react';
import { describe, expect, it } from 'vitest';
import { Label } from './Label';
describe('Label', () => {
    it('renders an HTML label element', () => {
        const { container } = render(_jsx(Label, { htmlFor: "form-control" }));
        const label = container.querySelector('label:only-child');
        expect(label).toBeInTheDocument();
        expect(label).toBeVisible();
    });
    it('renders an HTML label element with for attribute', () => {
        const { container } = render(_jsx(Label, { htmlFor: "form-control" }));
        const label = container.querySelector('label[for="form-control"]:only-child');
        expect(label).toBeInTheDocument();
    });
    it('renders a design system BEM class name', () => {
        const { container } = render(_jsx(Label, { htmlFor: "form-control" }));
        const label = container.querySelector(':only-child');
        expect(label).toHaveClass('ams-label');
    });
    it('renders rich text content', () => {
        const { container } = render(_jsxs(Label, { htmlFor: "form-control", children: [_jsx("strong", { children: "Current" }), " password"] }));
        const label = container.querySelector(':only-child');
        const richText = label?.querySelector('strong');
        expect(richText).toBeInTheDocument();
    });
    it('can be associated with an HTML form input', () => {
        render(_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsx("input", { id: "email", type: "email" })] }));
        const textbox = screen.getByRole('textbox', {
            name: 'Email',
        });
        expect(textbox).toBeInTheDocument();
        expect(textbox).toBeVisible();
    });
    it('can be hidden', () => {
        const { container } = render(_jsx(Label, { hidden: true, htmlFor: "form-control" }));
        const label = container.querySelector(':only-child');
        expect(label).not.toBeVisible();
    });
    it('renders an extra class name', () => {
        const { container } = render(_jsx(Label, { className: "extra", htmlFor: "form-control" }));
        const label = container.querySelector(':only-child');
        expect(label).toHaveClass('ams-label extra');
    });
    it('supports ForwardRef in React', () => {
        const ref = createRef();
        const { container } = render(_jsx(Label, { htmlFor: "form-control", ref: ref }));
        const div = container.querySelector(':only-child');
        expect(ref.current).toBe(div);
    });
    it('renders the provided hint text after the label', () => {
        const { container } = render(_jsx(Label, { hint: "hint text", htmlFor: "form-control", children: "Label" }));
        const label = container.querySelector('label:only-child');
        expect(label).toHaveTextContent('Label (hint text)');
    });
    it('renders the default hint text after the label', () => {
        const { container } = render(_jsx(Label, { htmlFor: "form-control", optional: true, children: "Label" }));
        const label = container.querySelector('label:only-child');
        expect(label).toHaveTextContent('Label (niet verplicht)');
    });
    it('renders the provided hint text after the label when `optional` is set to `false`', () => {
        const { container } = render(_jsx(Label, { hint: "not required", htmlFor: "form-control", optional: true, children: "Label" }));
        const label = container.querySelector('label:only-child');
        expect(label).toHaveTextContent('Label (not required)');
    });
    it('renders the provided hint text after the label while `optional` is set to `false`', () => {
        const { container } = render(_jsx(Label, { hint: "required", htmlFor: "form-control", optional: false, children: "Label" }));
        const label = container.querySelector('label:only-child');
        expect(label).toHaveTextContent('Label (required)');
    });
    it('renders a Heading component', () => {
        render(_jsx(Label, { isPageHeading: true, children: "Label" }));
        const heading = screen.getByRole('heading', { name: 'Label' });
        expect(heading).toBeInTheDocument();
    });
    it('renders the correct class names when `inFieldSet` is true', () => {
        const { container } = render(_jsx(Label, { inFieldSet: true, optional: true, children: "Label" }));
        const label = container.querySelector('label:only-child');
        const hint = label?.querySelector('.ams-hint');
        expect(label).toHaveClass('ams-label--in-fieldset');
        expect(hint).toHaveClass('ams-hint--in-fieldset');
    });
    it('passes additional props', () => {
        const { container } = render(_jsx(Label, { "aria-hidden": "false", "data-test": "data-test", htmlFor: "form-control", id: "id", optional: true }));
        const component = container.querySelector(':only-child');
        expect(component).toHaveAttribute('aria-hidden', 'false');
        expect(component).toHaveAttribute('id', 'id');
        expect(component).toHaveAttribute('data-test', 'data-test');
    });
});