describe ( 'Props / SettingsPanel' , ( ) => { beforeEach ( ( ) => { cy . visit ( '/' ) ; } ) ; it ( 'should be possible to change the props of a Text element' , ( ) => { cy . getByTestId ( 'card-top-text-1' ) . as ( 'text' ) . find ( 'p' ) . should ( 'have.css' , 'font-size' , '20px' ) . click ( ) ; cy . getByTestId ( 'settings-panel' ) . should ( 'exist' ) . find ( 'fieldset' ) . should ( 'have.length' , 1 ) ; cy . getByTestId ( 'chip-selected' ) . contains ( 'Text' ) ; cy . get ( '.MuiSlider-root' ) . click ( 'right' ) ; cy . get ( '@text' ) . find ( 'p' ) . should ( 'have.css' , 'font-size' , '50px' ) ; cy . get ( '.MuiSlider-root' ) . click ( 'left' ) ; cy . get ( '@text' ) . find ( 'p' ) . should ( 'have.css' , 'font-size' , '1px' ) ; } ) ; it ( 'should be possible to change the props for the button' , ( ) => { cy . getByTestId ( 'frame-button' ) . as ( 'button' ) . click ( ) ; cy . get ( '@button' ) . should ( 'have.class' , 'MuiButton-sizeSmall' ) . should ( 'have.class' , 'MuiButton-contained' ) . should ( 'have.class' , 'MuiButton-containedPrimary' ) ; cy . getByTestId ( 'settings-panel' ) . should ( 'exist' ) . find ( 'fieldset' ) . should ( 'have.length' , 3 ) ; cy . getByTestId ( 'chip-selected' ) . contains ( 'Button' ) ; cy . contains ( 'Medium' ) . click ( ) ; cy . contains ( 'Outlined' ) . click ( ) ; cy . contains ( 'Secondary' ) . click ( ) ; cy . get ( '@button' ) . should ( 'have.class' , 'MuiButton-outlined' ) . should ( 'have.class' , 'MuiButton-outlinedSecondary' ) ; cy . contains ( 'Large' ) . click ( ) ; cy . get ( '[role="radiogroup"]' ) . within ( ( ) => { cy . contains ( 'Text' ) . click ( ) ; } ) ; cy . contains ( 'Default' ) . click ( ) ; cy . get ( '@button' ) . should ( 'have.class' , 'MuiButton-sizeLarge' ) . should ( 'have.class' , 'MuiButton-text' ) . should ( 'have.class' , 'MuiButton-textSizeLarge' ) ; } ) ; it ( 'should be possible to change the props for the container' , ( ) => { [ { componentName : 'Card' , testId : 'frame-card' , initialBackgroundColor : 'rgb(255, 255, 255)' , initialPadding : '3px' , } , { componentName : 'Container' , testId : 'frame-container' , initialBackgroundColor : 'rgb(153, 153, 153)' , initialPadding : '6px' , } , ] . forEach ( ( { testId , initialBackgroundColor , initialPadding , componentName } ) => { cy . getByTestId ( testId ) . as ( 'container' ) . click ( 'left' ) ; cy . get ( '@container' ) . should ( 'have.css' , 'background-color' , initialBackgroundColor ) . should ( 'have.css' , 'padding' , initialPadding ) ; cy . getByTestId ( 'settings-panel' ) . should ( 'exist' ) . find ( 'fieldset' ) . should ( 'have.length' , 2 ) ; cy . getByTestId ( 'chip-selected' ) . contains ( componentName ) ; cy . get ( '[name="background-color"]' ) . as ( 'input-background-color' ) . focus ( ) . type ( '{selectAll}#FF0000' ) . blur ( ) ; cy . get ( '.MuiSlider-root' ) . as ( 'input-padding' ) . click ( 'right' ) ; cy . get ( '@container' ) . should ( 'have.css' , 'background-color' , 'rgb(255, 0, 0)' ) . should ( 'have.css' , 'padding' , '100px' ) ; cy . get ( '@input-background-color' ) . focus ( ) . type ( '{selectAll}#FFFF00' ) . blur ( ) ; cy . get ( '@input-padding' ) . click ( 'left' ) ; cy . get ( '@container' ) . should ( 'have.css' , 'background-color' , 'rgb(255, 255, 0)' ) . should ( 'have.css' , 'padding' , '0px' ) ; } ) ; } ) ; it ( 'CardTop and CardBottom should not have settings' , ( ) => { cy . getByTestId ( 'card-top' ) . click ( 'left' ) ; cy . getByTestId ( 'settings-panel' ) . should ( 'exist' ) . should ( 'not.be.visible' ) ; cy . getByTestId ( 'chip-selected' ) . contains ( 'CardTop' ) ; cy . getByTestId ( 'card-bottom' ) . click ( 'left' ) ; cy . getByTestId ( 'settings-panel' ) . should ( 'exist' ) . should ( 'not.be.visible' ) ; cy . getByTestId ( 'chip-selected' ) . contains ( 'CardBottom' ) ; } ) ; it ( 'should not be possible to edit the props / open the SettingsPanel when the editor is disabled' , ( ) => { cy . contains ( 'Enable' ) . click ( ) ; [ 'frame-text' , 'frame-button' , 'frame-container' , 'frame-card' , 'card-top' , 'card-bottom' , ] . forEach ( ( testId ) => { cy . getByTestId ( testId ) . click ( ) ; cy . getByTestId ( 'settings-panel' ) . should ( 'not.exist' ) ; } ) ; } ) ; } ) ;