From 7db6ee4fffe116f70ad087d6caddccd9081f4119 Mon Sep 17 00:00:00 2001
From: Brandon Scott <contact@brandonscott.me>
Date: Mon, 22 May 2023 10:15:47 -0400
Subject: [PATCH] refactor: globally mock useFillTimeseriesSorted hook, fix
 failing ProjectUsage test expecting mocked data

---
 .../analytics/useFillTimeseriesSorted.ts      |  2 +
 .../components/Home/ProjectUsage.test.js      |  7 +++-
 .../pages/projects/reports/api-report.test.js | 39 +++++--------------
 3 files changed, 18 insertions(+), 30 deletions(-)
 create mode 100644 studio/__mocks__/hooks/analytics/useFillTimeseriesSorted.ts

diff --git a/studio/__mocks__/hooks/analytics/useFillTimeseriesSorted.ts b/studio/__mocks__/hooks/analytics/useFillTimeseriesSorted.ts
new file mode 100644
index 00000000000..3b4152ed3c9
--- /dev/null
+++ b/studio/__mocks__/hooks/analytics/useFillTimeseriesSorted.ts
@@ -0,0 +1,2 @@
+const useFillTimeseriesSorted = jest.fn().mockReturnValue([])
+export default useFillTimeseriesSorted
diff --git a/studio/tests/components/Home/ProjectUsage.test.js b/studio/tests/components/Home/ProjectUsage.test.js
index 159e62052d5..9884fb1feae 100644
--- a/studio/tests/components/Home/ProjectUsage.test.js
+++ b/studio/tests/components/Home/ProjectUsage.test.js
@@ -3,6 +3,7 @@ import { clickDropdown, render } from '../../helpers'
 import userEvent from '@testing-library/user-event'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { get } from 'lib/common/fetch'
+import useFillTimeseriesSorted from 'hooks/analytics/useFillTimeseriesSorted'
 
 // TODO: abstract out to global setup
 const ProjectUsage = jest.fn()
@@ -51,9 +52,13 @@ const MOCK_CHART_DATA = {
       total_rest_requests: 333,
       timestamp: new Date().toISOString(),
     },
-  ]
+  ],
 }
 
+// This hook is globally mocked, so you don't need to call `jest.mock` first - but the tests
+// for this component need this mock data returned
+useFillTimeseriesSorted.mockReturnValue(MOCK_CHART_DATA.result)
+
 test('mounts correctly', async () => {
   get.mockImplementation((url) => {
     if (decodeURIComponent(url).includes('usage.api-counts')) {
diff --git a/studio/tests/pages/projects/reports/api-report.test.js b/studio/tests/pages/projects/reports/api-report.test.js
index 0df620b892d..be214ef6b73 100644
--- a/studio/tests/pages/projects/reports/api-report.test.js
+++ b/studio/tests/pages/projects/reports/api-report.test.js
@@ -3,12 +3,8 @@ import { render } from '../../../helpers'
 import { waitFor, screen } from '@testing-library/react'
 import { ApiReport } from 'pages/project/[ref]/reports/api-overview'
 import userEvent from '@testing-library/user-event'
-import * as useFillTimeseriesSortedModule from 'hooks/analytics/useFillTimeseriesSorted'
 
 beforeEach(() => {
-  // This hook can result in a huge amount of data being loaded into memory (array of 130k+ objects)
-  jest.spyOn(useFillTimeseriesSortedModule, 'default').mockReturnValue([])
-
   // reset mocks between tests
   get.mockReset()
   get.mockImplementation(async (_url) => [{ result: [] }])
@@ -33,12 +29,8 @@ test('refresh button', async () => {
 
 test('append - api request routes', async () => {
   get.mockImplementation(async (url) => {
-    if (decodeURIComponent(url).includes('request.path')) {
-      return {
-        result: [
-          { path: 'mypath', method: 'GET', status_code: 200, search: 'some-query', count: 22 },
-        ],
-      }
+    if (decodeURIComponent(url).includes("request.path")) {
+      return { result: [{ path: 'mypath', method: 'GET', status_code: 200, search: 'some-query', count: 22 }] }
     }
     return { result: [{ timestamp: new Date().toISOString(), count: 123 }] }
   })
@@ -51,15 +43,12 @@ test('append - api request routes', async () => {
   await screen.findAllByText(/22/)
 })
 
+
 test('append - error routes', async () => {
   get.mockImplementation(async (url) => {
     const uri = decodeURIComponent(url)
-    if (uri.includes('400')) {
-      return {
-        result: [
-          { path: 'mypath', method: 'GET', status_code: 200, search: 'some-query', count: 22 },
-        ],
-      }
+    if (uri.includes("400")) {
+      return { result: [{ path: 'mypath', method: 'GET', status_code: 200, search: 'some-query', count: 22 }] }
     }
     return { result: [{ timestamp: new Date().toISOString(), count: 123 }] }
   })
@@ -72,22 +61,12 @@ test('append - error routes', async () => {
   await screen.findAllByText(/22/)
 })
 
+
 test('append - error routes', async () => {
   get.mockImplementation(async (url) => {
     const uri = decodeURIComponent(url)
-    if (uri.includes('avg') && uri.includes('request.path')) {
-      return {
-        result: [
-          {
-            path: 'mypath',
-            method: 'GET',
-            status_code: 200,
-            avg: 534,
-            search: 'some-query',
-            count: 22,
-          },
-        ],
-      }
+    if (uri.includes("avg") && uri.includes("request.path")) {
+      return { result: [{ path: 'mypath', method: 'GET', status_code: 200, avg: 534, search: 'some-query', count: 22 }] }
     }
     return { result: [{ timestamp: new Date().toISOString(), count: 123 }] }
   })
@@ -101,6 +80,8 @@ test('append - error routes', async () => {
   await screen.findAllByText(/534\.00ms/)
 })
 
+
+
 // test('expandable error routes', async () => {
 //   get.mockImplementation(async (url) => {
 //     if (url.includes('path')) {