|
| 1 | +/** |
| 2 | + * @vitest-environment jsdom |
| 3 | + * |
| 4 | + * A table must look the same whichever file it came from: a markdown file rendered by the rich |
| 5 | + * markdown editor (`.rich-markdown-prose table`) and a CSV/XLSX preview rendered by `DataTable` |
| 6 | + * (`.document-table`) sit in the same file viewer, in the same session, one click apart. They used |
| 7 | + * to drift — the previews carried their own chrome (rounded outer frame, `--surface-2` header, |
| 8 | + * 13px body / 12px header, `--text-secondary` cells) while markdown tables used full cell borders |
| 9 | + * on `--divider`, a `--surface-4` header, and 14px text. |
| 10 | + * |
| 11 | + * These load the real, shipped CSS (not a copy). Two complementary assertions, because jsdom's CSS |
| 12 | + * engine resolves only part of what matters here: it applies the cascade for longhand declarations |
| 13 | + * (so `getComputedStyle` parity is a real check on padding/typography/fill), but it does not expand |
| 14 | + * the `border` shorthand at all. Borders are therefore checked structurally — one rule, whose |
| 15 | + * selector list covers both roots — which is also the property that actually prevents drift. |
| 16 | + */ |
| 17 | +import { readFileSync } from 'node:fs' |
| 18 | +import path from 'node:path' |
| 19 | +import { afterEach, beforeAll, describe, expect, it } from 'vitest' |
| 20 | + |
| 21 | +const SHARED_CSS_PATH = path.join(__dirname, 'document-table.css') |
| 22 | +const EDITOR_CSS_PATH = path.join(__dirname, 'rich-markdown-editor', 'rich-markdown-editor.css') |
| 23 | + |
| 24 | +/** Chrome both surfaces must agree on, as longhands jsdom resolves. */ |
| 25 | +const SHARED_CELL_PROPS = [ |
| 26 | + 'padding-top', |
| 27 | + 'padding-right', |
| 28 | + 'padding-bottom', |
| 29 | + 'padding-left', |
| 30 | + 'font-size', |
| 31 | + 'line-height', |
| 32 | + 'text-align', |
| 33 | + 'vertical-align', |
| 34 | +] as const |
| 35 | + |
| 36 | +const sheets = new Map<string, CSSStyleSheet>() |
| 37 | + |
| 38 | +beforeAll(() => { |
| 39 | + for (const file of [SHARED_CSS_PATH, EDITOR_CSS_PATH]) { |
| 40 | + const style = document.createElement('style') |
| 41 | + style.textContent = readFileSync(file, 'utf-8') |
| 42 | + document.head.appendChild(style) |
| 43 | + if (!style.sheet) throw new Error(`stylesheet did not parse: ${file}`) |
| 44 | + sheets.set(file, style.sheet) |
| 45 | + } |
| 46 | +}) |
| 47 | + |
| 48 | +let containers: HTMLDivElement[] = [] |
| 49 | + |
| 50 | +afterEach(() => { |
| 51 | + for (const c of containers) c.remove() |
| 52 | + containers = [] |
| 53 | +}) |
| 54 | + |
| 55 | +/** Mounts a one-cell table inside `rootClass` and returns the root plus its `th` and `td`. */ |
| 56 | +function mountTable(rootClass: string): { root: HTMLElement; th: HTMLElement; td: HTMLElement } { |
| 57 | + const container = document.createElement('div') |
| 58 | + container.className = rootClass |
| 59 | + container.innerHTML = |
| 60 | + '<table><thead><tr><th>h</th></tr></thead><tbody><tr><td>c</td></tr></tbody></table>' |
| 61 | + document.body.appendChild(container) |
| 62 | + containers.push(container) |
| 63 | + const th = container.querySelector('th') |
| 64 | + const td = container.querySelector('td') |
| 65 | + if (!th || !td) throw new Error('table cells not found') |
| 66 | + return { root: container, th, td } |
| 67 | +} |
| 68 | + |
| 69 | +function declarations(el: Element, props: readonly string[]): Record<string, string> { |
| 70 | + const computed = getComputedStyle(el) |
| 71 | + return Object.fromEntries(props.map((p) => [p, computed.getPropertyValue(p)])) |
| 72 | +} |
| 73 | + |
| 74 | +/** Style rules of one loaded stylesheet, in source order. */ |
| 75 | +function styleRules(cssPath: string): CSSStyleRule[] { |
| 76 | + const sheet = sheets.get(cssPath) |
| 77 | + if (!sheet) throw new Error(`stylesheet not loaded: ${cssPath}`) |
| 78 | + return Array.from(sheet.cssRules).filter((r): r is CSSStyleRule => r instanceof CSSStyleRule) |
| 79 | +} |
| 80 | + |
| 81 | +/** Selector list of the single shared rule declaring `property: value`, as trimmed selectors. */ |
| 82 | +function selectorsDeclaring(cssPath: string, property: string, value: string): string[] { |
| 83 | + const matching = styleRules(cssPath).filter((r) => |
| 84 | + r.style.getPropertyValue(property).includes(value) |
| 85 | + ) |
| 86 | + expect(matching).toHaveLength(1) |
| 87 | + return matching[0].selectorText.split(',').map((s) => s.trim()) |
| 88 | +} |
| 89 | + |
| 90 | +describe('document-table chrome is shared with markdown tables', () => { |
| 91 | + it('cells resolve to identical padding and typography', () => { |
| 92 | + const prose = mountTable('rich-markdown-prose') |
| 93 | + const preview = mountTable('document-table') |
| 94 | + |
| 95 | + expect(declarations(preview.td, SHARED_CELL_PROPS)).toEqual( |
| 96 | + declarations(prose.td, SHARED_CELL_PROPS) |
| 97 | + ) |
| 98 | + expect(declarations(preview.th, SHARED_CELL_PROPS)).toEqual( |
| 99 | + declarations(prose.th, SHARED_CELL_PROPS) |
| 100 | + ) |
| 101 | + }) |
| 102 | + |
| 103 | + /** |
| 104 | + * Cells hold arbitrary file data, so an unbreakable token (a URL, a hash) must break rather than |
| 105 | + * overflow — the previews lost `whitespace-nowrap` and would otherwise have no wrapping rule at |
| 106 | + * all. `overflow-wrap` is inherited from each surface's root (jsdom does not propagate inherited |
| 107 | + * properties to descendants, so the roots are what can be asserted). |
| 108 | + */ |
| 109 | + it('both roots declare the same wrapping for unbreakable cell values', () => { |
| 110 | + const prose = mountTable('rich-markdown-prose') |
| 111 | + const preview = mountTable('document-table') |
| 112 | + |
| 113 | + const wrap = getComputedStyle(prose.root).getPropertyValue('overflow-wrap') |
| 114 | + expect(wrap).toBe('anywhere') |
| 115 | + expect(getComputedStyle(preview.root).getPropertyValue('overflow-wrap')).toBe(wrap) |
| 116 | + }) |
| 117 | + |
| 118 | + it('the resolved values are the markdown editor values, not jsdom defaults', () => { |
| 119 | + const { th, td } = mountTable('document-table') |
| 120 | + |
| 121 | + expect(getComputedStyle(td).getPropertyValue('padding-left')).toBe('0.75rem') |
| 122 | + expect(getComputedStyle(td).getPropertyValue('font-size')).toBe('14px') |
| 123 | + expect(getComputedStyle(th).getPropertyValue('font-weight')).toBe('600') |
| 124 | + }) |
| 125 | + |
| 126 | + it('one rule draws the cell border for both roots', () => { |
| 127 | + expect(selectorsDeclaring(SHARED_CSS_PATH, 'border', 'var(--divider)')).toEqual( |
| 128 | + expect.arrayContaining([ |
| 129 | + '.rich-markdown-prose th', |
| 130 | + '.rich-markdown-prose td', |
| 131 | + '.document-table th', |
| 132 | + '.document-table td', |
| 133 | + ]) |
| 134 | + ) |
| 135 | + }) |
| 136 | + |
| 137 | + it('one rule fills the header for both roots', () => { |
| 138 | + expect(selectorsDeclaring(SHARED_CSS_PATH, 'background', 'var(--surface-4)')).toEqual( |
| 139 | + expect.arrayContaining(['.rich-markdown-prose th', '.document-table th']) |
| 140 | + ) |
| 141 | + }) |
| 142 | + |
| 143 | + it('the editor stylesheet no longer re-declares cell chrome of its own', () => { |
| 144 | + const redeclared = styleRules(EDITOR_CSS_PATH).filter( |
| 145 | + (r) => |
| 146 | + /\.rich-markdown-prose (th|td)\b/.test(r.selectorText) && |
| 147 | + (r.style.getPropertyValue('border') || |
| 148 | + r.style.getPropertyValue('padding') || |
| 149 | + r.style.getPropertyValue('font-size') || |
| 150 | + r.style.getPropertyValue('background')) |
| 151 | + ) |
| 152 | + |
| 153 | + expect(redeclared.map((r) => r.selectorText)).toEqual([]) |
| 154 | + }) |
| 155 | +}) |
0 commit comments