license import { barchart } from './barchart' ; describe ( 'renderBarChart' , ( ) => { let pixelRatio ; beforeEach ( ( ) => { document . body . innerHTML = '<div id="container"></div>' ; pixelRatio = window . devicePixelRatio ; } ) ; it ( 'renders a bar chart' , async ( ) => { const data = [ { index : 0 , value : 50 } , { index : 1 , value : 100 } , { index : 2 , value : 230 } , ] ; const container = document . getElementById ( 'container' ) as HTMLElement ; await barchart ( container , data ) ; expect ( document . querySelectorAll ( '.vega-embed' ) . length ) . toBe ( 1 ) ; } ) ; it ( 're-renders a bar chart' , async ( ) => { const data = [ { index : 0 , value : 50 } , { index : 1 , value : 100 } , { index : 2 , value : 230 } , ] ; const container = document . getElementById ( 'container' ) as HTMLElement ; await barchart ( container , data ) ; expect ( document . querySelectorAll ( '.vega-embed' ) . length ) . toBe ( 1 ) ; await barchart ( container , data ) ; expect ( document . querySelectorAll ( '.vega-embed' ) . length ) . toBe ( 1 ) ; } ) ; it ( 'updates a bar chart' , async ( ) => { let data = [ { index : 0 , value : 50 } , { index : 1 , value : 100 } , { index : 2 , value : 150 } , ] ; const container = document . getElementById ( 'container' ) as HTMLElement ; await barchart ( container , data ) ; expect ( document . querySelectorAll ( '.vega-embed' ) . length ) . toBe ( 1 ) ; data = [ { index : 0 , value : 50 } , { index : 1 , value : 100 } , { index : 2 , value : 150 } , ] ; await barchart ( container , data ) ; expect ( document . querySelectorAll ( '.vega-embed' ) . length ) . toBe ( 1 ) ; } ) ; it ( 'sets width of chart' , async ( ) => { const data = [ { index : 0 , value : 50 } , { index : 1 , value : 100 } , { index : 2 , value : 230 } , ] ; const container = document . getElementById ( 'container' ) as HTMLElement ; await barchart ( container , data , { width : 400 } ) ; expect ( document . querySelectorAll ( '.vega-embed' ) . length ) . toBe ( 1 ) ; expect ( document . querySelectorAll ( 'canvas' ) . length ) . toBe ( 1 ) ; expect ( document . querySelector ( 'canvas' ) ! . width ) . toBe ( 400 * pixelRatio ) ; } ) ; it ( 'sets height of chart' , async ( ) => { const data = [ { index : 0 , value : 50 } , { index : 1 , value : 100 } , { index : 2 , value : 230 } , ] ; const container = document . getElementById ( 'container' ) as HTMLElement ; await barchart ( container , data , { height : 200 } ) ; expect ( document . querySelectorAll ( '.vega-embed' ) . length ) . toBe ( 1 ) ; expect ( document . querySelectorAll ( 'canvas' ) . length ) . toBe ( 1 ) ; expect ( document . querySelector ( 'canvas' ) ! . height ) . toBe ( 200 * pixelRatio ) ; } ) ; } ) ;