Skip to content

Commit

Permalink
Adding unit and manual tests.
Browse files Browse the repository at this point in the history
  • Loading branch information
Mateusz Samsel committed Jun 29, 2017
1 parent 79da85a commit c69e723
Show file tree
Hide file tree
Showing 3 changed files with 258 additions and 0 deletions.
240 changes: 240 additions & 0 deletions tests/plugins/colordialog/collorbuttondialogs.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,240 @@
/* bender-tags: editor,unit */
/* bender-ckeditor-plugins: colorbutton,colordialog,toolbar,wysiwygarea */


( function() {
'use strict';

bender.editor = {};


var test = {
_createEditor: function( config, fn ) {
if ( bender.editor ) {
bender.editor.destroy();
}

var tc = this;

bender.editorBot.create( { config: config }, function( bot ) {
bender.editor = tc.editor = bot.editor;
tc.editorBot = bot;
fn.call( tc );
} );
},

// We need fresh instance of editor every time (#565).
'test adding hash (3) to color in background': function() {
this._createEditor( { name: 'editor1' }, function() {
var editor = this.editor,
bot = this.editorBot,
bgColorBtn = editor.ui.get( 'BGColor' );

// open panel
bgColorBtn.click( editor );
bot.setHtmlWithSelection( '<p>[foo]</p>' );
editor.once( 'dialogHide', function( evt ) {
resume( function() {
assert.areSame( '<p><span style="background-color:#aabbcc">foo</span></p>', evt.editor.getData() );
} );
} );

var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' );

item.click();

wait( function() {
editor.on( 'dialogShow', function( evt ) {
var dialog = evt.data;
dialog.setValueOf( 'picker', 'selectedColor', 'ABC' );
dialog.getButton( 'ok' ).click();
} );
} );
} );
},

'test adding hash (6) to color in background': function() {
this._createEditor( { name: 'editor1' }, function() {
var editor = this.editor,
bot = this.editorBot,
bgColorBtn = editor.ui.get( 'BGColor' );

// open panel
bgColorBtn.click( editor );
bot.setHtmlWithSelection( '<p>[foo]</p>' );
editor.once( 'dialogHide', function( evt ) {
resume( function() {
assert.areSame( '<p><span style="background-color:#123456">foo</span></p>', evt.editor.getData() );
} );
} );

var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' );

item.click();

wait( function() {
editor.on( 'dialogShow', function( evt ) {
var dialog = evt.data;
dialog.setValueOf( 'picker', 'selectedColor', '123456' );
dialog.getButton( 'ok' ).click();
} );
} );
} );
},

'test adding hash (3) to color in foreground': function() {
this._createEditor( { name: 'editor1' }, function() {
var editor = this.editor,
bot = this.editorBot,
txtColorBtn = editor.ui.get( 'TextColor' );

// open panel
txtColorBtn.click( editor );
bot.setHtmlWithSelection( '<p>[foo]</p>' );
editor.once( 'dialogHide', function( evt ) {
resume( function() {
assert.areSame( '<p><span style="color:#778899">foo</span></p>', evt.editor.getData() );
} );
} );

var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' );

item.click();

wait( function() {
editor.on( 'dialogShow', function( evt ) {
var dialog = evt.data;
dialog.setValueOf( 'picker', 'selectedColor', '789' );
dialog.getButton( 'ok' ).click();
} );
} );
} );
},

'test adding hash (6) to color in foreground': function() {
this._createEditor( { name: 'editor1' }, function() {
var editor = this.editor,
bot = this.editorBot,
txtColorBtn = editor.ui.get( 'TextColor' );

// open panel
txtColorBtn.click( editor );
bot.setHtmlWithSelection( '<p>[foo]</p>' );
editor.once( 'dialogHide', function( evt ) {
resume( function() {
assert.areSame( '<p><span style="color:#abcdef">foo</span></p>', evt.editor.getData() );
} );
} );

var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' );

item.click();

wait( function() {
editor.on( 'dialogShow', function( evt ) {
var dialog = evt.data;
dialog.setValueOf( 'picker', 'selectedColor', 'ABCDEF' );
dialog.getButton( 'ok' ).click();
} );
} );
} );
},

'test adding non hash color to background - color name': function() {
this._createEditor( { name: 'editor1' }, function() {
var editor = this.editor,
bot = this.editorBot,
bgColorBtn = editor.ui.get( 'BGColor' );

// open panel
bgColorBtn.click( editor );
bot.setHtmlWithSelection( '<p>[foo]</p>' );
editor.once( 'dialogHide', function( evt ) {
resume( function() {
assert.areSame( '<p><span style="background-color:blue">foo</span></p>', evt.editor.getData() );
} );
} );

var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' );

item.click();

wait( function() {
editor.on( 'dialogShow', function( evt ) {
var dialog = evt.data;
dialog.setValueOf( 'picker', 'selectedColor', 'blue' );
dialog.getButton( 'ok' ).click();
} );
} );
} );
},

'test adding non hash color to background - rgba()': function() {


this._createEditor( { name: 'editor1' }, function() {
var editor = this.editor,
bot = this.editorBot,
bgColorBtn = editor.ui.get( 'BGColor' );

// open panel
bgColorBtn.click( editor );
bot.setHtmlWithSelection( '<p>[foo]</p>' );
editor.once( 'dialogHide', function( evt ) {
resume( function() {
if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) {
assert.areSame( '<p>foo</p>', evt.editor.getData() );
} else {
assert.areSame( '<p><span style="background-color:rgba(10, 20, 30, 0.4)">foo</span></p>', evt.editor.getData() );
}
} );
} );

var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' );

item.click();

wait( function() {
editor.on( 'dialogShow', function( evt ) {
var dialog = evt.data;
dialog.setValueOf( 'picker', 'selectedColor', 'rgba(10, 20, 30, 0.4)' );
dialog.getButton( 'ok' ).click();
} );
} );
} );
},

'test adding non hash color to background - empty string': function() {
this._createEditor( { name: 'editor1' }, function() {
var editor = this.editor,
bot = this.editorBot,
bgColorBtn = editor.ui.get( 'BGColor' );

// open panel
bgColorBtn.click( editor );
bot.setHtmlWithSelection( '<p>[foo]</p>' );
editor.once( 'dialogHide', function( evt ) {
resume( function() {
assert.areSame( '<p>foo</p>', evt.editor.getData() );
} );
} );

var item = document.querySelector( '.cke_panel_frame' ).contentWindow.document.querySelector( '.cke_colormore' );

item.click();

wait( function() {
editor.on( 'dialogShow', function( evt ) {
var dialog = evt.data;
dialog.setValueOf( 'picker', 'selectedColor', '' );
dialog.getButton( 'ok' ).click();
} );
} );
} );
}


};

bender.test( test );
} )();
4 changes: 4 additions & 0 deletions tests/plugins/colordialog/manual/autohashadding.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<textarea id="editor">Hello World</textarea>
<script>
CKEDITOR.replace('editor');
</script>
14 changes: 14 additions & 0 deletions tests/plugins/colordialog/manual/autohashadding.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
@bender-tags: manual, tc, 4.8.0, feature, 565
@bender-ui: collapsed
@bender-ckeditor-plugins: colorbutton,colordialog,toolbar,wysiwygarea,sourcearea

1. Select text
1. Press `Text Colour`
1. Use option `More colours`
1. Type **by yourself** color in hex notation **without** `#` at the beginning. E.g (`880088`). **Do not use color picking from the left side.**
1. Color of seleted text should change
1. In source `#` should be added to color value
1. Now open `More colours` again and type 3-hexdigit color, also **without** `#` at the beginning. E.g (`0CF`)
1. Color also should change and source should be modifiaed with `#`
1. Now try to put values which are not correct. Like 4 digits, or number inside another string, or anything else what came to your mind. Those should not get additional `#` at the beginning
1. Repeat above steps for `Background Colour`

0 comments on commit c69e723

Please sign in to comment.