overleaf/services/web/test/frontend/features/file-tree/components/file-tree-folder.test.js
Alf Eaton 1be43911b4 Merge pull request #3942 from overleaf/prettier-trailing-comma
Set Prettier's "trailingComma" setting to "es5"

GitOrigin-RevId: 9f14150511929a855b27467ad17be6ab262fe5d5
2021-04-28 02:10:01 +00:00

135 lines
3 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 FileTreeFolder from '../../../../../frontend/js/features/file-tree/components/file-tree-folder'
describe('<FileTreeFolder/>', function () {
beforeEach(function () {
global.localStorage.clear()
})
it('renders unselected', function () {
renderWithContext(
<FileTreeFolder
name="foo"
id="123abc"
folders={[]}
docs={[]}
files={[]}
/>
)
screen.getByRole('treeitem', { selected: false })
expect(screen.queryByRole('tree')).to.not.exist
})
it('renders selected', function () {
renderWithContext(
<FileTreeFolder
name="foo"
id="123abc"
folders={[]}
docs={[]}
files={[]}
/>,
{
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' })
screen.getByRole('treeitem', { selected: true })
expect(screen.queryByRole('tree')).to.not.exist
})
it('expands', function () {
renderWithContext(
<FileTreeFolder
name="foo"
id="123abc"
folders={[]}
docs={[]}
files={[]}
/>,
{
contextProps: {
rootFolder: [
{
docs: [{ _id: '123abc' }],
fileRefs: [],
folders: [],
},
],
},
}
)
screen.getByRole('treeitem')
const expandButton = screen.getByRole('button', { name: 'Expand' })
fireEvent.click(expandButton)
screen.getByRole('tree')
})
it('saves the expanded state for the next render', function () {
const { unmount } = renderWithContext(
<FileTreeFolder
name="foo"
id="123abc"
folders={[]}
docs={[]}
files={[]}
/>,
{
contextProps: {
rootFolder: [
{
docs: [{ _id: '123abc' }],
fileRefs: [],
folders: [],
},
],
},
}
)
expect(screen.queryByRole('tree')).to.not.exist
const expandButton = screen.getByRole('button', { name: 'Expand' })
fireEvent.click(expandButton)
screen.getByRole('tree')
unmount()
renderWithContext(
<FileTreeFolder
name="foo"
id="123abc"
folders={[]}
docs={[]}
files={[]}
/>
)
screen.getByRole('tree')
})
})