Skip to content

Commit

Permalink
fixup! feat(component-library-react/SpotlightSection): add error an…
Browse files Browse the repository at this point in the history 
…d `ok` types
  • Loading branch information
@Robbert
Robbert committed Sep 28, 2024
1 parent 4d56d35 commit fb88540
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 81 deletions.
2 changes: 1 addition & 1 deletion .changeset/tender-spies-look.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
"@utrecht/component-library-react": minor
---

feat: add `error` and `ok` types
Add new `type` options to the `SpotlightSection` component: `error` and `ok`.
111 changes: 31 additions & 80 deletions packages/component-library-react/src/SpotlightSection.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,45 @@ import { createRef } from 'react';
import { SpotlightSection } from './SpotlightSection';
import '@testing-library/jest-dom';

describe('SpotlightSection', () => {
it('renders SpotlightSection component', () => {
describe('Spotlight Section', () => {
it('renders a component', () => {
const { container } = render(<SpotlightSection />);
const spotlight = container.querySelector(':only-child');
expect(spotlight).toBeInTheDocument();
});
it('enders a design system BEM class name', () => {

it('renders a design system BEM class name: utrecht-spotlight-section', () => {
const { container } = render(<SpotlightSection />);
const spotlight = container.querySelector(':only-child');
expect(spotlight).toHaveClass('utrecht-spotlight-section');
});

it('renders rich text content', () => {
const { container } = render(
<SpotlightSection>
<strong>Breaking</strong> news
<p>
<strong>Breaking</strong> news
</p>
</SpotlightSection>,
);
const spotlight = container.querySelector(':only-child');
const richText = spotlight?.querySelector('strong');
expect(spotlight).toHaveTextContent('Breaking news');
expect(richText).toBeInTheDocument();
});

it('can be hidden', () => {
const { container } = render(<SpotlightSection hidden />);
const spotlight = container.querySelector(':only-child');
expect(spotlight).not.toBeVisible();
});

it('can have a custom class name', () => {
const { container } = render(<SpotlightSection className="custom-class" />);
const spotlight = container.querySelector(':only-child');
expect(spotlight).toHaveClass('custom-class');
});

it('supports ForwardRef in React', () => {
const ref = createRef<HTMLElement>();

Expand All @@ -44,109 +51,53 @@ describe('SpotlightSection', () => {

expect(ref.current).toBe(spotlight);
});

it('renders a section tag by default', () => {
const { container } = render(<SpotlightSection />);
const spotlight = container.querySelector(':only-child');
expect(spotlight?.tagName).toBe('SECTION');
});
describe('type', () => {
it('renders a design system Info BEM class name', () => {

describe('info variant', () => {
it('renders a design system BEM modifier class name: utrecht-spotlight-section--info', () => {
const { container } = render(<SpotlightSection type="info" />);
const spotlight = container.querySelector(':only-child');
expect(spotlight).toHaveClass('utrecht-spotlight-section--info');
});
it('renders a design system Warning BEM class name', () => {
});

describe('warning variant', () => {
it('renders a design system BEM modifier class name: utrecht-spotlight-section--warning', () => {
const { container } = render(<SpotlightSection type="warning" />);
const spotlight = container.querySelector(':only-child');
expect(spotlight).toHaveClass('utrecht-spotlight-section--warning');
});
it('renders a design system Error BEM class name', () => {
});

describe('error variant', () => {
it('renders a design system BEM modifier class name: utrecht-spotlight-section--error', () => {
const { container } = render(<SpotlightSection type="error" />);
const spotlight = container.querySelector(':only-child');
expect(spotlight).toHaveClass('utrecht-spotlight-section--error');
});
it('renders a design system Ok BEM class name', () => {
});

describe('ok variant', () => {
it('renders a design system BEM modifier class name: utrecht-spotlight-section--ok', () => {
const { container } = render(<SpotlightSection type="ok" />);
const spotlight = container.querySelector(':only-child');
expect(spotlight).toHaveClass('utrecht-spotlight-section--ok');
});
it('can have a additional class name while using type', () => {
const { container } = render(<SpotlightSection type="ok" className="custom-class" />);
const spotlight = container.querySelector(':only-child');
expect(spotlight).toHaveClass('custom-class');
expect(spotlight).toHaveClass('utrecht-spotlight-section--ok');
expect(spotlight).toHaveClass('utrecht-spotlight-section');
});
});

describe('aside', () => {
it('renders an aside element', () => {
const { container } = render(<SpotlightSection aside />);
const aside = container.querySelector(':only-child');
expect(aside).toBeInTheDocument();
expect(aside?.tagName).toBe('ASIDE');
});
it('renders a design system BEM class name', () => {
const { container } = render(<SpotlightSection aside />);
const aside = container.querySelector(':only-child');
expect(aside).toHaveClass('utrecht-spotlight-section');
});
it('can have a additional class name while using aside', () => {
const { container } = render(<SpotlightSection aside className="custom-class" />);
const aside = container.querySelector(':only-child');
expect(aside).toHaveClass('custom-class');
expect(aside).toHaveClass('utrecht-spotlight-section');
});
it('renders rich text content', () => {
const { container } = render(
<SpotlightSection aside>
<strong>Breaking</strong> news
</SpotlightSection>,
);
const aside = container.querySelector(':only-child');
const richText = aside?.querySelector('strong');
expect(aside).toHaveTextContent('Breaking news');
expect(richText).toBeInTheDocument();
});
it('can be hidden', () => {
const { container } = render(<SpotlightSection aside hidden />);
const aside = container.querySelector(':only-child');
expect(aside).not.toBeVisible();
});
it('supports ForwardRef in React', () => {
const ref = createRef<HTMLElement>();

const { container } = render(<SpotlightSection aside ref={ref} />);

const aside = container.querySelector(':only-child');

expect(ref.current).toBe(aside);
});
it('renders a design system Info BEM class name while using aside', () => {
const { container } = render(<SpotlightSection aside type="info" />);
const aside = container.querySelector(':only-child');
expect(aside).toHaveClass('utrecht-spotlight-section--info');
});
it('renders a design system Warning BEM class name while using aside', () => {
const { container } = render(<SpotlightSection aside type="warning" />);
const aside = container.querySelector(':only-child');
expect(aside).toHaveClass('utrecht-spotlight-section--warning');
});
it('renders a design system Error BEM class name while using aside', () => {
const { container } = render(<SpotlightSection aside type="error" />);
const aside = container.querySelector(':only-child');
expect(aside).toHaveClass('utrecht-spotlight-section--error');
});
it('renders a design system Ok BEM class name while using aside', () => {
const { container } = render(<SpotlightSection aside type="ok" />);
const aside = container.querySelector(':only-child');
expect(aside).toHaveClass('utrecht-spotlight-section--ok');
});
it('can have a additional class name while using aside and type', () => {
const { container } = render(<SpotlightSection aside type="ok" className="custom-class" />);
const aside = container.querySelector(':only-child');
expect(aside).toHaveClass('custom-class');
expect(aside).toHaveClass('utrecht-spotlight-section--ok');
expect(aside).toHaveClass('utrecht-spotlight-section');
if (aside) {
expect(aside.localName).toBe('aside');
}
});
});
});

0 comments on commit fb88540

Please sign in to comment.