gitify/src/renderer/components/icons/ScopeStatusIcon.test.tsx at 5ece5214cf53df08537e7d9602db341fe0067601 · gitify-app/gitify · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { screen } from '@testing-library/react';

import { renderWithAppContext } from '../../__helpers__/test-utils';

import { ScopeStatusIcon } from './ScopeStatusIcon';

describe('renderer/components/icons/ScopeStatusIcon.tsx', () => {
  describe('granted state', () => {
    it('renders a success icon when granted', () => {
      const tree = renderWithAppContext(<ScopeStatusIcon granted={true} />);
      expect(tree.container).toMatchSnapshot();
    });

    it('renders a success icon with test id when withTestId is true', () => {
      renderWithAppContext(
        <ScopeStatusIcon granted={true} withTestId={true} />,
      );
      expect(
        screen.getByTestId('account-scopes-scope-granted'),
      ).toBeInTheDocument();
    });

    it('does not render a test id by default', () => {
      renderWithAppContext(<ScopeStatusIcon granted={true} />);
      expect(
        screen.queryByTestId('account-scopes-scope-granted'),
      ).not.toBeInTheDocument();
    });
  });

  describe('missing state', () => {
    it('renders a danger icon when not granted', () => {
      const tree = renderWithAppContext(<ScopeStatusIcon granted={false} />);
      expect(tree.container).toMatchSnapshot();
    });

    it('renders a danger icon with test id when withTestId is true', () => {
      renderWithAppContext(
        <ScopeStatusIcon granted={false} withTestId={true} />,
      );
      expect(
        screen.getByTestId('account-scopes-scope-missing'),
      ).toBeInTheDocument();
    });

    it('does not render a test id by default', () => {
      renderWithAppContext(<ScopeStatusIcon granted={false} />);
      expect(
        screen.queryByTestId('account-scopes-scope-missing'),
      ).not.toBeInTheDocument();
    });
  });

  describe('notApplicable state', () => {
    it('renders a dash icon when notApplicable', () => {
      const tree = renderWithAppContext(
        <ScopeStatusIcon granted={false} notApplicable={true} />,
      );
      expect(tree.container).toMatchSnapshot();
    });

    it('renders a dash icon with test id when withTestId is true', () => {
      renderWithAppContext(
        <ScopeStatusIcon
          granted={false}
          notApplicable={true}
          withTestId={true}
        />,
      );
      expect(screen.getByTestId('account-scopes-scope-na')).toBeInTheDocument();
    });

    it('does not render a test id by default', () => {
      renderWithAppContext(
        <ScopeStatusIcon granted={false} notApplicable={true} />,
      );
      expect(
        screen.queryByTestId('account-scopes-scope-na'),
      ).not.toBeInTheDocument();
    });

    it('ignores granted=true when notApplicable is true', () => {
      renderWithAppContext(
        <ScopeStatusIcon
          granted={true}
          notApplicable={true}
          withTestId={true}
        />,
      );
      expect(screen.getByTestId('account-scopes-scope-na')).toBeInTheDocument();
      expect(
        screen.queryByTestId('account-scopes-scope-granted'),
      ).not.toBeInTheDocument();
    });
  });

  describe('size prop', () => {
    it('renders correctly with a custom size', () => {
      const tree = renderWithAppContext(
        <ScopeStatusIcon granted={true} size={20} />,
      );
      expect(tree.container).toMatchSnapshot();
    });
  });
});