import { beforeEach, describe, expect, test } from 'vitest' import * as dom from './highlightNode' describe('util/dom', () => { describe('highlightNode', () => { const cellInnerHTML = `

export function fetchSavedSearch(id: Scalars['ID']): Observable<GQL.ISavedSearch> {

` const cellWithEmojiInnerHTML = `

<g-emoji alias="+1" fallback-src="http://ghe.sgdev.org/images/icons/emoji/unicode/1f44d.png" class="emoji">👍</g-emoji>

` let cell: HTMLTableCellElement let cellWithEmoji: HTMLTableCellElement beforeEach(() => { document.body.innerHTML = `

${cellInnerHTML}

${cellWithEmojiInnerHTML}

` cell = window.document.querySelector('#cell')! cellWithEmoji = window.document.querySelector('#cellWithEmoji')! }) test('highlights no characters', () => { dom.highlightNode(cell, 0, 0) expect(cell.innerHTML).toBe(cellInnerHTML) // no changes dom.highlightNode(cellWithEmoji, 0, 0) expect(cellWithEmoji.innerHTML).toBe(cellWithEmojiInnerHTML) // no changes }) test('handles invalid start position', () => { dom.highlightNode(cell, -1, 3) expect(cell.innerHTML).toBe(cellInnerHTML) // no changes dom.highlightNode(cell, cell.textContent!.length, 3) expect(cell.innerHTML).toBe(cellInnerHTML) // no changes dom.highlightNode(cellWithEmoji, -1, 3) expect(cellWithEmoji.innerHTML).toBe(cellWithEmojiInnerHTML) // no changes dom.highlightNode(cellWithEmoji, cellWithEmoji.textContent!.length, 3) expect(cellWithEmoji.innerHTML).toBe(cellWithEmojiInnerHTML) // no changes }) test('handles invalid length', () => { dom.highlightNode(cell, 0, 2000) // length longer than cell.innerText expect(cell.innerHTML).toBe(cellInnerHTML) // no changes dom.highlightNode(cell, 22, 80) // length longer than characters between start and end expect(cell.innerHTML).toBe(cellInnerHTML) // no changes dom.highlightNode(cellWithEmoji, 0, 2000) // length longer than cellWithEmoji.innerText expect(cellWithEmoji.innerHTML).toBe(cellWithEmojiInnerHTML) // no changes dom.highlightNode(cellWithEmoji, 22, 100) // length longer than characters between start and end expect(cellWithEmoji.innerHTML).toBe(cellWithEmojiInnerHTML) // no changes }) test('highlights a single node', () => { dom.highlightNode(cell, 0, 1) expect(cell.innerHTML).toMatchInlineSnapshot(` "

function fetchSavedSearch(id: Scalars['ID']): Observable<GQL.ISavedSearch> {

" `) }) test('highlights multiple nodes', () => { dom.highlightNode(cell, 2, 2) dom.highlightNode(cell, 23, 2) expect(cell.innerHTML).toMatchInlineSnapshot(` "

function (id: Scalars['ID']): Observable<GQL.ISavedSearch> {

" `) }) test('does not repeatedly highlight multiple nodes', () => { dom.highlightNode(cell, 0, 11) dom.highlightNode(cell, 0, 23) expect(cell.innerHTML).toMatchInlineSnapshot(` "

export (id: Scalars['ID']): Observable<GQL.ISavedSearch> {

" `) }) test('highlights after offset', () => { dom.highlightNode(cell, 2, 3) expect(cell.innerHTML).toMatchInlineSnapshot(` "

function fetchSavedSearch(id: Scalars['ID']): Observable<GQL.ISavedSearch> {

" `) }) test('highlights entire cell', () => { dom.highlightNode(cell, 0, cell.textContent!.length) expect(cell.innerHTML).toMatchInlineSnapshot(` "

export function fetchSavedSearch(id: Scalars['ID']): Observable<GQL.ISavedSearch> {

" `) }) // https://github.com/sourcegraph/sourcegraph/issues/20510 test('highlights deeply nested spans correctly', () => { dom.highlightNode(cell, 26, 57) expect(cell.innerHTML).toMatchInlineSnapshot(` "

export function (id: Scalars['ID']): Observable<GQL.ISavedSearch> {

" `) }) test('highlights range containing unicode character correctly', () => { dom.highlightNode(cellWithEmoji, 106, 3) expect(cellWithEmoji.innerHTML).toMatchInlineSnapshot(` "

<g-emoji alias=\\"+1\\" fallback-src=\\"http://ghe.sgdev.org/images/icons/emoji/unicode/1f44d.png\\" class=\\"emoji\\">👍g-emoji>

" `) }) test('highlights ranges before unicode character correctly', () => { dom.highlightNode(cellWithEmoji, 104, 3) expect(cellWithEmoji.innerHTML).toMatchInlineSnapshot(` "

<g-emoji alias=\\"+1\\" fallback-src=\\"http://ghe.sgdev.org/images/icons/emoji/unicode/1f44d.png\\" class=\\"\\">👍</g-emoji>

" `) }) test('highlights range after unicode character correctly', () => { dom.highlightNode(cellWithEmoji, 109, 9) expect(cellWithEmoji.innerHTML).toMatchInlineSnapshot(` "

<g-emoji alias=\\"+1\\" fallback-src=\\"http://ghe.sgdev.org/images/icons/emoji/unicode/1f44d.png\\" class=\\"emoji\\">👍g-emoji>

" `) }) }) })