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