overleaf/services/web/test/frontend/features/file-tree/components/file-tree-root.test.js

import React from 'react'
import sinon from 'sinon'
import { screen, render, fireEvent, waitFor } from '@testing-library/react'
import fetchMock from 'fetch-mock'

import FileTreeRoot from '../../../../../frontend/js/features/file-tree/components/file-tree-root'

describe('<FileTreeRoot/>', function() {
  const onSelect = sinon.stub()
  const onInit = sinon.stub()

  beforeEach(function() {
    global.requestAnimationFrame = sinon.stub()
  })

  afterEach(function() {
    delete global.requestAnimationFrame
    fetchMock.restore()
    onSelect.reset()
    onInit.reset()
    global.localStorage.clear()
  })

  it('renders', function() {
    const rootFolder = [
      {
        _id: 'root-folder-id',
        docs: [{ _id: '456def', name: 'main.tex' }],
        folders: [],
        fileRefs: []
      }
    ]
    render(
      <FileTreeRoot
        rootFolder={rootFolder}
        projectId="123abc"
        hasWritePermissions={false}
        rootDocId="456def"
        onSelect={onSelect}
        onInit={onInit}
      />
    )

    screen.queryByRole('tree')
    screen.getByRole('treeitem')
    screen.getByRole('treeitem', { name: 'main.tex', selected: true })
  })

  it('renders with invalid selected doc in local storage', async function() {
    global.localStorage.setItem(
      'doc.open_id.123abc',
      JSON.stringify('not-a-valid-id')
    )
    const rootFolder = [
      {
        _id: 'root-folder-id',
        docs: [{ _id: '456def', name: 'main.tex' }],
        folders: [],
        fileRefs: []
      }
    ]
    render(
      <FileTreeRoot
        rootFolder={rootFolder}
        projectId="123abc"
        hasWritePermissions
        rootDocId="456def"
        onSelect={onSelect}
        onInit={onInit}
      />
    )

    // as a proxy to check that the invalid entity ha not been select we start
    // a delete and ensure the modal is displayed (the cancel button can be
    // selected) This is needed to make sure the test fail.
    const treeitemFile = screen.getByRole('treeitem', { name: 'main.tex' })
    fireEvent.click(treeitemFile, { ctrlKey: true })
    const deleteButton = screen.getByRole('menuitem', { name: 'Delete' })
    fireEvent.click(deleteButton)
    await waitFor(() => screen.getByRole('button', { name: 'Cancel' }))
  })

  it('fire onSelect', function() {
    const rootFolder = [
      {
        _id: 'root-folder-id',
        docs: [
          { _id: '456def', name: 'main.tex' },
          { _id: '789ghi', name: 'other.tex' }
        ],
        folders: [],
        fileRefs: []
      }
    ]
    render(
      <FileTreeRoot
        rootFolder={rootFolder}
        projectId="123abc"
        rootDocId="456def"
        hasWritePermissions={false}
        onSelect={onSelect}
        onInit={onInit}
      />
    )
    sinon.assert.calledOnce(onSelect)
    sinon.assert.calledWithMatch(onSelect, [
      sinon.match({
        entity: {
          _id: '456def',
          name: 'main.tex'
        }
      })
    ])
    onSelect.reset()

    screen.queryByRole('tree')
    const treeitem = screen.getByRole('treeitem', { name: 'other.tex' })
    fireEvent.click(treeitem)
    sinon.assert.calledOnce(onSelect)
    sinon.assert.calledWithMatch(onSelect, [
      sinon.match({
        entity: {
          _id: '789ghi',
          name: 'other.tex'
        }
      })
    ])
  })

  it('listen to editor.openDoc', function() {
    const rootFolder = [
      {
        _id: 'root-folder-id',
        docs: [
          { _id: '456def', name: 'main.tex' },
          { _id: '789ghi', name: 'other.tex' }
        ],
        folders: [],
        fileRefs: []
      }
    ]
    render(
      <FileTreeRoot
        rootFolder={rootFolder}
        projectId="123abc"
        rootDocId="456def"
        hasWritePermissions={false}
        onSelect={onSelect}
        onInit={onInit}
      />
    )

    screen.getByRole('treeitem', { name: 'main.tex', selected: true })

    window.dispatchEvent(
      new CustomEvent('editor.openDoc', { detail: '789ghi' })
    )
    screen.getByRole('treeitem', { name: 'main.tex', selected: false })
    screen.getByRole('treeitem', { name: 'other.tex', selected: true })
  })
})