diff --git a/flow-report/src/topbar.tsx b/flow-report/src/topbar.tsx index 0515164d8ac5..5d6d74753527 100644 --- 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}> = +const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler}> = ({onMenuClick}) => { const flowResult = useFlowResult(); const strings = useLocalizedStrings(); @@ -118,3 +121,8 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler ); }; + +export { + Topbar, + saveHtml, +}; diff --git a/flow-report/test/topbar-test.tsx b/flow-report/test/topbar-test.tsx index c3dec734a595..d60e193d9f31 100644 --- a/flow-report/test/topbar-test.tsx +++ b/flow-report/test/topbar-test.tsx @@ -5,22 +5,15 @@ */ import jestMock from 'jest-mock'; -import * as td from 'testdouble'; import {FunctionComponent} from 'preact'; 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 = jestMock.fn(); -td.replace('../../../report/renderer/api.js', { - saveFile: mockSaveFile, -}); - -let Topbar: typeof import('../src/topbar').Topbar; -before(async () => { - Topbar = (await import('../src/topbar')).Topbar; -}); +const defaultSaveFile = saveHtml.saveFile; const flowResult = { name: 'User flow', @@ -36,6 +29,7 @@ let options: LH.FlowReportOptions; describe('Topbar', () => { beforeEach(() => { + saveHtml.saveFile = defaultSaveFile; mockSaveFile.mockReset(); options = {}; wrapper = ({children}) => ( @@ -49,9 +43,9 @@ describe('Topbar', () => { ); }); - // TODO(mocha): can't get esbuild loader and testdouble loader to work at same time - it.skip('save button opens save dialog for HTML file', async () => { + it('save button opens save dialog for HTML file', async () => { options = {getReportHtml: () => ''}; + saveHtml.saveFile = mockSaveFile; const root = render( {}}/>, {wrapper}); const saveButton = root.getByText('Save');