|
| 1 | +import { FONT_LIST, FontClassAttributor, FontStyleAttributor, formatCustomFonts } from "../utils/formats/fonts"; |
| 2 | + |
| 3 | +// parchment ClassAttributor and StyleAttributor operate directly on HTMLElement nodes — |
| 4 | +// no Quill instance is needed for unit-level attribute tests. |
| 5 | + |
| 6 | +function makeSpan(): HTMLElement { |
| 7 | + return document.createElement("span"); |
| 8 | +} |
| 9 | + |
| 10 | +// FontStyleAttributor -------------------------------------------------------- |
| 11 | + |
| 12 | +describe("FontStyleAttributor", () => { |
| 13 | + let attr: FontStyleAttributor; |
| 14 | + |
| 15 | + beforeEach(() => { |
| 16 | + attr = new FontStyleAttributor([]); |
| 17 | + }); |
| 18 | + |
| 19 | + it("adds font-family style for a known font value", () => { |
| 20 | + const node = makeSpan(); |
| 21 | + const result = attr.add(node, "arial"); |
| 22 | + expect(result).toBe(true); |
| 23 | + expect(node.style.fontFamily).toMatch(/arial/i); |
| 24 | + expect(node.dataset.value).toBe("arial"); |
| 25 | + }); |
| 26 | + |
| 27 | + it("returns false for an unknown font value", () => { |
| 28 | + const node = makeSpan(); |
| 29 | + const result = attr.add(node, "not-a-real-font"); |
| 30 | + expect(result).toBe(false); |
| 31 | + expect(node.style.fontFamily).toBe(""); |
| 32 | + }); |
| 33 | + |
| 34 | + it("reads back the value via dataset.value", () => { |
| 35 | + const node = makeSpan(); |
| 36 | + attr.add(node, "courier-new"); |
| 37 | + expect(attr.value(node)).toBe("courier-new"); |
| 38 | + }); |
| 39 | + |
| 40 | + it("returns empty string for a node with no dataset.value", () => { |
| 41 | + const node = makeSpan(); |
| 42 | + expect(attr.value(node)).toBe(""); |
| 43 | + }); |
| 44 | + |
| 45 | + it("applies custom fonts passed to the constructor", () => { |
| 46 | + const custom = new FontStyleAttributor([ |
| 47 | + { value: "my-font", description: "My Font", style: "MyFont, sans-serif" } |
| 48 | + ]); |
| 49 | + const node = makeSpan(); |
| 50 | + expect(custom.add(node, "my-font")).toBe(true); |
| 51 | + expect(node.style.fontFamily).toMatch(/MyFont/i); |
| 52 | + }); |
| 53 | + |
| 54 | + it("FONT_LIST contains all 13 fonts including serif", () => { |
| 55 | + const values = FONT_LIST.map(f => f.value); |
| 56 | + expect(values).toContain("serif"); |
| 57 | + expect(values).toHaveLength(13); |
| 58 | + }); |
| 59 | +}); |
| 60 | + |
| 61 | +// FontClassAttributor -------------------------------------------------------- |
| 62 | + |
| 63 | +describe("FontClassAttributor", () => { |
| 64 | + let attr: FontClassAttributor; |
| 65 | + |
| 66 | + beforeEach(() => { |
| 67 | + attr = new FontClassAttributor([]); |
| 68 | + }); |
| 69 | + |
| 70 | + it("adds font-family-<value> class for a known font value", () => { |
| 71 | + const node = makeSpan(); |
| 72 | + const result = attr.add(node, "arial"); |
| 73 | + expect(result).toBe(true); |
| 74 | + expect(node.classList.contains("font-family-arial")).toBe(true); |
| 75 | + expect(node.dataset.value).toBe("arial"); |
| 76 | + }); |
| 77 | + |
| 78 | + it("returns false for an unknown font value and adds no class", () => { |
| 79 | + const node = makeSpan(); |
| 80 | + const result = attr.add(node, "not-a-real-font"); |
| 81 | + expect(result).toBe(false); |
| 82 | + const hasClass = Array.from(node.classList).some(c => c.startsWith("font-family-")); |
| 83 | + expect(hasClass).toBe(false); |
| 84 | + }); |
| 85 | + |
| 86 | + it("reads back the value via dataset.value", () => { |
| 87 | + const node = makeSpan(); |
| 88 | + attr.add(node, "impact"); |
| 89 | + expect(attr.value(node)).toBe("impact"); |
| 90 | + }); |
| 91 | + |
| 92 | + it("returns empty string for a node with no dataset.value", () => { |
| 93 | + const node = makeSpan(); |
| 94 | + expect(attr.value(node)).toBe(""); |
| 95 | + }); |
| 96 | + |
| 97 | + it("adds font-family-serif class for the serif font (Critical #3 regression guard)", () => { |
| 98 | + const node = makeSpan(); |
| 99 | + const result = attr.add(node, "serif"); |
| 100 | + expect(result).toBe(true); |
| 101 | + expect(node.classList.contains("font-family-serif")).toBe(true); |
| 102 | + }); |
| 103 | + |
| 104 | + it("applies custom fonts passed to the constructor", () => { |
| 105 | + const custom = new FontClassAttributor([ |
| 106 | + { value: "my-font", description: "My Font", style: "MyFont, sans-serif" } |
| 107 | + ]); |
| 108 | + const node = makeSpan(); |
| 109 | + expect(custom.add(node, "my-font")).toBe(true); |
| 110 | + expect(node.classList.contains("font-family-my-font")).toBe(true); |
| 111 | + }); |
| 112 | + |
| 113 | + it("emits class-based name, not inline style", () => { |
| 114 | + const node = makeSpan(); |
| 115 | + attr.add(node, "helvetica"); |
| 116 | + expect(node.style.fontFamily).toBe(""); |
| 117 | + expect(node.classList.contains("font-family-helvetica")).toBe(true); |
| 118 | + }); |
| 119 | +}); |
| 120 | + |
| 121 | +// formatCustomFonts ---------------------------------------------------------- |
| 122 | + |
| 123 | +describe("formatCustomFonts", () => { |
| 124 | + it("maps custom font objects to FONT_LIST shape", () => { |
| 125 | + const result = formatCustomFonts([{ fontName: "My Brand Font", fontStyle: "MyBrandFont, sans-serif" }]); |
| 126 | + expect(result).toEqual([ |
| 127 | + { value: "my-brand-font", description: "My Brand Font", style: "MyBrandFont, sans-serif" } |
| 128 | + ]); |
| 129 | + }); |
| 130 | + |
| 131 | + it("lowercases and hyphenates multi-word font names", () => { |
| 132 | + const result = formatCustomFonts([{ fontName: "Open Sans", fontStyle: "Open Sans, sans-serif" }]); |
| 133 | + expect(result[0].value).toBe("open-sans"); |
| 134 | + }); |
| 135 | + |
| 136 | + it("returns an empty array when called with no arguments", () => { |
| 137 | + expect(formatCustomFonts()).toEqual([]); |
| 138 | + }); |
| 139 | + |
| 140 | + it("returns an empty array for an empty input", () => { |
| 141 | + expect(formatCustomFonts([])).toEqual([]); |
| 142 | + }); |
| 143 | + |
| 144 | + it("handles undefined fontName gracefully", () => { |
| 145 | + const result = formatCustomFonts([{ fontName: undefined as any, fontStyle: "serif" }]); |
| 146 | + expect(result[0].value).toBe(""); |
| 147 | + }); |
| 148 | +}); |
0 commit comments