Migrated e2e tests to Cypress.

.circleci/config.yml

@@ -86,10 +86,9 @@ jobs:
 
             # Verify results.
             npx nyc check-coverage --branches 100 --functions 100 --lines 100 --statements 100
-# TODO: To enable once https://github.com/ckeditor/ckeditor5-angular/issues/384 is resolved.
-#      - run:
-#          name: Run e2e tests
-#          command: yarn ng e2e
+      - run:
+          name: Run e2e tests
+          command: yarn run test:e2e:ci
       - unless:
           # Upload the code coverage results for non-nightly builds only.
           condition: << pipeline.parameters.isNightly >>

.gitignore

@@ -24,6 +24,8 @@ testem.log
 
 # e2e
 /cypress/videos
+/cypress/screenshots
+/cypress/downloads
 
 # System Files
 .DS_Store

cypress/e2e/app.cy.ts

@@ -3,62 +3,63 @@
  * For licensing, see LICENSE.md.
  */
 
-import { AppPage } from './app.po';
-
 describe( 'App', () => {
-	let page: AppPage;
-
-	beforeEach( () => {
-		page = new AppPage();
-	} );
-
 	describe( 'simple-usage', () => {
 		beforeEach( () => {
-			return page.navigateTo();
+			cy.visit( '/' );
 		} );
 
-		it( 'should display header message', async () => {
-			const content = await page.getHeaderContent();
+		it( 'should display header message', () => {
+			const heading = cy.get( 'app-root h1' );
 
-			expect( content ).contains( 'CKEditor 5 integration with Angular' );
+			heading.should( 'have.text', 'CKEditor 5 integration with Angular' );
 		} );
 
-		it( 'should display editor with set content', async () => {
-			const content = await page.getEditorContent();
+		it( 'should display editor with set content', () => {
+			const editor = cy.get( 'app-root #classic-editor' );
 
-			expect( content ).should('include.text', 'Getting used to an entirely different culture can be challenging.' );
+			editor.should( $el => {
+				expect( $el.text() ).to.includes( 'Getting used to an entirely different culture can be challenging.' );
+			} );
 		} );
 	} );
 
 	describe( 'demo-form', () => {
 		beforeEach( () => {
-			return page.navigateTo( 'forms' );
+			cy.visit( '/forms' );
 		} );
 
-		it( 'should set initial values for name and surname fields', async () => {
-			const name = await page.getNameInputValue();
-			const surname = await page.getSurnameInputValue();
-
-			expect( name ).contains( 'John' );
-			expect( surname ).contains( 'Doe' );
+		it( 'should set initial values for name and surname fields', () => {
+			cy.get( 'app-root input#name' ).should( 'have.value', 'John' );
+			cy.get( 'app-root input#surname' ).should( 'have.value', 'Doe' );
 		} );
 
-		it( 'should set initial value for the description', async () => {
-			const desc = await page.getDescription();
+		it( 'should set initial value for the description', () => {
+			const description = cy.get( 'app-root #description .ck-editor__editable' );
 
-			expect( desc ).contains( '<p>A <strong>really</strong> nice fellow.</p>' );
+			description.should( $el => {
+				expect( $el.html() ).to.includes( '<p>A <strong>really</strong> nice fellow.</p>' );
+			} );
 		} );
 
-		it( 'should show and update json data preview', async () => {
-			expect( await page.getFormDataPreview() )
-				.contains( '{"name":"John","surname":"Doe","description":"<p>A <b>really</b> nice fellow.</p>"}' );
+		it( 'should show and update json data preview', () => {
+			cy.get( 'app-root pre' ).should( $el => {
+				expect( $el.text() ).to.includes( '{"name":"John","surname":"Doe","description":"<p>A <b>really</b> nice fellow.</p>"}' );
+			} );
+
+			cy.get( 'app-root input#name' ).clear().type( 'Jessica' );
+			cy.get( 'app-root input#surname' ).clear().type( 'Jones' );
+			cy.get( 'app-root #description' ).within( () => {
+				cy.window().should( window => {
+					const { ckeditorInstance } = window.document.querySelector( 'app-root #description .ck-editor__editable' ) as any;
 
-			await page.setNameInputValue( 'Jessica' );
-			await page.setSurnameInputValue( 'Jones' );
-			await page.setDescription( 'A superhero!' );
+					ckeditorInstance.setData( 'A superhero!' );
+				} );
+			} );
 
-			expect( await page.getFormDataPreview() )
-				.contains( '{"name":"Jessica","surname":"Jones","description":"<p>A superhero!</p>"}' );
+			cy.get( 'app-root pre' ).should( $el => {
+				expect( $el.text() ).to.includes( '{"name":"Jessica","surname":"Jones","description":"<p>A superhero!</p>"}' );
+			} );
 		} );
 	} );
 } );

cypress/tsconfig.json

@@ -1,8 +1,12 @@
 {
-  "extends": "../e2e/tsconfig.json",
-  "include": ["**/*.ts"],
+  "extends": "../tsconfig.json",
+  "include": [
+    "**/*.ts"
+  ],
   "compilerOptions": {
     "sourceMap": false,
-    "types": ["cypress"]
+    "types": [
+      "cypress"
+    ]
   }
 }

package.json

@@ -6,11 +6,11 @@
   "description": "Official Angular component for CKEditor 5 – the best browser-based rich text editor.",
   "scripts": {
     "postinstall": "node ./scripts/postinstall.js",
-    "start": "ng serve --open",
+    "start": "ng serve",
     "build": "ng build --configuration production",
     "test": "ng test",
     "test:e2e": "cypress run",
-    "test:e2e:ci": "start-server-and-test 'yarn run start --no-open' :4200 'yarn run test:e2e --quiet'",
+    "test:e2e:ci": "start-server-and-test 'yarn run start' http://localhost:4200/ 'yarn run test:e2e --quiet'",
     "coverage": "ng test --watch=false --code-coverage",
     "lint": "eslint \"*/**/*.+(js|ts)\"",
     "changelog": "node ./scripts/changelog.js",