From 277a83215c1e20ff8c93768f93edf92d60deee5f Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 22 Apr 2022 16:00:37 +0100
Subject: [PATCH] Use jest.fakeTimers instead of mocking Date.now (#48121)

---
 .../inspect/VariablesUnknownTable.test.tsx    | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/public/app/features/variables/inspect/VariablesUnknownTable.test.tsx b/public/app/features/variables/inspect/VariablesUnknownTable.test.tsx
index 161f12f03bd..e6dd04e8ba6 100644
--- a/public/app/features/variables/inspect/VariablesUnknownTable.test.tsx
+++ b/public/app/features/variables/inspect/VariablesUnknownTable.test.tsx
@@ -1,12 +1,17 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { UserEvent } from '@testing-library/user-event/dist/types/setup';
 import React from 'react';
 
 import * as runtime from '@grafana/runtime';
 
 import { customBuilder } from '../shared/testing/builders';
 
-import { VariablesUnknownTable, VariablesUnknownTableProps } from './VariablesUnknownTable';
+import {
+  SLOW_VARIABLES_EXPANSION_THRESHOLD,
+  VariablesUnknownTable,
+  VariablesUnknownTableProps,
+} from './VariablesUnknownTable';
 import * as utils from './utils';
 import { UsagesToNetwork } from './utils';
 
@@ -100,25 +105,40 @@ describe('VariablesUnknownTable', () => {
       });
 
       describe('but when the unknown processing takes a while', () => {
-        const origDateNow = Date.now;
+        let user: UserEvent;
+
+        beforeEach(() => {
+          jest.useFakeTimers();
+          // Need to use delay: null here to work with fakeTimers
+          // see https://github.com/testing-library/user-event/issues/833
+          user = userEvent.setup({ delay: null });
+        });
 
         afterEach(() => {
-          Date.now = origDateNow;
+          jest.useRealTimers();
         });
 
         it('then it should report slow expansion', async () => {
           const variable = customBuilder().withId('Renamed Variable').withName('Renamed Variable').build();
           const usages = [{ variable, nodes: [], edges: [], showGraph: false }];
-          const { reportInteractionSpy } = await getTestContext({}, usages);
-          const dateNowStart = 1000;
-          const dateNowStop = 2000;
-          Date.now = jest.fn().mockReturnValueOnce(dateNowStart).mockReturnValue(dateNowStop);
+          const { getUnknownsNetworkSpy, reportInteractionSpy } = await getTestContext({}, usages);
+          getUnknownsNetworkSpy.mockImplementation(() => {
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                resolve(usages);
+              }, SLOW_VARIABLES_EXPANSION_THRESHOLD);
+            });
+          });
 
-          await userEvent.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
+          await user.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
+
+          jest.advanceTimersByTime(SLOW_VARIABLES_EXPANSION_THRESHOLD);
 
           // make sure we report the interaction for slow expansion
           await waitFor(() =>
-            expect(reportInteractionSpy).toHaveBeenCalledWith('Slow unknown variables expansion', { elapsed: 1000 })
+            expect(reportInteractionSpy).toHaveBeenCalledWith('Slow unknown variables expansion', {
+              elapsed: expect.any(Number),
+            })
           );
         });
       });