upstream-tiptap/packages/extension-table/src/header/table-header.test.ts

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { describe, expect, it } from 'vite-plus/test'

import { TableCell } from '../cell/table-cell.js'
import { TableRow } from '../row/table-row.js'
import { Table } from '../table/table.js'
import { TableHeader } from './table-header.js'

describe('extension table header', () => {
  const editorElClass = 'tiptap'
  let editor: Editor | null = null

  const createEditorEl = () => {
    const editorEl = document.createElement('div')

    editorEl.classList.add(editorElClass)
    document.body.appendChild(editorEl)
    return editorEl
  }
  const getEditorEl = () => document.querySelector(`.${editorElClass}`)

  it('should start with a Table', () => {
    const content =
      '<table style="width:100%"><tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table>'

    editor = new Editor({
      element: createEditorEl(),
      extensions: [
        Document,
        Text,
        Paragraph,
        TableCell,
        TableHeader,
        TableRow,
        Table.configure({
          resizable: true,
        }),
      ],
      content,
    })

    expect(editor.getHTML()).toContain('Jackson')

    editor?.destroy()
    getEditorEl()?.remove()
  })

  it('should parse a single colWidth', () => {
    const content =
      '<table><tbody><tr><th colwidth="200">Name</th><th>Description</th></tr><tr><td>Cyndi Lauper</td><td>Singer</td><td>Songwriter</td><td>Actress</td></tr><tr><td>Marie Curie</td><td>Scientist</td><td>Chemist</td><td>Physicist</td></tr><tr><td>Indira Gandhi</td><td>Prime minister</td><td colspan="2">Politician</td></tr></tbody></table>'

    editor = new Editor({
      element: createEditorEl(),
      extensions: [
        Document,
        Text,
        Paragraph,
        TableCell,
        TableHeader,
        TableRow,
        Table.configure({
          resizable: true,
        }),
      ],
      content,
    })

    // @ts-expect-error content is not guaranteed to be this shape
    expect(editor.getJSON().content[0].content[0].content[0].attrs.colwidth[0]).toBe(200)

    editor?.destroy()
    getEditorEl()?.remove()
  })

  it('should parse multiple colWidths', () => {
    const content =
      '<table><tbody><tr><th colwidth="200">Name</th><th colspan="3" colwidth="150,100">Description</th></tr><tr><td>Cyndi Lauper</td><td>Singer</td><td>Songwriter</td><td>Actress</td></tr><tr><td>Marie Curie</td><td>Scientist</td><td>Chemist</td><td>Physicist</td></tr><tr><td>Indira Gandhi</td><td>Prime minister</td><td colspan="2">Politician</td></tr></tbody></table>'

    editor = new Editor({
      element: createEditorEl(),
      extensions: [
        Document,
        Text,
        Paragraph,
        TableCell,
        TableHeader,
        TableRow,
        Table.configure({
          resizable: true,
        }),
      ],
      content,
    })

    // @ts-expect-error content is not guaranteed to be this shape
    expect(editor.getJSON().content[0].content[0].content[1].attrs.colwidth).toEqual([150, 100])

    editor?.destroy()
    getEditorEl()?.remove()
  })

  it('should parse the colgroup col widths for a header row', () => {
    const content =
      '<table><colgroup><col width="64" /><col width="128" /></colgroup><tbody><tr><th>Name</th><th>Description</th></tr><tr><td>Cyndi Lauper</td><td>Singer</td></tr></tbody></table>'

    editor = new Editor({
      element: createEditorEl(),
      extensions: [
        Document,
        Text,
        Paragraph,
        TableCell,
        TableHeader,
        TableRow,
        Table.configure({
          resizable: true,
        }),
      ],
      content,
    })

    const headerRow = editor.getJSON().content?.[0].content?.[0]

    expect(headerRow?.content?.[0].attrs?.colwidth).toEqual([64])
    expect(headerRow?.content?.[1].attrs?.colwidth).toEqual([128])

    editor?.destroy()
    getEditorEl()?.remove()
  })
})