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