describe ( 'Frame' , ( ) => { beforeEach ( ( ) => { cy . visit ( '/' ) ; } ) ; it ( 'should be possible to move the elements around in the frame' , ( ) => { cy . getByTestId ( 'root-container' ) . as ( 'root-container' ) . children ( ) . should ( 'have.length' , 4 ) ; cy . getByTestId ( 'card-bottom' ) . as ( 'card-bottom' ) . children ( ) . should ( 'have.length' , 1 ) ; cy . getByTestId ( 'frame-button' ) . should ( 'have.attr' , 'draggable' , 'true' ) . dragAndDrop ( '@card-bottom' , { position : 'inside' , } ) ; cy . get ( '@card-bottom' ) . children ( ) . should ( 'have.length' , 2 ) ; cy . getByTestId ( 'card-top' ) . as ( 'card-top' ) . children ( ) . should ( 'have.length' , 2 ) ; cy . getByTestId ( 'card-top-text-1' ) . as ( 'card-top-text-1' ) ; cy . getByTestId ( 'frame-text' ) . should ( 'have.attr' , 'draggable' , 'true' ) . dragAndDrop ( '@card-top-text-1' , { position : 'below' , } ) ; cy . get ( '@card-top' ) . children ( ) . should ( 'have.length' , 3 ) ; cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , 2 ) ; cy . getByTestId ( 'frame-container' ) . as ( 'frame-container' ) . children ( ) . should ( 'have.length' , 1 ) ; cy . getByTestId ( 'frame-card' ) . dragAndDrop ( '@frame-container' , { position : 'inside' , } ) ; cy . get ( '@frame-container' ) . children ( ) . should ( 'have.length' , 2 ) ; cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , 1 ) ; } ) ; it ( 'should not be possible to drag anything inside the frame when the editor is disabled' , ( ) => { cy . contains ( 'Enable' ) . click ( ) ; cy . getByTestId ( 'frame-card' ) . should ( 'have.attr' , 'draggable' , 'false' ) ; cy . getByTestId ( 'card-top-text-1' ) . should ( 'have.attr' , 'draggable' , 'false' ) ; cy . getByTestId ( 'card-top-text-2' ) . should ( 'have.attr' , 'draggable' , 'false' ) ; cy . getByTestId ( 'card-bottom-button' ) . should ( 'have.attr' , 'draggable' , 'false' ) ; cy . getByTestId ( 'frame-button' ) . should ( 'have.attr' , 'draggable' , 'false' ) ; cy . getByTestId ( 'frame-text' ) . should ( 'have.attr' , 'draggable' , 'false' ) ; cy . getByTestId ( 'frame-container' ) . should ( 'have.attr' , 'draggable' , 'false' ) ; cy . getByTestId ( 'frame-container-text' ) . should ( 'have.attr' , 'draggable' , 'false' ) ; } ) ; it ( 'should be possible to delete every element' , ( ) => { const deleteByTestId = ( testId ) => { cy . getByTestId ( testId ) . click ( ) ; cy . contains ( 'Delete' ) . click ( ) ; } ; cy . getByTestId ( 'root-container' ) . as ( 'root-container' ) . children ( ) . should ( 'have.length' , 4 ) ; cy . getByTestId ( 'card-top' ) . children ( ) . should ( 'have.length' , 2 ) ; deleteByTestId ( 'card-top-text-1' ) ; deleteByTestId ( 'card-top-text-2' ) ; cy . getByTestId ( 'card-top' ) . children ( ) . should ( 'have.length' , 0 ) ; cy . getByTestId ( 'card-bottom' ) . children ( ) . should ( 'have.length' , 1 ) ; deleteByTestId ( 'card-bottom-button' ) ; cy . getByTestId ( 'card-bottom' ) . children ( ) . should ( 'have.length' , 0 ) ; deleteByTestId ( 'frame-card' ) ; cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , 3 ) ; deleteByTestId ( 'frame-button' ) ; cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , 2 ) ; deleteByTestId ( 'frame-text' ) ; cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , 1 ) ; cy . getByTestId ( 'frame-container' ) . children ( ) . should ( 'have.length' , 1 ) ; deleteByTestId ( 'frame-container-text' ) ; cy . getByTestId ( 'frame-container' ) . children ( ) . should ( 'have.length' , 0 ) ; deleteByTestId ( 'frame-container' ) ; cy . get ( '@root-container' ) . children ( ) . should ( 'have.length' , 0 ) ; } ) ; it ( 'should not be possible to delete an element when the editor is disabled' , ( ) => { cy . contains ( 'Enable' ) . click ( ) ; [ 'card-top-text-1' , 'card-top-text-2' , 'card-bottom-button' , 'card-top' , 'card-bottom' , 'frame-card' , 'frame-button' , 'frame-text' , 'frame-container-text' , 'frame-container' , ] . forEach ( ( testId ) => { cy . getByTestId ( testId ) . click ( ) ; cy . contains ( 'Delete' ) . should ( 'not.exist' ) ; } ) ; } ) ; } ) ;