mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
4e74fb2694
* Ordering of log entries in the new errors UI * Don't show the expand-collapse widget when not needed; smaller font size in the raw log output * Expose log actions in the log pane. * Use "This project" instead of "Your project" in the new errors UI * Better handling of long log messages; left-ellipsize the file/line number button * Make log location more button-like; add tooltip when needed. * Add a PDF expand button to the toolbar. * Add a stop compilation button to the new compile UI * Use aria-label for button accessible text; improve handling of long filenames in the log location button * Set max-height correctly for the logs pane dropdown * Avoid changing raw logs sizing when expanded and collapsed * Add comment on the solution for right-to-left text and ellipsis * Improve logs pane actions GitOrigin-RevId: 4098d77a9ee6d333644906876b9ff27035b79319
96 lines
3.2 KiB
JavaScript
96 lines
3.2 KiB
JavaScript
import React from 'react'
|
|
import sinon from 'sinon'
|
|
import { expect } from 'chai'
|
|
import { screen, render, fireEvent } from '@testing-library/react'
|
|
import PreviewToolbar from '../../../../../frontend/js/features/preview/components/preview-toolbar'
|
|
|
|
describe('<PreviewToolbar />', function() {
|
|
const onRecompile = sinon.stub()
|
|
const onRecompileFromScratch = sinon.stub()
|
|
const onRunSyntaxCheckNow = sinon.stub()
|
|
const onSetAutoCompile = sinon.stub()
|
|
const onSetDraftMode = sinon.stub()
|
|
const onSetSyntaxCheck = sinon.stub()
|
|
const onToggleLogs = sinon.stub()
|
|
const onSetSplitLayout = sinon.stub()
|
|
const onSetFullLayout = sinon.stub()
|
|
const onStopCompilation = sinon.stub()
|
|
|
|
function renderPreviewToolbar(
|
|
compilerState = {},
|
|
logState = {},
|
|
showLogs = false,
|
|
splitLayout = true
|
|
) {
|
|
render(
|
|
<PreviewToolbar
|
|
compilerState={{
|
|
isAutoCompileOn: true,
|
|
isClearingCache: false,
|
|
isCompiling: false,
|
|
isDraftModeOn: false,
|
|
isSyntaxCheckOn: false,
|
|
logEntries: {},
|
|
...compilerState
|
|
}}
|
|
logsState={{ nErrors: 0, nWarnings: 0, nLogEntries: 0, ...logState }}
|
|
onRecompile={onRecompile}
|
|
onRecompileFromScratch={onRecompileFromScratch}
|
|
onRunSyntaxCheckNow={onRunSyntaxCheckNow}
|
|
onSetAutoCompile={onSetAutoCompile}
|
|
onSetDraftMode={onSetDraftMode}
|
|
onSetSyntaxCheck={onSetSyntaxCheck}
|
|
onToggleLogs={onToggleLogs}
|
|
outputFiles={[]}
|
|
pdfDownloadUrl="/download-pdf-url"
|
|
showLogs={showLogs}
|
|
splitLayout={splitLayout}
|
|
onSetSplitLayout={onSetSplitLayout}
|
|
onSetFullLayout={onSetFullLayout}
|
|
onStopCompilation={onStopCompilation}
|
|
/>
|
|
)
|
|
}
|
|
|
|
it('renders the toolbar', function() {
|
|
renderPreviewToolbar()
|
|
screen.getByText('Recompile')
|
|
screen.getByText('Download PDF')
|
|
screen.getByText('View logs')
|
|
})
|
|
|
|
it('all toolbar items have "toolbar-item" class and text has "toolbar-text"', function() {
|
|
renderPreviewToolbar()
|
|
const toolbar = screen.getByTestId('toolbar-preview')
|
|
for (const toolbarSection of toolbar.children) {
|
|
for (const toolbarItem of toolbarSection.children) {
|
|
expect(toolbarItem.className).to.contain('toolbar-item')
|
|
for (const parts of toolbarItem.children) {
|
|
for (const part of parts.children) {
|
|
if (part.nodeName !== 'LI' && part.textContent) {
|
|
expect(part.className).to.contain('toolbar-text')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
it('renders a full-screen button with a tooltip when when in split-screen mode', function() {
|
|
renderPreviewToolbar()
|
|
const btn = screen.getByLabelText('Full screen')
|
|
fireEvent.click(btn)
|
|
expect(onSetFullLayout).to.have.been.calledOnce
|
|
fireEvent.mouseOver(btn)
|
|
screen.getByRole('tooltip', { name: 'Full screen' })
|
|
})
|
|
|
|
it('renders a split-screen button with a tooltip when when in full-screen mode', function() {
|
|
renderPreviewToolbar({}, {}, false, false)
|
|
const btn = screen.getByLabelText('Split screen')
|
|
fireEvent.click(btn)
|
|
expect(onSetSplitLayout).to.have.been.calledOnce
|
|
fireEvent.mouseOver(btn)
|
|
screen.getByRole('tooltip', { name: 'Split screen' })
|
|
})
|
|
})
|