8
0
Просмотр исходного кода

Tests: Add manual test for highlight buttons in toolbar.

Maciej Gołaszewski 8 лет назад
Родитель
Сommit
c9d2012a23

+ 39 - 0
packages/ckeditor5-highlight/tests/manual/highlight-buttons.html

@@ -0,0 +1,39 @@
+<style>
+	.marker {
+		background-color: #ffff66;
+	}
+
+	.marker-green {
+		background-color: #66ff00;
+	}
+
+	.marker-pink {
+		background-color: #ff6fff;
+	}
+
+	.pen-red {
+		background-color: transparent;
+		color: #ff2929;
+	}
+
+	.pen-blue {
+		background-color: transparent;
+		color: #0091ff;
+	}
+</style>
+
+<div id="editor">
+	<p>Highlight feature example.</p>
+	<p>
+		Here are some markers:
+		<mark class="marker">yellow one</mark>, <mark class="marker-pink">pink one</mark> and <mark class="marker-green">green one</mark>.
+	</p>
+	<p>
+		Here are some pens:
+		<mark class="pen-red">red pen</mark> and <mark class="pen-blue">blue one</mark>.
+	</p>
+	<figure class="image">
+		<img src="sample.jpg" alt="CKEditor logo" />
+		<figcaption>Some image with caption and <mark class="marker">highlighted text</mark>.</figcaption>
+	</figure>
+</div>

+ 25 - 0
packages/ckeditor5-highlight/tests/manual/highlight-buttons.js

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '../../../ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '../../../ckeditor5-core/tests/_utils/articlepluginset';
+import Highlight from '../../src/highlight';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ ArticlePluginSet, Highlight ],
+		toolbar: [
+			'highlight:marker', 'highlight:pinkMarker', 'highlight:greenMarker', 'highlight:redPen', 'highlight:bluePen', 'removeHighlight',
+			'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
+		]
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 19 - 0
packages/ckeditor5-highlight/tests/manual/highlight-buttons.md

@@ -0,0 +1,19 @@
+### Loading
+
+1. The data should be loaded with different markers and pens.
+2. The toolbar should have 5 highlight buttons and one remove highlight button. 
+
+### Testing
+
+You should be able to:
+- see different markers class
+- manually invoke highlight command in console:
+
+```
+editor.execute( 'highlight', { class: 'marker' } );
+editor.execute( 'highlight', { class: 'marker-green' } );
+editor.execute( 'highlight', { class: 'marker-pink' } );
+	
+editor.execute( 'highlight', { class: 'pen-red' } );
+editor.execute( 'highlight', { class: 'pen-blue' } );	 
+```