import React from 'react' ; import { mount } from 'enzyme' ; import { MountWrapper , mountReactNode } from './mount' ; describe ( 'MountWrapper' , ( ) => { it ( 'renders an html element in react tree' , ( ) => { const mountPoint = ( container ) => { const el = document . createElement ( 'p' ) ; el . textContent = 'hello' ; el . className = 'bar' ; container . append ( el ) ; return ( ) => { } ; } ; const wrapper = < MountWrapper mount = { mountPoint } />; const container = mount ( wrapper ) ; expect ( container . html ( ) ) . toMatchInlineSnapshot ( `"<div class=\\"osdMountWrapper\\"><p class=\\"bar\\">hello</p></div>"` ) ; } ) ; it ( 'updates the react tree when the mounted element changes' , ( ) => { const el = document . createElement ( 'p' ) ; el . textContent = 'initial' ; const mountPoint = ( container ) => { container . append ( el ) ; return ( ) => { } ; } ; const wrapper = < MountWrapper mount = { mountPoint } />; const container = mount ( wrapper ) ; expect ( container . html ( ) ) . toMatchInlineSnapshot ( `"<div class=\\"osdMountWrapper\\"><p>initial</p></div>"` ) ; el . textContent = 'changed' ; container . update ( ) ; expect ( container . html ( ) ) . toMatchInlineSnapshot ( `"<div class=\\"osdMountWrapper\\"><p>changed</p></div>"` ) ; } ) ; it ( 'can render a detached react component' , ( ) => { const mountPoint = mountReactNode ( < span > detached < /span>); const wrapper = < MountWrapper mount = { mountPoint } />; const container = mount ( wrapper ) ; expect ( container . html ( ) ) . toMatchInlineSnapshot ( `"<div class=\\"osdMountWrapper\\"><span>detached</span></div>"` ) ; } ) ; it ( 'accepts a className prop to override default className' , ( ) => { const mountPoint = mountReactNode ( < span > detached < /span>); const wrapper = < MountWrapper mount = { mountPoint } className = "customClass" / > ; const container = mount ( wrapper ) ; expect ( container . html ( ) ) . toMatchInlineSnapshot ( `"<div class=\\"customClass\\"><span>detached</span></div>"` ) ; } ) ; } ) ;