overleaf/services/web/test/frontend/features/file-tree/components/file-tree-root.test.js
Timothée Alby d121b81896 Merge pull request #3548 from overleaf/ta-file-tree-init-fix
[ReactFileTree] Fix Initial State When Selected File Doesn't Exist

GitOrigin-RevId: 92ee8573203e66abf26c9b3afab2fccd90ec8c2e
2021-01-09 03:04:15 +00:00

161 lines
4.1 KiB
JavaScript

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