1import { matchers } from '@emotion/jest';
2import { theme, CheckIcon } from '@expo/styleguide';
3import { render, screen } from '@testing-library/react';
4
5import { Callout } from '.';
6
7expect.extend(matchers);
8
9describe(Callout, () => {
10  it('renders callout with icon emoji', () => {
11    render(<Callout icon="��">Hello</Callout>);
12    expect(screen.getByText('��')).toBeInTheDocument();
13    expect(screen.getByText('Hello')).toBeInTheDocument();
14  });
15
16  it('renders callout with icon component', () => {
17    render(<Callout icon={CheckIcon}>Hello</Callout>);
18    expect(screen.getByTitle('Check-icon')).toBeInTheDocument();
19    expect(screen.getByText('Hello')).toBeInTheDocument();
20  });
21
22  it('renders callout with default icon from info type', () => {
23    render(<Callout type="info">Hello</Callout>);
24    expect(screen.getByTitle('Info-icon')).toBeInTheDocument();
25  });
26
27  it('renders callout with default icon from warning type', () => {
28    render(<Callout type="warning">Hello</Callout>);
29    expect(screen.getByTitle('Warning-icon')).toBeInTheDocument();
30  });
31
32  it('renders callout with default icon from error type', () => {
33    render(<Callout type="error">Hello</Callout>);
34    expect(screen.getByTitle('Error-icon')).toBeInTheDocument();
35  });
36
37  it('renders callout with warning style from warning type', () => {
38    render(<Callout type="warning">Hello</Callout>);
39    expect(screen.getByTestId('callout-container')).toHaveStyleRule(
40      'background-color',
41      theme.background.warning
42    );
43  });
44
45  it('renders callout with error style from warning type', () => {
46    render(<Callout type="error">Hello</Callout>);
47    expect(screen.getByTestId('callout-container')).toHaveStyleRule(
48      'background-color',
49      theme.background.error
50    );
51  });
52});
53