overleaf/services/web/test/frontend/features/file-tree/components/file-tree-root.test.jsx
Alf Eaton b9a6e7009d Improve context menu behaviour in the file tree (#15142)
* Tidy up menu button
* Unselect all items when clicking in the file tree root
* Close the context menu when selecting a new item
* Avoid selecting multiple items with Ctrl+click on macOS

GitOrigin-RevId: b67a724909668ec13d7a6d09ffc31574cb42238f
2023-10-13 08:03:26 +00:00

409 lines
11 KiB
JavaScript

import { expect } from 'chai'
import sinon from 'sinon'
import { screen, fireEvent, waitFor } from '@testing-library/react'
import fetchMock from 'fetch-mock'
import MockedSocket from 'socket.io-mock'
import {
renderWithEditorContext,
cleanUpContext,
} from '../../../helpers/render-with-context'
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 () {
window.metaAttributesCache = new Map()
window.metaAttributesCache.set('ol-user', { id: 'user1' })
})
afterEach(function () {
fetchMock.restore()
onSelect.reset()
onInit.reset()
cleanUpContext()
global.localStorage.clear()
window.metaAttributesCache = new Map()
})
it('renders', function () {
const rootFolder = [
{
_id: 'root-folder-id',
name: 'rootFolder',
docs: [{ _id: '456def', name: 'main.tex' }],
folders: [],
fileRefs: [],
},
]
const { container } = renderWithEditorContext(
<FileTreeRoot
refProviders={{}}
reindexReferences={() => null}
setRefProviderEnabled={() => null}
setStartedFreeTrial={() => null}
onSelect={onSelect}
onInit={onInit}
isConnected
/>,
{
rootFolder,
projectId: '123abc',
rootDocId: '456def',
features: {},
permissionsLevel: 'owner',
}
)
screen.queryByRole('tree')
screen.getByRole('treeitem')
screen.getByRole('treeitem', { name: 'main.tex', selected: true })
expect(container.querySelector('.disconnected-overlay')).to.not.exist
})
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',
name: 'rootFolder',
docs: [{ _id: '456def', name: 'main.tex' }],
folders: [],
fileRefs: [],
},
]
renderWithEditorContext(
<FileTreeRoot
refProviders={{}}
reindexReferences={() => null}
setRefProviderEnabled={() => null}
setStartedFreeTrial={() => null}
onSelect={onSelect}
onInit={onInit}
isConnected
/>,
{
rootFolder,
projectId: '123abc',
rootDocId: '456def',
features: {},
permissionsLevel: 'owner',
}
)
// 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 toggleButton = screen.getByRole('button', { name: 'Menu' })
fireEvent.click(toggleButton)
const deleteButton = screen.getByRole('menuitem', { name: 'Delete' })
fireEvent.click(deleteButton)
await waitFor(() => screen.getByRole('button', { name: 'Cancel' }))
})
it('renders disconnected overlay', function () {
const rootFolder = [
{
_id: 'root-folder-id',
name: 'rootFolder',
docs: [{ _id: '456def', name: 'main.tex' }],
folders: [],
fileRefs: [],
},
]
const { container } = renderWithEditorContext(
<FileTreeRoot
onSelect={onSelect}
onInit={onInit}
isConnected={false}
refProviders={{}}
reindexReferences={() => null}
setRefProviderEnabled={() => null}
setStartedFreeTrial={() => null}
/>,
{
rootFolder,
projectId: '123abc',
rootDocId: '456def',
features: {},
permissionsLevel: 'owner',
}
)
expect(container.querySelector('.disconnected-overlay')).to.exist
})
it('fire onSelect', function () {
const rootFolder = [
{
_id: 'root-folder-id',
name: 'rootFolder',
docs: [
{ _id: '456def', name: 'main.tex' },
{ _id: '789ghi', name: 'other.tex' },
],
folders: [],
fileRefs: [],
},
]
renderWithEditorContext(
<FileTreeRoot
refProviders={{}}
reindexReferences={() => null}
setRefProviderEnabled={() => null}
setStartedFreeTrial={() => null}
onSelect={onSelect}
onInit={onInit}
isConnected
/>,
{
rootFolder,
projectId: '123abc',
rootDocId: '456def',
features: {},
permissionsLevel: 'readOnly',
}
)
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',
name: 'rootFolder',
docs: [
{ _id: '456def', name: 'main.tex' },
{ _id: '789ghi', name: 'other.tex' },
],
folders: [],
fileRefs: [],
},
]
renderWithEditorContext(
<FileTreeRoot
refProviders={{}}
reindexReferences={() => null}
setRefProviderEnabled={() => null}
setStartedFreeTrial={() => null}
onSelect={onSelect}
onInit={onInit}
isConnected
/>,
{
rootFolder,
projectId: '123abc',
rootDocId: '456def',
features: {},
permissionsLevel: 'owner',
}
)
screen.getByRole('treeitem', { name: 'main.tex', selected: true })
// entities not found should be ignored
window.dispatchEvent(
new CustomEvent('editor.openDoc', { detail: 'not-an-id' })
)
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 })
})
it('only shows a menu button when a single item is selected', function () {
const rootFolder = [
{
_id: 'root-folder-id',
name: 'rootFolder',
docs: [
{ _id: '456def', name: 'main.tex' },
{ _id: '789ghi', name: 'other.tex' },
],
folders: [],
fileRefs: [],
},
]
renderWithEditorContext(
<FileTreeRoot
refProviders={{}}
reindexReferences={() => null}
setRefProviderEnabled={() => null}
setStartedFreeTrial={() => null}
onSelect={onSelect}
onInit={onInit}
isConnected
/>,
{
rootFolder,
projectId: '123abc',
rootDocId: '456def',
features: {},
permissionsLevel: 'owner',
}
)
const main = screen.getByRole('treeitem', {
name: 'main.tex',
selected: true,
})
const other = screen.getByRole('treeitem', {
name: 'other.tex',
selected: false,
})
// single item selected: menu button is visible
expect(screen.queryAllByRole('button', { name: 'Menu' })).to.have.length(1)
// select the other item
fireEvent.click(other)
screen.getByRole('treeitem', { name: 'main.tex', selected: false })
screen.getByRole('treeitem', { name: 'other.tex', selected: true })
// single item selected: menu button is visible
expect(screen.queryAllByRole('button', { name: 'Menu' })).to.have.length(1)
// multi-select the main item
fireEvent.click(main, { ctrlKey: true })
screen.getByRole('treeitem', { name: 'main.tex', selected: true })
screen.getByRole('treeitem', { name: 'other.tex', selected: true })
// multiple items selected: no menu button is visible
expect(screen.queryAllByRole('button', { name: 'Menu' })).to.have.length(0)
})
describe('when deselecting files', function () {
beforeEach(function () {
const rootFolder = [
{
_id: 'root-folder-id',
name: 'rootFolder',
docs: [{ _id: '123abc', name: 'main.tex' }],
folders: [
{
_id: '789ghi',
name: 'thefolder',
docs: [{ _id: '456def', name: 'sub.tex' }],
fileRefs: [],
folders: [],
},
],
fileRefs: [],
},
]
renderWithEditorContext(
<FileTreeRoot
refProviders={{}}
reindexReferences={() => null}
setRefProviderEnabled={() => null}
setStartedFreeTrial={() => null}
onSelect={onSelect}
onInit={onInit}
isConnected
/>,
{
rootFolder,
projectId: '123abc',
rootDocId: '456def',
features: {},
permissionsLevel: 'owner',
socket: new MockedSocket(),
}
)
// select the sub file
const subDoc = screen.getByRole('treeitem', { name: 'sub.tex' })
fireEvent.click(subDoc)
expect(subDoc.getAttribute('aria-selected')).to.equal('true')
// click on empty area
fireEvent.click(screen.getByTestId('file-tree-inner'))
})
afterEach(function () {
fetchMock.reset()
})
it('removes the selected indicator', function () {
expect(screen.queryByRole('treeitem', { selected: true })).to.be.null
})
it('disables the "rename" and "delete" buttons', function () {
expect(screen.queryByRole('button', { name: 'Rename' })).to.be.null
expect(screen.queryByRole('button', { name: 'Delete' })).to.be.null
})
it('creates new file in the root folder', async function () {
fetchMock.post('express:/project/:projectId/doc', () => 200)
fireEvent.click(screen.getByRole('button', { name: /new file/i }))
fireEvent.click(screen.getByRole('button', { name: /create/i }))
const socketData = {
_id: '12345',
name: 'abcdef.tex',
docs: [],
fileRefs: [],
folders: [],
}
window._ide.socket.socketClient.emit(
'reciveNewDoc',
'root-folder-id',
socketData
)
await fetchMock.flush(true)
const newItem = screen.getByRole('treeitem', { name: socketData.name })
const rootEl = screen.getByTestId('file-tree-list-root')
expect(newItem.parentNode).to.equal(rootEl)
})
it('starts a new selection', function () {
const subDoc = screen.getByRole('treeitem', { name: 'sub.tex' })
expect(subDoc.getAttribute('aria-selected')).to.equal('false')
const mainDoc = screen.getByRole('treeitem', { name: 'main.tex' })
fireEvent.click(mainDoc, { ctrlKey: true })
expect(mainDoc.getAttribute('aria-selected')).to.equal('true')
expect(subDoc.getAttribute('aria-selected')).to.equal('false')
})
})
})