|
| 1 | +import fs from 'node:fs'; |
| 2 | +import path from 'node:path'; |
| 3 | +import { fileURLToPath } from 'node:url'; |
| 4 | +import { expect, test } from '../fixtures/superdoc.js'; |
| 5 | + |
| 6 | +const __dirname = path.dirname(fileURLToPath(import.meta.url)); |
| 7 | +const repoRoot = path.resolve(__dirname, '../../../..'); |
| 8 | +const fieldTypesCss = fs.readFileSync( |
| 9 | + path.join(repoRoot, 'packages/template-builder/src/styles/field-types.css'), |
| 10 | + 'utf8', |
| 11 | +); |
| 12 | + |
| 13 | +test('inline and block structured content field chrome use Template Builder field styles', async ({ superdoc }) => { |
| 14 | + await superdoc.page.addStyleTag({ |
| 15 | + content: ` |
| 16 | + :root { |
| 17 | + --superdoc-field-owner-color: rgb(37, 99, 235); |
| 18 | + --superdoc-field-signer-color: rgb(220, 38, 38); |
| 19 | + --sd-content-controls-label-text: rgb(255, 255, 0); |
| 20 | + } |
| 21 | + ${fieldTypesCss} |
| 22 | + `, |
| 23 | + }); |
| 24 | + |
| 25 | + await superdoc.page.evaluate(() => { |
| 26 | + const fieldAttrs = (id: string, alias: string, fieldType: 'owner' | 'signer') => ({ |
| 27 | + id, |
| 28 | + alias, |
| 29 | + tag: `{"fieldType":"${fieldType}"}`, |
| 30 | + }); |
| 31 | + |
| 32 | + const inlineField = (id: string, alias: string, fieldType: 'owner' | 'signer', text: string) => ({ |
| 33 | + type: 'paragraph', |
| 34 | + content: [ |
| 35 | + { |
| 36 | + type: 'structuredContent', |
| 37 | + attrs: fieldAttrs(id, alias, fieldType), |
| 38 | + content: [{ type: 'text', text }], |
| 39 | + }, |
| 40 | + ], |
| 41 | + }); |
| 42 | + |
| 43 | + const blockField = (id: string, alias: string, fieldType: 'owner' | 'signer', text: string) => ({ |
| 44 | + type: 'structuredContentBlock', |
| 45 | + attrs: fieldAttrs(id, alias, fieldType), |
| 46 | + content: [ |
| 47 | + { |
| 48 | + type: 'paragraph', |
| 49 | + content: [{ type: 'text', text }], |
| 50 | + }, |
| 51 | + ], |
| 52 | + }); |
| 53 | + |
| 54 | + const spacer = () => ({ type: 'paragraph', content: [{ type: 'text', text: ' ' }] }); |
| 55 | + |
| 56 | + const editor = (window as any).editor; |
| 57 | + const doc = editor.schema.nodeFromJSON({ |
| 58 | + type: 'doc', |
| 59 | + content: [ |
| 60 | + inlineField('1', 'Signer Inline', 'signer', 'Signer inline value'), |
| 61 | + spacer(), |
| 62 | + spacer(), |
| 63 | + blockField('2', 'Signer Block', 'signer', 'Signature area'), |
| 64 | + spacer(), |
| 65 | + spacer(), |
| 66 | + inlineField('3', 'Owner Inline', 'owner', 'Owner inline value'), |
| 67 | + spacer(), |
| 68 | + spacer(), |
| 69 | + blockField('4', 'Owner Block', 'owner', 'Owner approval area'), |
| 70 | + ], |
| 71 | + }); |
| 72 | + editor.view.dispatch(editor.state.tr.replaceWith(0, editor.state.doc.content.size, doc.content)); |
| 73 | + }); |
| 74 | + await superdoc.waitForStable(); |
| 75 | + |
| 76 | + const renderedPage = superdoc.page.locator('.superdoc-page').first(); |
| 77 | + const getInline = (fieldType: 'owner' | 'signer') => |
| 78 | + renderedPage.locator(`.superdoc-structured-content-inline[data-sdt-tag*='"fieldType":"${fieldType}"']`).first(); |
| 79 | + const getBlock = (fieldType: 'owner' | 'signer') => |
| 80 | + renderedPage.locator(`.superdoc-structured-content-block[data-sdt-tag*='"fieldType":"${fieldType}"']`).first(); |
| 81 | + |
| 82 | + const showInlineLabel = async (fieldType: 'owner' | 'signer') => { |
| 83 | + const inline = getInline(fieldType); |
| 84 | + await inline.evaluate((el) => el.classList.add('ProseMirror-selectednode')); |
| 85 | + return inline; |
| 86 | + }; |
| 87 | + |
| 88 | + const showBlockLabel = async (fieldType: 'owner' | 'signer') => { |
| 89 | + const block = getBlock(fieldType); |
| 90 | + await block.evaluate((el) => { |
| 91 | + el.classList.remove('sdt-group-hover'); |
| 92 | + el.classList.add('ProseMirror-selectednode'); |
| 93 | + }); |
| 94 | + return block; |
| 95 | + }; |
| 96 | + |
| 97 | + const expectHoverBackgroundParity = async (fieldType: 'owner' | 'signer') => { |
| 98 | + const inline = getInline(fieldType); |
| 99 | + const block = getBlock(fieldType); |
| 100 | + |
| 101 | + await inline.evaluate((el) => el.classList.remove('ProseMirror-selectednode')); |
| 102 | + await inline.hover(); |
| 103 | + const inlineHoverBackground = await inline.evaluate((el) => getComputedStyle(el).backgroundColor); |
| 104 | + |
| 105 | + await block.evaluate((el) => { |
| 106 | + el.classList.remove('ProseMirror-selectednode'); |
| 107 | + el.classList.add('sdt-group-hover'); |
| 108 | + }); |
| 109 | + await expect |
| 110 | + .poll(async () => block.evaluate((el) => getComputedStyle(el).backgroundColor)) |
| 111 | + .toBe(inlineHoverBackground); |
| 112 | + |
| 113 | + await inline.evaluate((el) => el.classList.add('ProseMirror-selectednode')); |
| 114 | + await block.evaluate((el) => { |
| 115 | + el.classList.remove('sdt-group-hover'); |
| 116 | + el.classList.add('ProseMirror-selectednode'); |
| 117 | + }); |
| 118 | + }; |
| 119 | + |
| 120 | + const signerInline = await showInlineLabel('signer'); |
| 121 | + await expect(signerInline).toBeVisible(); |
| 122 | + await expect(signerInline).toHaveCSS('border-color', 'rgb(220, 38, 38)'); |
| 123 | + |
| 124 | + const signerInlineLabel = signerInline.locator('.superdoc-structured-content-inline__label'); |
| 125 | + await expect(signerInlineLabel).toHaveCSS('color', 'rgb(255, 255, 0)'); |
| 126 | + await expect(signerInlineLabel).toHaveCSS('border-color', 'rgb(220, 38, 38)'); |
| 127 | + |
| 128 | + const signerBlock = await showBlockLabel('signer'); |
| 129 | + await expect(signerBlock).toBeVisible(); |
| 130 | + await expect(signerBlock).toHaveCSS('border-top-color', 'rgb(220, 38, 38)'); |
| 131 | + |
| 132 | + const signerBlockLabel = signerBlock.locator('.superdoc-structured-content-block__label'); |
| 133 | + await expect(signerBlockLabel).toHaveCSS('color', 'rgb(255, 255, 0)'); |
| 134 | + await expect(signerBlockLabel).toHaveCSS('border-color', 'rgb(220, 38, 38)'); |
| 135 | + await expectHoverBackgroundParity('signer'); |
| 136 | + |
| 137 | + const ownerInline = await showInlineLabel('owner'); |
| 138 | + await expect(ownerInline).toBeVisible(); |
| 139 | + await expect(ownerInline).toHaveCSS('border-color', 'rgb(37, 99, 235)'); |
| 140 | + |
| 141 | + const ownerInlineLabel = ownerInline.locator('.superdoc-structured-content-inline__label'); |
| 142 | + await expect(ownerInlineLabel).toHaveCSS('color', 'rgb(255, 255, 0)'); |
| 143 | + await expect(ownerInlineLabel).toHaveCSS('border-color', 'rgb(37, 99, 235)'); |
| 144 | + |
| 145 | + const ownerBlock = await showBlockLabel('owner'); |
| 146 | + await expect(ownerBlock).toBeVisible(); |
| 147 | + await expect(ownerBlock).toHaveCSS('border-top-color', 'rgb(37, 99, 235)'); |
| 148 | + |
| 149 | + const ownerBlockLabel = ownerBlock.locator('.superdoc-structured-content-block__label'); |
| 150 | + await expect(ownerBlockLabel).toHaveCSS('color', 'rgb(255, 255, 0)'); |
| 151 | + await expect(ownerBlockLabel).toHaveCSS('border-color', 'rgb(37, 99, 235)'); |
| 152 | + await expectHoverBackgroundParity('owner'); |
| 153 | + |
| 154 | + await superdoc.screenshot('template-builder-owner-and-signer-inline-and-block-field-styling'); |
| 155 | +}); |
0 commit comments