import { parse } from "@babel/parser" ; import * as t from "@babel/types" ; import { getRootNode , getSelectedNode , getAncestorsIndexes , getSelectedElement , } from "../babel-dom-utils" ; const p0 = document . createElement ( "p" ) ; const p1 = document . createElement ( "p" ) ; const text = document . createTextNode ( "Hello" ) ; const div = document . createElement ( "div" ) ; const section0 = document . createElement ( "section" ) ; const section1 = document . createElement ( "section" ) ; const groupDiv = document . createElement ( "div" ) ; const rootDiv = document . createElement ( "div" ) ; p0 . appendChild ( text ) ; div . appendChild ( p0 ) ; div . appendChild ( p1 ) ; section1 . appendChild ( div ) ; groupDiv . appendChild ( section0 ) ; groupDiv . appendChild ( section1 ) ; rootDiv . appendChild ( groupDiv ) ; const code = `<div>
  <section></section>
  <section>
    <div>
      <p></p>
      <p id="selected">Hello</p>
    </div>
  </section>
</div>` ; const ancestorIndexes = [ 0 , 1 , 0 , 1 ] ; describe ( "Babel Utilities" , ( ) => { it ( "should return an index array describing path to DOM element" , ( ) => { const result = getAncestorsIndexes ( p1 , rootDiv ) ; expect ( result ) . toEqual ( ancestorIndexes ) ; } ) ; it ( "should return selected babel node from index array" , ( ) => { const ast = parse ( code , { plugins : [ "jsx" ] , } ) ; const rootNode = getRootNode ( ast ) ; const selectedNode = getSelectedNode ( rootNode , ancestorIndexes ) ; const textNode = selectedNode . children [ 0 ] as t . JSXText ; expect ( textNode . value ) . toEqual ( "Hello" ) ; } ) ; it ( "should return DOM element from index array" , ( ) => { const selectedElement = getSelectedElement ( rootDiv , ancestorIndexes ) ; console . log ( selectedElement . id ) ; } ) ; } ) ;