UNPKG

@ryusei/light

Version:

<div align="center"> <a href="https://light.ryuseijs.com"> <img alt="RyuseiLight" src="https://light.ryuseijs.com/images/svg/logo.svg" width="70"> </a>

64 lines (48 loc) 2.02 kB
import { LINE } from '../../../constants/classes'; import { RyuseiLight } from '../../../core/RyuseiLight/RyuseiLight'; import { ActiveLines, ATTRIBUTE_ACTIVE_LINES } from '../ActiveLines'; describe( 'ActiveLines', () => { RyuseiLight.compose( { ActiveLines } ); beforeEach( () => { document.body.innerHTML = `<pre> 1 2 3 4 5 6 7 8 9 10 </pre>`; } ); test( 'can highlight lines specified by the attribute.', () => { const ryuseilight = new RyuseiLight(); document.querySelector( 'pre' ).setAttribute( ATTRIBUTE_ACTIVE_LINES, '[5, 9]' ); ryuseilight.apply( 'pre' ); const activeLines = document.querySelectorAll( `.${ LINE }.is-active` ); expect( activeLines.length ).toBe( 2 ); expect( activeLines[ 0 ].textContent.trim() ).toBe( '5' ); expect( activeLines[ 1 ].textContent.trim() ).toBe( '9' ); } ); test( 'can highlight lines specified by options as a range.', () => { const ryuseilight = new RyuseiLight(); document.querySelector( 'pre' ).setAttribute( ATTRIBUTE_ACTIVE_LINES, '[[5, 9]]' ); ryuseilight.apply( 'pre' ); const activeLines = document.querySelectorAll( `.${ LINE }.is-active` ); expect( activeLines.length ).toBe( 5 ); expect( activeLines[ 0 ].textContent.trim() ).toBe( '5' ); expect( activeLines[ activeLines.length - 1 ].textContent.trim() ).toBe( '9' ); } ); test( 'can highlight lines specified by options as a number and range.', () => { const ryuseilight = new RyuseiLight(); document.querySelector( 'pre' ).setAttribute( ATTRIBUTE_ACTIVE_LINES, '[3, [5, 9]]' ); ryuseilight.apply( 'pre' ); const activeLines = document.querySelectorAll( `.${ LINE }.is-active` ); expect( activeLines.length ).toBe( 6 ); expect( activeLines[ 0 ].textContent.trim() ).toBe( '3' ); expect( activeLines[ 1 ].textContent.trim() ).toBe( '5' ); expect( activeLines[ activeLines.length - 1 ].textContent.trim() ).toBe( '9' ); } ); } );