|
4 | 4 |
|
5 | 5 | import './dom_extension.js'; |
6 | 6 |
|
| 7 | +import {renderElementIntoDOM} from '../../testing/DOMHelpers.js'; |
| 8 | + |
7 | 9 | function createSlot(parent: HTMLElement, name?: string) { |
8 | 10 | const slot = parent.createChild('slot'); |
9 | 11 | if (name) { |
@@ -233,3 +235,109 @@ describe('DataGrid', () => { |
233 | 235 | assert.strictEqual(node.nodeName, '#text'); |
234 | 236 | }); |
235 | 237 | }); |
| 238 | + |
| 239 | +describe('Node.prototype.deepInnerText', () => { |
| 240 | + it('gets text from a simple element', () => { |
| 241 | + const element = document.createElement('div'); |
| 242 | + element.textContent = 'Simple text'; |
| 243 | + renderElementIntoDOM(element); |
| 244 | + assert.strictEqual(element.deepInnerText(), 'Simple text'); |
| 245 | + }); |
| 246 | + |
| 247 | + it('gets text from an element with multiple children', () => { |
| 248 | + const element = document.createElement('div'); |
| 249 | + element.createChild('p').textContent = 'First child'; |
| 250 | + element.createChild('span').textContent = 'Second child'; |
| 251 | + renderElementIntoDOM(element); |
| 252 | + assert.strictEqual(element.deepInnerText(), element.innerText); |
| 253 | + assert.strictEqual(element.deepInnerText(), 'First child\n\nSecond child'); |
| 254 | + }); |
| 255 | + |
| 256 | + it('gets text from an element with nested children', () => { |
| 257 | + const element = document.createElement('div'); |
| 258 | + element.appendChild(document.createTextNode(' Outer text. ')); |
| 259 | + const childDiv = element.createChild('div'); |
| 260 | + childDiv.textContent = ' Child text. '; // innerText of childDiv would be "Child text. Grandchild text." |
| 261 | + const grandchildSpan = childDiv.createChild('span'); |
| 262 | + grandchildSpan.textContent = 'Grandchild text.'; |
| 263 | + renderElementIntoDOM(element); |
| 264 | + assert.strictEqual(element.deepInnerText(), element.innerText); |
| 265 | + assert.strictEqual(element.deepInnerText(), 'Outer text.\nChild text. Grandchild text.'); |
| 266 | + }); |
| 267 | + |
| 268 | + it('gets text from an element with a shadow DOM', () => { |
| 269 | + const element = document.createElement('div'); |
| 270 | + const shadow = element.attachShadow({mode: 'open'}); |
| 271 | + shadow.createChild('p').textContent = 'Shadow text'; |
| 272 | + renderElementIntoDOM(element); |
| 273 | + assert.strictEqual(element.deepInnerText(), 'Shadow text'); |
| 274 | + }); |
| 275 | + |
| 276 | + it('gets text from an element with a shadow DOM and slotted content', () => { |
| 277 | + const element = document.createElement('div'); |
| 278 | + element.createChild('span').textContent = 'Slotted content'; |
| 279 | + |
| 280 | + const shadow = element.attachShadow({mode: 'open'}); |
| 281 | + shadow.appendChild(document.createTextNode('Shadow text before slot. ')); |
| 282 | + shadow.createChild('slot'); |
| 283 | + shadow.createChild('p').textContent = 'Shadow text after slot.'; |
| 284 | + |
| 285 | + renderElementIntoDOM(element); |
| 286 | + const expectedText = 'Shadow text before slot.\nSlotted content\nShadow text after slot.'; |
| 287 | + assert.strictEqual(element.deepInnerText(), expectedText); |
| 288 | + }); |
| 289 | + |
| 290 | + it('gets text from an element with multiple shadow DOMs and regular siblings', () => { |
| 291 | + const element = document.createElement('div'); |
| 292 | + element.appendChild(document.createTextNode('Light DOM text before shadow 1. ')); |
| 293 | + const shadow1 = element.createChild('div').attachShadow({mode: 'open'}); |
| 294 | + const shadow1Paragraph1 = shadow1.createChild('p'); |
| 295 | + shadow1Paragraph1.createChild('span').textContent = 'Shadow 1'; |
| 296 | + shadow1Paragraph1.createChild('span').textContent = '(1)'; |
| 297 | + const shadow1Paragraph2 = shadow1.createChild('p'); |
| 298 | + shadow1Paragraph2.createChild('span').textContent = 'Shadow 1'; |
| 299 | + shadow1Paragraph2.createChild('span').textContent = '(2)'; |
| 300 | + element.appendChild(document.createTextNode(' Light DOM text between shadows. ')); |
| 301 | + const shadow2 = element.createChild('div').attachShadow({mode: 'open'}); |
| 302 | + shadow2.createChild('span').textContent = 'Shadow 2 text.'; |
| 303 | + element.appendChild(document.createTextNode(' Light DOM text after shadow 2.')); |
| 304 | + |
| 305 | + renderElementIntoDOM(element); |
| 306 | + const expectedText = |
| 307 | + 'Light DOM text before shadow 1.\nShadow 1(1)\nShadow 1(2)\nLight DOM text between shadows.\nShadow 2 text.\nLight DOM text after shadow 2.'; |
| 308 | + assert.strictEqual(element.deepInnerText(), expectedText); |
| 309 | + }); |
| 310 | + |
| 311 | + it('returns empty string for an element with no text content', () => { |
| 312 | + const element = document.createElement('div'); |
| 313 | + renderElementIntoDOM(element); |
| 314 | + assert.strictEqual(element.deepInnerText(), ''); |
| 315 | + }); |
| 316 | + |
| 317 | + it('ignores text content within SCRIPT tags', () => { |
| 318 | + const element = document.createElement('div'); |
| 319 | + element.innerHTML = 'Visible text<script>console.log("script text")</script>'; |
| 320 | + renderElementIntoDOM(element); |
| 321 | + assert.strictEqual(element.deepInnerText(), 'Visible text'); |
| 322 | + }); |
| 323 | + |
| 324 | + it('ignores text content within STYLE tags', () => { |
| 325 | + const element = document.createElement('div'); |
| 326 | + element.innerHTML = 'Visible text<style>body { color: red; }</style>'; |
| 327 | + renderElementIntoDOM(element); |
| 328 | + assert.strictEqual(element.deepInnerText(), 'Visible text'); |
| 329 | + }); |
| 330 | + |
| 331 | + it('gets text when called directly on a TextNode', () => { |
| 332 | + const textNode = document.createTextNode('Direct text node content'); |
| 333 | + assert.strictEqual(textNode.deepInnerText(), 'Direct text node content'); |
| 334 | + }); |
| 335 | + |
| 336 | + it('handles elements that only contain other elements which produce text', () => { |
| 337 | + const element = document.createElement('div'); |
| 338 | + const child = element.createChild('p'); |
| 339 | + child.textContent = 'Paragraph text'; |
| 340 | + renderElementIntoDOM(element); |
| 341 | + assert.strictEqual(element.deepInnerText(), 'Paragraph text'); |
| 342 | + }); |
| 343 | +}); |
0 commit comments