overleaf/services/web/test/frontend/features/editor-navigation-toolbar/components/layout-dropdown-button.test.js

110 lines
3.2 KiB
JavaScript
Raw Normal View History

import sinon from 'sinon'
import fetchMock from 'fetch-mock'
import { expect } from 'chai'
import { fireEvent, screen } from '@testing-library/react'
import LayoutDropdownButton from '../../../../../frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button'
import { renderWithEditorContext } from '../../../helpers/render-with-context'
import * as eventTracking from '../../../../../frontend/js/infrastructure/event-tracking'
const eventTrackingSpy = sinon.spy(eventTracking)
describe('<LayoutDropdownButton />', function () {
let openStub
const defaultUi = {
pdfLayout: 'flat',
view: 'pdf',
}
beforeEach(function () {
openStub = sinon.stub(window, 'open')
window.metaAttributesCache = new Map()
fetchMock.post('express:/project/:projectId/compile/stop', () => 204)
})
afterEach(function () {
openStub.restore()
window.metaAttributesCache = new Map()
fetchMock.restore()
})
it('should mark current layout option as selected', function () {
// Selected is aria-label, visually we show a checkmark
renderWithEditorContext(<LayoutDropdownButton />, { ui: defaultUi })
screen.getByRole('menuitem', {
name: 'Editor & PDF',
})
screen.getByRole('menuitem', {
name: 'Selected PDF only (hide editor)',
})
screen.getByRole('menuitem', {
name: 'Editor only (hide PDF)',
})
screen.getByRole('menuitem', {
name: 'PDF in separate tab',
})
})
describe('on detach', function () {
beforeEach(function () {
renderWithEditorContext(<LayoutDropdownButton />, {
ui: { ...defaultUi, view: 'editor' },
})
const menuItem = screen.getByRole('menuitem', {
name: 'PDF in separate tab',
})
fireEvent.click(menuItem)
})
it('should show processing', function () {
screen.getByText('Layout processing')
})
it('should stop compile when detaching', function () {
expect(fetchMock.called('express:/project/:projectId/compile/stop')).to.be
.true
})
it('should record event', function () {
sinon.assert.calledWith(eventTrackingSpy.sendMB, 'project-layout-detach')
})
})
describe('on layout change / reattach', function () {
beforeEach(function () {
window.metaAttributesCache.set('ol-detachRole', 'detacher')
renderWithEditorContext(<LayoutDropdownButton />, {
ui: { ...defaultUi, view: 'editor' },
})
const menuItem = screen.getByRole('menuitem', {
name: 'Editor only (hide PDF)',
})
fireEvent.click(menuItem)
})
it('should not show processing', function () {
const processingText = screen.queryByText('Layout processing')
expect(processingText).to.not.exist
})
it('should record events', function () {
sinon.assert.calledWith(
eventTrackingSpy.sendMB,
'project-layout-reattach'
)
sinon.assert.calledWith(
eventTrackingSpy.sendMB,
'project-layout-change',
{ layout: 'flat', view: 'editor' }
)
})
it('should select new menu item', function () {
screen.getByRole('menuitem', {
name: 'Selected Editor only (hide PDF)',
})
})
})
})