import mocha from 'mocha' ; import chai from 'chai' ; import { getNode , setRoot } from './node' ; import { elementFinderProperty } from '@iconify/iconify/lib/modules/element' ; import { initObserver , pauseObserver , resumeObserver , } from '@iconify/iconify/lib/modules/observer' ; const expect = chai . expect ; describe ( 'Testing observer with DOM manipulation' , ( ) => { it ( 'Series of events' , ( done ) => { const node = getNode ( 'observer-manipulation' ) ; setRoot ( node ) ; let counter = 0 ; let waitingCallback = true ; node . innerHTML = '<div></div><ul><li>test</li><li>test2</li></ul><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); vertical-align: -0.125em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi-home" data-inline="false" class="iconify"><path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"></path></svg>' ; initObserver ( ( root ) => { expect ( root . node ) . to . be . equal ( node ) ; expect ( waitingCallback ) . to . be . equal ( true ) ; counter ++ ; switch ( counter ) { case 1 : waitingCallback = 'removing nodes' ; ( ( ) => { const item = node . querySelector ( 'ul > li:last-child' ) ; const parent = item . parentNode ; parent . removeChild ( item ) ; setTimeout ( ( ) => { const newItem = document . createElement ( 'li' ) ; parent . appendChild ( newItem ) ; waitingCallback = true ; } , 50 ) ; } ) ( ) ; break ; case 2 : waitingCallback = 'pause test' ; ( ( ) => { const item = node . querySelector ( 'ul > li:last-child' ) ; pauseObserver ( ) ; item . innerHTML = '<string>Strong</strong> text!' ; setTimeout ( ( ) => { waitingCallback = 'resume test' ; resumeObserver ( ) ; setTimeout ( ( ) => { waitingCallback = true ; item . innerHTML = 'Weak text!' ; } , 50 ) ; } , 50 ) ; } ) ( ) ; break ; case 3 : waitingCallback = 'attributes on ul' ; ( ( ) => { const item = node . querySelector ( 'ul' ) ; item . setAttribute ( 'data-foo' , 'bar' ) ; setTimeout ( ( ) => { waitingCallback = true ; const item = node . querySelector ( 'svg' ) ; item [ elementFinderProperty ] = true ; item . setAttribute ( 'data-icon' , 'mdi-account' ) ; item . setAttribute ( 'data-rotate' , '2' ) ; } , 50 ) ; } ) ( ) ; break ; case 4 : ( ( ) => { const item = node . querySelector ( 'svg' ) ; item . removeAttribute ( 'data-rotate' ) ; } ) ( ) ; break ; case 5 : done ( ) ; break ; default : done ( 'Unexpected callback call!' ) ; } } ) ; node . querySelector ( 'div' ) . innerHTML = '<span class="test">Some text</span><i>!</i>' ; } ) ; } ) ;