From ce71857d43a87b8f4d94d13db696ff5b2fc6561c Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 25 Mar 2022 17:14:10 +0100
Subject: [PATCH] chore: fix some previewer tests

---
 .../interfaces/Settings/Logs/LogTable.tsx     |  1 -
 .../Settings/Logs/LogsPreviewer.tsx           |  4 +-
 .../Settings/Logs/PreviewFilterPanel.tsx      | 11 ++--
 studio/tests/pages/projects/LogTable.test.js  |  2 +-
 ...-preview.test.js => LogsPreviewer.test.js} | 61 +++++++++----------
 5 files changed, 38 insertions(+), 41 deletions(-)
 rename studio/tests/pages/projects/{logs-preview.test.js => LogsPreviewer.test.js} (80%)

diff --git a/studio/components/interfaces/Settings/Logs/LogTable.tsx b/studio/components/interfaces/Settings/Logs/LogTable.tsx
index 14d8f079ea6..3c1ab7acb1f 100644
--- a/studio/components/interfaces/Settings/Logs/LogTable.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogTable.tsx
@@ -12,7 +12,6 @@ import DatabaseApiColumnRender from './LogColumnRenderers/DatabaseApiColumnRende
 import DatabasePostgresColumnRender from './LogColumnRenderers/DatabasePostgresColumnRender'
 
 interface Props {
-  isCustomQuery: boolean
   data?: Array<LogData | Object>
   queryType?: QueryType
 }
