From 9739796919e67e5f70dc4cbc26348d4c692e6d0f Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Wed, 22 Mar 2023 17:36:56 +0100
Subject: [PATCH 1/2] test(fluentui/react): fix initial global leaks that were
 causing OOM issues

---
 .../DetailsList/DetailsList.test.tsx          |  7 ++---
 .../DetailsList/DetailsListV2.test.tsx        |  3 +-
 .../Dialog/Dialog.deprecated.test.tsx         | 21 ++++++-------
 .../src/components/Dialog/Dialog.test.tsx     | 30 ++++++++++++-------
 .../style-utilities/src/styles/theme.test.ts  | 19 +++++++++---
 scripts/jest/src/jest.preset.v8.js            |  2 ++
 scripts/jest/src/jest.preset.v8.spec.ts       |  2 ++
 7 files changed, 55 insertions(+), 29 deletions(-)

diff --git a/packages/react/src/components/DetailsList/DetailsList.test.tsx b/packages/react/src/components/DetailsList/DetailsList.test.tsx
index d2e40b859ee35..9f82b65c97542 100644
--- a/packages/react/src/components/DetailsList/DetailsList.test.tsx
+++ b/packages/react/src/components/DetailsList/DetailsList.test.tsx
@@ -68,18 +68,17 @@ function customColumnDivider(
 
 describe('DetailsList', () => {
   let spy: jest.SpyInstance;
-  beforeAll(() => {
+  beforeEach(() => {
     /* eslint-disable-next-line @typescript-eslint/no-empty-function */
     spy = jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
+    resetIds();
   });
 
   afterAll(() => {
     spy.mockRestore();
   });
 
-  beforeEach(() => {
-    resetIds();
-  });
+  // beforeEach(() => {});
 
   afterEach(() => {
     if ((setTimeout as unknown as jest.Mock).mock) {
diff --git a/packages/react/src/components/DetailsList/DetailsListV2.test.tsx b/packages/react/src/components/DetailsList/DetailsListV2.test.tsx
index da42473541867..9766f957b55d8 100644
--- a/packages/react/src/components/DetailsList/DetailsListV2.test.tsx
+++ b/packages/react/src/components/DetailsList/DetailsListV2.test.tsx
@@ -77,7 +77,8 @@ const groupProps: IDetailsGroupRenderProps = {
  */
 describe('DetailsListV2', () => {
   let spy: jest.SpyInstance;
-  beforeAll(() => {
+
+  beforeEach(() => {
     /* eslint-disable-next-line @typescript-eslint/no-empty-function */
     spy = jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
   });
diff --git a/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx b/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx
index 57c18ad1942db..07c6f06799406 100644
--- a/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx
+++ b/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx
@@ -6,24 +6,25 @@ import { resetIds, setWarningCallback } from '../../Utilities';
 import { DialogBase } from './Dialog.base';
 
 describe('Dialog deprecated props', () => {
-  beforeEach(() => {
-    resetIds();
+  beforeAll(() => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noop = () => {};
+    // Prevent warn deprecations from failing test
+    setWarningCallback(noop);
   });
 
-  afterAll(() => {
+  beforeEach(() => {
     resetIds();
-  });
-
-  beforeAll(() => {
-    // Prevent warn deprecations from failing test
-    setWarningCallback(() => {
-      /* no-op */
-    });
     (ReactDOM.createPortal as any) = jest.fn((element, node) => {
       return element;
     });
   });
 
+  afterAll(() => {
+    setWarningCallback();
+    //   resetIds();
+  });
+
   afterEach(() => {
     (ReactDOM.createPortal as any).mockClear();
     jest.useRealTimers();
diff --git a/packages/react/src/components/Dialog/Dialog.test.tsx b/packages/react/src/components/Dialog/Dialog.test.tsx
index 1d5b969ac78d7..83186263f8f3a 100644
--- a/packages/react/src/components/Dialog/Dialog.test.tsx
+++ b/packages/react/src/components/Dialog/Dialog.test.tsx
@@ -14,11 +14,6 @@ describe('Dialog', () => {
     resetIds();
   });
 
-  afterEach(() => {
-    setWarningCallback();
-    jest.useRealTimers();
-  });
-
   afterAll(() => {
     resetIds();
   });
@@ -86,11 +81,14 @@ describe('Dialog', () => {
 
     expect(queryByRole('dialog')).toBeFalsy();
     expect(onDismissed).toHaveBeenCalledTimes(1);
+
+    jest.useRealTimers();
   });
 
   it('deprecated isOpen controls open state of the dialog', () => {
     // suppress deprecation warning as error
-    setWarningCallback(() => undefined);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setWarningCallback(() => {});
     jest.useFakeTimers();
     const onDismissed = jest.fn();
 
@@ -106,6 +104,9 @@ describe('Dialog', () => {
 
     expect(queryByRole('dialog')).toBeFalsy();
     expect(onDismissed).toHaveBeenCalledTimes(1);
+
+    jest.useRealTimers();
+    setWarningCallback();
   });
 
   it('Properly attaches auto-generated aria attributes IDs', () => {
@@ -154,7 +155,7 @@ describe('Dialog', () => {
       <DialogBase
         hidden={false}
         modalProps={{
-          titleAriaId: titleAriaId,
+          titleAriaId,
         }}
         dialogContentProps={{
           title: 'sample title',
@@ -170,7 +171,8 @@ describe('Dialog', () => {
 
   it('deprecated titleId prop should be used if titleProps.id is not passed', () => {
     // Prevent warn deprecations from failing test
-    setWarningCallback(() => undefined);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setWarningCallback(() => {});
 
     const titleId = 'title_id';
     render(
@@ -185,10 +187,13 @@ describe('Dialog', () => {
 
     const dialogTitle = document.getElementById(titleId);
     expect(dialogTitle).toBeTruthy();
+
+    setWarningCallback();
   });
 
   it('deprecated titleId prop should not be used if titleProps.id is undefined', () => {
-    setWarningCallback(() => undefined);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setWarningCallback(() => {});
 
     const titleId = 'title_id';
     render(
@@ -204,10 +209,13 @@ describe('Dialog', () => {
 
     const dialogTitle = document.getElementById(titleId);
     expect(dialogTitle).toBeFalsy();
+
+    setWarningCallback();
   });
 
   it('titleProps.id should be used if deprecated titleId is also passed', () => {
-    setWarningCallback(() => undefined);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setWarningCallback(() => {});
 
     const titleId = 'title_id';
     render(
@@ -223,6 +231,8 @@ describe('Dialog', () => {
 
     const dialogTitle = document.getElementById(titleId);
     expect(dialogTitle).toBeTruthy();
+
+    setWarningCallback();
   });
 
   describe('enableAriaHiddenSiblings', () => {
diff --git a/packages/style-utilities/src/styles/theme.test.ts b/packages/style-utilities/src/styles/theme.test.ts
index f3dab32c87ba4..b3e32885a70bf 100644
--- a/packages/style-utilities/src/styles/theme.test.ts
+++ b/packages/style-utilities/src/styles/theme.test.ts
@@ -5,29 +5,40 @@ import type { IRawStyle } from '@fluentui/merge-styles';
 describe('registerOnThemeChangeCallback', () => {
   let callback = jest.fn();
 
-  it('registers a callback successfully', () => {
+  it.skip('registers a callback successfully', () => {
     registerOnThemeChangeCallback(callback);
     expect(callback.mock.calls.length).toBe(0);
   });
 
-  it('calls the previously registered callback', () => {
+  it('calls previously registered callback', () => {
+    registerOnThemeChangeCallback(callback);
     loadTheme({});
     expect(callback.mock.calls.length).toBe(1);
   });
 
   it('calls the previously registered callback (again)', () => {
+    registerOnThemeChangeCallback(callback);
+    loadTheme({});
     loadTheme({});
     expect(callback.mock.calls.length).toBe(2);
   });
 
   it('unregisters the callback, and doesnt call it again', () => {
+    registerOnThemeChangeCallback(callback);
+    loadTheme({});
+    loadTheme({});
     removeOnThemeChangeCallback(callback);
+
     expect(callback.mock.calls.length).toBe(2);
     loadTheme({});
     expect(callback.mock.calls.length).toBe(2);
   });
 
   it('didnt pass null to the callback', () => {
+    registerOnThemeChangeCallback(callback);
+    loadTheme({});
+    loadTheme({});
+
     expect(callback.mock.calls[0][0]).toBeTruthy();
     expect(callback.mock.calls[1][0]).toBeTruthy();
   });
@@ -37,7 +48,7 @@ describe('loadTheme', () => {
   describe('specify defaultFontStyle', () => {
     it('applies defaultFontStyle to fonts and retains all other default values', () => {
       const defaultFontStyle: IRawStyle = { fontFamily: 'Segoe UI' };
-      const userTheme = { defaultFontStyle: defaultFontStyle };
+      const userTheme = { defaultFontStyle };
       loadTheme(userTheme);
       const newTheme = getTheme();
 
@@ -58,7 +69,7 @@ describe('loadTheme', () => {
     });
     it('applies defaultFontStyle and fonts to theme and retains all other default values', () => {
       const defaultFontStyle: IRawStyle = { fontFamily: 'Foo', fontSize: '10px' };
-      const userTheme = { defaultFontStyle: defaultFontStyle, fonts: { small: { fontSize: '20px' } } };
+      const userTheme = { defaultFontStyle, fonts: { small: { fontSize: '20px' } } };
       loadTheme(userTheme);
       const newTheme = getTheme();
 
diff --git a/scripts/jest/src/jest.preset.v8.js b/scripts/jest/src/jest.preset.v8.js
index 923340801552b..26a57f26b9c5a 100644
--- a/scripts/jest/src/jest.preset.v8.js
+++ b/scripts/jest/src/jest.preset.v8.js
@@ -78,6 +78,8 @@ const createConfig = (customConfig = {}) => {
       url: 'http://localhost',
     },
     testEnvironment: 'jsdom',
+    restoreMocks: true,
+    clearMocks: true,
 
     watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
   };
diff --git a/scripts/jest/src/jest.preset.v8.spec.ts b/scripts/jest/src/jest.preset.v8.spec.ts
index a42e8bba60ff6..9b8d78137b369 100644
--- a/scripts/jest/src/jest.preset.v8.spec.ts
+++ b/scripts/jest/src/jest.preset.v8.spec.ts
@@ -35,6 +35,8 @@ describe(`v8 preset`, () => {
         transform: {
           '^.+\\.tsx?$': 'ts-jest',
         },
+        restoreMocks: true,
+        clearMocks: true,
         transformIgnorePatterns: ['/node_modules/', '/lib-commonjs/', '\\.js$'],
         watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
       }),

From cd8ba24789bcabddcb1002295db50e74d37cb896 Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Mon, 24 Apr 2023 09:54:35 +0200
Subject: [PATCH 2/2] --amend

---
 packages/react/src/components/DetailsList/DetailsList.test.tsx  | 2 --
 packages/react/src/components/Dialog/Dialog.deprecated.test.tsx | 1 -
 packages/style-utilities/src/styles/theme.test.ts               | 2 +-
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/react/src/components/DetailsList/DetailsList.test.tsx b/packages/react/src/components/DetailsList/DetailsList.test.tsx
index 9f82b65c97542..0daf2b79faf2c 100644
--- a/packages/react/src/components/DetailsList/DetailsList.test.tsx
+++ b/packages/react/src/components/DetailsList/DetailsList.test.tsx
@@ -78,8 +78,6 @@ describe('DetailsList', () => {
     spy.mockRestore();
   });
 
-  // beforeEach(() => {});
-
   afterEach(() => {
     if ((setTimeout as unknown as jest.Mock).mock) {
       jest.runOnlyPendingTimers();
diff --git a/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx b/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx
index 07c6f06799406..c6ac7dc65bfc3 100644
--- a/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx
+++ b/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx
@@ -22,7 +22,6 @@ describe('Dialog deprecated props', () => {
 
   afterAll(() => {
     setWarningCallback();
-    //   resetIds();
   });
 
   afterEach(() => {
diff --git a/packages/style-utilities/src/styles/theme.test.ts b/packages/style-utilities/src/styles/theme.test.ts
index b3e32885a70bf..8c32928fe3286 100644
--- a/packages/style-utilities/src/styles/theme.test.ts
+++ b/packages/style-utilities/src/styles/theme.test.ts
@@ -5,7 +5,7 @@ import type { IRawStyle } from '@fluentui/merge-styles';
 describe('registerOnThemeChangeCallback', () => {
   let callback = jest.fn();
 
-  it.skip('registers a callback successfully', () => {
+  it('registers a callback successfully', () => {
     registerOnThemeChangeCallback(callback);
     expect(callback.mock.calls.length).toBe(0);
   });