Add E2E test with Cypress (#65)

* Add test for compare editor

* Add test cases for cypress

* move tsconfig file for angular to root dir

Author: jojozhuang

.github/workflows/main_text-compare.yml

@@ -29,6 +29,7 @@ jobs:
           npm install
           npm run build:azure
           npm run test:headless
+          npm run e2e:headless
 
       - name: Upload artifact for deployment job
         uses: actions/upload-artifact@v4

.github/workflows/main_text-compare2.yml

@@ -29,6 +29,7 @@ jobs:
           npm install
           npm run build:azure
           npm run test:headless
+          npm run e2e:headless
 
       - name: Upload artifact for deployment job
         uses: actions/upload-artifact@v4

.gitignore

@@ -35,6 +35,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+/cypress/videos/
 
 # System Files
 .DS_Store

angular.json

@@ -15,7 +15,7 @@
               "base": "dist"
             },
             "index": "src/index.html",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
             "polyfills": [
               "src/polyfills.ts"
             ],
@@ -176,7 +176,7 @@
             "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
+            "tsConfig": "tsconfig.spec.json",
             "scripts": [],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",

azure-pipelines.yml

@@ -104,6 +104,11 @@ stages:
               npm run test:headless
             displayName: 'Run unit tests (headless)'
 
+          - script: |
+              # Run e2e tests in headless Chrome
+              npm run e2e:headless
+            displayName: 'Run e2e tests (headless)'
+
   - stage: Build
     displayName: 'Build'
     dependsOn:

cypress.json

@@ -0,0 +1,9 @@
+{
+  "integrationFolder": "cypress/integration",
+  "supportFile": "cypress/support/index.ts",
+  "videosFolder": "cypress/videos",
+  "screenshotsFolder": "cypress/screenshots",
+  "pluginsFile": "cypress/plugins/index.js",
+  "fixturesFolder": "cypress/fixtures",
+  "baseUrl": "https://text-compare.netlify.app/"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/home.cy.ts

@@ -0,0 +1,32 @@
+/// <reference types="Cypress" />
+
+describe('Text Compare App', () => {
+  beforeEach(() => {
+    cy.visit('https://text-compare.netlify.app/');
+  });
+
+  it('should display the app name on the home page', () => {
+    cy.visit('/');
+    cy.contains('Text Compare');
+    cy.contains('Netlify');
+    cy.get('h1').should('contain.text', 'Text Compare');
+  });
+
+  it('should display two text boxes and a compare button', () => {
+    cy.visit('/');
+    cy.get('#editor1').should('be.visible');
+    cy.get('#editor2').should('be.visible');
+    cy.contains('button', 'Compare').should('be.visible');
+  });
+
+  it('should compare two text inputs', () => {
+    const left = 'Hello World';
+    const right = 'Hello world';
+
+    cy.get('#editor1').clear().type(left);
+    cy.get('#editor2').clear().type(right);
+
+    cy.contains('button', 'Compare').click();
+    cy.get('#diffeditor').should('be.visible');
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1 @@
+module.exports = (on, config) => {};

cypress/support/commands.ts

@@ -0,0 +1,43 @@
+// ***********************************************
+// This example namespace declaration will help
+// with Intellisense and code completion in your
+// IDE or Text Editor.
+// ***********************************************
+// declare namespace Cypress {
+//   interface Chainable<Subject = any> {
+//     customCommand(param: any): typeof customCommand;
+//   }
+// }
+//
+// function customCommand(param: any): void {
+//   console.warn(param);
+// }
+//
+// NOTE: You can use it like so:
+// Cypress.Commands.add('customCommand', customCommand);
+//
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })