overleaf/services/web/frontend/stories/editor-left-menu/download-menu.stories.tsx
M Fahru 797b9b2532 Migrate download menu in editor left menu to react (#10046)
* Initialize left menu react migration and migration download menu UI to react

* Add test case to DownloadMenu react component

* Update test description and add an href check to one of the download link

* Extract storybook document mock to its own fixture file

* Add mockCompileOnLoad config on storybook editor scope
  - if mockCompileOnLoad: true (default), then the default compile mock will be used
  - If mockCompileOnLoad: false, then we have to provide a compile mock on the storybook component

* Create download menu storybook component

* Use a single "editor-left-menu" controller on the editor left menu migrations

* Remove the form import from the react version of the left menu

* Change inline style to utility class name

GitOrigin-RevId: 5357c7bfc78bf40f52b9b308df8f2b60d793fbf7
2022-10-25 08:04:19 +00:00

44 lines
1 KiB
TypeScript

import DownloadMenu from '../../js/features/editor-left-menu/components/download-menu'
import { ScopeDecorator } from '../decorators/scope'
import { mockCompile, mockCompileError } from '../fixtures/compile'
import { document, mockDocument } from '../fixtures/document'
import useFetchMock from '../hooks/use-fetch-mock'
import { useScope } from '../hooks/use-scope'
export default {
title: 'Editor / Left Menu / Download Menu',
component: DownloadMenu,
decorators: [
(Story: any) => ScopeDecorator(Story, { mockCompileOnLoad: false }),
],
}
export const NotCompiled = () => {
useFetchMock(fetchMock => {
mockCompileError(fetchMock, 'failure')
})
return (
<div id="left-menu" className="shown">
<DownloadMenu />
</div>
)
}
export const CompileSuccess = () => {
useScope({
editor: {
sharejs_doc: mockDocument(document.tex),
},
})
useFetchMock(fetchMock => {
mockCompile(fetchMock)
})
return (
<div id="left-menu" className="shown">
<DownloadMenu />
</div>
)
}