describe ( 'Test History' , ( ) => { beforeEach ( ( ) => { cy . visit ( '/' ) ; cy . contains ( 'Undo' ) . as ( 'undo-button' ) ; cy . contains ( 'Redo' ) . as ( 'redo-button' ) ; cy . get ( '@undo-button' ) . should ( 'be.disabled' ) ; cy . get ( '@redo-button' ) . should ( 'be.disabled' ) ; cy . getByTestId ( 'root-container' ) . as ( 'root' ) . children ( ) . should ( 'have.length' , 4 ) ; } ) ; it ( 'should be possible to undo and redo changes to props' , ( ) => { const originalText = 'Hi world!' ; cy . getByTestId ( 'frame-text' ) . as ( 'frame-text' ) . should ( 'have.text' , originalText ) ; const newText = 'Hello world!' ; cy . get ( '@frame-text' ) . find ( 'p' ) . click ( ) . type ( `{selectAll}${ newText }` ) ; cy . get ( '@frame-text' ) . should ( 'have.text' , newText ) ; cy . get ( '@redo-button' ) . should ( 'be.disabled' ) ; cy . get ( '@undo-button' ) . should ( 'not.be.disabled' ) . click ( ) ; cy . get ( '@frame-text' ) . should ( 'have.text' , originalText ) ; cy . get ( '@undo-button' ) . should ( 'be.disabled' ) ; cy . get ( '@redo-button' ) . should ( 'not.be.disabled' ) . click ( ) ; cy . get ( '@frame-text' ) . should ( 'have.text' , newText ) ; } ) ; it ( 'should be possible to undo and redo changes made via drag and drop' , ( ) => { cy . getByTestId ( 'root-container' ) . as ( 'root' ) . children ( ) . should ( 'have.length' , 4 ) ; cy . getByTestId ( 'frame-container' ) . as ( 'container' ) . children ( ) . should ( 'have.length' , 1 ) ; cy . wait ( 100 ) ; cy . getByTestId ( 'frame-card' ) . as ( 'card' ) . dragAndDrop ( '@container' , { position : 'inside' } ) ; cy . getByTestId ( 'frame-button' ) . as ( 'button' ) . dragAndDrop ( '@container' , { position : 'inside' } ) ; cy . getByTestId ( 'frame-text' ) . as ( 'text' ) . dragAndDrop ( '@container' , { position : 'inside' } ) ; cy . get ( '@root' ) . children ( ) . should ( 'have.length' , 1 ) ; cy . get ( '@container' ) . children ( ) . should ( 'have.length' , 4 ) ; cy . get ( '@redo-button' ) . should ( 'be.disabled' ) ; cy . get ( '@undo-button' ) . should ( 'not.be.disabled' ) . click ( ) ; cy . get ( '@redo-button' ) . should ( 'not.be.disabled' ) ; cy . get ( '@root' ) . children ( ) . should ( 'have.length' , 2 ) ; cy . get ( '@container' ) . children ( ) . should ( 'have.length' , 3 ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@root' ) . children ( ) . should ( 'have.length' , 3 ) ; cy . get ( '@container' ) . children ( ) . should ( 'have.length' , 2 ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@root' ) . children ( ) . should ( 'have.length' , 4 ) ; cy . get ( '@container' ) . children ( ) . should ( 'have.length' , 1 ) ; cy . get ( '@undo-button' ) . should ( 'be.disabled' ) ; cy . get ( '@redo-button' ) . should ( 'not.be.disabled' ) ; cy . get ( '@redo-button' ) . click ( ) ; cy . get ( '@redo-button' ) . click ( ) ; cy . get ( '@redo-button' ) . should ( 'not.be.disabled' ) ; cy . getByTestId ( 'card-top-text-1' ) . as ( 'card-top-text-1' ) ; cy . get ( '@text' ) . dragAndDrop ( '@card-top-text-1' , { position : 'below' , } ) ; cy . get ( '@redo-button' ) . should ( 'be.disabled' ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@root' ) . children ( ) . should ( 'have.length' , 4 ) ; } ) ; it ( 'should be possible to undo and redo deleted elements' , ( ) => { [ 'frame-card' , 'frame-button' , 'frame-text' , 'frame-container' ] . forEach ( ( testId ) => { cy . getByTestId ( testId ) . click ( 'left' ) ; cy . contains ( 'Delete' ) . click ( ) ; } ) ; cy . get ( '@undo-button' ) . should ( 'not.be.disabled' ) ; cy . get ( '@root' ) . children ( ) . should ( 'have.length' , 0 ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@root' ) . children ( ) . should ( 'have.length' , 4 ) ; cy . get ( '@undo-button' ) . should ( 'be.disabled' ) ; cy . get ( '@redo-button' ) . should ( 'not.be.disabled' ) ; cy . get ( '@redo-button' ) . click ( ) ; cy . get ( '@redo-button' ) . click ( ) ; cy . get ( '@redo-button' ) . click ( ) ; cy . get ( '@redo-button' ) . click ( ) ; cy . get ( '@root' ) . children ( ) . should ( 'have.length' , 0 ) ; } ) ; it ( 'should be possible to drag elements from the toolbox and undo those changes' , ( ) => { [ 'toolbox-button' , 'toolbox-text' , 'toolbox-container' , 'toolbox-card' , ] . forEach ( ( testId ) => { cy . getByTestId ( testId ) . dragAndDrop ( '@root' , { position : 'inside' , } ) ; } ) ; cy . get ( '@root' ) . children ( ) . should ( 'have.length' , 8 ) ; cy . get ( '@undo-button' ) . should ( 'not.be.disabled' ) ; cy . get ( '@redo-button' ) . should ( 'be.disabled' ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@undo-button' ) . should ( 'be.disabled' ) ; cy . get ( '@redo-button' ) . should ( 'not.be.disabled' ) ; cy . get ( '@root' ) . children ( ) . should ( 'have.length' , 4 ) ; cy . get ( '@redo-button' ) . click ( ) ; cy . get ( '@redo-button' ) . click ( ) ; cy . get ( '@redo-button' ) . click ( ) ; cy . get ( '@redo-button' ) . click ( ) ; cy . get ( '@root' ) . children ( ) . should ( 'have.length' , 8 ) ; } ) ; it ( 'should not be possible to undo/redo changes when the editor is disabled' , ( ) => { cy . getByTestId ( 'frame-button' ) . click ( ) ; cy . contains ( 'Delete' ) . click ( ) ; cy . getByTestId ( 'frame-text' ) . click ( ) ; cy . contains ( 'Delete' ) . click ( ) ; cy . get ( '@undo-button' ) . click ( ) ; cy . get ( '@undo-button' ) . should ( 'not.be.disabled' ) ; cy . get ( '@redo-button' ) . should ( 'not.be.disabled' ) ; cy . contains ( 'Enable' ) . click ( ) ; cy . get ( '@undo-button' ) . should ( 'be.disabled' ) ; cy . get ( '@redo-button' ) . should ( 'be.disabled' ) ; } ) ; } ) ;