@amsterdam/design-system-react/dist/Paragraph/Paragraph.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 { Paragraph } from './Paragraph';
import '@testing-library/jest-dom';
describe('Paragraph', () => {
    it('renders an HTML p element', () => {
        const { container } = render(_jsx(Paragraph, {}));
        const paragraph = container.querySelector('p:only-child');
        expect(paragraph).toBeInTheDocument();
    });
    it('renders a block element', () => {
        const { container } = render(_jsx(Paragraph, {}));
        const paragraph = container.querySelector(':only-child');
        expect(paragraph).toHaveStyle({ display: 'block' });
    });
    it('renders a design system BEM class name', () => {
        const { container } = render(_jsx(Paragraph, {}));
        const paragraph = container.querySelector(':only-child');
        expect(paragraph).toHaveClass('ams-paragraph');
    });
    it('renders rich text content', () => {
        const { container } = render(_jsxs(Paragraph, { children: ["Hello, ", _jsx("strong", { children: "world" })] }));
        const paragraph = container.querySelector(':only-child');
        const richText = paragraph?.querySelector('strong');
        expect(richText).toBeInTheDocument();
    });
    it('is a default paragraph without specifying props', () => {
        const { container } = render(_jsx(Paragraph, {}));
        const paragraph = container.querySelector(':only-child');
        expect(paragraph).not.toHaveClass('ams-paragraph--large');
        expect(paragraph).not.toHaveClass('ams-paragraph--small');
    });
    it('renders the right size classes', () => {
        render(_jsxs(_Fragment, { children: [_jsx(Paragraph, { size: "small", children: "Small paragraph" }), _jsx(Paragraph, { size: "large", children: "Large paragraph" })] }));
        const smallParagraph = screen.getByText('Small paragraph');
        const largeParagraph = screen.getByText('Large paragraph');
        expect(smallParagraph).toHaveClass('ams-paragraph--small');
        expect(largeParagraph).toHaveClass('ams-paragraph--large');
    });
    it('renders the class name for inverse color', () => {
        render(_jsx(Paragraph, { color: "inverse", children: "Paragraph" }));
        const paragraph = screen.getByText('Paragraph');
        expect(paragraph).toHaveClass('ams-paragraph--inverse');
    });
    it('renders an extra class name', () => {
        const { container } = render(_jsx(Paragraph, { className: "intro" }));
        const paragraph = container.querySelector(':only-child');
        expect(paragraph).toHaveClass('intro');
        expect(paragraph).toHaveClass('ams-paragraph');
    });
    it('supports ForwardRef in React', () => {
        const ref = createRef();
        const { container } = render(_jsx(Paragraph, { ref: ref }));
        const paragraph = container.querySelector(':only-child');
        expect(ref.current).toBe(paragraph);
    });
});