Parcourir la source

Simplified manual test checking integration with HTML forms.

Szymon Kupś il y a 8 ans
Parent
commit
f1a80d6786

+ 0 - 35
packages/ckeditor5-core/tests/_utils/echo-server.js

@@ -1,35 +0,0 @@
-/**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* eslint-env node */
-
-/**
- * Simple HTTP server which parses POST requests and returns it in JSON format.
- */
-const http = require( 'http' );
-const queryString = require( 'querystring' );
-const port = 3030;
-
-const server = http.createServer( ( req, res ) => {
-	const methodName = req.method;
-	let content = '';
-
-	console.info( `Incoming ${ methodName } request.` );
-
-	if ( methodName == 'POST' ) {
-		res.writeHead( 200, { 'Content-Type': 'application/json' } );
-
-		req.on( 'data', data => ( content += data ) );
-		req.on( 'end', () => res.end( JSON.stringify( queryString.parse( content ) ) ) );
-
-		return;
-	}
-
-	res.writeHead( 200, { 'Content-Type': 'text' } );
-	res.end( 'Please make a POST request to get an echo response.' );
-} );
-
-console.info( `Starting server on port ${ port }.` );
-server.listen( port );

+ 11 - 1
packages/ckeditor5-core/tests/manual/formsubmit.html

@@ -1,6 +1,16 @@
+<style>
+	textarea#editor {
+		display: block !important;
+		width: 100%;
+		height: 100px;
+		margin-bottom: 20px;
+	}
+</style>
+
 <form id="form" action="http://localhost:3030" method="post">
+	<p>Replaced element (normally hidden): </p>
 	<textarea name="editor" id="editor"><p>foo bar baz</p></textarea>
-	<button type="submit">Submit form</button>
+	<button id="submit-button" type="submit">Submit form</button>
 </form>
 <br />
 <button id="submit-with-js">Submit by calling form.submit()</button>

+ 8 - 3
packages/ckeditor5-core/tests/manual/formsubmit.js

@@ -10,6 +10,9 @@ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
 import ArticlePreset from '@ckeditor/ckeditor5-presets/src/article';
 import ContextualToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/contextual/contextualtoolbar';
 
+// Replace original submit method to prevent page reload.
+document.getElementById( 'form' ).submit = () => {};
+
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ ArticlePreset, ContextualToolbar ],
@@ -21,12 +24,14 @@ ClassicEditor
 	} )
 	.then( editor => {
 		window.editor = editor;
+		const form = document.getElementById( 'form' );
+
+		document.getElementById( 'submit-with-js' ).addEventListener( 'click', () => form.submit() );
 
-		document.getElementById( 'submit-with-js' ).addEventListener( 'click', () => {
-			document.getElementById( 'form' ).submit();
+		form.addEventListener( 'submit', evt => {
+			evt.preventDefault();
 		} );
 	} )
 	.catch( err => {
 		console.error( err.stack );
 	} );
-

+ 2 - 5
packages/ckeditor5-core/tests/manual/formsubmit.md

@@ -1,7 +1,4 @@
 ## Updating editor element when submitting a form
 
-1. Start simple HTTP server located in `ckeditor5-core/tests/_utils/` by calling `node echo-server.js`.
-1. Change editor's contents and press `Submit form` button. You should be redirected to a page which echoes POST data.
-Check if submitted contents match editor contents.
-1. Go back to test page and refresh it. Change editor contents and press `Submit by calling form.submit()` button.
-You should be redirected to a page which echoes POST data. Check if submitted contents match editor contents.
+1. Change editor's contents and press `Submit form` button. Check if contents inside replaced element are updated.
+1. Change editor contents again and press `Submit by calling form.submit()` button. Check if contents inside replaced element are updated.