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