describe ( 'Toolbox' , ( ) => { beforeEach ( ( ) => { cy . visit ( '/' ) ; cy . getByTestId ( 'card-top' ) . as ( 'card-top' ) ; cy . getByTestId ( 'card-bottom' ) . as ( 'card-bottom' ) ; cy . getByTestId ( 'root-container' ) . as ( 'root-container' ) ; cy . getByTestId ( 'frame-container' ) . as ( 'frame-container' ) ; } ) ; describe ( 'Test Toolbox Button' , ( ) => { beforeEach ( ( ) => { cy . getByTestId ( 'toolbox-button' ) . as ( 'toolbox-button' ) . should ( 'have.attr' , 'draggable' , 'true' ) ; } ) ; it ( 'should be possible to drag buttons to the bottom of the card' , ( ) => { cy . getByTestId ( 'card-bottom-button' ) . as ( 'target-button' ) ; cy . get ( '@card-bottom' ) . children ( ) . should ( 'have.length' , 1 ) ; cy . get ( '@toolbox-button' ) . dragOver ( '@target-button' , { position : 'right' , } ) ; cy . getDropIndicator ( 'success' ) . should ( 'exist' ) ; cy . get ( '@toolbox-button' ) . drop ( ) ; cy . get ( '@card-bottom' ) . children ( ) . should ( 'have.length' , 2 ) ; cy . get ( '@target-button' ) . parent ( ) . find ( 'button' ) . should ( 'have.length' , 2 ) ; cy . get ( '@toolbox-button' ) . dragAndDrop ( '@target-button' , { position : 'left' , } ) ; cy . get ( '@target-button' ) . parent ( ) . children ( ) . should ( 'have.length' , 3 ) ; cy . get ( '@target-button' ) . parent ( ) . find ( 'button' ) . should ( 'have.length' , 3 ) ; cy . get ( '@card-bottom' ) . children ( ) . then ( ( children ) => children [ 1 ] ) . contains ( 'Only buttons down here' ) ; } ) ; it ( 'should not be possible to drag buttons to the top of the card' , ( ) => { cy . getByTestId ( 'card-top-text-1' ) . as ( 'target-text' ) ; cy . get ( '@card-top' ) . children ( ) . should ( 'have.length' , 2 ) ; cy . get ( '@toolbox-button' ) . dragOver ( '@target-text' ) ; cy . getDropIndicator ( 'error' ) . should ( 'exist' ) ; cy . get ( '@toolbox-button' ) . drop ( ) ; cy . get ( '@card-top' ) . children ( ) . should ( 'have.length' , 2 ) ; } ) ; it ( 'should be possible to drop buttons anywhere else' , ( ) => { cy . getByTestId ( 'frame-button' ) . as ( 'target-button' ) ; cy . get ( '@root-container' ) . contains ( 'Click me' ) . should ( 'have.length' , 1 ) ; cy . get ( '@toolbox-button' ) . dragAndDrop ( '@target-button' , { position : 'right' , } ) ; cy . get ( '@root-container' ) . find ( 'button:contains("Click me")' ) . should ( 'have.length' , 2 ) ; cy . getByTestId ( 'frame-text' ) . as ( 'target-text' ) ; cy . get ( '@toolbox-button' ) . dragAndDrop ( '@target-text' , { position : 'below' , } ) ; cy . get ( '@root-container' ) . find ( 'button:contains("Click me")' ) . should ( 'have.length' , 3 ) ; cy . get ( '@frame-container' ) . children ( ) . should ( 'have.length' , 1 ) ; cy . get ( '@toolbox-button' ) . dragAndDrop ( '@frame-container' , { position : 'inside' , } ) ; cy . get ( '@frame-container' ) . children ( ) . should ( 'have.length' , 2 ) ; } ) ; } ) ; describe ( 'Test Toolbox Text' , ( ) => { beforeEach ( ( ) => { cy . getByTestId ( 'toolbox-text' ) . as ( 'toolbox-text' ) . should ( 'have.attr' , 'draggable' , 'true' ) ; } ) ; it ( 'should be possible to drop texts inside the CardTop component' , ( ) => { cy . getByTestId ( 'card-top-text-2' ) . as ( 'target-text' ) ; cy . get ( '@card-top' ) . children ( ) . should ( 'have.length' , 2 ) ; cy . get ( '@toolbox-text' ) . dragAndDrop ( '@target-text' , { position : 'above' , } ) ; cy . get ( '@card-top' ) . children ( ) . should ( 'have.length' , 3 ) ; cy . get ( '@card-top' ) . children ( ) . then ( ( $children ) => $children [ 1 ] ) . contains ( 'Hi world' ) ; } ) ; it ( 'should not be possible to drop texts inside the CardBottom component' , ( ) => { cy . get ( '@card-bottom' ) . children ( ) . should ( 'have.length' , 1 ) ; cy . get ( '@toolbox-text' ) . dragOver ( '@card-bottom' , { position : 'inside' , } ) ; cy . getDropIndicator ( 'error' ) . should ( 'be.visible' ) ; cy . get ( '@toolbox-text' ) . drop ( ) ; cy . get ( '@card-bottom' ) . children ( ) . should ( 'have.length' , 1 ) ; } ) ; const numberOfElements = 25 ; it ( `should be possible to drop ${ numberOfElements } texts somewhere under root` , ( ) => { cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , 4 ) ; for ( let count = 0 ; count < numberOfElements ; count ++ ) { cy . get ( '@toolbox-text' ) . dragAndDrop ( '@root-container' , { position : 'inside' , } ) ; cy . wait ( 1 ) ; } cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , numberOfElements + 4 ) ; } ) ; } ) ; describe ( 'Test Toolbox Container' , ( ) => { beforeEach ( ( ) => { cy . getByTestId ( 'toolbox-container' ) . as ( 'toolbox-container' ) . should ( 'have.attr' , 'draggable' , 'true' ) ; } ) ; it ( 'should neither be possible to drop Container inside CardTop nor CardBottom' , ( ) => { [ { cardPosition : 'top' , expectedChildren : 2 , } , { cardPosition : 'bottom' , expectedChildren : 1 , } , ] . forEach ( ( { cardPosition , expectedChildren } ) => { cy . get ( `@card-${ cardPosition }` ) . children ( ) . should ( 'have.length' , expectedChildren ) ; cy . get ( '@toolbox-container' ) . dragOver ( `@card-${ cardPosition }` , { position : 'inside' , } ) ; cy . getDropIndicator ( 'error' ) . should ( 'exist' ) ; cy . get ( '@toolbox-container' ) . drop ( ) ; cy . get ( `@card-${ cardPosition }` ) . children ( ) . should ( 'have.length' , expectedChildren ) ; } ) ; } ) ; it ( 'should be possible to nest Containers' , ( ) => { cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , 4 ) ; cy . get ( '@toolbox-container' ) . dragAndDrop ( '@root-container' , { position : 'inside' , } ) ; cy . get ( '@root-container' ) . children ( ) . then ( ( $children ) => $children [ 0 ] ) . as ( 'first-container' ) ; cy . get ( '@toolbox-container' ) . dragAndDrop ( '@first-container' , { position : 'inside' , } ) ; cy . get ( '@first-container' ) . children ( ) . then ( ( $children ) => $children [ 0 ] ) . as ( 'second-container' ) ; cy . get ( '@toolbox-container' ) . dragAndDrop ( '@second-container' , { position : 'inside' , } ) ; cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , 5 ) ; cy . get ( '@first-container' ) . children ( ) . should ( 'have.length' , 1 ) ; cy . get ( '@second-container' ) . children ( ) . should ( 'have.length' , 1 ) ; } ) ; } ) ; describe ( 'Test Toolbox Card' , ( ) => { beforeEach ( ( ) => { cy . getByTestId ( 'toolbox-card' ) . as ( 'toolbox-card' ) . should ( 'have.attr' , 'draggable' , 'true' ) ; } ) ; it ( 'should not be possible to drop the Card in CardTop or CardBottom' , ( ) => { [ { cardPosition : 'top' , expectedChildren : 2 , } , { cardPosition : 'bottom' , expectedChildren : 1 , } , ] . forEach ( ( { cardPosition , expectedChildren } ) => { cy . get ( `@card-${ cardPosition }` ) . children ( ) . should ( 'have.length' , expectedChildren ) ; cy . get ( '@toolbox-card' ) . dragOver ( `@card-${ cardPosition }` , { position : 'inside' , } ) ; cy . getDropIndicator ( 'error' ) . should ( 'exist' ) ; cy . get ( '@toolbox-card' ) . drop ( ) ; cy . get ( `@card-${ cardPosition }` ) . children ( ) . should ( 'have.length' , expectedChildren ) ; } ) ; } ) ; it ( 'should be possible to drop the Card in root as the last element' , ( ) => { cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , 4 ) ; cy . get ( '@toolbox-card' ) . dragAndDrop ( '@frame-container' , { position : 'below' , } ) ; cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , 5 ) ; cy . get ( '@root-container' ) . children ( ) . then ( ( $children ) => $children [ $children . length - 1 ] ) . within ( ( ) => { cy . contains ( 'Only texts' ) ; cy . contains ( 'are allowed up here' ) ; cy . contains ( 'Only buttons down here' ) ; } ) ; } ) ; } ) ; describe ( 'Test Toolbox when editor is disabled' , ( ) => { it ( 'should not be possible to drag elements when the editor is disabled' , ( ) => { cy . contains ( 'Enable' ) . click ( ) ; cy . wrap ( [ 'button' , 'text' , 'container' , 'card' ] ) . each ( ( component ) => { cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , 4 ) ; cy . getByTestId ( `toolbox-${ component }` ) . as ( `toolbox-component` ) . should ( 'not.have.attr' , 'draggable' ) ; cy . get ( '@toolbox-component' ) . dragAndDrop ( '@root-container' , { position : 'inside' , } ) ; cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , 4 ) ; } ) ; } ) ; } ) ; } ) ;