@amsterdam/design-system-react/dist/Switch/Switch.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 { render, screen } from '@testing-library/react';
import { createRef } from 'react';
import { Switch } from './Switch';
import '@testing-library/jest-dom';
describe('Switch', () => {
    it('renders an element with role switch', () => {
        render(_jsx(Switch, {}));
        const switchElement = screen.getByRole('switch');
        expect(switchElement).toBeInTheDocument();
        expect(switchElement).not.toBeChecked();
    });
    it('is not disabled by default', () => {
        render(_jsx(Switch, {}));
        const switchElement = screen.getByRole('switch');
        expect(switchElement).not.toBeDisabled();
    });
    it('can trigger a change event', () => {
        const handleChange = jest.fn();
        render(_jsx(Switch, { onChange: handleChange }));
        const switchElement = screen.getByRole('switch');
        switchElement.click();
        expect(handleChange).toHaveBeenCalled();
    });
    it('does not trigger a change event when disabled', () => {
        const handleChange = jest.fn();
        render(_jsx(Switch, { disabled: true, onChange: handleChange }));
        const switchElement = screen.getByRole('switch');
        switchElement.click();
        expect(handleChange).not.toHaveBeenCalled();
    });
    it('does trigger a change event when clicking on associate label', () => {
        const handleChange = jest.fn();
        const MockImpl = () => {
            return (_jsxs(_Fragment, { children: [_jsx("label", { "data-testid": "switch-label", htmlFor: "switch-label", children: "Label" }), _jsx(Switch, { id: "switch-label", onChange: handleChange })] }));
        };
        render(_jsx(MockImpl, {}));
        const label = screen.getByTestId('switch-label');
        label.click();
        expect(handleChange).toHaveBeenCalled();
    });
    it('sets the checked state when switch is clicked', () => {
        render(_jsx(Switch, {}));
        const switchElement = screen.getByRole('switch');
        expect(switchElement).not.toBeChecked();
        switchElement.click();
        expect(switchElement).toBeChecked();
    });
    it('renders a design system BEM class name', () => {
        const { container } = render(_jsx(Switch, {}));
        const component = container.querySelector(':only-child');
        expect(component).toHaveClass('ams-switch');
    });
    it('renders an extra class name', () => {
        const { container } = render(_jsx(Switch, { className: "extra" }));
        const component = container.querySelector(':only-child');
        expect(component).toHaveClass('ams-switch extra');
    });
    it('is able to pass a React ref', () => {
        const ref = createRef();
        render(_jsx(Switch, { ref: ref }));
        const switchElement = screen.getByRole('switch');
        expect(ref.current).toBe(switchElement);
    });
});