@amsterdam/design-system-react
Version:
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
71 lines (70 loc) • 4.01 kB
JavaScript
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 { Heading } from './Heading';
import '@testing-library/jest-dom';
describe('Heading', () => {
it('renders an element with role heading', () => {
render(_jsx(Heading, { level: 1, children: "Breaking news" }));
const heading = screen.getByRole('heading', {
name: 'Breaking news',
});
expect(heading).toBeInTheDocument();
expect(heading).toBeVisible();
});
it('renders a design system BEM class name', () => {
render(_jsx(Heading, { level: 1 }));
const heading = screen.getByRole('heading');
expect(heading).toHaveClass('ams-heading');
});
it('renders an extra class name', () => {
render(_jsx(Heading, { className: "extra", level: 1 }));
const heading = screen.getByRole('heading');
expect(heading).toHaveClass('ams-heading extra');
});
it('renders the allowed levels correctly', () => {
render(_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, children: "Heading 1" }), _jsx(Heading, { level: 2, children: "Heading 2" }), _jsx(Heading, { level: 3, children: "Heading 3" }), _jsx(Heading, { level: 4, children: "Heading 4" })] }));
const h1 = screen.getByRole('heading', { level: 1, name: 'Heading 1' });
const h2 = screen.getByRole('heading', { level: 2, name: 'Heading 2' });
const h3 = screen.getByRole('heading', { level: 3, name: 'Heading 3' });
const h4 = screen.getByRole('heading', { level: 4, name: 'Heading 4' });
expect(h1).toBeInTheDocument();
expect(h2).toBeInTheDocument();
expect(h3).toBeInTheDocument();
expect(h4).toBeInTheDocument();
});
it('renders the correct size level class', () => {
render(_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, size: "level-1", children: "Size level 1" }), _jsx(Heading, { level: 1, size: "level-2", children: "Size level 2" }), _jsx(Heading, { level: 1, size: "level-3", children: "Size level 3" }), _jsx(Heading, { level: 1, size: "level-4", children: "Size level 4" }), _jsx(Heading, { level: 1, size: "level-5", children: "Size level 5" })] }));
const sizeLevel1 = screen.getByRole('heading', { level: 1, name: 'Size level 1' });
const sizeLevel2 = screen.getByRole('heading', { level: 1, name: 'Size level 2' });
const sizeLevel3 = screen.getByRole('heading', { level: 1, name: 'Size level 3' });
const sizeLevel4 = screen.getByRole('heading', { level: 1, name: 'Size level 4' });
const sizeLevel5 = screen.getByRole('heading', { level: 1, name: 'Size level 5' });
expect(sizeLevel1).toHaveClass('ams-heading--1');
expect(sizeLevel2).toHaveClass('ams-heading--2');
expect(sizeLevel3).toHaveClass('ams-heading--3');
expect(sizeLevel4).toHaveClass('ams-heading--4');
expect(sizeLevel5).toHaveClass('ams-heading--5');
});
it('renders the class name for inverse color', () => {
render(_jsx(Heading, { color: "inverse", level: 1, children: "Heading" }));
const heading = screen.getByRole('heading', { name: 'Heading' });
expect(heading).toHaveClass('ams-heading--inverse');
});
it('renders inline markup', () => {
render(_jsxs(Heading, { level: 1, children: [_jsx("strong", { children: "Breaking" }), " news"] }));
const heading = screen.getByRole('heading', { name: 'Breaking news' });
const inlineMarkup = heading.querySelector('strong');
expect(inlineMarkup).toBeInTheDocument();
});
it('is able to pass a React ref', () => {
const ref = createRef();
render(_jsx(Heading, { level: 1, ref: ref }));
const heading = screen.getByRole('heading');
expect(ref.current).toBe(heading);
});
});