134 lines
3.1 KiB
TypeScript
134 lines
3.1 KiB
TypeScript
import FileTreeFolder from '../../../../../frontend/js/features/file-tree/components/file-tree-folder'
|
|
import { EditorProviders } from '../../../helpers/editor-providers'
|
|
import { FileTreeProvider } from '../helpers/file-tree-provider'
|
|
import { getContainerEl } from 'cypress/react'
|
|
import ReactDom from 'react-dom'
|
|
|
|
describe('<FileTreeFolder/>', function () {
|
|
it('renders unselected', function () {
|
|
cy.mount(
|
|
<EditorProviders>
|
|
<FileTreeProvider>
|
|
<FileTreeFolder
|
|
name="foo"
|
|
id="123abc"
|
|
folders={[]}
|
|
docs={[]}
|
|
files={[]}
|
|
/>
|
|
</FileTreeProvider>
|
|
</EditorProviders>
|
|
)
|
|
cy.findByRole('treeitem', { selected: false })
|
|
cy.findByRole('tree').should('not.exist')
|
|
})
|
|
|
|
it('expands when selected', function () {
|
|
const rootFolder = [
|
|
{
|
|
_id: 'root-folder-id',
|
|
name: 'rootFolder',
|
|
docs: [{ _id: '123abc' }],
|
|
fileRefs: [],
|
|
folders: [],
|
|
},
|
|
]
|
|
|
|
cy.mount(
|
|
<EditorProviders rootFolder={rootFolder as any}>
|
|
<FileTreeProvider>
|
|
<FileTreeFolder
|
|
name="foo"
|
|
id="123abc"
|
|
folders={[]}
|
|
docs={[]}
|
|
files={[]}
|
|
/>
|
|
</FileTreeProvider>
|
|
</EditorProviders>
|
|
)
|
|
|
|
cy.findByRole('treeitem', { selected: false }).click()
|
|
cy.findByRole('treeitem', { selected: true })
|
|
cy.findByRole('tree').should('exist')
|
|
})
|
|
|
|
it('expands', function () {
|
|
const rootFolder = [
|
|
{
|
|
_id: 'root-folder-id',
|
|
name: 'rootFolder',
|
|
docs: [{ _id: '123abc' }],
|
|
fileRefs: [],
|
|
folders: [],
|
|
},
|
|
]
|
|
|
|
cy.mount(
|
|
<EditorProviders rootFolder={rootFolder as any}>
|
|
<FileTreeProvider>
|
|
<FileTreeFolder
|
|
name="foo"
|
|
id="123abc"
|
|
folders={[]}
|
|
docs={[]}
|
|
files={[]}
|
|
/>
|
|
</FileTreeProvider>
|
|
</EditorProviders>
|
|
)
|
|
|
|
cy.findByRole('treeitem')
|
|
cy.findByLabelText('Expand').click()
|
|
cy.findByRole('tree')
|
|
})
|
|
|
|
it('saves the expanded state for the next render', function () {
|
|
const rootFolder = [
|
|
{
|
|
_id: 'root-folder-id',
|
|
name: 'rootFolder',
|
|
docs: [{ _id: '123abc' }],
|
|
fileRefs: [],
|
|
folders: [],
|
|
},
|
|
]
|
|
|
|
cy.mount(
|
|
<EditorProviders rootFolder={rootFolder as any}>
|
|
<FileTreeProvider>
|
|
<FileTreeFolder
|
|
name="foo"
|
|
id="123abc"
|
|
folders={[]}
|
|
docs={[]}
|
|
files={[]}
|
|
/>
|
|
</FileTreeProvider>
|
|
</EditorProviders>
|
|
)
|
|
|
|
cy.findByRole('tree').should('not.exist')
|
|
cy.findByLabelText('Expand').click()
|
|
cy.findByRole('tree')
|
|
|
|
cy.then(() => ReactDom.unmountComponentAtNode(getContainerEl()))
|
|
|
|
cy.mount(
|
|
<EditorProviders>
|
|
<FileTreeProvider>
|
|
<FileTreeFolder
|
|
name="foo"
|
|
id="123abc"
|
|
folders={[]}
|
|
docs={[]}
|
|
files={[]}
|
|
/>
|
|
</FileTreeProvider>
|
|
</EditorProviders>
|
|
)
|
|
|
|
cy.findByRole('tree')
|
|
})
|
|
})
|