@amsterdam/design-system-react/dist/Button/Button.test.js

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

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import { CloseIcon } from '@amsterdam/design-system-react-icons';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { createRef } from 'react';
import { Button } from './Button';
describe('Button', () => {
    it('renders an element with role button', () => {
        render(_jsx(Button, { children: "Click me!" }));
        const button = screen.getByRole('button', {
            name: 'Click me!',
        });
        expect(button).toBeInTheDocument();
        expect(button).toBeVisible();
    });
    it('renders a design system BEM class name', () => {
        render(_jsx(Button, { children: "Click me!" }));
        const button = screen.getByRole('button', {
            name: 'Click me!',
        });
        expect(button).toHaveClass('ams-button');
    });
    it('renders an extra class name', () => {
        render(_jsx(Button, { className: "extra", children: "Click me!" }));
        const button = screen.getByRole('button', {
            name: 'Click me!',
        });
        expect(button).toHaveClass('ams-button extra');
    });
    it('renders a default button with variant primary', () => {
        render(_jsx(Button, { children: "primary" }));
        const button = screen.getByRole('button', {
            name: 'primary',
        });
        expect(button).toBeInTheDocument();
        expect(button).toHaveAttribute('type', 'button');
        expect(button).toHaveClass('ams-button--primary');
    });
    it('renders a button with a specified variant', () => {
        render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", children: "primary" }), _jsx(Button, { variant: "secondary", children: "secondary" }), _jsx(Button, { variant: "tertiary", children: "tertiary" })] }));
        const buttonPrimary = screen.getByRole('button', {
            name: 'primary',
        });
        const buttonSecondary = screen.getByRole('button', {
            name: 'secondary',
        });
        const buttonTertiary = screen.getByRole('button', {
            name: 'tertiary',
        });
        expect(buttonPrimary).toBeInTheDocument();
        expect(buttonPrimary).toHaveClass('ams-button--primary');
        expect(buttonSecondary).toBeInTheDocument();
        expect(buttonSecondary).toHaveClass('ams-button--secondary');
        expect(buttonTertiary).toBeInTheDocument();
        expect(buttonTertiary).toHaveClass('ams-button--tertiary');
    });
    it('renders a disabled button with a specified variant', () => {
        render(_jsxs(_Fragment, { children: [_jsx(Button, { disabled: true, variant: "primary", children: "primary" }), _jsx(Button, { disabled: true, variant: "secondary", children: "secondary" }), _jsx(Button, { disabled: true, variant: "tertiary", children: "tertiary" })] }));
        const buttonPrimary = screen.getByRole('button', {
            name: 'primary',
        });
        const buttonSecondary = screen.getByRole('button', {
            name: 'secondary',
        });
        const buttonTertiary = screen.getByRole('button', {
            name: 'tertiary',
        });
        expect(buttonPrimary).toBeInTheDocument();
        expect(buttonPrimary).toBeDisabled();
        expect(buttonSecondary).toBeInTheDocument();
        expect(buttonSecondary).toBeDisabled();
        expect(buttonTertiary).toBeInTheDocument();
        expect(buttonTertiary).toBeDisabled();
    });
    it('is able to pass a React ref', () => {
        const ref = createRef();
        const { container } = render(_jsx(Button, { ref: ref, children: "Click me!" }));
        const button = container.querySelector(':only-child');
        expect(ref.current).toBe(button);
    });
    it('renders a button with an icon at the end', () => {
        render(_jsx(Button, { icon: CloseIcon, children: _jsx("span", { children: "Sluiten" }) }));
        const button = screen.getByRole('button', {
            name: 'Sluiten',
        });
        const icon = button.querySelector('.ams-icon:last-child');
        expect(button).toBeInTheDocument();
        expect(icon).toBeInTheDocument();
    });
    it('renders a button with an icon before the label', () => {
        render(_jsx(Button, { icon: CloseIcon, iconBefore: true, children: _jsx("span", { children: "Sluiten" }) }));
        const button = screen.getByRole('button', {
            name: 'Sluiten',
        });
        const icon = button.querySelector('.ams-icon:first-child');
        expect(button).toBeInTheDocument();
        expect(icon).toBeInTheDocument();
    });
    it('renders a button with an icon only', () => {
        render(_jsx(Button, { icon: CloseIcon, iconOnly: true, variant: "tertiary", children: "Sluiten" }));
        const button = screen.getByRole('button', {
            name: 'Sluiten',
        });
        const icon = button.querySelector('.ams-icon');
        const label = button.querySelector('.ams-visually-hidden');
        expect(button).toBeInTheDocument();
        expect(icon).toBeInTheDocument();
        expect(label).toBeInTheDocument();
    });
});