overleaf/services/web/test/frontend/features/outline/components/outline-pane.spec.tsx
Tim Down e60885aa88 Merge pull request #19347 from overleaf/td-bs5-cypress-css
Move CSS loading in Cypress to individual test spec files

GitOrigin-RevId: 92bb5167cfa81b0bd54acc724efb23b397421ccb
2024-07-25 08:05:16 +00:00

120 lines
2.9 KiB
TypeScript

import '../../../helpers/bootstrap-3'
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')
})
})