@amsterdam/design-system-react/dist/src/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 } 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 { Paragraph } from './Paragraph';
describe('Paragraph', () => {
    it('renders an HTML p element', () => {
        render(_jsx(Paragraph, {}));
        const paragraph = screen.getByRole('paragraph');
        expect(paragraph).toBeInTheDocument();
    });
    it('renders a block element', () => {
        render(_jsx(Paragraph, {}));
        const paragraph = screen.getByRole('paragraph');
        expect(paragraph).toHaveStyle({ display: 'block' });
    });
    it('renders a design system BEM class name', () => {
        render(_jsx(Paragraph, {}));
        const paragraph = screen.getByRole('paragraph');
        expect(paragraph).toHaveClass('ams-paragraph');
    });
    it('renders rich text content', () => {
        render(_jsxs(Paragraph, { children: ["Hello, ", _jsx("strong", { children: "world" })] }));
        const paragraph = screen.getByRole('paragraph');
        const strong = paragraph?.querySelector('strong');
        expect(strong).toBeInTheDocument();
    });
    it('is a default paragraph without specifying props', () => {
        render(_jsx(Paragraph, {}));
        const paragraph = screen.getByRole('paragraph');
        expect(paragraph).not.toHaveClass('ams-paragraph--large');
        expect(paragraph).not.toHaveClass('ams-paragraph--small');
    });
    it('renders the large size class', () => {
        render(_jsx(Paragraph, { size: "large", children: "Large paragraph" }));
        const paragraph = screen.getByRole('paragraph');
        expect(paragraph).toHaveClass('ams-paragraph--large');
    });
    it('renders a <b> element for a large paragraph', () => {
        render(_jsx(Paragraph, { size: "large", children: "Large text" }));
        const paragraph = screen.getByRole('paragraph');
        const bold = paragraph?.querySelector('b');
        expect(bold).toBeInTheDocument();
        expect(bold).toHaveClass('ams-paragraph__b');
    });
    it('renders the small size class', () => {
        render(_jsx(Paragraph, { size: "small", children: "Small paragraph" }));
        const paragraph = screen.getByRole('paragraph');
        expect(paragraph).toHaveClass('ams-paragraph--small');
    });
    it('renders a <small> element for a small paragraph', () => {
        render(_jsx(Paragraph, { size: "small", children: "Small text" }));
        const paragraph = screen.getByRole('paragraph');
        const small = paragraph?.querySelector('small');
        expect(small).toBeInTheDocument();
        expect(small).toHaveClass('ams-paragraph__small');
    });
    it('renders the class name for inverse color', () => {
        render(_jsx(Paragraph, { color: "inverse", children: "Paragraph" }));
        const paragraph = screen.getByRole('paragraph');
        expect(paragraph).toHaveClass('ams-paragraph--inverse');
    });
    it('renders an extra class name', () => {
        render(_jsx(Paragraph, { className: "intro" }));
        const paragraph = screen.getByRole('paragraph');
        expect(paragraph).toHaveClass('intro');
        expect(paragraph).toHaveClass('ams-paragraph');
    });
    it('supports ForwardRef in React', () => {
        const ref = createRef();
        render(_jsx(Paragraph, { ref: ref }));
        const paragraph = screen.getByRole('paragraph');
        expect(ref.current).toBe(paragraph);
    });
    it('passes additional props', () => {
        render(_jsx(Paragraph, { "aria-hidden": false, "data-test": "data-test", id: "id" }));
        const paragraph = screen.getByRole('paragraph');
        expect(paragraph).toHaveAttribute('aria-hidden', 'false');
        expect(paragraph).toHaveAttribute('id', 'id');
        expect(paragraph).toHaveAttribute('data-test', 'data-test');
    });
});