konnosDashboard
logs-query.test.tsx169 lines · main
1import { fireEvent, screen, waitFor } from '@testing-library/react'
2import userEvent from '@testing-library/user-event'
3import dayjs from 'dayjs'
4import { beforeAll, describe, expect, test, vi } from 'vitest'
5
6import { LogsExplorerPage } from '@/pages/project/[ref]/logs/explorer/index'
7import { clickDropdown } from '@/tests/helpers'
8import { customRender as render } from '@/tests/lib/custom-render'
9import { routerMock } from '@/tests/lib/route-mock'
10
11const router = routerMock
12
13beforeAll(() => {
14 vi.doMock('common', async (importOriginal: () => Promise<any>) => {
15 const mod = await importOriginal()
16
17 return {
18 ...mod,
19 IS_PLATFORM: true,
20 useIsLoggedIn: vi.fn(),
21 useParams: vi.fn(() => ({ ref: 'projectRef' })),
22 }
23 })
24 vi.mock('@/lib/gotrue', () => ({
25 auth: { onAuthStateChange: vi.fn() },
26 }))
27})
28
29test.skip('can display log data', async () => {
30 const { container } = render(<LogsExplorerPage dehydratedState={{}} />)
31 let editor = container.querySelector('.monaco-editor')
32 await waitFor(() => {
33 editor = container.querySelector('.monaco-editor')
34 expect(editor).toBeTruthy()
35 })
36
37 if (!editor) {
38 throw new Error('editor not found')
39 }
40
41 await userEvent.type(editor, 'select \ncount(*) as my_count \nfrom edge_logs')
42 await screen.findByText(/Save query/)
43 const button = await screen.findByTitle('run-logs-query')
44 await userEvent.click(button)
45 const row = await screen.findByText(/timestamp/)
46 await userEvent.click(row)
47 await screen.findByText(/metadata/)
48 await screen.findByText(/request/)
49})
50
51test('q= query param will populate the query input', async () => {
52 router.query = { ...router.query, type: 'api', q: 'some_query' }
53
54 render(<LogsExplorerPage dehydratedState={{}} />)
55})
56
57test('ite= and its= query param will populate the datepicker', async () => {
58 const start = dayjs().subtract(1, 'day')
59 const end = dayjs()
60 router.query = {
61 ...router.query,
62 type: 'api',
63 q: 'some_query',
64 its: start.toISOString(),
65 ite: end.toISOString(),
66 }
67
68 render(<LogsExplorerPage dehydratedState={{}} />)
69})
70
71test.skip('custom sql querying', async () => {
72 const { container } = render(<LogsExplorerPage dehydratedState={{}} />)
73
74 let editor = container.querySelector('.monaco-editor')
75 if (!editor) {
76 throw new Error('editor not found')
77 }
78
79 // type new query
80 await userEvent.type(editor, 'select \ncount(*) as my_count \nfrom edge_logs')
81
82 // run query by button
83 await userEvent.click(await screen.findByText('Run'))
84
85 // run query by editor
86 await userEvent.type(editor, '\nlimit 123{ctrl}{enter}')
87
88 await screen.findByText(/my_count/) //column header
89 const rowValue = await screen.findByText(/12345/) // row value
90
91 // clicking on the row value should not show log selection panel
92 await userEvent.click(rowValue)
93 await expect(screen.findByText(/Metadata/)).rejects.toThrow()
94
95 // should not see chronological features
96 await expect(screen.findByText(/Load older/)).rejects.toThrow()
97})
98
99test.skip('bug: can edit query after selecting a log', async () => {
100 const { container } = render(<LogsExplorerPage dehydratedState={{}} />)
101 // run default query
102 await userEvent.click(await screen.findByText('Run'))
103 const rowValue = await screen.findByText(/12345/) // row value
104 // open up an show selection panel
105 await userEvent.click(rowValue)
106 await screen.findByText('Copy')
107
108 // change the query
109 let editor = container.querySelector('.monaco-editor')
110
111 if (!editor) {
112 throw new Error('editor not found')
113 }
114
115 // type new query
116 await userEvent.click(editor)
117 await userEvent.type(editor, ' something')
118 await userEvent.type(editor, '\nsomething{ctrl}{enter}')
119 await userEvent.click(await screen.findByText('Run'))
120
121 // closes the selection panel
122 await expect(screen.findByText('Copy')).rejects.toThrow()
123})
124
125test.skip('query warnings', async () => {
126 router.query = {
127 ...router.query,
128 q: 'some_query',
129 its: dayjs().subtract(10, 'days').toISOString(),
130 ite: dayjs().toISOString(),
131 }
132
133 render(<LogsExplorerPage dehydratedState={{}} />)
134 await screen.findByText('1 warning')
135})
136
137test('field reference', async () => {
138 render(<LogsExplorerPage dehydratedState={{}} />)
139 await userEvent.click(await screen.findByText('Field Reference'))
140 await screen.findByText('metadata.request.cf.asOrganization')
141})
142
143describe.each(['free', 'pro', 'team', 'enterprise'])('upgrade modal for %s', (key) => {
144 test.skip('based on query params', async () => {
145 router.query = {
146 ...router.query,
147 q: 'some_query',
148 its: dayjs().subtract(5, 'month').toISOString(),
149 ite: dayjs().toISOString(),
150 }
151
152 render(<LogsExplorerPage dehydratedState={{}} />)
153 await screen.findByText(/Log retention/) // assert modal title is present
154 })
155 test.skip('based on datepicker helpers', async () => {
156 render(<LogsExplorerPage dehydratedState={{}} />)
157 clickDropdown(screen.getByText('Last hour'))
158 await waitFor(async () => {
159 const option = await screen.findByText('Last 3 days')
160 fireEvent.click(option)
161 })
162 // only Free Plan will show modal
163 if (key === 'free') {
164 await screen.findByText('Log retention') // assert modal title is present
165 } else {
166 await expect(screen.findByText('Log retention')).rejects.toThrow()
167 }
168 })
169})