| 1 | import { describe, expect, it } from "bun:test"; |
| 2 | import { renderToStaticMarkup } |
| 3 | import type { ThemedToken |
| 4 | |
| 5 | import { markMatches } |
| 6 | |
| 7 | const token = ( |
| 8 | ({ |
| 9 | content, |
| 10 | offset, |
| 11 | htmlStyle: { "--shiki-light": |
| 12 | }) as unknown |
| 13 | |
| 14 | const tokens = [ |
| 15 | token("const", |
| 16 | token(" ", |
| 17 | token("findMe", |
| 18 | token(" = 1;", |
| 19 | ]; |
| 20 | |
| 21 | const render = ( |
| 22 | renderToStaticMarkup(<>{markMatches( |
| 23 | |
| 24 | describe("markMatches", () |
| 25 | it("keeps every token as it is when nothing matched", |
| 26 | expect(render([])).toBe |
| 27 | '<span style="--shiki-light:red">const</span><span style="--shiki-light:grey"> </span><span style="--shiki-light:blue">findMe</span><span style="--shiki-light:grey"> = 1;</span>', |
| 28 | ); |
| 29 | }); |
| 30 | |
| 31 | it("cuts a token where a match starts and ends inside it", |
| 32 | expect(render([{ |
| 33 | '<span style="--shiki-light:blue">fi</span><mark class="rounded-xs bg-primary/25"><span style="--shiki-light:blue">nd</span></mark><span style="--shiki-light:blue">Me</span>', |
| 34 | ); |
| 35 | }); |
| 36 | |
| 37 | it("marks a match spanning several tokens as one mark, each piece in its own colour", |
| 38 | expect(render([{ |
| 39 | '<span style="--shiki-light:red">con</span><mark class="rounded-xs bg-primary/25"><span style="--shiki-light:red">st</span><span style="--shiki-light:grey"> </span><span style="--shiki-light:blue">fin</span></mark><span style="--shiki-light:blue">dMe</span><span style="--shiki-light:grey"> = 1;</span>', |
| 40 | ); |
| 41 | }); |
| 42 | |
| 43 | it("keeps adjacent matches apart", |
| 44 | expect( |
| 45 | render([ |
| 46 | { start: 0, end |
| 47 | { start: 5, end |
| 48 | ]), |
| 49 | ).toBe( |
| 50 | '<mark class="rounded-xs bg-primary/25"><span style="--shiki-light:red">const</span></mark><mark class="rounded-xs bg-primary/25"><span style="--shiki-light:grey"> </span></mark><span style="--shiki-light:blue">findMe</span><span style="--shiki-light:grey"> = 1;</span>', |
| 51 | ); |
| 52 | }); |
| 53 | }); |