8
0
Pārlūkot izejas kodu

Tests: Updated various manual tests to the View#render API.

Aleksander Nowodzinski 8 gadi atpakaļ
vecāks
revīzija
bf84c52a0e

+ 1 - 1
packages/ckeditor5-ui/src/dropdown/createdropdown.js

@@ -24,7 +24,7 @@ import DropdownPanelView from './dropdownpanelview';
  *
  *		const dropdown = createDropdown( model );
  *
- *		dropdown.init();
+ *		dropdown.render();
  *
  *		// Will render a dropdown labeled "A dropdown" with an empty panel.
  *		document.body.appendChild( dropdown.element );

+ 1 - 1
packages/ckeditor5-ui/src/dropdown/dropdownview.js

@@ -24,7 +24,7 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
  *			withText: true
  *		} );
  *
- *		dropdown.init();
+ *		dropdown.render();
  *
  *		// Will render a dropdown with a panel containing a "Content of the panel" text.
  *		document.body.appendChild( dropdown.element );

+ 9 - 6
packages/ckeditor5-ui/tests/_utils/utils.js

@@ -12,21 +12,24 @@ import View from '../../src/view';
  */
 const utils = {
 	/**
-	 * Returns UI controller for given region/DOM selector pairs, which {@link ui.Controller#view}
+	 * Returns a view for a given region/DOM selector pairs, which {@link module:ui/view~View#element}
 	 * is `document.body`. It is useful for manual tests which engage various UI components and/or
-	 * UI {@link ui.Controller} instances, where initialization and the process of insertion into
+	 * UI {@link module:ui/view~View} instances, where initialization and the process of insertion into
 	 * DOM could be problematic i.e. because of the number of instances.
 	 *
 	 * Usage:
 	 *
-	 *		// Get the controller.
-	 *		const controller = testUtils.createTestUIView();
+	 *		// Get the view.
+	 *		const view = testUtils.createTestUIView( {
+	 *			'some-collection': '#collection'
+	 *		} );
 	 *
 	 *		// Then use it to organize and initialize children.
-	 *		controller.add( 'some-collection', childControllerInstance );
+	 *		view.add( 'some-collection', childControllerInstance );
 	 *
 	 * @param {Object} regions An object literal with `regionName: [DOM Selector|callback]` pairs.
-	 * See {@link ui.View#register}.
+	 *
+	 * See {@link module:ui/view~View#createCollection}.
 	 */
 	createTestUIView( regions ) {
 		const TestUIView = class extends View {

+ 14 - 11
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* globals document, window */
+/* globals window */
 
 import Model from '../../../src/model';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
@@ -12,11 +12,14 @@ import createDropdown from '../../../src/dropdown/createdropdown';
 import createListDropdown from '../../../src/dropdown/list/createlistdropdown';
 
 import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
+import testUtils from '@ckeditor/ckeditor5-ui/tests/_utils/utils';
 
-function renderInto( selector, view ) {
-	view.init();
-	document.querySelector( selector ).appendChild( view.element );
-}
+const ui = testUtils.createTestUIView( {
+	dropdown: '#dropdown',
+	listDropdown: '#list-dropdown',
+	dropdownShared: '#dropdown-shared',
+	dropdownLabel: '#dropdown-label'
+} );
 
 function testEmpty() {
 	const dropdownView = createDropdown( new Model( {
@@ -26,9 +29,9 @@ function testEmpty() {
 		withText: true
 	} ) );
 
-	dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
+	ui.dropdown.add( dropdownView );
 
-	renderInto( '#dropdown', dropdownView );
+	dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
 }
 
 function testList() {
@@ -56,7 +59,7 @@ function testList() {
 		console.log( 'List#execute:', evt.source.label );
 	} );
 
-	renderInto( '#list-dropdown', dropdownView );
+	ui.listDropdown.add( dropdownView );
 
 	window.listDropdownModel = model;
 	window.listDropdownCollection = collection;
@@ -74,8 +77,8 @@ function testSharedModel() {
 	const dropdownView1 = createDropdown( model );
 	const dropdownView2 = createDropdown( model );
 
-	renderInto( '#dropdown-shared', dropdownView1 );
-	renderInto( '#dropdown-shared', dropdownView2 );
+	ui.dropdownShared.add( dropdownView1 );
+	ui.dropdownShared.add( dropdownView2 );
 
 	dropdownView1.panelView.element.innerHTML = dropdownView2.panelView.element.innerHTML = 'Empty panel.';
 }
@@ -88,7 +91,7 @@ function testLongLabel() {
 		withText: true
 	} ) );
 
-	renderInto( '#dropdown-label', dropdownView );
+	ui.dropdownLabel.add( dropdownView );
 
 	dropdownView.panelView.element.innerHTML = 'Empty panel. There is no child view in this DropdownPanelView.';
 }

+ 1 - 1
packages/ckeditor5-ui/tests/manual/icon/icon.js

@@ -59,8 +59,8 @@ addCase( iconWrapper );
 function renderIcon( content, size, color ) {
 	const iconView = new IconView();
 
+	iconView.render();
 	iconView.content = content;
-	iconView.init();
 
 	if ( size ) {
 		iconView.element.style.width = `${ size }px`;

+ 0 - 33
packages/ckeditor5-ui/tests/manual/imagetoolbar/imagetoolbar.html

@@ -1,33 +0,0 @@
-<div id="editor">
-	<p><i>This</i> is a <strong>first line</strong> of text.</p>
-	<figure class="image">
-		<img src="sample.jpg" alt="CKEditor logo" />
-	</figure>
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Sint ista Graecorum;</i> Istam voluptatem, inquit, Epicurus ignorat? <b>Idem iste, inquam, de voluptate quid sentit?</b> <mark>Peccata paria.</mark> Omnes enim iucundum motum, quo sensus hilaretur. Quae iam oratio non a philosopho aliquo, sed a censore opprimenda est. </p>
-	<p>Sed hoc sane concedamus. Quamvis enim depravatae non sint, pravae tamen esse possunt. Non dolere, inquam, istud quam vim habeat postea videro; Nam adhuc, meo fortasse vitio, quid ego quaeram non perspicis. Expectoque quid ad id, quod quaerebam, respondeas. Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam. </p>
-	<p>Parvi enim primo ortu sic iacent, tamquam omnino sine animo sint. Vide, quantum, inquam, fallare, Torquate. Bonum integritas corporis: misera debilitas. Quae autem natura suae primae institutionis oblita est? </p>
-	<p>Nemo igitur esse beatus potest. Etsi ea quidem, quae adhuc dixisti, quamvis ad aetatem recte isto modo dicerentur. <i>Sed fortuna fortis;</i> <b>An nisi populari fama?</b> Paupertas si malum est, mendicus beatus esse nemo potest, quamvis sit sapiens. Ait enim se, si uratur, Quam hoc suave! dicturum. <i>Minime vero, inquit ille, consentit.</i> Esse enim, nisi eris, non potes. </p>
-	<p>Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus. <i>Duo Reges: constructio interrete.</i> Non enim solum Torquatus dixit quid sentiret, sed etiam cur. Obsecro, inquit, Torquate, haec dicit Epicurus? Primum divisit ineleganter; </p>
-	<p><em>This</em> is the <strong>end</strong> of text.</p>
-	<figure class="image">
-		<img src="sample.jpg" alt="CKEditor logo" />
-	</figure>
-</div>
-
-<style>
-	.ck-editor {
-		margin: 5em auto;
-		max-width: 70%;
-	}
-
-	.ck-editor .image {
-		font-size: 0;
-		line-height: 0;
-		max-width: 80%;
-		margin: 0 auto;
-	}
-
-	.ck-editor .image img {
-		max-width: 100%;
-	}
-</style>

+ 0 - 97
packages/ckeditor5-ui/tests/manual/imagetoolbar/imagetoolbar.js

@@ -1,97 +0,0 @@
-/**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* globals window, document, console:false */
-
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Typing from '@ckeditor/ckeditor5-typing/src/typing';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
-import Image from '@ckeditor/ckeditor5-image/src/image';
-import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
-
-import ToolbarView from '../../../src/toolbar/toolbarview';
-import BalloonPanelView from '../../../src/panel/balloon/balloonpanelview';
-
-ClassicEditor
-	.create( document.querySelector( '#editor' ), {
-		plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Image ],
-		toolbar: [ 'bold', 'italic', 'undo', 'redo' ]
-	} )
-	.then( editor => {
-		createImageToolbar( editor );
-
-		window.editor = editor;
-	} )
-	.catch( err => {
-		console.error( err.stack );
-	} );
-
-function createImageToolbar( editor ) {
-	// Create a plain toolbar instance.
-	const toolbar = new ToolbarView();
-
-	// Create a BalloonPanelView instance.
-	const panel = new BalloonPanelView( editor.locale );
-
-	panel.extendTemplate( {
-		attributes: {
-			class: [
-				'ck-toolbar-container',
-			]
-		}
-	} );
-
-	// Putting the toolbar inside of the balloon panel.
-	panel.content.add( toolbar );
-
-	editor.ui.view.body.add( panel ).then( () => {
-		const editingView = editor.editing.view;
-
-		// Fill the toolbar with some buttons. Simply copy default editor toolbar.
-		toolbar.fillFromConfig( editor.config.get( 'toolbar' ), editor.ui.componentFactory );
-
-		// Let the focusTracker know about new focusable UI element.
-		editor.ui.focusTracker.add( panel.element );
-
-		// Hide the panel when editor loses focus but no the other way around.
-		panel.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, is, was ) => {
-			if ( was && !is ) {
-				panel.hide();
-			}
-		} );
-
-		editingView.addObserver( ClickObserver );
-
-		// Check if the toolbar should be displayed each time the user clicked in editable.
-		editor.listenTo( editingView, 'click', () => {
-			if ( editingView.selection.isFake ) {
-				attachToolbar();
-
-				// TODO: These 2 need interval–based event debouncing for performance
-				// reasons. I guess even lodash offers such a helper.
-				editor.ui.view.listenTo( window, 'scroll', attachToolbar );
-				editor.ui.view.listenTo( window, 'resize', attachToolbar );
-			} else {
-				panel.hide();
-
-				editor.ui.view.stopListening( window, 'scroll', attachToolbar );
-				editor.ui.view.stopListening( window, 'resize', attachToolbar );
-			}
-		} );
-
-		function attachToolbar() {
-			const defaultPositions = BalloonPanelView.defaultPositions;
-
-			panel.attachTo( {
-				target: editingView.domConverter.viewRangeToDom( editingView.selection.getFirstRange() ),
-				positions: [ defaultPositions.northArrowSouth, defaultPositions.southArrowNorth ]
-			} );
-		}
-	} );
-}

