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

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()
  })

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

  it('should not select any option in history view', function () {
    // Selected is aria-label, visually we show a checkmark
    renderWithEditorContext(<LayoutDropdownButton />, {
      ui: { ...defaultUi, view: 'history' },
    })
    screen.getByRole('menuitem', {
      name: 'Editor & PDF',
    })
    screen.getByRole('menuitem', {
      name: 'PDF only (hide editor)',
    })
    screen.getByRole('menuitem', {
      name: 'Editor only (hide PDF)',
    })
    screen.getByRole('menuitem', {
      name: 'PDF in separate tab',
    })
  })

  it('should treat file and editor views the same way', function () {
    // Selected is aria-label, visually we show a checkmark
    renderWithEditorContext(<LayoutDropdownButton />, {
      ui: {
        pdfLayout: 'flat',
        view: 'file',
      },
    })
    screen.getByRole('menuitem', {
      name: 'Editor & PDF',
    })
    screen.getByRole('menuitem', {
      name: 'PDF only (hide editor)',
    })
    screen.getByRole('menuitem', {
      name: 'Selected 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 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)',
      })
    })
  })
})