1import { matchers } from '@emotion/jest';
2import { theme } from '@expo/styleguide';
3import { CheckCircleSolidIcon } from '@expo/styleguide-icons';
4import { render, screen } from '@testing-library/react';
5import ReactMarkdown from 'react-markdown';
6
7import { Callout } from '.';
8
9expect.extend(matchers);
10
11describe(Callout, () => {
12  it('renders callout with icon emoji', () => {
13    render(<Callout icon="��">Hello</Callout>);
14    expect(screen.getByText('��')).toBeInTheDocument();
15    expect(screen.getByText('Hello')).toBeInTheDocument();
16  });
17
18  it('renders callout with icon component', () => {
19    render(<Callout icon={CheckCircleSolidIcon}>Hello</Callout>);
20    expect(screen.getByRole('img')).toBeInTheDocument();
21    expect(screen.getByText('Hello')).toBeInTheDocument();
22  });
23
24  it('renders callout with default icon from info type', () => {
25    render(<Callout type="info">Hello</Callout>);
26    expect(screen.getByRole('img')).toBeInTheDocument();
27    expect(screen.getByRole('img')).toHaveClass('icon-sm text-info');
28  });
29
30  it('renders callout with default icon from warning type', () => {
31    render(<Callout type="warning">Hello</Callout>);
32    expect(screen.getByRole('img')).toBeInTheDocument();
33    expect(screen.getByRole('img')).toHaveClass('icon-sm text-warning');
34  });
35
36  it('renders callout with default icon from error type', () => {
37    render(<Callout type="error">Hello</Callout>);
38    expect(screen.getByRole('img')).toBeInTheDocument();
39    expect(screen.getByRole('img')).toHaveClass('icon-sm text-danger');
40  });
41
42  it('renders callout with warning style from warning type', () => {
43    render(<Callout type="warning">Hello</Callout>);
44    expect(screen.getByTestId('callout-container')).toHaveStyleRule(
45      'background-color',
46      theme.background.warning
47    );
48  });
49
50  it('renders callout with error style from warning type', () => {
51    render(<Callout type="error">Hello</Callout>);
52    expect(screen.getByTestId('callout-container')).toHaveStyleRule(
53      'background-color',
54      theme.background.danger
55    );
56  });
57
58  it('renders callout with info style from warning type', () => {
59    render(<Callout type="info">Hello</Callout>);
60    expect(screen.getByTestId('callout-container')).toHaveStyleRule(
61      'background-color',
62      theme.background.info
63    );
64
65    expect(screen.getByTestId('callout-container')).toHaveStyleRule(
66      'border-color',
67      theme.border.info
68    );
69  });
70
71  it('renders from translated Markdown', () => {
72    render(<ReactMarkdown components={{ blockquote: Callout }}>{'> Hello'}</ReactMarkdown>);
73    expect(screen.getByTestId('callout-container')).toBeInTheDocument();
74    expect(screen.getByText('Hello')).toBeInTheDocument();
75  });
76
77  it('renders correct type from translated Markdown', () => {
78    render(
79      <ReactMarkdown components={{ blockquote: Callout }}>{`> **warning** Hello`}</ReactMarkdown>
80    );
81    expect(screen.getByTestId('callout-container')).toBeInTheDocument();
82    expect(screen.getByTestId('callout-container')).toHaveStyleRule(
83      'background-color',
84      theme.background.warning
85    );
86    expect(screen.getByRole('img')).toBeInTheDocument();
87    expect(screen.getByText('Hello')).toBeInTheDocument();
88  });
89
90  it('renders content starting with emphasized word which is not a type', () => {
91    render(
92      <ReactMarkdown components={{ blockquote: Callout }}>{`> **Note**: Hello`}</ReactMarkdown>
93    );
94    expect(screen.getByTestId('callout-container')).toBeInTheDocument();
95    expect(screen.getByText('Note')).toBeInTheDocument();
96    expect(screen.getByText(': Hello')).toBeInTheDocument();
97  });
98});
99