plugins/packages/com.sncommunity.advanced-checklist/src/features/tasks/NotePreview.test.tsx at 5ff0738589691c638eb66aea5e23f45abb6613cb · standardnotes/plugins · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
import { render, screen } from '@testing-library/react'
import NotePreview from './NotePreview'
import { DEFAULT_SECTIONS, GroupModel } from './tasks-slice'

const workTasks = [
  {
    id: 'test-b-1',
    description: 'Test #1',
    createdAt: new Date().toISOString(),
  },
  {
    id: 'test-b-2',
    description: 'Test #2',
    completed: true,
    createdAt: new Date().toISOString(),
  },
]

const personalTasks = [
  {
    id: 'test-c-1',
    description: 'Test #3',
    createdAt: new Date().toISOString(),
  },
  {
    id: 'test-c-2',
    description: 'Test #4',
    completed: true,
    createdAt: new Date().toISOString(),
  },
]

const miscTasks = [
  {
    id: 'test-d-1',
    description: 'Test #5',
    createdAt: new Date().toISOString(),
  },
  {
    id: 'test-d-2',
    description: 'Test #6',
    createdAt: new Date().toISOString(),
  },
]

it('should render without tasks', () => {
  const groupedTasks: GroupModel[] = []

  render(<NotePreview groupedTasks={groupedTasks} />)

  const header = screen.getByText('0/0 tasks completed')
  expect(header).toBeVisible()

  const progressBar = screen.getByTestId('circular-progress-bar')
  expect(progressBar).toBeVisible()

  // eslint-disable-next-line testing-library/no-node-access
  const progressBarBackground = progressBar.firstChild
  expect(progressBarBackground).toHaveClass('background')

  // eslint-disable-next-line testing-library/no-node-access
  const progressBarStroke = progressBar.lastChild
  expect(progressBarStroke).toHaveClass('progress p-0')

  const groupList = screen.queryAllByTestId('group-summary')
  expect(groupList).toHaveLength(0)
})

it('should render with tasks', () => {
  const groupedTasks = [
    {
      name: 'Work',
      tasks: workTasks,
      sections: DEFAULT_SECTIONS,
    },
    {
      name: 'Personal',
      tasks: personalTasks,
      sections: DEFAULT_SECTIONS,
    },
  ]

  render(<NotePreview groupedTasks={groupedTasks} />)

  const header = screen.getByText('2/4 tasks completed')
  expect(header).toBeVisible()

  const progressBar = screen.getByTestId('circular-progress-bar')
  expect(progressBar).toBeVisible()

  // eslint-disable-next-line testing-library/no-node-access
  const progressBarBackground = progressBar.firstChild
  expect(progressBarBackground).toHaveClass('background')

  // eslint-disable-next-line testing-library/no-node-access
  const progressBarStroke = progressBar.lastChild
  expect(progressBarStroke).toHaveClass('progress p-50')

  const groupList = screen.getAllByTestId('group-summary')
  expect(groupList).toHaveLength(2)
})

it('should render a summary of the remaining group(s)', () => {
  const groupedTasks = [
    {
      name: 'Work',
      tasks: workTasks,
      sections: DEFAULT_SECTIONS,
    },
    {
      name: 'Personal',
      tasks: personalTasks,
      sections: DEFAULT_SECTIONS,
    },
    {
      name: 'Misc',
      tasks: miscTasks,
      sections: DEFAULT_SECTIONS,
    },
    {
      name: 'Groceries',
      tasks: [
        {
          id: 'test-e-1',
          description: 'Test #7',
          createdAt: new Date().toISOString(),
        },
      ],
      sections: DEFAULT_SECTIONS,
    },
  ]

  render(<NotePreview groupedTasks={groupedTasks} />)

  const remainingGroups = screen.getByTestId('groups-remaining')
  expect(remainingGroups).toHaveTextContent('And 1 other group')
  expect(remainingGroups).toBeVisible()
})