Merge pull request #461 from Guochaoo/fix/markdown-preview-toc-and-code-header
fix(markdown): preview TOC dismiss-on-outside-click, popover z-index, code-block banner stickiness
This commit is contained in:
@@ -149,4 +149,44 @@ describe('MdToc', () => {
|
||||
expect(container.querySelector('[data-dsh-md-toc-panel]')).toBeNull()
|
||||
await unmount(root)
|
||||
})
|
||||
|
||||
it('closes the popover when a pointerdown lands outside the button and panel', async () => {
|
||||
const { container, root } = await mountToc([
|
||||
{ tag: 'h1', text: 'Title' },
|
||||
{ tag: 'h2', text: 'A' },
|
||||
{ tag: 'h2', text: 'B' },
|
||||
])
|
||||
const button = container.querySelector<HTMLButtonElement>('[data-dsh-md-toc]')!
|
||||
await act(async () => { button.click() })
|
||||
expect(container.querySelector('[data-dsh-md-toc-panel]')).not.toBeNull()
|
||||
// A press on a heading that sits in the scroll container (a sibling of the
|
||||
// TOC bar) is "blank space" to the outline: it must dismiss the popover.
|
||||
const heading = container.querySelector('h2')!
|
||||
await act(async () => {
|
||||
heading.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
|
||||
})
|
||||
expect(container.querySelector('[data-dsh-md-toc-panel]'), 'outside press must close the panel').toBeNull()
|
||||
await unmount(root)
|
||||
})
|
||||
|
||||
it('keeps the toggle working: a press inside the bar does not dismiss, a click re-closes', async () => {
|
||||
const { container, root } = await mountToc([
|
||||
{ tag: 'h1', text: 'Title' },
|
||||
{ tag: 'h2', text: 'A' },
|
||||
{ tag: 'h2', text: 'B' },
|
||||
])
|
||||
const button = container.querySelector<HTMLButtonElement>('[data-dsh-md-toc]')!
|
||||
await act(async () => { button.click() })
|
||||
expect(container.querySelector('[data-dsh-md-toc-panel]')).not.toBeNull()
|
||||
// A pointerdown on the toggle itself must not be swallowed by the dismiss
|
||||
// handler (the button re-enables pointer events inside the pointer-events:
|
||||
// none bar), so the subsequent click still toggles it closed.
|
||||
await act(async () => {
|
||||
button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
|
||||
})
|
||||
expect(container.querySelector('[data-dsh-md-toc-panel]'), 'press on the toggle must not dismiss').not.toBeNull()
|
||||
await act(async () => { button.click() })
|
||||
expect(container.querySelector('[data-dsh-md-toc-panel]'), 're-clicking the toggle must close').toBeNull()
|
||||
await unmount(root)
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user