|
@@ -16,6 +16,29 @@ import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
|
|
|
import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
|
|
import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
|
|
|
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
|
|
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
|
|
|
import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
|
|
import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
|
|
|
|
|
+import ColorInputView from '../../../src/ui/colorinputview';
|
|
|
|
|
+
|
|
|
|
|
+const VIEW_OPTIONS = {
|
|
|
|
|
+ borderColors: [
|
|
|
|
|
+ {
|
|
|
|
|
+ model: 'rgb(255,0,0)',
|
|
|
|
|
+ label: 'Red',
|
|
|
|
|
+ hasBorder: false
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ model: 'rgb(0,0,255)',
|
|
|
|
|
+ label: 'Blue',
|
|
|
|
|
+ hasBorder: false
|
|
|
|
|
+ }
|
|
|
|
|
+ ],
|
|
|
|
|
+ backgroundColors: [
|
|
|
|
|
+ {
|
|
|
|
|
+ model: 'rgb(0,255,0)',
|
|
|
|
|
+ label: 'Green',
|
|
|
|
|
+ hasBorder: false
|
|
|
|
|
+ },
|
|
|
|
|
+ ]
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
describe( 'table properties', () => {
|
|
describe( 'table properties', () => {
|
|
|
describe( 'TablePropertiesView', () => {
|
|
describe( 'TablePropertiesView', () => {
|
|
@@ -25,7 +48,7 @@ describe( 'table properties', () => {
|
|
|
|
|
|
|
|
beforeEach( () => {
|
|
beforeEach( () => {
|
|
|
locale = { t: val => val };
|
|
locale = { t: val => val };
|
|
|
- view = new TablePropertiesView( locale );
|
|
|
|
|
|
|
+ view = new TablePropertiesView( locale, VIEW_OPTIONS );
|
|
|
view.render();
|
|
view.render();
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -34,6 +57,10 @@ describe( 'table properties', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
describe( 'constructor()', () => {
|
|
describe( 'constructor()', () => {
|
|
|
|
|
+ it( 'should set view#options', () => {
|
|
|
|
|
+ expect( view.options ).to.deep.equal( VIEW_OPTIONS );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
it( 'should set view#locale', () => {
|
|
it( 'should set view#locale', () => {
|
|
|
expect( view.locale ).to.equal( locale );
|
|
expect( view.locale ).to.equal( locale );
|
|
|
} );
|
|
} );
|
|
@@ -198,10 +225,33 @@ describe( 'table properties', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should be created', () => {
|
|
it( 'should be created', () => {
|
|
|
- expect( labeledInput.view ).to.be.instanceOf( InputTextView );
|
|
|
|
|
|
|
+ expect( labeledInput.view ).to.be.instanceOf( ColorInputView );
|
|
|
expect( labeledInput.label ).to.equal( 'Color' );
|
|
expect( labeledInput.label ).to.equal( 'Color' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
|
|
+ it( 'should get the color configuration', () => {
|
|
|
|
|
+ expect( labeledInput.view.options.colorDefinitions ).to.deep.equal( [
|
|
|
|
|
+ {
|
|
|
|
|
+ color: 'rgb(255,0,0)',
|
|
|
|
|
+ label: 'Red',
|
|
|
|
|
+ options: {
|
|
|
|
|
+ hasBorder: false
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ color: 'rgb(0,0,255)',
|
|
|
|
|
+ label: 'Blue',
|
|
|
|
|
+ options: {
|
|
|
|
|
+ hasBorder: false
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ ] );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should obtain the columns configuration', () => {
|
|
|
|
|
+ expect( labeledInput.view.options.columns ).to.equal( 5 );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
it( 'should reflect #borderColor property', () => {
|
|
it( 'should reflect #borderColor property', () => {
|
|
|
view.borderColor = 'foo';
|
|
view.borderColor = 'foo';
|
|
|
expect( labeledInput.view.value ).to.equal( 'foo' );
|
|
expect( labeledInput.view.value ).to.equal( 'foo' );
|
|
@@ -219,11 +269,11 @@ describe( 'table properties', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should update #borderColor on DOM "input" event', () => {
|
|
it( 'should update #borderColor on DOM "input" event', () => {
|
|
|
- labeledInput.view.element.value = 'foo';
|
|
|
|
|
|
|
+ labeledInput.view.value = 'foo';
|
|
|
labeledInput.view.fire( 'input' );
|
|
labeledInput.view.fire( 'input' );
|
|
|
expect( view.borderColor ).to.equal( 'foo' );
|
|
expect( view.borderColor ).to.equal( 'foo' );
|
|
|
|
|
|
|
|
- labeledInput.view.element.value = 'bar';
|
|
|
|
|
|
|
+ labeledInput.view.value = 'bar';
|
|
|
labeledInput.view.fire( 'input' );
|
|
labeledInput.view.fire( 'input' );
|
|
|
expect( view.borderColor ).to.equal( 'bar' );
|
|
expect( view.borderColor ).to.equal( 'bar' );
|
|
|
} );
|
|
} );
|
|
@@ -246,11 +296,27 @@ describe( 'table properties', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should be created', () => {
|
|
it( 'should be created', () => {
|
|
|
- expect( labeledInput.view ).to.be.instanceOf( InputTextView );
|
|
|
|
|
|
|
+ expect( labeledInput.view ).to.be.instanceOf( ColorInputView );
|
|
|
expect( labeledInput.label ).to.equal( 'Background' );
|
|
expect( labeledInput.label ).to.equal( 'Background' );
|
|
|
expect( labeledInput.class ).to.equal( 'ck-table-properties-form__background' );
|
|
expect( labeledInput.class ).to.equal( 'ck-table-properties-form__background' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
|
|
+ it( 'should get the color configuration', () => {
|
|
|
|
|
+ expect( labeledInput.view.options.colorDefinitions ).to.deep.equal( [
|
|
|
|
|
+ {
|
|
|
|
|
+ color: 'rgb(0,255,0)',
|
|
|
|
|
+ label: 'Green',
|
|
|
|
|
+ options: {
|
|
|
|
|
+ hasBorder: false
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ ] );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should obtain the columns configuration', () => {
|
|
|
|
|
+ expect( labeledInput.view.options.columns ).to.equal( 5 );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
it( 'should reflect #backgroundColor property', () => {
|
|
it( 'should reflect #backgroundColor property', () => {
|
|
|
view.backgroundColor = 'foo';
|
|
view.backgroundColor = 'foo';
|
|
|
expect( labeledInput.view.value ).to.equal( 'foo' );
|
|
expect( labeledInput.view.value ).to.equal( 'foo' );
|
|
@@ -260,11 +326,11 @@ describe( 'table properties', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should update #backgroundColor on DOM "input" event', () => {
|
|
it( 'should update #backgroundColor on DOM "input" event', () => {
|
|
|
- labeledInput.view.element.value = 'foo';
|
|
|
|
|
|
|
+ labeledInput.view.value = 'foo';
|
|
|
labeledInput.view.fire( 'input' );
|
|
labeledInput.view.fire( 'input' );
|
|
|
expect( view.backgroundColor ).to.equal( 'foo' );
|
|
expect( view.backgroundColor ).to.equal( 'foo' );
|
|
|
|
|
|
|
|
- labeledInput.view.element.value = 'bar';
|
|
|
|
|
|
|
+ labeledInput.view.value = 'bar';
|
|
|
labeledInput.view.fire( 'input' );
|
|
labeledInput.view.fire( 'input' );
|
|
|
expect( view.backgroundColor ).to.equal( 'bar' );
|
|
expect( view.backgroundColor ).to.equal( 'bar' );
|
|
|
} );
|
|
} );
|
|
@@ -276,7 +342,7 @@ describe( 'table properties', () => {
|
|
|
const row = view.element.childNodes[ 3 ].childNodes[ 0 ];
|
|
const row = view.element.childNodes[ 3 ].childNodes[ 0 ];
|
|
|
|
|
|
|
|
expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
|
|
expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
|
|
|
- expect( row.classList.contains( 'ck-table-properties-form__dimensions-row' ) ).to.be.true;
|
|
|
|
|
|
|
+ expect( row.classList.contains( 'ck-table-form__dimensions-row' ) ).to.be.true;
|
|
|
expect( row.childNodes[ 0 ].textContent ).to.equal( 'Dimensions' );
|
|
expect( row.childNodes[ 0 ].textContent ).to.equal( 'Dimensions' );
|
|
|
expect( row.childNodes[ 1 ] ).to.equal( view.widthInput.element );
|
|
expect( row.childNodes[ 1 ] ).to.equal( view.widthInput.element );
|
|
|
expect( row.childNodes[ 2 ].textContent ).to.equal( '×' );
|
|
expect( row.childNodes[ 2 ].textContent ).to.equal( '×' );
|
|
@@ -293,7 +359,7 @@ describe( 'table properties', () => {
|
|
|
it( 'should be created', () => {
|
|
it( 'should be created', () => {
|
|
|
expect( labeledInput.view ).to.be.instanceOf( InputTextView );
|
|
expect( labeledInput.view ).to.be.instanceOf( InputTextView );
|
|
|
expect( labeledInput.label ).to.equal( 'Width' );
|
|
expect( labeledInput.label ).to.equal( 'Width' );
|
|
|
- expect( labeledInput.class ).to.equal( 'ck-table-properties-form__width' );
|
|
|
|
|
|
|
+ expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__width' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should reflect #width property', () => {
|
|
it( 'should reflect #width property', () => {
|
|
@@ -325,7 +391,7 @@ describe( 'table properties', () => {
|
|
|
it( 'should be created', () => {
|
|
it( 'should be created', () => {
|
|
|
expect( labeledInput.view ).to.be.instanceOf( InputTextView );
|
|
expect( labeledInput.view ).to.be.instanceOf( InputTextView );
|
|
|
expect( labeledInput.label ).to.equal( 'Height' );
|
|
expect( labeledInput.label ).to.equal( 'Height' );
|
|
|
- expect( labeledInput.class ).to.equal( 'ck-table-properties-form__height' );
|
|
|
|
|
|
|
+ expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__height' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should reflect #height property', () => {
|
|
it( 'should reflect #height property', () => {
|
|
@@ -515,7 +581,7 @@ describe( 'table properties', () => {
|
|
|
|
|
|
|
|
it( 'should register child views\' #element in #focusTracker', () => {
|
|
it( 'should register child views\' #element in #focusTracker', () => {
|
|
|
const spy = testUtils.sinon.spy( FocusTracker.prototype, 'add' );
|
|
const spy = testUtils.sinon.spy( FocusTracker.prototype, 'add' );
|
|
|
- const view = new TablePropertiesView( { t: val => val } );
|
|
|
|
|
|
|
+ const view = new TablePropertiesView( { t: val => val }, VIEW_OPTIONS );
|
|
|
view.render();
|
|
view.render();
|
|
|
|
|
|
|
|
sinon.assert.calledWith( spy, view.borderStyleDropdown.element );
|
|
sinon.assert.calledWith( spy, view.borderStyleDropdown.element );
|
|
@@ -532,7 +598,7 @@ describe( 'table properties', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'starts listening for #keystrokes coming from #element', () => {
|
|
it( 'starts listening for #keystrokes coming from #element', () => {
|
|
|
- const view = new TablePropertiesView( { t: val => val } );
|
|
|
|
|
|
|
+ const view = new TablePropertiesView( { t: val => val }, VIEW_OPTIONS );
|
|
|
const spy = sinon.spy( view.keystrokes, 'listenTo' );
|
|
const spy = sinon.spy( view.keystrokes, 'listenTo' );
|
|
|
|
|
|
|
|
view.render();
|
|
view.render();
|