overleaf/services/web/test/frontend/features/file-tree/components/file-tree-doc.test.js
Alf Eaton ba4300d9e1 Merge pull request #3518 from overleaf/ae-react-create-file-modal
Migrate "Add Files" modal to React

GitOrigin-RevId: fc5235108ee65294e3176da9c327791c34aa5b3c
2021-03-19 03:04:46 +00:00

91 lines
2.5 KiB
JavaScript

import { expect } from 'chai'
import React from 'react'
import { screen, fireEvent } from '@testing-library/react'
import renderWithContext from '../helpers/render-with-context'
import FileTreeDoc from '../../../../../frontend/js/features/file-tree/components/file-tree-doc'
describe('<FileTreeDoc/>', function() {
it('renders unselected', function() {
const { container } = renderWithContext(
<FileTreeDoc name="foo.tex" id="123abc" isLinkedFile={false} />
)
screen.getByRole('treeitem', { selected: false })
expect(container.querySelector('i.linked-file-highlight')).to.not.exist
})
it('renders selected', function() {
renderWithContext(
<FileTreeDoc name="foo.tex" id="123abc" isLinkedFile={false} />,
{
contextProps: {
rootFolder: [
{
docs: [{ _id: '123abc' }],
fileRefs: [],
folders: []
}
]
}
}
)
const treeitem = screen.getByRole('treeitem', { selected: false })
fireEvent.click(treeitem)
screen.getByRole('treeitem', { selected: true })
screen.getByRole('menuitem', { name: 'Rename' })
screen.getByRole('menuitem', { name: 'Delete' })
screen.getByRole('menuitem', { name: 'New File' })
screen.getByRole('menuitem', { name: 'New Folder' })
screen.getByRole('menuitem', { name: 'Upload' })
})
it('renders as linked file', function() {
const { container } = renderWithContext(
<FileTreeDoc name="foo.tex" id="123abc" isLinkedFile />
)
screen.getByRole('treeitem')
expect(container.querySelector('i.linked-file-highlight')).to.exist
})
it('selects', function() {
renderWithContext(<FileTreeDoc name="foo.tex" id="123abc" expanded />, {
contextProps: {
rootFolder: [
{
docs: [{ _id: '123abc' }],
fileRefs: [],
folders: []
}
]
}
})
const treeitem = screen.getByRole('treeitem', { selected: false })
fireEvent.click(treeitem)
screen.getByRole('treeitem', { selected: true })
})
it('multi-selects', function() {
renderWithContext(<FileTreeDoc name="foo.tex" id="123abc" expanded />, {
contextProps: {
rootFolder: [
{
docs: [{ _id: '123abc' }],
fileRefs: [],
folders: []
}
]
}
})
const treeitem = screen.getByRole('treeitem')
fireEvent.click(treeitem, { ctrlKey: true })
screen.getByRole('treeitem', { selected: true })
})
})