UNPKG

@amsterdam/design-system-react

Version:

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

36 lines (35 loc) 1.63 kB
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 { PageFooter } from './PageFooter'; import '@testing-library/jest-dom'; describe('Page Footer Menu', () => { it('renders a footer menu with children', () => { render(_jsxs(PageFooter.Menu, { children: [_jsx(PageFooter.MenuLink, { href: "#", lang: "en", children: "English" }), _jsx(PageFooter.MenuLink, { href: "#", children: "Mijn Amsterdam" })] })); const component = screen.getByRole('list'); const children = screen.getAllByRole('listitem'); expect(component).toBeInTheDocument(); expect(component).toBeVisible(); expect(children).toHaveLength(2); }); it('renders a design system BEM class name', () => { render(_jsx(PageFooter.Menu, {})); const component = screen.getByRole('list'); expect(component).toHaveClass('ams-page-footer__menu'); }); it('is able to pass a React ref', () => { const ref = createRef(); render(_jsx(PageFooter.Menu, { ref: ref, children: _jsx(PageFooter.MenuLink, { href: "#", lang: "en", children: "English" }) })); const component = screen.getByRole('list'); expect(ref.current).toBe(component); }); it('renders an extra class name', () => { render(_jsx(PageFooter.Menu, { className: "intro" })); const component = screen.getByRole('list'); expect(component).toHaveClass('ams-page-footer__menu intro'); }); });