STAPLE/src/invites/components/InvitesList.test.tsx at d77a7d4d8a4e35c9235eb0600217ceb198f9a2de · STAPLE-verse/STAPLE · 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
/**
 * @vitest-environment jsdom
 */

import { expect, test, vi } from "vitest"
import { render, screen, within } from "test/utils"
import { InvitesListView } from "./InvitesList"

vi.mock("next/router", () => ({
  useRouter: vi.fn(),
}))

const getInvites1 = () => {
  const d1: Date = new Date("2024-10-27 11:43 PM")
  const d2: Date = new Date("2024-12-27 12:03 AM")
  const invites = [
    {
      createdAt: d1,
      project: {
        name: "great paper",
      },
      invitationCode: "mui8z5k3kCIZfVKDGrrd",
      id: 1,
    },
    {
      createdAt: d2,
      project: {
        name: "managing app",
      },
      invitationCode: "6ILrT1TAhjFdRMGJh0gC",
      id: 2,
    },
  ]
  return invites
}

test("Render InvitesListView with two invites", async () => {
  const invites = getInvites1()
  render(<InvitesListView invites={invites}></InvitesListView>)

  const table = screen.getByRole("table")
  expect(screen.getByText(/date/i)).toBeInTheDocument()
  expect(screen.getByText(/project/i)).toBeInTheDocument()
  expect(screen.getByText(/invitation code/i)).toBeInTheDocument()
  expect(screen.getByText(/accept/i)).toBeInTheDocument()
  expect(screen.getByText(/decline/i)).toBeInTheDocument()

  expect(
    screen.queryByRole("cell", {
      name: /no data found/i,
    })
  ).not.toBeInTheDocument()

  expect(
    screen.getByRole("cell", {
      name: /october 27, 2024 at 23:43/i,
    })
  ).toBeInTheDocument()

  expect(
    screen.getByRole("cell", {
      name: /mui8z5k3kcizfvkdgrrd/i,
    })
  ).toBeInTheDocument()

  expect(
    screen.getByRole("cell", {
      name: /great paper/i,
    })
  ).toBeInTheDocument()

  expect(
    screen.getByRole("cell", {
      name: /october 27, 2024 at 23:43/i,
    })
  ).toBeInTheDocument()
  expect(
    screen.getByRole("cell", {
      name: /managing app/i,
    })
  ).toBeInTheDocument()

  expect(
    screen.getByRole("cell", {
      name: /6ilrt1tahjfdrmgjh0gc/i,
    })
  ).toBeInTheDocument()

  expect(
    screen.queryByRole("cell", {
      name: /march 27, 2024 at 23:43/i,
    })
  ).not.toBeInTheDocument()
  expect(
    screen.queryByRole("cell", {
      name: /my new app/i,
    })
  ).not.toBeInTheDocument()

  expect(
    screen.queryByRole("cell", {
      name: /12mnnnjfdrmgjh0gc/i,
    })
  ).not.toBeInTheDocument()

  const columnheaderDateSearch = screen.getByRole("columnheader", {
    name: /date/i,
  })
  expect(within(columnheaderDateSearch).getByRole("combobox")).toBeInTheDocument()
  const columnheaderProjectSearch = screen.getByRole("columnheader", {
    name: /project/i,
  })
  expect(within(columnheaderProjectSearch).getByRole("combobox")).toBeInTheDocument()

  const columnheaderCodeSearh = screen.getByRole("columnheader", {
    name: /invitation code/i,
  })

  expect(within(columnheaderCodeSearh).getByRole("combobox")).toBeInTheDocument()

  expect(table).toBeInTheDocument()
  const btns = within(table).queryAllByRole("button")
  expect(btns).not.toBeNull()
  expect(btns.length).equal(4)
})

test("Render InvitesListView with empty list", async () => {
  const invites = getInvites1()
  const { debug } = render(<InvitesListView invites={[]}></InvitesListView>)

  const table = screen.getByRole("table")
  expect(screen.getByText(/date/i)).toBeInTheDocument()
  expect(screen.getByText(/project/i)).toBeInTheDocument()
  expect(screen.getByText(/invitation code/i)).toBeInTheDocument()
  expect(screen.getByText(/accept/i)).toBeInTheDocument()
  expect(screen.getByText(/decline/i)).toBeInTheDocument()

  expect(
    screen.getByRole("cell", {
      name: /no data found/i,
    })
  ).toBeInTheDocument()

  expect(
    screen.queryByRole("cell", {
      name: /october 27, 2024 at 23:43/i,
    })
  ).not.toBeInTheDocument()

  expect(
    screen.queryByRole("cell", {
      name: /mui8z5k3kcizfvkdgrrd/i,
    })
  ).not.toBeInTheDocument()

  expect(
    screen.queryByRole("cell", {
      name: /great paper/i,
    })
  ).not.toBeInTheDocument()

  expect(table).toBeInTheDocument()
  const btns = within(table).queryAllByRole("button")
  expect(btns).not.toBeNull()
  expect(btns.length).equal(0)
})