import React , { Fragment } from 'react' ; import { render , act , fireEvent , waitForElement , cleanup } from '@testing-library/react' ; import '@testing-library/jest-dom/extend-expect' ; import Graphin from '../Graphin' ; import { Data } from '../types' ; import { SAMPLE_DATA , SAMPLE_DATA_1 , SAMPLE_DATA_2 } from './data' ; import { getCanvasEventCount , getCanvasPathCount , wait } from './helper' ; import mock from '../utils/mock' ; const TIMEOUT = 60 * 1000 ; const MockComponent = ( props ) => { if ( ! props . graph ) { return null ; } return < div > ComponentWithProps < /div>; } ; const AnotherMockComponent = ( props ) => { if ( ! props . graph ) { return < div > ComponentWithoutProps < /div>; } return < div > AnotherMockComponent < /div>; } ; describe ( '<Graphin />' , ( ) => { afterEach ( ( ) => { cleanup ( ) ; jest . resetModules ( ) ; } ) ; it ( 'should renders all kinds of children correctly' , ( ) => { const data = { nodes : [ ] , edges : [ ] , } ; const layout = { name : 'grid' , } ; const options = { disablePan : true , disableDrag : true , disableZoom : true , pan : { x : 10 , y : 10 } , } ; const { asFragment , queryByText , rerender } = render ( < Graphin data = { data } options = { options } layout = { layout } > < div > foo < /div>text <MockComponent / > < Fragment > < AnotherMockComponent /> < /Fragment> < /Graphin>); expect ( queryByText ( /foo/ ) ) . toBeTruthy ( ) ; expect ( queryByText ( /text/ ) ) . toBeTruthy ( ) ; expect ( queryByText ( /ComponentWithProps/ ) ) . toBeTruthy ( ) ; expect ( queryByText ( /ComponentWithoutProps/ ) ) . toBeTruthy ( ) ; } ) ; it ( 'should renders single element child correctly' , ( ) => { const data = { nodes : [ ] , edges : [ ] , } ; const layout = { name : 'grid' , } ; const { queryByText } = render ( < Graphin data = { data } layout = { layout } > < MockComponent /> < /Graphin>); expect ( queryByText ( /ComponentWithProps/ ) ) . toBeTruthy ( ) ; } ) ; it ( 'should handles render function' , ( ) => { const data = { nodes : [ ] , edges : [ ] , } ; const layout = { name : 'grid' , } ; const { queryByText } = render ( < Graphin data = { data } layout = { layout } > { ( props ) => { return < MockComponent { ... props } / > ; } } < /Graphin>); expect ( queryByText ( /ComponentWithProps/ ) ) . toBeTruthy ( ) ; } ) ; it ( 'should handles empty child correctly' , ( ) => { const data = { nodes : [ ] , edges : [ ] , } ; const layout = { name : 'grid' , } ; const { asFragment } = render ( < Graphin data = { data } layout = { layout } / > ) ; const firstRender = asFragment ( ) ; expect ( firstRender . children . length ) . toBe ( 1 ) ; } ) ; it ( 'should rerender g6 when node change' , async ( ) => { let data = { nodes : [ ] , edges : [ ] , } ; const layout = { name : 'circle' , } ; const { getByTestId , rerender } = render ( < Graphin data = { data } layout = { layout } options = { { animate : false , animateCfg : { duration : 0 , } , } } />); await wait ( ) ; const prevEventsCount = getCanvasEventCount ( getByTestId ) ; rerender ( < Graphin data = { mock ( 10 ) . circle ( ) . graphin ( ) } layout = { layout } options = { { animate : false , animateCfg : { duration : 0 , } , } } />); await wait ( ) ; expect ( getCanvasEventCount ( getByTestId ) > prevEventsCount ) . toBeTruthy ( ) ; } , TIMEOUT ) ; it ( 'should rerender g6 when layout change' , async ( ) => { const data = Object . assign ( { } , SAMPLE_DATA_2 ) ; let layout = { name : 'grid' , } ; const { getByTestId , rerender } = render ( < Graphin data = { data } layout = { layout } options = { { animate : false , animateCfg : { duration : 0 , } , } } />); await wait ( ) ; const prevEventsCount = getCanvasEventCount ( getByTestId ) ; /** Circle Layout */ layout = { name : 'circle' , } ; act ( ( ) => { rerender ( < Graphin data = { data } layout = { layout } / > ) ; } ) ; await wait ( ) ; expect ( getCanvasEventCount ( getByTestId ) > prevEventsCount ) . toBeTruthy ( ) ; /** Dagre Layout */ layout = { name : 'dagre' , } ; act ( ( ) => { rerender ( < Graphin data = { data } layout = { layout } / > ) ; } ) ; await wait ( ) ; expect ( getCanvasEventCount ( getByTestId ) > prevEventsCount ) . toBeTruthy ( ) ; /** Radial Layout */ layout = { name : 'radial' , } ; act ( ( ) => { rerender ( < Graphin data = { data } layout = { layout } / > ) ; } ) ; await wait ( ) ; expect ( getCanvasEventCount ( getByTestId ) > prevEventsCount ) . toBeTruthy ( ) ; /** Concentric Layout */ layout = { name : 'concentric' , } ; act ( ( ) => { rerender ( < Graphin data = { data } layout = { layout } / > ) ; } ) ; await wait ( ) ; expect ( getCanvasEventCount ( getByTestId ) > prevEventsCount ) . toBeTruthy ( ) ; /** Grid Layout */ layout = { name : 'grid' , } ; act ( ( ) => { rerender ( < Graphin data = { data } layout = { layout } / > ) ; } ) ; await wait ( ) ; expect ( getCanvasEventCount ( getByTestId ) > prevEventsCount ) . toBeTruthy ( ) ; /** Force Layout */ layout = { name : 'force' , } ; act ( ( ) => { rerender ( < Graphin data = { data } layout = { layout } / > ) ; } ) ; await wait ( 500 ) ; expect ( getCanvasEventCount ( getByTestId ) > prevEventsCount ) . toBeTruthy ( ) ; layout = { name : 'grid' , } ; act ( ( ) => { rerender ( < Graphin data = { data } layout = { layout } / > ) ; } ) ; await wait ( ) ; expect ( getCanvasEventCount ( getByTestId ) > prevEventsCount ) . toBeTruthy ( ) ; } , TIMEOUT ) ; } ) ;