Merge pull request #113 from ckeditor/i/104

Feature: Added support for running automated tests for TypeScript. Closes #104.

packages/ckeditor5-package-generator/lib/templates/ts/.eslintrc.js

@@ -18,7 +18,7 @@ module.exports = {
 	},
 	overrides: [
 		{
-			files: [ 'tests/**/*.js', 'sample/**/*.js' ],
+			files: [ 'tests/**/*.[jt]s', 'sample/**/*.[jt]s' ],
 			rules: {
 				// To write complex tests, you may need to import files that are not exported in DLL files by default.
 				// Hence, imports CKEditor 5 packages in test files are not checked.

packages/ckeditor5-package-generator/lib/templates/ts/package.json

@@ -47,8 +47,12 @@
     "@ckeditor/ckeditor5-table": ">=<%= packageVersions.ckeditor5 %>",
     "@ckeditor/ckeditor5-theme-lark": ">=<%= packageVersions.ckeditor5 %>",
     "@ckeditor/ckeditor5-upload": ">=<%= packageVersions.ckeditor5 %>",
+    "@types/chai": "^4.3.1",
     "@types/ckeditor__ckeditor5-core": "^33.0.3",
+    "@types/ckeditor__ckeditor5-editor-classic": "^27.1.2",
+    "@types/ckeditor__ckeditor5-essentials": "^28.0.3",
     "@types/ckeditor__ckeditor5-ui": "^32.0.2",
+    "@types/mocha": "^9.1.1",
     "@types/node": "^17.0.23",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
@@ -65,10 +69,10 @@
   "scripts": {
     "dll:build": "echo \"TODO: DLL in #103\"",
     "dll:serve": "http-server ./ -o sample/dll.html",
-    "lint": "eslint \"**/*.ts\" --quiet --ignore-pattern \"build/\"",
+    "lint": "eslint \"**/*.{js,ts}\" --quiet --ignore-pattern \"build/\"",
     "start": "echo \"TODO: DLL in #105\"",
     "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
-    "test": "echo \"TODO: DLL in #104\"",
+    "test": "ckeditor5-package-tools test",
     "prepare": "<%= program %> run dll:build",
     "prepublishOnly": "<%= program %> run dll:build",
     "translations:collect": "ckeditor5-package-tools translations:collect",

packages/ckeditor5-package-generator/lib/templates/ts/tests/index.ts

@@ -0,0 +1,17 @@
+import { expect } from 'chai';
+import { MyPlugin as MyPluginDll, icons } from '../src';
+import MyPlugin from '../src/myplugin';
+
+import ckeditor from './../theme/icons/ckeditor.svg';
+
+describe( 'CKEditor5 MyPlugin DLL', () => {
+	it( 'exports MyPlugin', () => {
+		expect( MyPluginDll ).to.equal( MyPlugin );
+	} );
+
+	describe( 'icons', () => {
+		it( 'exports the "ckeditor" icon', () => {
+			expect( icons.ckeditor ).to.equal( ckeditor );
+		} );
+	} );
+} );

packages/ckeditor5-package-generator/lib/templates/ts/tests/myplugin.ts

@@ -0,0 +1,63 @@
+import { expect } from 'chai';
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import MyPlugin from '../src/myplugin';
+
+import type { EditorWithUI } from 'ckeditor__ckeditor5-core/src/editor/editorwithui';
+import type { DataApi } from 'ckeditor__ckeditor5-core/src/editor/utils/dataapimixin';
+
+interface Editor extends EditorWithUI, DataApi {}
+
+describe( 'MyPlugin', () => {
+	it( 'should be named', () => {
+		expect( MyPlugin.pluginName ).to.equal( 'MyPlugin' );
+	} );
+
+	describe( 'init()', () => {
+		let domElement: HTMLElement, editor: Editor;
+
+		beforeEach( async () => {
+			domElement = document.createElement( 'div' );
+			document.body.appendChild( domElement );
+
+			editor = await ClassicEditor.create( domElement, {
+				plugins: [
+					Paragraph,
+					Heading,
+					Essentials,
+					MyPlugin
+				],
+				toolbar: [
+					'myButton'
+				]
+			} );
+		} );
+
+		afterEach( () => {
+			domElement.remove();
+			return editor.destroy();
+		} );
+
+		it( 'should load MyPlugin', () => {
+			const myPlugin = editor.plugins.get( 'MyPlugin' );
+
+			expect( myPlugin ).to.be.an.instanceof( MyPlugin );
+		} );
+
+		it( 'should add an icon to the toolbar', () => {
+			expect( editor.ui.componentFactory.has( 'myButton' ) ).to.equal( true );
+		} );
+
+		it( 'should add a text into the editor after clicking the icon', () => {
+			const icon = editor.ui.componentFactory.create( 'myButton' );
+
+			expect( editor.getData() ).to.equal( '' );
+
+			icon.fire( 'execute' );
+
+			expect( editor.getData() ).to.equal( '<p>Hello CKEditor 5!</p>' );
+		} );
+	} );
+} );

packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json

@@ -10,9 +10,15 @@
 		"target": "es2020",
 		"sourceMap": true,
 		"allowJs": true,
-		"moduleResolution": "node"
+		"moduleResolution": "node",
+		"typeRoots": [
+			"typings",
+			"node_modules/@types"
+		]
 	},
 	"include": [
-		"src"
-	]
+		"src",
+		"tests",
+		"typings"
+	],
 }

packages/ckeditor5-package-tools/lib/utils/generate-entry-file.js

@@ -22,7 +22,7 @@ module.exports = entryFilePath => {
 	// Creates a directory for saving the entry point file.
 	mkdirp.sync( path.dirname( entryFilePath ) );
 
-	let filesImports = glob.sync( 'tests/**/*.js', { nodir: true } )
+	let filesImports = glob.sync( 'tests/**/*.[jt]s', { nodir: true } )
 		.map( file => `import '${ normalizePath( path.resolve( file ) ) }';` )
 		.join( '\n' );
 

packages/ckeditor5-package-tools/lib/utils/get-karma-config.js

@@ -130,6 +130,11 @@ function getWebpackConfiguration( options ) {
 	const config = {
 		mode: 'development',
 
+		resolve: {
+			// Add support for TypeScript files and fallback to default extensions list.
+			extensions: [ '.ts', '...' ]
+		},
+
 		module: {
 			rules: [
 				{
@@ -165,6 +170,10 @@ function getWebpackConfiguration( options ) {
 				{
 					test: /\.(txt|html|rtf)$/,
 					use: 'raw-loader'
+				},
+				{
+					test: /\.ts$/,
+					use: 'ts-loader'
 				}
 			]
 		},
@@ -184,7 +193,7 @@ function getWebpackConfiguration( options ) {
 	if ( options.coverage ) {
 		config.module.rules.unshift(
 			{
-				test: /\.js$/,
+				test: /\.[jt]s$/,
 				loader: 'istanbul-instrumenter-loader',
 				include: path.join( options.cwd, 'src' ),
 				options: {

packages/ckeditor5-package-tools/package.json

@@ -40,6 +40,8 @@
     "stylelint": "^13.13.1",
     "stylelint-config-ckeditor5": "^2.0.1",
     "terser-webpack-plugin": "^3.0.2",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.7.4",
     "webpack": "^5.58.1",
     "webpack-dev-server": "^4.3.1"
   },

packages/ckeditor5-package-tools/tests/utils/generate-entry-file.js

@@ -72,13 +72,13 @@ describe( 'lib/utils/generate-entry-file', () => {
 		expect( stubs.mkdirp.sync.firstCall.args[ 0 ] ).to.equal( '/Users/ckeditor/ckeditor5-foo/tmp' );
 	} );
 
-	it( 'should find only *.js files in the "tests/" directory', () => {
+	it( 'should find *.js and *.ts files in the "tests/" directory', () => {
 		stubs.glob.sync.returns( [] );
 
 		generateEntryFile( '/Users/ckeditor/ckeditor5-foo/tmp/tests-entry-point.js' );
 
 		expect( stubs.glob.sync.calledOnce ).to.equal( true );
-		expect( stubs.glob.sync.firstCall.args[ 0 ] ).to.equal( 'tests/**/*.js' );
+		expect( stubs.glob.sync.firstCall.args[ 0 ] ).to.equal( 'tests/**/*.[jt]s' );
 		expect( stubs.glob.sync.firstCall.args[ 1 ] ).to.deep.equal( { nodir: true } );
 	} );
 
@@ -96,10 +96,11 @@ describe( 'lib/utils/generate-entry-file', () => {
 		expect( console.info.firstCall.args[ 1 ] ).to.equal( '/Users/ckeditor/ckeditor5-foo/tmp/tests-entry-point.js' );
 	} );
 
-	it( 'should create an entry file with absolute paths to found tests', () => {
+	it( 'should create an entry file with absolute paths to found *.js and *.ts tests', () => {
 		stubs.glob.sync.returns( [
 			'tests/1.js',
-			'tests/foo/2.js'
+			'tests/foo/2.js',
+			'tests/bar/3.ts'
 		] );
 
 		generateEntryFile( '/Users/ckeditor/ckeditor5-foo/tmp/tests-entry-point.js' );
@@ -108,8 +109,8 @@ describe( 'lib/utils/generate-entry-file', () => {
 		expect( stubs.fs.writeFileSync.firstCall.args[ 0 ] ).to.equal( '/Users/ckeditor/ckeditor5-foo/tmp/tests-entry-point.js' );
 		expect( stubs.fs.writeFileSync.firstCall.args[ 1 ] ).to.equal(
 			'import \'/process/cwd/tests/1.js\';\n' +
-			'import \'/process/cwd/tests/foo/2.js\';' +
-			'\n'
+			'import \'/process/cwd/tests/foo/2.js\';\n' +
+			'import \'/process/cwd/tests/bar/3.ts\';\n'
 		);
 	} );
 

packages/ckeditor5-package-tools/tests/utils/get-karma-config.js

@@ -263,13 +263,35 @@ describe( 'lib/utils/get-karma-config', () => {
 				} );
 			} );
 
-			describe( '*.js (code coverage)', () => {
+			describe( '*.ts', () => {
+				let loader;
+
+				beforeEach( () => {
+					loader = webpackConfig.module.rules.find( loader => loader.test.toString().includes( 'ts' ) );
+
+					expect( loader ).is.an( 'object' );
+				} );
+
+				it( 'uses "ts-loader" for providing files', () => {
+					expect( loader.use ).to.equal( 'ts-loader' );
+				} );
+
+				it( 'loads paths that end with the ".ts" suffix', () => {
+					expect( '/Users/ckeditor/ckeditor5-foo/assets/ckeditor.ts' ).to.match( loader.test );
+					expect( 'C:\\Users\\ckeditor\\ckeditor5-foo\\assets\\ckeditor.ts' ).to.match( loader.test );
+
+					expect( '/Users/ckeditor/ckeditor5-foo/assets/ckeditor.js' ).to.not.match( loader.test );
+					expect( 'C:\\Users\\ckeditor\\ckeditor5-foo\\assets\\ckeditor.js' ).to.not.match( loader.test );
+				} );
+			} );
+
+			describe( '*.js and *.ts (code coverage)', () => {
 				let loader;
 
 				beforeEach( () => {
 					webpackConfig = getKarmaConfig( { cwd, coverage: true } ).webpack;
 
-					loader = webpackConfig.module.rules.find( loader => loader.test.toString().includes( 'js' ) );
+					loader = webpackConfig.module.rules.find( loader => loader.test.toString().includes( '[jt]s' ) );
 
 					expect( loader ).is.an( 'object' );
 				} );
@@ -282,10 +304,13 @@ describe( 'lib/utils/get-karma-config', () => {
 					} );
 				} );
 
-				it( 'loads paths that end with the ".js" suffix', () => {
+				it( 'loads paths that end with the ".js" or ".ts" suffix', () => {
 					expect( '/Users/ckeditor/ckeditor5-foo/src/ckeditor.js' ).to.match( loader.test );
 					expect( 'C:\\Users\\ckeditor\\ckeditor5-foo\\src\\ckeditor.js' ).to.match( loader.test );
 
+					expect( '/Users/ckeditor/ckeditor5-foo/src/ckeditor.ts' ).to.match( loader.test );
+					expect( 'C:\\Users\\ckeditor\\ckeditor5-foo\\src\\ckeditor.ts' ).to.match( loader.test );
+
 					expect( '/Users/ckeditor/ckeditor5-foo/theme/icons/ckeditor.css' ).to.not.match( loader.test );
 					expect( 'C:\\Users\\ckeditor\\ckeditor5-foo\\theme\\icons\\ckeditor.css' ).to.not.match( loader.test );
 				} );
@@ -297,5 +322,11 @@ describe( 'lib/utils/get-karma-config', () => {
 
 			expect( config.webpack.devtool ).to.equal( 'eval-cheap-module-source-map' );
 		} );
+
+		it( 'allows resolving "*.ts" files', () => {
+			const config = getKarmaConfig( { cwd } );
+
+			expect( config.webpack.resolve.extensions ).to.deep.equal( [ '.ts', '...' ] );
+		} );
 	} );
 } );

scripts/ci/travis-check.js

@@ -41,19 +41,19 @@ async function testBuild( lang ) {
 	logProcess( 'Moving the package to temporary directory...' );
 	executeCommand( REPOSITORY_DIRECTORY, 'mv', [ 'ckeditor5-test-package', '..' ] );
 
-	if ( lang === 'ts' ) {
-		logProcess( 'TODO: re-enable this part of the build when TS is fully complete.' );
-
-		return;
-	}
-
 	logProcess( 'Executing tests...' );
 	executeCommand( NEW_PACKAGE_DIRECTORY, 'yarn', [ 'run', 'test' ] );
 
 	logProcess( 'Executing linters...' );
 	executeCommand( NEW_PACKAGE_DIRECTORY, 'yarn', [ 'run', 'lint' ] );
 	executeCommand( NEW_PACKAGE_DIRECTORY, 'yarn', [ 'run', 'stylelint' ] );
 
+	if ( lang === 'ts' ) {
+		logProcess( 'TODO: re-enable this part of the build when TS is fully complete.' );
+
+		return;
+	}
+
 	logProcess( 'Verifying translations...' );
 	executeCommand( NEW_PACKAGE_DIRECTORY, 'yarn', [ 'run', 'translations:collect' ] );