|
@@ -3,6 +3,8 @@
|
|
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
|
*/
|
|
*/
|
|
|
|
|
|
|
|
|
|
+/* global Event */
|
|
|
|
|
+
|
|
|
import ColorInputView from '../../src/ui/colorinputview';
|
|
import ColorInputView from '../../src/ui/colorinputview';
|
|
|
import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
|
|
import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
|
|
|
import ColorGridView from '@ckeditor/ckeditor5-ui/src/colorgrid/colorgridview';
|
|
import ColorGridView from '@ckeditor/ckeditor5-ui/src/colorgrid/colorgridview';
|
|
@@ -138,7 +140,7 @@ describe( 'ColorInputView', () => {
|
|
|
expect( colorGridView ).to.be.instanceOf( ColorGridView );
|
|
expect( colorGridView ).to.be.instanceOf( ColorGridView );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'should set #value upon #execute', () => {
|
|
|
|
|
|
|
+ it( 'should set ColorInputView#value upon ColorTileView#execute', () => {
|
|
|
expect( view.value ).to.equal( '' );
|
|
expect( view.value ).to.equal( '' );
|
|
|
|
|
|
|
|
colorGridView.items.last.fire( 'execute' );
|
|
colorGridView.items.last.fire( 'execute' );
|
|
@@ -146,7 +148,15 @@ describe( 'ColorInputView', () => {
|
|
|
expect( view.value ).to.equal( 'rgb(0,0,255)' );
|
|
expect( view.value ).to.equal( 'rgb(0,0,255)' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'should close the dropdown upon #execute', () => {
|
|
|
|
|
|
|
+ it( 'should set InputTextView#value to the selected color\'s label upon ColorTileView#execute', () => {
|
|
|
|
|
+ expect( inputView.value ).to.equal( '' );
|
|
|
|
|
+
|
|
|
|
|
+ colorGridView.items.last.fire( 'execute' );
|
|
|
|
|
+
|
|
|
|
|
+ expect( inputView.value ).to.equal( 'Blue' );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should close the dropdown upon ColorTileView#execute', () => {
|
|
|
view._dropdownView.isOpen = true;
|
|
view._dropdownView.isOpen = true;
|
|
|
|
|
|
|
|
colorGridView.items.last.fire( 'execute' );
|
|
colorGridView.items.last.fire( 'execute' );
|
|
@@ -154,7 +164,7 @@ describe( 'ColorInputView', () => {
|
|
|
expect( view._dropdownView.isOpen ).to.be.false;
|
|
expect( view._dropdownView.isOpen ).to.be.false;
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'should fire #input upon #execute', () => {
|
|
|
|
|
|
|
+ it( 'should fire the ColorInputView#input event upon ColorTileView#execute', () => {
|
|
|
const spy = sinon.spy( view, 'fire' );
|
|
const spy = sinon.spy( view, 'fire' );
|
|
|
|
|
|
|
|
colorGridView.items.last.fire( 'execute' );
|
|
colorGridView.items.last.fire( 'execute' );
|
|
@@ -208,6 +218,15 @@ describe( 'ColorInputView', () => {
|
|
|
expect( inputView.value ).to.equal( 'bar' );
|
|
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', () => {
|
|
it( 'should have #isReadOnly bound to the color input', () => {
|
|
|
view.isReadOnly = true;
|
|
view.isReadOnly = true;
|
|
|
expect( inputView.isReadOnly ).to.equal( true );
|
|
expect( inputView.isReadOnly ).to.equal( true );
|
|
@@ -236,6 +255,71 @@ describe( 'ColorInputView', () => {
|
|
|
expect( view.value ).to.equal( 'bar' );
|
|
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', () => {
|
|
it( 'should have #input event delegated to the color input', () => {
|
|
|
const spy = sinon.spy();
|
|
const spy = sinon.spy();
|
|
|
view.on( 'input', spy );
|
|
view.on( 'input', spy );
|