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

102 lines
3.1 KiB
JavaScript
Raw Normal View History

import { expect } from 'chai'
import sinon from 'sinon'
import { screen, fireEvent } from '@testing-library/react'
import renderWithContext from '../../helpers/render-with-context'
import FileTreeitemInner from '../../../../../../frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner'
import FileTreeContextMenu from '../../../../../../frontend/js/features/file-tree/components/file-tree-context-menu'
describe('<FileTreeitemInner />', function () {
const setContextMenuCoords = sinon.stub()
beforeEach(function () {
global.requestAnimationFrame = sinon.stub()
})
afterEach(function () {
setContextMenuCoords.reset()
delete global.requestAnimationFrame
})
describe('menu', function () {
it('does not display if file is not selected', function () {
renderWithContext(
<FileTreeitemInner id="123abc" name="bar.tex" isSelected={false} />,
{}
)
expect(screen.queryByRole('menu', { visible: false })).to.not.exist
})
})
describe('context menu', function () {
it('does not display without write permissions', function () {
renderWithContext(
<FileTreeitemInner id="123abc" name="bar.tex" isSelected />,
{ contextProps: { hasWritePermissions: false } }
)
expect(screen.queryByRole('menu', { visible: false })).to.not.exist
})
it('open / close', function () {
const { container } = renderWithContext(
<>
<FileTreeitemInner id="123abc" name="bar.tex" isSelected />
<FileTreeContextMenu />
</>
)
expect(screen.queryByRole('menu')).to.be.null
// open the context menu
const entityElement = container.querySelector('div.entity')
fireEvent.contextMenu(entityElement)
screen.getByRole('menu', { visible: true })
// close the context menu
fireEvent.click(entityElement)
expect(screen.queryByRole('menu')).to.be.null
})
})
describe('name', function () {
it('renders name', function () {
renderWithContext(
<FileTreeitemInner id="123abc" name="bar.tex" isSelected />
)
screen.getByRole('button', { name: 'bar.tex' })
expect(screen.queryByRole('textbox')).to.not.exist
})
it('starts rename on menu item click', function () {
renderWithContext(
<>
<FileTreeitemInner id="123abc" name="bar.tex" isSelected />
<FileTreeContextMenu />
</>,
{
contextProps: {
rootDocId: '123abc',
rootFolder: [
{
_id: 'root-folder-id',
docs: [{ _id: '123abc', name: 'bar.tex' }],
folders: [],
fileRefs: [],
},
],
},
}
)
const toggleButton = screen.getByRole('button', { name: 'Menu' })
fireEvent.click(toggleButton)
const renameButton = screen.getByRole('menuitem', { name: 'Rename' })
fireEvent.click(renameButton)
expect(screen.queryByRole('button', { name: 'bar.tex' })).to.not.exist
screen.getByRole('textbox')
})
})
})