|
1 | 1 | import { describe, it, expect } from 'vitest'; |
2 | | -import { areTemplateFieldsEqual, resolveToolbar, clampToViewport } from '../utils'; |
| 2 | +import { |
| 3 | + areTemplateFieldsEqual, |
| 4 | + resolveToolbar, |
| 5 | + clampToViewport, |
| 6 | + getFieldTypeStyle, |
| 7 | + generateFieldColorCSS, |
| 8 | +} from '../utils'; |
3 | 9 | import type { TemplateField } from '../types'; |
4 | 10 |
|
5 | 11 | describe('areTemplateFieldsEqual', () => { |
@@ -156,3 +162,76 @@ describe('clampToViewport', () => { |
156 | 162 | expect(result.top).toBe(458); |
157 | 163 | }); |
158 | 164 | }); |
| 165 | + |
| 166 | +describe('getFieldTypeStyle', () => { |
| 167 | + it('returns hardcoded signer style without fieldColors', () => { |
| 168 | + const style = getFieldTypeStyle('signer'); |
| 169 | + expect(style).toEqual({ background: '#fef3c7', color: '#b45309' }); |
| 170 | + }); |
| 171 | + |
| 172 | + it('returns default style for unknown type without fieldColors', () => { |
| 173 | + const style = getFieldTypeStyle('unknown'); |
| 174 | + expect(style).toEqual({ background: '#f3f4f6', color: '#6b7280' }); |
| 175 | + }); |
| 176 | + |
| 177 | + it('returns custom color with color-mix background when fieldColors provided', () => { |
| 178 | + const style = getFieldTypeStyle('date', { date: '#059669' }); |
| 179 | + expect(style.color).toBe('#059669'); |
| 180 | + expect(style.background).toContain('color-mix'); |
| 181 | + expect(style.background).toContain('#059669'); |
| 182 | + }); |
| 183 | + |
| 184 | + it('falls back to default for types not in fieldColors', () => { |
| 185 | + const style = getFieldTypeStyle('unknown', { owner: '#629be7' }); |
| 186 | + expect(style).toEqual({ background: '#f3f4f6', color: '#6b7280' }); |
| 187 | + }); |
| 188 | + |
| 189 | + it('works with non-hex colors', () => { |
| 190 | + const style = getFieldTypeStyle('custom', { custom: 'rgb(100, 200, 50)' }); |
| 191 | + expect(style.color).toBe('rgb(100, 200, 50)'); |
| 192 | + expect(style.background).toContain('color-mix'); |
| 193 | + }); |
| 194 | +}); |
| 195 | + |
| 196 | +describe('generateFieldColorCSS', () => { |
| 197 | + it('returns empty string for empty object', () => { |
| 198 | + expect(generateFieldColorCSS({}, '.scope')).toBe(''); |
| 199 | + }); |
| 200 | + |
| 201 | + it('generates per-type rules with data-sdt-tag selectors', () => { |
| 202 | + const css = generateFieldColorCSS({ signer: '#d97706' }, '.scope'); |
| 203 | + expect(css).toContain('[data-sdt-tag*=\'"fieldType":"signer"\']'); |
| 204 | + expect(css).toContain('#d97706'); |
| 205 | + }); |
| 206 | + |
| 207 | + it('generates default rule when owner is defined', () => { |
| 208 | + const css = generateFieldColorCSS({ owner: '#629be7', signer: '#d97706' }, '.scope'); |
| 209 | + // Default rule (no tag selector) + per-type rules |
| 210 | + expect(css).toContain('.scope .superdoc-structured-content-inline,'); |
| 211 | + expect(css).toContain('#629be7'); |
| 212 | + expect(css).toContain('#d97706'); |
| 213 | + }); |
| 214 | + |
| 215 | + it('does not generate default rule when no owner key', () => { |
| 216 | + const css = generateFieldColorCSS({ signer: '#d97706' }, '.scope'); |
| 217 | + // Should only have tag-selector rules, not a blanket default |
| 218 | + const lines = css.split('\n').filter((l) => l.includes('border-color')); |
| 219 | + lines.forEach((line) => { |
| 220 | + // Every border-color rule should be within a tag selector context |
| 221 | + expect(css).toContain('data-sdt-tag'); |
| 222 | + }); |
| 223 | + }); |
| 224 | + |
| 225 | + it('uses correct label selectors for inline and block', () => { |
| 226 | + const css = generateFieldColorCSS({ owner: '#629be7' }, '.scope'); |
| 227 | + expect(css).toContain('.superdoc-structured-content-inline__label'); |
| 228 | + expect(css).toContain('.superdoc-structured-content__label'); |
| 229 | + // Should NOT contain the wrong block label class |
| 230 | + expect(css).not.toContain('.superdoc-structured-content-block__label'); |
| 231 | + }); |
| 232 | + |
| 233 | + it('uses color-mix for label backgrounds', () => { |
| 234 | + const css = generateFieldColorCSS({ owner: '#629be7' }, '.scope'); |
| 235 | + expect(css).toContain('color-mix(in srgb, #629be7 87%, transparent)'); |
| 236 | + }); |
| 237 | +}); |
0 commit comments