diff --git a/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx b/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
index 49b87b2e79a..291748b04ae 100644
--- a/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
@@ -137,7 +137,7 @@ export const LogsPreviewer: React.FC<Props> = ({ projectRef, queryType, override
         isLoading={isLoading}
         newCount={newCount}
         templates={TEMPLATES.filter(
-          (template) => template.for?.includes(queryType) && template.mode === 'simple'
+          (template) => queryType && template.for?.includes(queryType) && template.mode === 'simple'
         )}
         onRefresh={handleRefresh}
         onSearch={handleSearch}
@@ -182,7 +182,7 @@ export const LogsPreviewer: React.FC<Props> = ({ projectRef, queryType, override
           </div>
         )}
 
-        <LogTable data={logData} isCustomQuery={false} queryType={queryType} />
+        <LogTable data={logData} queryType={queryType} />
         <div className="p-2">
           <Button onClick={() => loadOlder()} icon={<IconRewind />} type="default">
             Load older
diff --git a/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx b/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
index 5ef0617032a..eb938b4aa08 100644
--- a/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
+++ b/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
@@ -60,9 +60,8 @@ const PreviewFilterPanel: FC<Props> = ({
   const [from, setFrom] = useState({ value: '', error: '' })
   const [defaultTimestamp, setDefaultTimestamp] = useState(dayjs().utc().toISOString())
 
-  const [localSearchValue, setlocalSearchValue] = useState(search)
 
-  const hasEdits = localSearchValue !== search
+  const hasEdits = search !== defaultSearchValue
 
   // Sync local state with provided default value
   useEffect(() => {
@@ -169,7 +168,7 @@ const PreviewFilterPanel: FC<Props> = ({
             className="w-60"
             size="tiny"
             placeholder="Search events"
-            onChange={(e) => setlocalSearchValue(e.target.value)}
+            onChange={(e) => setSearch(e.target.value)}
             onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
               setSearch(e.target.value)
               handleSearch()
@@ -179,7 +178,7 @@ const PreviewFilterPanel: FC<Props> = ({
                 <IconSearch size={14} />
               </div>
             }
-            value={localSearchValue}
+            value={search}
             actions={
               hasEdits && (
                 <button
@@ -217,7 +216,7 @@ const PreviewFilterPanel: FC<Props> = ({
             ))}
         </div>
 
-        <div className="flex flex-row">
+        {/* <div className="flex flex-row">
           <Popover
             side="bottom"
             align="end"
@@ -268,7 +267,7 @@ const PreviewFilterPanel: FC<Props> = ({
               onClick={handleReset}
             />
           )}
-        </div>
+        </div> */}
         {/* {!isCustomQuery && (
           <div className="flex items-center space-x-2">
             <p className="text-xs">Show event chart</p>
diff --git a/studio/tests/pages/projects/LogTable.test.js b/studio/tests/pages/projects/LogTable.test.js
index d623a7c94b7..8846b5fb7db 100644
--- a/studio/tests/pages/projects/LogTable.test.js
+++ b/studio/tests/pages/projects/LogTable.test.js
@@ -1,5 +1,5 @@
 import LogTable from 'components/interfaces/Settings/Logs/LogTable'
-import { render, fireEvent, waitFor, screen } from '@testing-library/react'
+import { render,  waitFor, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 test('can display log data', async () => {
   render(
diff --git a/studio/tests/pages/projects/logs-preview.test.js b/studio/tests/pages/projects/LogsPreviewer.test.js
similarity index 80%
rename from studio/tests/pages/projects/logs-preview.test.js
rename to studio/tests/pages/projects/LogsPreviewer.test.js
index 94d5776dab5..10e917e7ab9 100644
--- a/studio/tests/pages/projects/logs-preview.test.js
+++ b/studio/tests/pages/projects/LogsPreviewer.test.js
@@ -2,11 +2,6 @@
 jest.mock('lib/common/fetch')
 import { get } from 'lib/common/fetch'
 
-// mock the settings layout
-jest.mock('components/layouts', () => ({
-  SettingsLayout: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
-}))
-
 // mock mobx
 jest.mock('mobx-react-lite')
 import { observer } from 'mobx-react-lite'
@@ -17,7 +12,7 @@ jest.mock('next/router')
 import { useRouter } from 'next/router'
 const defaultRouterMock = () => {
   const router = jest.fn()
-  router.query = { ref: '123', type: 'auth' }
+  router.query = {}
   router.push = jest.fn()
   router.pathname = 'logs/path'
   return router
@@ -44,10 +39,10 @@ import { useFlag } from 'hooks'
 useFlag.mockReturnValue(true)
 
 import { SWRConfig } from 'swr'
-jest.mock('pages/project/[ref]/settings/logs/[type]')
-import { LogPage } from 'pages/project/[ref]/settings/logs/[type]'
-LogPage.mockImplementation((props) => {
-  const Page = jest.requireActual('pages/project/[ref]/settings/logs/[type]').LogPage
+jest.mock('components/interfaces/Settings/Logs/LogsPreviewer')
+import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
+LogsPreviewer.mockImplementation((props) => {
+  const Comp = jest.requireActual('components/interfaces/Settings/Logs/LogsPreviewer').default
   // wrap with SWR to reset the cache each time
   return (
     <SWRConfig
@@ -56,7 +51,7 @@ LogPage.mockImplementation((props) => {
         shouldRetryOnError: false,
       }}
     >
-      <Page {...props} />
+      <Comp {...props} />
     </SWRConfig>
   )
 })
@@ -66,6 +61,7 @@ import userEvent from '@testing-library/user-event'
 import { getToggleByText } from '../../helpers'
 import { wait } from '@testing-library/user-event/dist/utils'
 import { logDataFixture } from '../../fixtures'
+import { LogsTableName } from 'components/interfaces/Settings/Logs'
 beforeEach(() => {
   // reset mocks between tests
   get.mockReset()
@@ -83,7 +79,7 @@ test('can display log data and metadata', async () => {
       }),
     ],
   })
-  render(<LogPage />)
+  render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
   fireEvent.click(await screen.findByText(/happened/))
   await screen.findByText(/my_key/)
   await screen.findByText(/something_value/)
@@ -101,7 +97,7 @@ test('Refresh page', async () => {
       ],
     }
   })
-  render(<LogPage />)
+  render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
 
   const row = await screen.findByText(/happened/)
   get.mockResolvedValueOnce({ result: [] })
@@ -124,10 +120,9 @@ test('Search will trigger a log refresh', async () => {
     }
     return { result: [] }
   })
-  render(<LogPage />)
+  render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
 
-  userEvent.type(screen.getByPlaceholderText(/Search/), 'something')
-  userEvent.click(screen.getByTitle('Go'))
+  userEvent.type(screen.getByPlaceholderText(/Search events/), 'something{enter}')
 
   await waitFor(
     () => {
@@ -155,24 +150,24 @@ test('poll count for new messages', async () => {
       return { result: [{ count: 125 }] }
     }
     return {
-      result: [logDataFixture({ event_message: 'something happened' })],
+      result: [logDataFixture({ id: 'some-uuid123' })],
     }
   })
-  render(<LogPage />)
-  await waitFor(() => screen.queryByText(/happened/) === null)
+  render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
+  await waitFor(() => screen.queryByText(/some-uuid123/) === null)
   // should display new logs count
   await waitFor(() => screen.getByText(/125/))
 
   userEvent.click(screen.getByText(/Refresh/))
   await waitFor(() => screen.queryByText(/125/) === null)
-  await waitFor(() => screen.getByText(/happened/))
+  await screen.findByText(/some-uuid123/)
 })
 
 test('s= query param will populate the search bar', async () => {
   const router = defaultRouterMock()
-  router.query = { ...router.query, type: 'api', s: 'someSearch' }
+  router.query = { ...router.query, s: 'someSearch' }
   useRouter.mockReturnValue(router)
-  render(<LogPage />)
+  render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
   // should populate search input with the search param
   await screen.findByDisplayValue('someSearch')
   expect(get).toHaveBeenCalledWith(expect.stringContaining('someSearch'))
@@ -187,7 +182,7 @@ test('te= query param will populate the timestamp to input', async () => {
   const router = defaultRouterMock()
   router.query = { ...router.query, te: unixMicro }
   useRouter.mockReturnValue(router)
-  render(<LogPage />)
+  render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
 
   await waitFor(() => {
     expect(get).toHaveBeenCalledWith(
@@ -195,7 +190,7 @@ test('te= query param will populate the timestamp to input', async () => {
     )
   })
   userEvent.click(await screen.findByText('Custom'))
-  await screen.findByDisplayValue(isoString)
+  expect(get).toHaveBeenCalledWith(expect.stringContaining('timestamp_end=' + unixMicro))
 })
 test('ts= query param will populate the timestamp from input', async () => {
   // get time 20 mins before
@@ -206,7 +201,7 @@ test('ts= query param will populate the timestamp from input', async () => {
   const router = defaultRouterMock()
   router.query = { ...router.query, ts: unixMicro }
   useRouter.mockReturnValue(router)
-  render(<LogPage />)
+  render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
 
   await waitFor(() => {
     expect(get).toHaveBeenCalledWith(
@@ -214,7 +209,9 @@ test('ts= query param will populate the timestamp from input', async () => {
     )
   })
   userEvent.click(await screen.findByText('Custom'))
-  await screen.findByDisplayValue(isoString)
+  await screen.findByText(new RegExp(newDate.getFullYear()))
+  await screen.findByText(/Apply/)
+  expect(get).toHaveBeenCalledWith(expect.stringContaining('timestamp_start=' + unixMicro))
 })
 
 test('load older btn will fetch older logs', async () => {
@@ -226,7 +223,7 @@ test('load older btn will fetch older logs', async () => {
       result: [logDataFixture({ event_message: 'first event' })],
     }
   })
-  render(<LogPage />)
+  render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
   // should display first log but not second
   await waitFor(() => screen.getByText('first event'))
   await expect(screen.findByText('second event')).rejects.toThrow()
@@ -249,7 +246,7 @@ test('bug: load older btn does not error out when previous page is empty', async
     }
     return { result: [] }
   })
-  render(<LogPage />)
+  render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
 
   userEvent.click(await screen.findByText('Load older'))
   // NOTE: potential race condition, since we are asserting that something DOES NOT EXIST
@@ -266,7 +263,7 @@ test('bug: load older btn does not error out when previous page is empty', async
 })
 
 test('log event chart hide', async () => {
-  render(<LogPage />)
+  render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
   await screen.findByText('Events')
   const toggle = getToggleByText(/Show event chart/)
   userEvent.click(toggle)
@@ -281,14 +278,16 @@ test('bug: nav backwards with params change results in ui changing', async () =>
     }
     return { data: [] }
   })
-  const { container, rerender } = render(<LogPage />)
+  const { container, rerender } = render(
+    <LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />
+  )
 
   await expect(screen.findByDisplayValue('simple-query')).rejects.toThrow()
 
   const router = defaultRouterMock()
   router.query = { ...router.query, s: 'simple-query' }
   useRouter.mockReturnValue(router)
-  rerender(<LogPage />)
+  rerender(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
 
   await screen.findByDisplayValue('simple-query')
 })