overleaf/services/web/test/frontend/components/pdf-preview/pdf-synctex-controls.spec.tsx
Tim Down e60885aa88 Merge pull request #19347 from overleaf/td-bs5-cypress-css
Move CSS loading in Cypress to individual test spec files

GitOrigin-RevId: 92bb5167cfa81b0bd54acc724efb23b397421ccb
2024-07-25 08:05:16 +00:00

440 lines
12 KiB
TypeScript

import '../../helpers/bootstrap-3'
import PdfSynctexControls from '../../../../frontend/js/features/pdf-preview/components/pdf-synctex-controls'
import { cloneDeep } from 'lodash'
import { useDetachCompileContext as useCompileContext } from '../../../../frontend/js/shared/context/detach-compile-context'
import { useFileTreeData } from '../../../../frontend/js/shared/context/file-tree-data-context'
import { useEffect } from 'react'
import { EditorProviders } from '../../helpers/editor-providers'
import { mockScope } from './scope'
import { detachChannel, testDetachChannel } from '../../helpers/detach-channel'
import { FindResult } from '@/features/file-tree/util/path'
const mockHighlights = [
{
page: 1,
h: 85.03936,
v: 509.999878,
width: 441.921265,
height: 8.855677,
},
{
page: 1,
h: 85.03936,
v: 486.089539,
width: 441.921265,
height: 8.855677,
},
]
type Position = {
page: number
offset: { top: number; left: number }
pageSize: { height: number; width: number }
}
const mockPosition: Position = {
page: 1,
offset: { top: 10, left: 10 },
pageSize: { height: 500, width: 500 },
}
const mockSelectedEntities = [{ type: 'doc' }] as FindResult[]
const WithPosition = ({ mockPosition }: { mockPosition: Position }) => {
const { setPosition } = useCompileContext()
// mock PDF scroll position update
useEffect(() => {
setPosition(mockPosition)
}, [mockPosition, setPosition])
return null
}
// mock PDF scroll position update
const setDetachedPosition = (mockPosition: Position) => {
testDetachChannel.postMessage({
role: 'detacher',
event: 'state-position',
data: { value: mockPosition },
})
}
const WithSelectedEntities = ({
mockSelectedEntities = [],
}: {
mockSelectedEntities: FindResult[]
}) => {
const { setSelectedEntities } = useFileTreeData()
useEffect(() => {
setSelectedEntities(mockSelectedEntities)
}, [mockSelectedEntities, setSelectedEntities])
return null
}
describe('<PdfSynctexControls/>', function () {
beforeEach(function () {
window.metaAttributesCache.set('ol-project_id', 'test-project')
window.metaAttributesCache.set('ol-preventCompileOnLoad', false)
cy.interceptEvents()
})
it('handles clicks on sync buttons', function () {
cy.interceptCompile()
const scope = mockScope()
cy.mount(
<EditorProviders scope={scope}>
<WithPosition mockPosition={mockPosition} />
<WithSelectedEntities mockSelectedEntities={mockSelectedEntities} />
<PdfSynctexControls />
</EditorProviders>
)
cy.waitForCompile()
cy.get('.synctex-control-icon').should('have.length', 2)
// mock editor cursor position update
cy.window().then(win => {
win.dispatchEvent(
new CustomEvent('cursor:editor:update', {
detail: { row: 100, column: 10 },
})
)
})
cy.wrap(null).then(() => {
setDetachedPosition(mockPosition)
})
cy.interceptAsync({ pathname: '/project/*/sync/code' }, 'sync-code').then(
syncCodeResponse => {
cy.findByRole('button', { name: 'Go to code location in PDF' }).click()
cy.findByRole('button', { name: 'Go to code location in PDF' })
.should('be.disabled')
.then(() => {
syncCodeResponse.resolve({
body: { pdf: cloneDeep(mockHighlights) },
})
})
cy.wait('@sync-code')
}
)
cy.interceptAsync({ pathname: '/project/*/sync/pdf' }, 'sync-pdf').then(
syncPdfResponse => {
cy.findByRole('button', { name: /^Go to PDF location in code/ }).click()
cy.findByRole('button', { name: /^Go to PDF location in code/ })
.should('be.disabled')
.then(() => {
syncPdfResponse.resolve({
body: { code: [{ file: 'main.tex', line: 100 }] },
})
})
cy.wait('@sync-pdf')
}
)
})
it('disables button when multiple entities are selected', function () {
cy.interceptCompile()
const scope = mockScope()
cy.mount(
<EditorProviders scope={scope}>
<WithPosition mockPosition={mockPosition} />
<WithSelectedEntities
mockSelectedEntities={
[{ type: 'doc' }, { type: 'doc' }] as FindResult[]
}
/>
<PdfSynctexControls />
</EditorProviders>
)
cy.waitForCompile()
cy.findByRole('button', { name: 'Go to code location in PDF' }).should(
'be.disabled'
)
})
it('disables button when a file is selected', function () {
cy.interceptCompile()
const scope = mockScope()
cy.mount(
<EditorProviders scope={scope}>
<WithPosition mockPosition={mockPosition} />
<WithSelectedEntities
mockSelectedEntities={[{ type: 'fileRef' }] as FindResult[]}
/>
<PdfSynctexControls />
</EditorProviders>
)
cy.waitForCompile()
cy.findByRole('button', { name: 'Go to code location in PDF' }).should(
'be.disabled'
)
})
describe('with detacher role', function () {
beforeEach(function () {
window.metaAttributesCache.set('ol-detachRole', 'detacher')
})
it('does not have go to PDF location button nor arrow icon', function () {
cy.interceptCompile()
const scope = mockScope()
cy.mount(
<EditorProviders scope={scope}>
<WithPosition mockPosition={mockPosition} />
<WithSelectedEntities mockSelectedEntities={mockSelectedEntities} />
<PdfSynctexControls />
</EditorProviders>
)
cy.waitForCompile()
cy.findByRole('button', { name: /^Go to PDF location in code/ }).should(
'not.exist'
)
cy.get('.synctex-control-icon').should('not.exist')
})
it('send set highlights action', function () {
cy.interceptCompile()
const scope = mockScope()
cy.mount(
<EditorProviders scope={scope}>
<WithPosition mockPosition={mockPosition} />
<WithSelectedEntities mockSelectedEntities={mockSelectedEntities} />
<PdfSynctexControls />
</EditorProviders>
)
cy.waitForCompile()
// mock editor cursor position update
cy.window().then(win => {
win.dispatchEvent(
new CustomEvent('cursor:editor:update', {
detail: { row: 100, column: 10 },
})
)
})
cy.spy(detachChannel, 'postMessage').as('postDetachMessage')
cy.interceptAsync({ pathname: '/project/*/sync/code' }, 'sync-code').then(
syncCodeResponse => {
cy.findByRole('button', {
name: 'Go to code location in PDF',
})
.should('not.be.disabled')
.click()
cy.findByRole('button', {
name: 'Go to code location in PDF',
})
.should('be.disabled')
.then(() => {
syncCodeResponse.resolve({
body: { pdf: cloneDeep(mockHighlights) },
})
})
cy.wait('@sync-code')
}
)
cy.findByRole('button', {
name: 'Go to code location in PDF',
}).should('not.be.disabled')
// synctex is called locally and the result are broadcast for the detached tab
// NOTE: can't use `.to.deep.include({…})` as it doesn't match the nested array
cy.get('@postDetachMessage').should('have.been.calledWith', {
role: 'detacher',
event: 'action-setHighlights',
data: { args: [mockHighlights] },
})
})
it('reacts to sync to code action', function () {
cy.interceptCompile()
const scope = mockScope()
cy.mount(
<EditorProviders scope={scope}>
<WithPosition mockPosition={mockPosition} />
<WithSelectedEntities mockSelectedEntities={mockSelectedEntities} />
<PdfSynctexControls />
</EditorProviders>
)
cy.waitForCompile()
cy.interceptAsync({ pathname: '/project/*/sync/pdf' }, 'sync-pdf')
.then(syncPdfResponse => {
syncPdfResponse.resolve({
body: { code: [{ file: 'main.tex', line: 100 }] },
})
testDetachChannel.postMessage({
role: 'detached',
event: 'action-sync-to-code',
data: {
args: [mockPosition],
},
})
})
.wait('@sync-pdf')
})
})
describe('with detached role', function () {
beforeEach(function () {
window.metaAttributesCache.set('ol-detachRole', 'detached')
})
it('does not have go to code location button nor arrow icon', function () {
cy.interceptCompile()
const scope = mockScope()
cy.mount(
<EditorProviders scope={scope}>
<WithPosition mockPosition={mockPosition} />
<PdfSynctexControls />
</EditorProviders>
)
cy.waitForCompile()
cy.findByRole('button', {
name: 'Go to code location in PDF',
}).should('not.exist')
cy.get('.synctex-control-icon').should('not.exist')
})
it('send go to code line action', function () {
cy.interceptCompile()
const scope = mockScope()
cy.mount(
<EditorProviders scope={scope}>
<PdfSynctexControls />
</EditorProviders>
)
cy.waitForCompile().then(() => {
testDetachChannel.postMessage({
role: 'detacher',
event: `state-position`,
data: { value: mockPosition },
})
})
cy.findByRole('button', {
name: /^Go to PDF location in code/,
})
cy.findByRole('button', { name: /^Go to PDF location in code/ }).should(
'not.be.disabled'
)
cy.spy(detachChannel, 'postMessage').as('postDetachMessage')
cy.findByRole('button', { name: /^Go to PDF location in code/ }).click()
// the button is only disabled when the state is updated
cy.findByRole('button', { name: /^Go to PDF location in code/ }).should(
'not.be.disabled'
)
cy.get('.synctex-spin-icon').should('not.exist')
cy.get('@postDetachMessage').should('have.been.calledWith', {
role: 'detached',
event: 'action-sync-to-code',
data: {
args: [mockPosition, 72],
},
})
})
it('update inflight state', function () {
cy.interceptCompile()
const scope = mockScope()
cy.mount(
<EditorProviders scope={scope}>
<WithPosition mockPosition={mockPosition} />
<PdfSynctexControls />
</EditorProviders>
)
cy.waitForCompile().then(() => {
testDetachChannel.postMessage({
role: 'detacher',
event: `state-position`,
data: { value: mockPosition },
})
})
cy.findByRole('button', { name: /^Go to PDF location in code/ }).should(
'not.be.disabled'
)
cy.get('.synctex-spin-icon').should('not.exist')
cy.wrap(null).then(() => {
testDetachChannel.postMessage({
role: 'detacher',
event: 'state-sync-to-code-inflight',
data: { value: true },
})
})
cy.findByRole('button', { name: /^Go to PDF location in code/ }).should(
'be.disabled'
)
cy.get('.synctex-spin-icon').should('have.length', 1)
cy.wrap(null).then(() => {
testDetachChannel.postMessage({
role: 'detacher',
event: 'state-sync-to-code-inflight',
data: { value: false },
})
})
cy.findByRole('button', { name: /^Go to PDF location in code/ }).should(
'not.be.disabled'
)
cy.get('.synctex-spin-icon').should('not.exist')
})
})
})