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('', 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(, { 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(, { 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(, { 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)', }) }) }) })