first commit
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
import OutlineItem from '../../../../../frontend/js/features/outline/components/outline-item'
|
||||
|
||||
describe('<OutlineItem />', function () {
|
||||
it('renders basic item', function () {
|
||||
cy.mount(
|
||||
<OutlineItem
|
||||
// @ts-ignore
|
||||
outlineItem={{
|
||||
title: 'Test Title',
|
||||
line: 1,
|
||||
}}
|
||||
jumpToLine={cy.stub()}
|
||||
/>
|
||||
)
|
||||
|
||||
cy.findByRole('treeitem', { current: false })
|
||||
cy.findByRole('button', { name: 'Test Title' })
|
||||
cy.findByRole('button', { name: 'Collapse' }).should('not.exist')
|
||||
})
|
||||
|
||||
it('collapses and expands', function () {
|
||||
cy.mount(
|
||||
<OutlineItem
|
||||
// @ts-ignore
|
||||
outlineItem={{
|
||||
title: 'Parent',
|
||||
line: 1,
|
||||
children: [{ title: 'Child', line: 2 }],
|
||||
}}
|
||||
jumpToLine={cy.stub()}
|
||||
/>
|
||||
)
|
||||
|
||||
cy.findByRole('button', { name: 'Child' })
|
||||
cy.findByRole('button', { name: 'Collapse' }).click()
|
||||
cy.findByRole('button', { name: 'Expand' })
|
||||
cy.findByRole('button', { name: 'Child' }).should('not.exist')
|
||||
})
|
||||
|
||||
it('highlights', function () {
|
||||
cy.mount(
|
||||
<OutlineItem
|
||||
// @ts-ignore
|
||||
outlineItem={{
|
||||
title: 'Parent',
|
||||
line: 1,
|
||||
}}
|
||||
jumpToLine={cy.stub()}
|
||||
highlightedLine={1}
|
||||
matchesHighlightedLine
|
||||
/>
|
||||
)
|
||||
|
||||
cy.findByRole('treeitem', { current: true })
|
||||
})
|
||||
|
||||
it('highlights when has collapsed highlighted child', function () {
|
||||
cy.mount(
|
||||
<OutlineItem
|
||||
// @ts-ignore
|
||||
outlineItem={{
|
||||
title: 'Parent',
|
||||
line: 1,
|
||||
children: [{ title: 'Child', line: 2 }],
|
||||
}}
|
||||
jumpToLine={cy.stub()}
|
||||
highlightedLine={2}
|
||||
containsHighlightedLine
|
||||
/>
|
||||
)
|
||||
|
||||
cy.findByRole('treeitem', { name: 'Parent', current: false })
|
||||
cy.findByRole('treeitem', { name: 'Child', current: true })
|
||||
cy.findByRole('button', { name: 'Collapse' }).click()
|
||||
cy.findByRole('treeitem', { name: 'Parent', current: true })
|
||||
})
|
||||
|
||||
it('click and double-click jump to location', function () {
|
||||
cy.mount(
|
||||
<OutlineItem
|
||||
// @ts-ignore
|
||||
outlineItem={{
|
||||
title: 'Parent',
|
||||
line: 1,
|
||||
}}
|
||||
jumpToLine={cy.stub().as('jumpToLine')}
|
||||
/>
|
||||
)
|
||||
|
||||
cy.findByRole('button', { name: 'Parent' }).click()
|
||||
cy.get('@jumpToLine').should('have.been.calledOnceWith', 1, false)
|
||||
|
||||
cy.findByRole('button', { name: 'Parent' }).dblclick()
|
||||
cy.get('@jumpToLine').should('have.been.calledThrice')
|
||||
cy.get('@jumpToLine').should('have.been.calledWith', 1, true)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,45 @@
|
||||
import OutlineList from '../../../../../frontend/js/features/outline/components/outline-list'
|
||||
|
||||
describe('<OutlineList />', function () {
|
||||
it('renders items', function () {
|
||||
cy.mount(
|
||||
<OutlineList
|
||||
// @ts-ignore
|
||||
outline={[
|
||||
{ title: 'Section 1', line: 1, level: 10 },
|
||||
{ title: 'Section 2', line: 2, level: 10 },
|
||||
]}
|
||||
isRoot
|
||||
jumpToLine={cy.stub()}
|
||||
/>
|
||||
)
|
||||
|
||||
cy.findByRole('treeitem', { name: 'Section 1' })
|
||||
cy.findByRole('treeitem', { name: 'Section 2' })
|
||||
})
|
||||
|
||||
it('renders as root', function () {
|
||||
cy.mount(
|
||||
<OutlineList
|
||||
// @ts-ignore
|
||||
outline={[{ title: 'Section', line: 1, level: 10 }]}
|
||||
isRoot
|
||||
jumpToLine={cy.stub()}
|
||||
/>
|
||||
)
|
||||
|
||||
cy.findByRole('tree')
|
||||
})
|
||||
|
||||
it('renders as non-root', function () {
|
||||
cy.mount(
|
||||
<OutlineList
|
||||
// @ts-ignore
|
||||
outline={[{ title: 'Section', line: 1, level: 10 }]}
|
||||
jumpToLine={cy.stub()}
|
||||
/>
|
||||
)
|
||||
|
||||
cy.findByRole('group')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,119 @@
|
||||
import OutlinePane from '@/features/outline/components/outline-pane'
|
||||
import { EditorProviders, PROJECT_ID } from '../../../helpers/editor-providers'
|
||||
import { useState } from 'react'
|
||||
import customLocalStorage from '@/infrastructure/local-storage'
|
||||
|
||||
describe('<OutlinePane />', function () {
|
||||
it('renders expanded outline', function () {
|
||||
cy.mount(
|
||||
<EditorProviders>
|
||||
<OutlinePane
|
||||
isTexFile
|
||||
outline={[{ title: 'Section', line: 1, level: 10 }]}
|
||||
jumpToLine={cy.stub()}
|
||||
onToggle={cy.stub()}
|
||||
expanded
|
||||
toggleExpanded={cy.stub()}
|
||||
/>
|
||||
</EditorProviders>
|
||||
)
|
||||
|
||||
cy.findByRole('tree')
|
||||
})
|
||||
|
||||
it('renders disabled outline', function () {
|
||||
cy.mount(
|
||||
<EditorProviders>
|
||||
<OutlinePane
|
||||
isTexFile
|
||||
outline={[]}
|
||||
jumpToLine={cy.stub()}
|
||||
onToggle={cy.stub()}
|
||||
expanded
|
||||
toggleExpanded={cy.stub()}
|
||||
/>
|
||||
</EditorProviders>
|
||||
)
|
||||
|
||||
cy.findByRole('tree').should('not.exist')
|
||||
})
|
||||
|
||||
it('expand outline and use local storage', function () {
|
||||
customLocalStorage.setItem(`file_outline.expanded.${PROJECT_ID}`, false)
|
||||
|
||||
const onToggle = cy.stub()
|
||||
|
||||
const Container = () => {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
|
||||
return (
|
||||
<OutlinePane
|
||||
isTexFile
|
||||
outline={[{ title: 'Section', line: 1, level: 10 }]}
|
||||
jumpToLine={cy.stub()}
|
||||
onToggle={onToggle}
|
||||
expanded={expanded}
|
||||
toggleExpanded={() => {
|
||||
customLocalStorage.setItem(
|
||||
`file_outline.expanded.${PROJECT_ID}`,
|
||||
!expanded
|
||||
)
|
||||
setExpanded(!expanded)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
cy.mount(
|
||||
<EditorProviders>
|
||||
<Container />
|
||||
</EditorProviders>
|
||||
)
|
||||
|
||||
cy.findByRole('tree').should('not.exist')
|
||||
|
||||
cy.findByRole('button', {
|
||||
name: 'Show File outline',
|
||||
}).click()
|
||||
|
||||
cy.findByRole('tree').then(() => {
|
||||
expect(onToggle).to.be.calledTwice
|
||||
expect(
|
||||
customLocalStorage.getItem(`file_outline.expanded.${PROJECT_ID}`)
|
||||
).to.equal(true)
|
||||
})
|
||||
})
|
||||
|
||||
it('shows warning on partial result', function () {
|
||||
cy.mount(
|
||||
<EditorProviders>
|
||||
<OutlinePane
|
||||
isTexFile
|
||||
outline={[]}
|
||||
jumpToLine={cy.stub()}
|
||||
onToggle={cy.stub()}
|
||||
toggleExpanded={cy.stub()}
|
||||
isPartial
|
||||
/>
|
||||
</EditorProviders>
|
||||
)
|
||||
|
||||
cy.findByRole('status')
|
||||
})
|
||||
|
||||
it('shows no warning on non-partial result', function () {
|
||||
cy.mount(
|
||||
<EditorProviders>
|
||||
<OutlinePane
|
||||
isTexFile
|
||||
outline={[]}
|
||||
jumpToLine={cy.stub()}
|
||||
onToggle={cy.stub()}
|
||||
toggleExpanded={cy.stub()}
|
||||
/>
|
||||
</EditorProviders>
|
||||
)
|
||||
|
||||
cy.findByRole('status').should('not.exist')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,22 @@
|
||||
import OutlineRoot from '../../../../../frontend/js/features/outline/components/outline-root'
|
||||
|
||||
describe('<OutlineRoot />', function () {
|
||||
it('renders outline', function () {
|
||||
cy.mount(
|
||||
<OutlineRoot
|
||||
outline={[{ title: 'Section', line: 1, level: 10 }]}
|
||||
jumpToLine={cy.stub()}
|
||||
/>
|
||||
)
|
||||
|
||||
cy.findByRole('tree')
|
||||
cy.findByRole('link').should('not.exist')
|
||||
})
|
||||
|
||||
it('renders placeholder', function () {
|
||||
cy.mount(<OutlineRoot outline={[]} jumpToLine={cy.stub()} />)
|
||||
|
||||
cy.findByRole('tree').should('not.exist')
|
||||
cy.findByRole('link')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user