overleaf/services/web/test/frontend/features/history/components/toolbar.spec.tsx
M Fahru 0648b8aa6c Implement deleted file restore for history react (#12753)
* Add strikethrough to deleted file tree item in history file tree

* Add "restore file" button on toolbar if the selected file have a `removed` operation.

* Implement "restore file" functionality on removed file:

- Refactor the `Selection` object in history context value since we need the `deletedAtV` data which currently is not passed through the state.
- Refactor and clean up file tree type system to support passing through the whole `FileDiff` object for getting the `deletedAtV` data which only appear on `removed` operation
- Implement `postJSON` with file restoration API and pass it on restore file onClick handler at toolbar

* Implement loading behaviour while restoring file is inflight:

- Add `loadingRestoreFile` to `LoadingState`
- Change restore file button to `Restoring...` when in loading state.

* Refactor:

- Rename `DiffOperation` to `FileOperation`
- Extract `isFileRemoved` and `isFileRenamed` to its own file
- Extract `Toolbar` components into small files

GitOrigin-RevId: 2e32ebd2165f73fc6533ff282a9c084162efd682
2023-04-28 08:04:59 +00:00

117 lines
2.9 KiB
TypeScript

import Toolbar from '../../../../../frontend/js/features/history/components/diff-view/toolbar/toolbar'
import { HistoryProvider } from '../../../../../frontend/js/features/history/context/history-context'
import { HistoryContextValue } from '../../../../../frontend/js/features/history/context/types/history-context-value'
import { Diff } from '../../../../../frontend/js/features/history/services/types/doc'
import { EditorProviders } from '../../../helpers/editor-providers'
describe('history toolbar', function () {
const editorProvidersScope = {
ui: { view: 'history', pdfLayout: 'sideBySide', chatOpen: true },
}
const diff: Diff = {
binary: false,
docDiff: {
highlights: [
{
range: {
from: 0,
to: 3,
},
hue: 1,
type: 'addition',
label: 'label',
},
],
doc: 'doc',
},
}
it('renders viewing mode', function () {
const selection: HistoryContextValue['selection'] = {
updateRange: {
fromV: 3,
toV: 6,
fromVTimestamp: 1681413775958,
toVTimestamp: 1681413775958,
},
comparing: false,
files: [
{
pathname: 'main.tex',
operation: 'edited',
},
{
pathname: 'sample.bib',
},
{
pathname: 'frog.jpg',
},
],
selectedFile: {
pathname: 'main.tex',
},
}
cy.mount(
<EditorProviders scope={editorProvidersScope}>
<HistoryProvider>
<div className="history-react">
<Toolbar diff={diff} selection={selection} />
</div>
</HistoryProvider>
</EditorProviders>
)
cy.get('.history-react-toolbar').within(() => {
cy.get('div:first-child').contains('Viewing 13th April')
})
cy.get('.history-react-toolbar-file-info').contains('1 change in main.tex')
})
it('renders comparing mode', function () {
const selection: HistoryContextValue['selection'] = {
updateRange: {
fromV: 0,
toV: 6,
fromVTimestamp: 1681313775958,
toVTimestamp: 1681413775958,
},
comparing: true,
files: [
{
pathname: 'main.tex',
operation: 'added',
},
{
pathname: 'sample.bib',
operation: 'added',
},
{
pathname: 'frog.jpg',
operation: 'added',
},
],
selectedFile: {
pathname: 'main.tex',
},
}
cy.mount(
<EditorProviders scope={editorProvidersScope}>
<HistoryProvider>
<div className="history-react">
<Toolbar diff={diff} selection={selection} />
</div>
</HistoryProvider>
</EditorProviders>
)
cy.get('.history-react-toolbar').within(() => {
cy.get('div:first-child').contains('Comparing 12th April')
cy.get('div:first-child').contains('to 13th April')
})
})
})