mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-13 07:40:59 +00:00
Maurice
8fd46c4c18
Small requests from the discussions, each built end to end: planner and map (cycling mode, date first headings, clear a day, stay times per day, off-route stops, map lock, compact unplanned markers, pending stays, cable car, transit quick picks), places (location filter, category from OSM, open in maps, geo: link, image from an attachment, enrichment on file import, places near a pin, place name language, Amap first in China), lists and costs (packed counter, inherited sharing, Markdown to-dos, payment notes, bookings CSV, my plan PDF), sharing (unplanned places, travel only, without photos), journey (photo zoom, drafts, photo order, trip suggestion, day jump), atlas (region counter, region bucket list, places per country), vacay half company holidays, studio copy and paste plus the book's own layouts, and RESTORE_FROM_BACKUP for a first start restore.
50 lines
2.2 KiB
TypeScript
50 lines
2.2 KiB
TypeScript
// FE-SHARED-MDEDIT-001 to FE-SHARED-MDEDIT-004 (#2558)
|
|
import { useState } from 'react'
|
|
import { render, screen, fireEvent } from '../../../tests/helpers/render'
|
|
import MarkdownEditable from './MarkdownEditable'
|
|
|
|
function Harness({ initial, canEdit = true }: { initial: string; canEdit?: boolean }) {
|
|
const [value, setValue] = useState(initial)
|
|
return (
|
|
<MarkdownEditable value={value} canEdit={canEdit} editLabel="Edit"
|
|
renderEditor={editor => <textarea aria-label="editor" value={value} onChange={e => setValue(e.target.value)} {...editor} />} />
|
|
)
|
|
}
|
|
|
|
describe('MarkdownEditable', () => {
|
|
it('FE-SHARED-MDEDIT-001: renders a saved value as Markdown with a working link', () => {
|
|
render(<Harness initial={'**Ferry** at [the port](https://example.com)'} />)
|
|
expect(screen.getByText('Ferry').tagName).toBe('STRONG')
|
|
const link = screen.getByRole('link', { name: 'the port' })
|
|
expect(link).toHaveAttribute('href', 'https://example.com')
|
|
// Following the link does not open the editor.
|
|
fireEvent.click(link)
|
|
expect(screen.queryByLabelText('editor')).not.toBeInTheDocument()
|
|
})
|
|
|
|
it('FE-SHARED-MDEDIT-002: a click on the text opens the editor, leaving it shows the text again', () => {
|
|
render(<Harness initial="Bring cash" />)
|
|
fireEvent.click(screen.getByText('Bring cash'))
|
|
const editor = screen.getByLabelText('editor')
|
|
expect(editor).toHaveValue('Bring cash')
|
|
fireEvent.blur(editor)
|
|
expect(screen.queryByLabelText('editor')).not.toBeInTheDocument()
|
|
fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' })
|
|
expect(screen.getByLabelText('editor')).toBeInTheDocument()
|
|
})
|
|
|
|
it('FE-SHARED-MDEDIT-003: an empty field is the editor, and stays one while it is typed into', () => {
|
|
render(<Harness initial="" />)
|
|
const editor = screen.getByLabelText('editor')
|
|
fireEvent.focus(editor)
|
|
fireEvent.change(editor, { target: { value: 'N' } })
|
|
expect(screen.getByLabelText('editor')).toHaveValue('N')
|
|
})
|
|
|
|
it('FE-SHARED-MDEDIT-004: without edit rights it is only text', () => {
|
|
render(<Harness initial="Read only" canEdit={false} />)
|
|
expect(screen.getByText('Read only')).toBeInTheDocument()
|
|
expect(screen.queryByRole('button')).not.toBeInTheDocument()
|
|
})
|
|
})
|