|
| 1 | +// Copyright 2025 The Chromium Authors |
| 2 | +// Use of this source code is governed by a BSD-style license that can be |
| 3 | +// found in the LICENSE file. |
| 4 | + |
| 5 | +import * as TextUtils from '../../../models/text_utils/text_utils.js'; |
| 6 | +import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js'; |
| 7 | + |
| 8 | +import * as Highlighting from './highlighting.js'; |
| 9 | + |
| 10 | +describe('MarkupHighlight', () => { |
| 11 | + let container: HTMLDivElement; |
| 12 | + |
| 13 | + beforeEach(() => { |
| 14 | + container = document.createElement('div'); |
| 15 | + renderElementIntoDOM(container); |
| 16 | + }); |
| 17 | + |
| 18 | + function range(offset: number, length: number): TextUtils.TextRange.SourceRange { |
| 19 | + return new TextUtils.TextRange.SourceRange(offset, length); |
| 20 | + } |
| 21 | + |
| 22 | + function performTest(innerHTML: string[], ranges: TextUtils.TextRange.SourceRange[], expectedHighlighted: string[]) { |
| 23 | + const element = document.createElement('div'); |
| 24 | + element.innerHTML = innerHTML.join(''); |
| 25 | + container.appendChild(element); |
| 26 | + |
| 27 | + const initialHTML = element.innerHTML; |
| 28 | + const initialText = element.textContent || ''; |
| 29 | + const changes: Highlighting.HighlightChange[] = []; |
| 30 | + Highlighting.highlightRangesWithStyleClass(element, ranges, 'highlighted', changes); |
| 31 | + assert.strictEqual(element.innerHTML, expectedHighlighted.join(''), 'After highlight'); |
| 32 | + Highlighting.revertDomChanges(changes); |
| 33 | + assert.strictEqual(element.innerHTML, initialHTML, 'After revert'); |
| 34 | + assert.strictEqual(element.textContent, initialText, 'After revert'); |
| 35 | + } |
| 36 | + |
| 37 | + it('highlights whole text node', () => { |
| 38 | + performTest(['function'], [range(0, 8)], ['<span class="highlighted">function</span>']); |
| 39 | + }); |
| 40 | + |
| 41 | + it('highlights only text node beginning', () => { |
| 42 | + performTest(['function'], [range(0, 7)], ['<span class="highlighted">functio</span>n']); |
| 43 | + }); |
| 44 | + |
| 45 | + it('highlights only text node ending', () => { |
| 46 | + performTest(['function'], [range(1, 7)], ['f<span class="highlighted">unction</span>']); |
| 47 | + }); |
| 48 | + |
| 49 | + it('highlights in the middle of text node', () => { |
| 50 | + performTest(['function'], [range(1, 6)], ['f<span class="highlighted">unctio</span>n']); |
| 51 | + }); |
| 52 | + |
| 53 | + it('highlights all text in 3 text nodes', () => { |
| 54 | + performTest( |
| 55 | + ['<span>function</span>', '<span> </span>', '<span>functionName</span>'], [range(0, 21)], |
| 56 | + ['<span><span class="highlighted">function functionName</span></span>', '<span></span>', '<span></span>']); |
| 57 | + }); |
| 58 | + |
| 59 | + it('highlights all text in 3 text nodes except for the last character', () => { |
| 60 | + performTest( |
| 61 | + ['<span>function</span>', '<span> </span>', '<span>functionName</span>'], [range(0, 20)], |
| 62 | + ['<span><span class="highlighted">function functionNam</span></span>', '<span></span>', '<span>e</span>']); |
| 63 | + }); |
| 64 | + |
| 65 | + it('highlights all text in 3 text nodes except for the first character', () => { |
| 66 | + performTest( |
| 67 | + ['<span>function</span>', '<span> </span>', '<span>functionName</span>'], [range(1, 20)], |
| 68 | + ['<span>f<span class="highlighted">unction functionName</span></span>', '<span></span>', '<span></span>']); |
| 69 | + }); |
| 70 | + |
| 71 | + it('highlights all text in 3 text nodes except for the first and the last characters', () => { |
| 72 | + performTest( |
| 73 | + ['<span>function</span>', '<span> </span>', '<span>functionName</span>'], [range(1, 19)], |
| 74 | + ['<span>f<span class="highlighted">unction functionNam</span></span>', '<span></span>', '<span>e</span>']); |
| 75 | + }); |
| 76 | + |
| 77 | + it('highlights across nodes', () => { |
| 78 | + performTest( |
| 79 | + ['<span>function</span>', '<span> </span>', '<span>functionName</span>'], [range(7, 3)], |
| 80 | + ['<span>functio<span class="highlighted">n f</span></span>', '<span></span>', '<span>unctionName</span>']); |
| 81 | + }); |
| 82 | + |
| 83 | + it('highlights first characters in text nodes', () => { |
| 84 | + performTest( |
| 85 | + ['<span>function</span>', '<span> </span>', '<span>functionName</span>'], |
| 86 | + [range(0, 1), range(8, 1), range(9, 1)], [ |
| 87 | + '<span><span class="highlighted">f</span>unction</span>', // |
| 88 | + '<span><span class="highlighted"> </span></span>', |
| 89 | + '<span><span class="highlighted">f</span>unctionName</span>' |
| 90 | + ]); |
| 91 | + }); |
| 92 | + |
| 93 | + it('highlights last characters in text node', () => { |
| 94 | + performTest( |
| 95 | + ['<span>function</span>', '<span> </span>', '<span>functionName</span>'], |
| 96 | + [range(7, 1), range(8, 1), range(20, 1)], [ |
| 97 | + '<span>functio<span class="highlighted">n</span></span>', // |
| 98 | + '<span><span class="highlighted"> </span></span>', |
| 99 | + '<span>functionNam<span class="highlighted">e</span></span>' |
| 100 | + ]); |
| 101 | + }); |
| 102 | + |
| 103 | + it('highlights across nodes with first and last characters', () => { |
| 104 | + performTest( |
| 105 | + ['<span>function</span>', '<span> </span>', '<span>functionName</span>'], |
| 106 | + [range(0, 1), range(7, 3), range(20, 1)], [ |
| 107 | + '<span><span class="highlighted">f</span>unctio<span class="highlighted">n f</span></span>', // |
| 108 | + '<span></span>', // |
| 109 | + '<span>unctionNam<span class="highlighted">e</span></span>' |
| 110 | + ]); |
| 111 | + }); |
| 112 | +}); |
0 commit comments