@amsterdam/design-system-react
Version:
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
79 lines (78 loc) • 3.6 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { render, screen } from '@testing-library/react';
import { createRef } from 'react';
import { describe, expect, it } from 'vitest';
const TestLogo = (props) => (_jsx("svg", { viewBox: "0 0 128 32", xmlns: "http://www.w3.org/2000/svg", ...props }));
import { Logo } from './Logo';
describe('Logo', () => {
it('renders', () => {
const { container } = render(_jsx(Logo, {}));
const component = container.querySelector(':only-child');
expect(component).toBeInTheDocument();
expect(component).toBeVisible();
});
it('renders a design system BEM class name', () => {
const { container } = render(_jsx(Logo, {}));
const component = container.querySelector(':only-child');
expect(component).toHaveClass('ams-logo');
});
it('renders an extra class name', () => {
const { container } = render(_jsx(Logo, { className: "extra" }));
const component = container.querySelector(':only-child');
expect(component).toHaveClass('ams-logo extra');
});
it('renders a custom logo through the brand prop', () => {
const testLogo = {
label: 'Test logo',
svg: TestLogo,
};
const { container } = render(_jsx(Logo, { brand: testLogo }));
const component = container.querySelector(':only-child');
expect(component).toBeInTheDocument();
expect(component).toHaveClass('ams-logo');
expect(component).toHaveAttribute('aria-label', 'Test logo');
});
it('supports ForwardRef in React', () => {
const ref = createRef();
const { container } = render(_jsx(Logo, { ref: ref }));
const component = container.querySelector(':only-child');
expect(ref.current).toBe(component);
});
it('passes additional props', () => {
const { container } = render(_jsx(Logo, { "aria-hidden": "false", "data-test": "data-test", id: "id" }));
const component = container.querySelector(':only-child');
expect(component).toHaveAttribute('aria-hidden', 'false');
expect(component).toHaveAttribute('id', 'id');
expect(component).toHaveAttribute('data-test', 'data-test');
});
it('renders the amsterdam-english brand logo', () => {
render(_jsx(Logo, { brand: "amsterdam-english" }));
const component = screen.getByRole('img');
expect(component).toBeInTheDocument();
});
it('renders the museum-weesp brand logo', () => {
render(_jsx(Logo, { brand: "museum-weesp" }));
const component = screen.getByRole('img');
expect(component).toBeInTheDocument();
});
it('renders the stadsarchief brand logo', () => {
render(_jsx(Logo, { brand: "stadsarchief" }));
const component = screen.getByRole('img');
expect(component).toBeInTheDocument();
});
it('renders the stadsbank-van-lening brand logo', () => {
render(_jsx(Logo, { brand: "stadsbank-van-lening" }));
const component = screen.getByRole('img');
expect(component).toBeInTheDocument();
});
it('renders the ggd-amsterdam-inspectie brand logo', () => {
render(_jsx(Logo, { brand: "ggd-amsterdam-inspectie" }));
const component = screen.getByRole('img');
expect(component).toBeInTheDocument();
});
it('renders the vga-verzekeringen brand logo', () => {
render(_jsx(Logo, { brand: "vga-verzekeringen" }));
const component = screen.getByRole('img');
expect(component).toBeInTheDocument();
});
});