tests(topbar): replace module mock with dependency injection (#14057)

GoogleChrome · May 31, 2022 · d81ecc9 · d81ecc9
1 parent 220d9cf
commit d81ecc9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/flow-report/src/topbar.tsx b/flow-report/src/topbar.tsx
@@ -17,9 +17,12 @@ import {saveFile} from '../../report/renderer/api';
 function saveHtml(flowResult: LH.FlowResult, htmlStr: string) {
   const blob = new Blob([htmlStr], {type: 'text/html'});
   const filename = getFlowResultFilenamePrefix(flowResult) + '.html';
-  saveFile(blob, filename);
+  saveHtml.saveFile(blob, filename);
 }
 
+// Store `saveFile` here so we can do dependency injection.
+saveHtml.saveFile = saveFile;
+
 /* eslint-disable max-len */
 const Logo: FunctionComponent = () => {
   return (
@@ -68,7 +71,7 @@ const TopbarButton: FunctionComponent<{
   );
 };
 
-export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLButtonElement>}> =
+const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLButtonElement>}> =
 ({onMenuClick}) => {
   const flowResult = useFlowResult();
   const strings = useLocalizedStrings();
@@ -118,3 +121,8 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
     </div>
   );
 };
+
+export {
+  Topbar,
+  saveHtml,
+};
diff --git a/flow-report/test/topbar-test.tsx b/flow-report/test/topbar-test.tsx
@@ -10,16 +10,10 @@ import {act, render} from '@testing-library/preact';
 
 import {FlowResultContext, OptionsContext} from '../src/util';
 import {I18nProvider} from '../src/i18n/i18n';
+import {Topbar, saveHtml} from '../src/topbar';
 
 const mockSaveFile = jest.fn();
-jest.unstable_mockModule('../../../report/renderer/api.js', () => ({
-  saveFile: mockSaveFile,
-}));
-
-let Topbar: typeof import('../src/topbar').Topbar;
-beforeAll(async () => {
-  Topbar = (await import('../src/topbar')).Topbar;
-});
+const defaultSaveFile = saveHtml.saveFile;
 
 const flowResult = {
   name: 'User flow',
@@ -47,7 +41,12 @@ beforeEach(() => {
   );
 });
 
+afterEach(() => {
+  saveHtml.saveFile = defaultSaveFile;
+});
+
 it('save button opens save dialog for HTML file', async () => {
+  saveHtml.saveFile = mockSaveFile;
   options = {getReportHtml: () => '<html></html>'};
   const root = render(<Topbar onMenuClick={() => {}}/>, {wrapper});