t/529: Feature: Enabled CKEditorWebpackPlugin in `getWebpackCo… (#530)

Feature: Enabled `CKEditorWebpackPlugin` in `getWebpackConfigForManualTests()`. Allowed configuring `language` and `additionalLanguages`. Closes #529.

packages/ckeditor5-dev-tests/lib/tasks/runmanualtests.js

@@ -19,19 +19,36 @@ const transformFileOptionToTestGlob = require( '../utils/transformfileoptiontote
  * Main function that runs manual tests.
  *
  * @param {Object} options
- * @param {Array.<String>} options.files
+ * @param {Array.<String>} options.files Glob patterns specifying which tests to run.
+ * @param {String} options.themePath A path to the theme the PostCSS theme-importer plugin is supposed to load.
+ * @param {String} [options.language] A language passed to `CKEditorWebpackPlugin`.
+ * @param {Array.<String>} [options.additionalLanguages] Additional languages passed to `CKEditorWebpackPlugin`.
  * @returns {Promise}
  */
 module.exports = function runManualTests( options ) {
 	const buildDir = path.join( process.cwd(), 'build', '.manual-tests' );
 	const files = ( options.files && options.files.length ) ? options.files : [ '*' ];
-	const manualTestFilesPattern = files.map( file => transformFileOptionToTestGlob( file, true ) );
+	const patterns = files.map( file => transformFileOptionToTestGlob( file, true ) );
+	const themePath = options.themePath || null;
+	const language = options.language;
+	const additionalLanguages = options.additionalLanguages;
 
 	return Promise.resolve()
 		.then( () => removeDir( buildDir ) )
 		.then( () => Promise.all( [
-			compileManualTestScripts( buildDir, manualTestFilesPattern, options.themePath ),
-			compileManualTestHtmlFiles( buildDir, manualTestFilesPattern ),
+			compileManualTestScripts( {
+				buildDir,
+				patterns,
+				themePath,
+				language,
+				additionalLanguages
+			} ),
+			compileManualTestHtmlFiles( {
+				buildDir,
+				patterns,
+				language,
+				additionalLanguages
+			} ),
 			copyAssets( buildDir )
 		] ) )
 		.then( () => createManualTestServer( buildDir ) );

packages/ckeditor5-dev-tests/lib/utils/automated-tests/parsearguments.js

@@ -56,6 +56,10 @@ module.exports = function parseArguments( args ) {
 		options.files = options.files.split( ',' );
 	}
 
+	options.language = options.language || 'en';
+	options.additionalLanguages = options.additionalLanguages ? options.additionalLanguages.split( ',' ) : null;
+	options.themePath = options.themePath ? options.themePath : null;
+
 	// Delete all aliases because we don't want to use them in the code.
 	// They are useful when calling command but useless after that.
 	for ( const alias of Object.keys( minimistConfig.alias ) ) {

packages/ckeditor5-dev-tests/lib/utils/manual-tests/compilehtmlfiles.js

@@ -22,14 +22,18 @@ const reader = new commonmark.Parser();
 const writer = new commonmark.HtmlRenderer();
 
 /**
- * @param {String} buildDir A path where compiled files will be saved.
- * @param {Array.<String>} manualTestScriptsPatterns An array of patterns that resolves manual test scripts.
+ * @param {Object} options
+ * @param {String} options.buildDir A path where compiled files will be saved.
+ * @param {Array.<String>} options.patterns An array of patterns that resolve manual test scripts.
+ * @param {String} options.language A language passed to `CKEditorWebpackPlugin`.
+ * @param {Array.<String>} [options.additionalLanguages] Additional languages passed to `CKEditorWebpackPlugin`.
  * @returns {Promise}
  */
-module.exports = function compileHtmlFiles( buildDir, manualTestScriptsPatterns ) {
+module.exports = function compileHtmlFiles( options ) {
+	const buildDir = options.buildDir;
 	const viewTemplate = fs.readFileSync( path.join( __dirname, 'template.html' ), 'utf-8' );
 
-	const sourceMDFiles = manualTestScriptsPatterns.reduce( ( arr, manualTestPattern ) => {
+	const sourceMDFiles = options.patterns.reduce( ( arr, manualTestPattern ) => {
 		return [
 			...arr,
 			...globSync( manualTestPattern )
@@ -44,6 +48,11 @@ module.exports = function compileHtmlFiles( buildDir, manualTestScriptsPatterns
 	const staticFiles = _.flatten( sourceDirs.map( sourceDir => {
 		return globSync( path.join( sourceDir, '**', '*.!(js|html|md)' ) );
 	} ) ).filter( file => !file.match( /\.(js|html|md)$/ ) );
+	const languagesToLoad = [];
+
+	if ( options.additionalLanguages ) {
+		languagesToLoad.push( options.language, ...options.additionalLanguages );
+	}
 
 	fs.ensureDirSync( buildDir );
 
@@ -52,15 +61,15 @@ module.exports = function compileHtmlFiles( buildDir, manualTestScriptsPatterns
 	staticFiles.forEach( staticFile => copyStaticFile( buildDir, staticFile ) );
 
 	// Generate real HTML files out of the MD + HTML files of each test.
-	sourceFilePathBases.forEach( sourceFilePathBase => compileHtmlFile( buildDir, sourceFilePathBase, viewTemplate ) );
+	sourceFilePathBases.forEach( sourceFilePathBase => compileHtmlFile( buildDir, sourceFilePathBase, viewTemplate, languagesToLoad ) );
 
 	// Watch files and compile on change.
 	watchFiles( [ ...sourceMDFiles, ...sourceHtmlFiles ], file => {
-		compileHtmlFile( buildDir, getFilePathWithoutExtension( file ), viewTemplate );
+		compileHtmlFile( buildDir, getFilePathWithoutExtension( file ), viewTemplate, languagesToLoad );
 	} );
 };
 
-function compileHtmlFile( buildDir, sourceFilePathBase, viewTemplate ) {
+function compileHtmlFile( buildDir, sourceFilePathBase, viewTemplate, languagesToLoad ) {
 	const log = logger();
 	const sourceMDFilePath = sourceFilePathBase + '.md';
 	const sourceHtmlFilePath = sourceFilePathBase + '.html';
@@ -87,6 +96,9 @@ function compileHtmlFile( buildDir, sourceFilePathBase, viewTemplate ) {
 		'<body class="manual-test-container">' +
 			'<script src="/assets/inspector.js"></script>' +
 			'<script src="/assets/attachinspector.js"></script>' +
+			`${ languagesToLoad.map( language => {
+				return `<script src="/translations/${ language }.js"></script>`;
+			} ).join( '' ) }` +
 			`<script src="/${ absoluteJSFilePath }"></script>` +
 		'</body>';
 

packages/ckeditor5-dev-tests/lib/utils/manual-tests/compilescripts.js

@@ -14,13 +14,16 @@ const getWebpackConfigForManualTests = require( './getwebpackconfig' );
 const getRelativeFilePath = require( '../getrelativefilepath' );
 
 /**
- * @param {String} buildDir A path where compiled files will be saved.
- * @param {Array.<String>} manualTestScriptsPatterns An array of patterns that resolve manual test scripts.
- * @param {String} themePath A path to the theme the PostCSS theme-importer plugin is supposed to load.
+ * @param {Object} options
+ * @param {String} options.buildDir A path where compiled files will be saved.
+ * @param {Array.<String>} options.patterns An array of patterns that resolve manual test scripts.
+ * @param {String} options.themePath A path to the theme the PostCSS theme-importer plugin is supposed to load.
+ * @param {String} options.language A language passed to `CKEditorWebpackPlugin`.
+ * @param {Array.<String>} [options.additionalLanguages] Additional languages passed to `CKEditorWebpackPlugin`.
  * @returns {Promise}
  */
-module.exports = function compileManualTestScripts( buildDir, manualTestScriptsPatterns, themePath ) {
-	const entryFiles = manualTestScriptsPatterns.reduce( ( arr, manualTestPattern ) => {
+module.exports = function compileManualTestScripts( options ) {
+	const entryFiles = options.patterns.reduce( ( arr, manualTestPattern ) => {
 		return [
 			...arr,
 			...globSync( manualTestPattern )
@@ -29,7 +32,13 @@ module.exports = function compileManualTestScripts( buildDir, manualTestScriptsP
 	}, [] );
 
 	const entries = getWebpackEntryPoints( entryFiles );
-	const webpackConfig = getWebpackConfigForManualTests( entries, buildDir, themePath );
+	const webpackConfig = getWebpackConfigForManualTests( {
+		entries,
+		buildDir: options.buildDir,
+		themePath: options.themePath,
+		language: options.language,
+		additionalLanguages: options.additionalLanguages
+	} );
 
 	return runWebpack( webpackConfig );
 };

packages/ckeditor5-dev-tests/lib/utils/manual-tests/getwebpackconfig.js

@@ -8,13 +8,18 @@
 const path = require( 'path' );
 const WebpackNotifierPlugin = require( './webpacknotifierplugin' );
 const { getPostCssConfig } = require( '@ckeditor/ckeditor5-dev-utils' ).styles;
+const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 
 /**
- * @param {Object} entryObject
- * @param {String} buildDir
+ * @param {Object} options
+ * @param {Object} options.entries
+ * @param {String} options.buildDir
+ * @param {String} options.themePath
+ * @param {String} [options.language]
+ * @param {Array.<String>} [options.additionalLanguages]
  * @returns {Object}
  */
-module.exports = function getWebpackConfigForManualTests( entryObject, buildDir, themePath ) {
+module.exports = function getWebpackConfigForManualTests( options ) {
 	return {
 		mode: 'development',
 
@@ -25,14 +30,19 @@ module.exports = function getWebpackConfigForManualTests( entryObject, buildDir,
 
 		watch: true,
 
-		entry: entryObject,
+		entry: options.entries,
 
 		output: {
-			path: buildDir
+			path: options.buildDir
 		},
 
 		plugins: [
-			new WebpackNotifierPlugin()
+			new WebpackNotifierPlugin(),
+			new CKEditorWebpackPlugin( {
+				// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
+				language: options.language,
+				additionalLanguages: options.additionalLanguages
+			} )
 		],
 
 		module: {
@@ -56,7 +66,7 @@ module.exports = function getWebpackConfigForManualTests( entryObject, buildDir,
 							loader: 'postcss-loader',
 							options: getPostCssConfig( {
 								themeImporter: {
-									themePath
+									themePath: options.themePath
 								},
 								sourceMap: true
 							} )

packages/ckeditor5-dev-tests/tests/tasks/runmanualtests.js

@@ -63,20 +63,28 @@ describe( 'runManualTests', () => {
 				expect( spies.transformFileOptionToTestGlob.firstCall.args[ 1 ] ).to.equal( true );
 
 				expect( spies.htmlFileCompiler.calledOnce ).to.equal( true );
-				expect( spies.htmlFileCompiler.firstCall.args[ 0 ] ).to.equal( 'workspace/build/.manual-tests' );
-				expect( spies.htmlFileCompiler.firstCall.args[ 1 ] ).to.deep.equal( [ testsToExecute ] );
+				expect( spies.htmlFileCompiler.firstCall.args[ 0 ] ).to.deep.equal( {
+					buildDir: 'workspace/build/.manual-tests',
+					patterns: [ testsToExecute ],
+					language: undefined,
+					additionalLanguages: undefined
+				} );
 
 				expect( spies.scriptCompiler.calledOnce ).to.equal( true );
-				expect( spies.scriptCompiler.firstCall.args[ 0 ] ).to.equal( 'workspace/build/.manual-tests' );
-				expect( spies.scriptCompiler.firstCall.args[ 1 ] ).to.deep.equal( [ testsToExecute ] );
-				expect( spies.scriptCompiler.firstCall.args[ 2 ] ).to.be.undefined;
+				expect( spies.scriptCompiler.firstCall.args[ 0 ] ).to.deep.equal( {
+					buildDir: 'workspace/build/.manual-tests',
+					patterns: [ testsToExecute ],
+					themePath: null,
+					language: undefined,
+					additionalLanguages: undefined
+				} );
 
 				expect( spies.server.calledOnce ).to.equal( true );
 				expect( spies.server.firstCall.args[ 0 ] ).to.equal( 'workspace/build/.manual-tests' );
 			} );
 	} );
 
-	it( 'run specified manual tests', () => {
+	it( 'runs specified manual tests', () => {
 		testsToExecute = [
 			'workspace/packages/ckeditor5-build-classic/tests/**/manual/**/*.js',
 			'workspace/packages/ckeditor5-editor-classic/tests/manual/**/*.js'
@@ -106,13 +114,77 @@ describe( 'runManualTests', () => {
 				expect( spies.transformFileOptionToTestGlob.secondCall.args[ 1 ] ).to.equal( true );
 
 				expect( spies.htmlFileCompiler.calledOnce ).to.equal( true );
-				expect( spies.htmlFileCompiler.firstCall.args[ 0 ] ).to.equal( 'workspace/build/.manual-tests' );
-				expect( spies.htmlFileCompiler.firstCall.args[ 1 ] ).to.deep.equal( testsToExecute );
+				expect( spies.htmlFileCompiler.firstCall.args[ 0 ] ).to.deep.equal( {
+					buildDir: 'workspace/build/.manual-tests',
+					patterns: testsToExecute,
+					language: undefined,
+					additionalLanguages: undefined
+				} );
 
 				expect( spies.scriptCompiler.calledOnce ).to.equal( true );
-				expect( spies.scriptCompiler.firstCall.args[ 0 ] ).to.equal( 'workspace/build/.manual-tests' );
-				expect( spies.scriptCompiler.firstCall.args[ 1 ] ).to.deep.equal( testsToExecute );
-				expect( spies.scriptCompiler.firstCall.args[ 2 ] ).to.deep.equal( 'path/to/theme' );
+				expect( spies.scriptCompiler.firstCall.args[ 0 ] ).to.deep.equal( {
+					buildDir: 'workspace/build/.manual-tests',
+					patterns: testsToExecute,
+					themePath: 'path/to/theme',
+					language: undefined,
+					additionalLanguages: undefined
+				} );
+
+				expect( spies.server.calledOnce ).to.equal( true );
+				expect( spies.server.firstCall.args[ 0 ] ).to.equal( 'workspace/build/.manual-tests' );
+			} );
+	} );
+
+	it( 'allows specifying language and additionalLanguages (to CKEditorWebpackPlugin)', () => {
+		testsToExecute = [
+			'workspace/packages/ckeditor5-build-classic/tests/**/manual/**/*.js',
+			'workspace/packages/ckeditor5-editor-classic/tests/manual/**/*.js'
+		];
+
+		spies.transformFileOptionToTestGlob.onFirstCall().returns( testsToExecute[ 0 ] );
+		spies.transformFileOptionToTestGlob.onSecondCall().returns( testsToExecute[ 1 ] );
+
+		const options = {
+			files: [
+				'build-classic',
+				'editor-classic/manual/classic.js'
+			],
+			themePath: 'path/to/theme',
+			language: 'pl',
+			additionalLanguages: [
+				'ar',
+				'en'
+			]
+		};
+
+		return runManualTests( options )
+			.then( () => {
+				expect( spies.removeDir.calledOnce ).to.equal( true );
+				expect( spies.removeDir.firstCall.args[ 0 ] ).to.equal( 'workspace/build/.manual-tests' );
+
+				expect( spies.transformFileOptionToTestGlob.calledTwice ).to.equal( true );
+				expect( spies.transformFileOptionToTestGlob.firstCall.args[ 0 ] ).to.equal( 'build-classic' );
+				expect( spies.transformFileOptionToTestGlob.firstCall.args[ 1 ] ).to.equal( true );
+				expect( spies.transformFileOptionToTestGlob.secondCall.args[ 0 ] )
+					.to.equal( 'editor-classic/manual/classic.js' );
+				expect( spies.transformFileOptionToTestGlob.secondCall.args[ 1 ] ).to.equal( true );
+
+				expect( spies.htmlFileCompiler.calledOnce ).to.equal( true );
+				expect( spies.htmlFileCompiler.firstCall.args[ 0 ] ).to.deep.equal( {
+					buildDir: 'workspace/build/.manual-tests',
+					patterns: testsToExecute,
+					language: 'pl',
+					additionalLanguages: [ 'ar', 'en' ],
+				} );
+
+				expect( spies.scriptCompiler.calledOnce ).to.equal( true );
+				expect( spies.scriptCompiler.firstCall.args[ 0 ] ).to.deep.equal( {
+					buildDir: 'workspace/build/.manual-tests',
+					patterns: testsToExecute,
+					themePath: 'path/to/theme',
+					language: 'pl',
+					additionalLanguages: [ 'ar', 'en' ]
+				} );
 
 				expect( spies.server.calledOnce ).to.equal( true );
 				expect( spies.server.firstCall.args[ 0 ] ).to.equal( 'workspace/build/.manual-tests' );