+ 0 - 6
packages/ckeditor5-ui/tests/manual/imagetoolbar/imagetoolbar.md

@@ -1,6 +0,0 @@
-## Image toolbar demo
-
-1. Click on the image (select it).
-1. A toolbar should appear, pinned to the horizontal middle point on the top of the image.
-1. Scroll the window – the toolbar should change it's position to remain visible for as long as possible.
-1. Resize the window – the toolbar should remain pinned to the image.

BIN
packages/ckeditor5-ui/tests/manual/imagetoolbar/sample.jpg


+ 1 - 0
packages/ckeditor5-ui/tests/manual/panel/balloon/balloonpanelview.js

@@ -17,6 +17,7 @@ for ( const i in defaultPositions ) {
 	container.appendChild( target );
 
 	const balloon = new BalloonPanelView();
+	balloon.render();
 	balloon.element.textContent = i;
 	document.body.appendChild( balloon.element );
 

+ 2 - 2
packages/ckeditor5-ui/tests/manual/panel/sticky/stickypanelview.html

@@ -62,12 +62,12 @@
 		position: relative;
 	}
 
-	.ck-sticky-panel {
+	.ck-sticky-panel__content {
 		background: yellow !important;
 		padding: 1em;
 	}
 
-	.ck-sticky-panel:after {
+	.ck-sticky-panel__content:after {
 		content: "A sticky panel mock–up.";
 	}
 

+ 1 - 1
packages/ckeditor5-ui/tests/manual/tickets/126/1.js

@@ -12,8 +12,8 @@ import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
 window.createPanel = selector => {
 	const view = new BalloonPanelView();
 
+	view.render();
 	view.element.innerHTML = `Parent of this panel has position:${ selector }.`;
-	view.init();
 
 	document.querySelector( `#${ selector }-container` ).appendChild( view.element );
 

+ 2 - 2
packages/ckeditor5-ui/tests/manual/tickets/170/1.js

@@ -21,8 +21,8 @@ ClassicEditor
 	.then( editor => {
 		const panel = new BalloonPanelView();
 
-		panel.element.innerHTML = 'Balloon content.';
 		editor.ui.view.body.add( panel );
+		panel.element.innerHTML = 'Balloon content.';
 
 		editor.ui.view.element.querySelector( '.ck-editor__editable' ).scrollTop = 360;
 
@@ -46,8 +46,8 @@ ClassicEditor
 	.then( editor => {
 		const panel = new BalloonPanelView();
 
-		panel.element.innerHTML = 'Balloon content.';
 		editor.ui.view.body.add( panel );
+		panel.element.innerHTML = 'Balloon content.';
 
 		editor.ui.view.element.querySelector( '.ck-editor__editable' ).scrollTop = 360;