diff --git a/packages/ckeditor5-table/tests/ui/colorinputview.js b/packages/ckeditor5-table/tests/ui/colorinputview.js index 6c9b3d903e1..44ad7d649ec 100644 --- a/packages/ckeditor5-table/tests/ui/colorinputview.js +++ b/packages/ckeditor5-table/tests/ui/colorinputview.js @@ -146,6 +146,14 @@ describe( 'ColorInputView', () => { expect( view.value ).to.equal( 'rgb(0,0,255)' ); } ); + it( 'should set input text #value to the selected color\'s label upon #execute', () => { + expect( inputView.value ).to.equal( '' ); + + colorGridView.items.last.fire( 'execute' ); + + expect( inputView.value ).to.equal( 'Blue' ); + } ); + it( 'should close the dropdown upon #execute', () => { view._dropdownView.isOpen = true; @@ -208,6 +216,15 @@ describe( 'ColorInputView', () => { expect( inputView.value ).to.equal( 'bar' ); } ); + it( `when the color input value is set to one of defined colors, + should use its label as the text input value`, () => { + view.value = 'rgb(0,255,0)'; + expect( inputView.value ).to.equal( 'Green' ); + + view.value = 'rgb(255,0,0)'; + expect( inputView.value ).to.equal( 'Red' ); + } ); + it( 'should have #isReadOnly bound to the color input', () => { view.isReadOnly = true; expect( inputView.isReadOnly ).to.equal( true ); @@ -236,6 +253,60 @@ describe( 'ColorInputView', () => { expect( view.value ).to.equal( 'bar' ); } ); + it( `when any defined color label is given as the text input #value (case-sensitive), + should set the color as #value on #input event`, () => { + inputView.element.value = 'Red'; + inputView.fire( 'input' ); + + expect( view.value ).to.equal( 'rgb(255,0,0)' ); + + inputView.element.value = 'Green'; + inputView.fire( 'input' ); + + expect( view.value ).to.equal( 'rgb(0,255,0)' ); + + inputView.element.value = 'blue'; + inputView.fire( 'input' ); + + expect( view.value ).to.equal( 'blue' ); + } ); + + it( `when any defined color label is given as the text input #value (case-sensitive), + then a non-defined value is set to the color input, + the latter value should be set to text input`, () => { + inputView.element.value = 'Red'; + inputView.fire( 'input' ); + + expect( view.value ).to.equal( 'rgb(255,0,0)' ); + + + view.value = 'rgb(0,0,255)'; + + expect( view.value ).to.equal( 'rgb(0,0,255)' ); + } ); + + it( `when any defined color value is given as the text input #value (case-sensitive), + its value should be set to color and text inputs after input event`, () => { + inputView.element.value = 'rgb(255,0,0)'; + inputView.fire( 'input' ); + + expect( view.value ).to.equal( 'rgb(255,0,0)' ); + expect( inputView.element.value ).to.equal( 'rgb(255,0,0)' ); + } ); + + it( `when any defined color value is given as the text input #value (case-sensitive), + its label should be set to text inputs after blur event on input view input element`, () => { + inputView.element.value = 'rgb(255,0,0)'; + + inputView.fire( 'input' ); + + expect( inputView.element.value ).to.equal( 'rgb(255,0,0)' ); + + inputView.element.dispatchEvent( new Event( 'blur' ) ); + + expect( inputView.element.value ).to.equal( 'Red' ); + } ); + it( 'should have #input event delegated to the color input', () => { const spy = sinon.spy(); view.on( 'input', spy );