overleaf/services/web/test/frontend/features/history/components/toolbar.spec.tsx
M Fahru 4dec157e08 Implement history react toolbar UI (#12530)
There are two different UI in this PR: `comparing` and `viewing` mode.

- For `comparing`, the user would be shown two separate date. It uses the `UpdateRange` object and this PR adds a timestamp to both `fromV` and `toV` of the object type.
- For `viewing`, the user would only be shown one date since `viewing` mode means viewing a specific update version.

Some other notable changes:

- Move `diff` state to `diff-view.tsx`, which contains `main.tsx` (main editor history view) and `toolbar.tsx` as its children
- refactor `autoSelectFile` by passing `updateRange.toV` directly
- refactor `updateIsSelected` by passing an object that contains `fromV` and `toV` instead of passing `update

There's also a cypress test for both the `viewing` mode and `comparing` mode in this PR.

GitOrigin-RevId: ba54f073f3479c55a39eb6b2932ea7faff78dddc
2023-04-21 08:03:39 +00:00

99 lines
2.3 KiB
TypeScript

import Toolbar from '../../../../../frontend/js/features/history/components/diff-view/toolbar'
import { HistoryContextValue } from '../../../../../frontend/js/features/history/context/types/history-context-value'
import { Diff } from '../../../../../frontend/js/features/history/services/types/doc'
describe('history toolbar', function () {
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',
},
],
pathname: 'main.tex',
}
cy.mount(
<div className="history-react">
<Toolbar diff={diff} selection={selection} />
</div>
)
cy.get('.history-react-toolbar').within(() => {
cy.get('div:first-child').contains('Viewing 13th April')
})
cy.get('.history-react-toolbar-changes').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',
},
],
pathname: 'main.tex',
}
cy.mount(
<div className="history-react">
<Toolbar diff={diff} selection={selection} />
</div>
)
cy.get('.history-react-toolbar').within(() => {
cy.get('div:first-child').contains('Comparing 12th April')
cy.get('div:first-child').contains('to 13th April')
})
})
})