Added unit and e2e tests

Author: ade-dev

README.md

@@ -1,43 +1,41 @@
-# Angular multiple Cross-Field Validation
+# An angular custom cross-field validator for multiple groups of form input fields
 
-A demo angular application for my article at: http://clade.co.uk/adewole/blog/angular/cross-field-validation
+A demo angular application with unit and e2e tests, for the article at: http://clade.co.uk/adewole/blog/angular/cross-field-validation
 
-I wanted to share my experience and gather feedback on creating an Angular cross-field validator that compares and validates the values of multiple groups of input fields and their relative confirm input fields. The app is built in Angular 10 – strict mode, for both reactive and template-driven forms.
+I wanted to share my experience and gather feedback on creating a custom Angular cross-field validator that compares and validates the values of multiple groups of input fields and their relative confirm input fields. The app is built with Angular 10 – strict mode, for both reactive and template-driven forms.
 
 By [Ade Oyebadejo](http://www.clade.co.uk/adewole)
 
-## Technology
+### Technology
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.5.
 
-## Getting Started
+### Getting Started
 
-1. Clone this repository
 
-   ```bash
-   git clone https://github.com/ade-dev/angular-cross-field-validation.git angular-cross-field-validation
-   cd angular-custom-cross-validator
-   ```
+```bash
+# Clone the repository
+git clone https://github.com/ade-dev/angular-cross-field-validation.git
 
-1. Install the npm packages
+# Navigate to the app's root directory
+cd angular-custom-cross-validator
 
-   ```bash
-   npm install
-   ```
+# Install the dependencies
+npm install
 
-1. Run the app!
+# Run the application
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files
 
-   ```bash
-   Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-   ```
-## Code scaffolding
+```
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
+### Build
 
 Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
 
-## Further help
+### Running unit tests
+
+Run `ng test` to execute the unit tests via Karma.
+
+### Running end-to-end tests
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+Run `ng e2e` to execute the end-to-end tests via Protractor.

angular.json

@@ -94,7 +94,10 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "codeCoverageExclude": [
+              "src/tests/**"
+            ]
           }
         },
         "lint": {
@@ -114,7 +117,8 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "angular-form-input-cross-validator:serve"
+            "devServerTarget": "angular-form-input-cross-validator:serve",
+            "port": 4300
           },
           "configurations": {
             "production": {
@@ -123,6 +127,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "angular-form-input-cross-validator"
-}
+}

e2e/src/app.e2e-spec.ts

@@ -1,23 +1,153 @@
 import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
+import { browser, by, element, ElementArrayFinder, ElementFinder } from 'protractor';
 
-describe('workspace-project App', () => {
-  let page: AppPage;
+describe('Cross-field validation App', () => {
+
+  let appPage: AppPage;
 
   beforeEach(() => {
-    page = new AppPage();
+    appPage = new AppPage();
   });
 
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('angular-form-input-cross-validator app is running!');
+  it('Should render page title', () => {
+    appPage.navigateTo();
+    expect(appPage.getTitleText()).toEqual('Angular - Reactive form input value cross-validation');
   });
+});
+
+describe('Reactive and template-driven form validation tests: ', () => {
+
+  beforeAll(() => browser.get(''));
+
+  describe('Reactive form', () => {
+    beforeAll(() => {
+      getElements('app-reactive-form');
+    });
 
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
+    initialStateTest();
+    emailTests();
+    compareEmails();
+    passwordTests();
+    comparePasswords();
+  });
+
+  describe('Template-driven form', () => {
+    beforeAll(() => {
+      navigateToPage('templateForm');
+      getElements('app-template-driven-form');
+    });
+
+    initialStateTest();
+    emailTests();
+    compareEmails();
+    passwordTests();
+    comparePasswords();
   });
 });
+
+let page: {
+  form: ElementFinder,
+  nameInput: ElementFinder,
+  emailInput: ElementFinder,
+  confirmEmailInput: ElementFinder,
+  passwordInput: ElementFinder,
+  confirmPasswordInput: ElementFinder,
+  errorMessages: ElementArrayFinder,
+};
+
+function getElements(selector: string) {
+  const template = element(by.css(selector));
+  page = {
+    form: template.element(by.css('form')),
+    nameInput: template.element(by.css('#name')),
+    emailInput: template.element(by.css('#email')),
+    confirmEmailInput: template.element(by.css('#confirmEmail')),
+    passwordInput: template.element(by.css('#password')),
+    confirmPasswordInput: template.element(by.css('#confirmPassword')),
+    errorMessages: template.all(by.css('div.alert')),
+  };
+}
+
+function navigateToPage(linkId: string) {
+  element(by.id(linkId)).click().then(() => {
+    browser.sleep(2000).then(() => {
+      browser.getCurrentUrl();
+      // .then((actualUrl) => { console.log("actualUrl: ", actualUrl); });
+    });
+  });
+}
+
+function initialStateTest() {
+  it('Should have error on load', async () => {
+    expect(await page.form.getAttribute('class')).toMatch('ng-invalid');
+  });
+}
+
+function emailTests() {
+
+  it('Should render "email required" error when Email has no value', async () => {
+    await browser.actions().click(page.emailInput).perform();
+    await browser.actions().click(page.confirmEmailInput).perform();
+    expect(await page.form.getAttribute('class')).toMatch('ng-invalid');
+    expect(await page.errorMessages.get(0).getText()).toContain('Email is required');
+  });
+
+  it("Should render 'Invalid email' error when Email value is 'abc'", async () => {
+    await page.emailInput.sendKeys('abc');
+    await browser.actions().click(page.confirmEmailInput).perform();
+    expect(await page.form.getAttribute('class')).toMatch('ng-invalid');
+    expect(await page.errorMessages.get(0).getText()).toContain('Please enter a valid email.');
+  });
+
+  it("Should clear 'Invalid email' error when Email value is '[email protected]'", async () => {
+    await page.emailInput.clear();
+    await page.emailInput.sendKeys('[email protected]');
+    await browser.actions().click(page.confirmEmailInput).perform();
+    expect(await page.errorMessages.get(0).getText()).not.toContain('Please enter a valid email.');
+  });
+};
+
+function compareEmails() {
+
+  it("Should render 'Email entries do not match' error if 'confirmEmail' value is '[email protected]'", async () => {
+    await page.confirmEmailInput.sendKeys('[email protected]');
+    await browser.actions().click(page.passwordInput).perform();
+    expect(await page.form.getAttribute('class')).toMatch('ng-invalid');
+    expect(await page.errorMessages.get(0).getText()).toBe('Email entries do not match.');
+  });
+
+  it("Should clear 'Email do not match' error if 'email' and 'confirmEmail' values match", async () => {
+    await page.confirmEmailInput.clear();
+    await page.confirmEmailInput.sendKeys('[email protected]');
+    await browser.actions().click(page.passwordInput).perform();
+    expect(await page.errorMessages.get(0).getText()).not.toContain('Email entries do not match.');
+  });
+};
+
+function passwordTests() {
+
+  it('Should render "password required" error when password has no value', async () => {
+    await browser.actions().click(page.passwordInput).perform();
+    await browser.actions().click(page.confirmPasswordInput).perform();
+    expect(await page.form.getAttribute('class')).toMatch('ng-invalid');
+    expect(await page.errorMessages.get(0).getText()).toContain('Password is required');
+  });
+};
+
+function comparePasswords() {
+
+  it("should render 'password do not match' error if 'password' and 'confirmPassword' values do not match", async () => {
+    await page.passwordInput.sendKeys('abcdef');
+    await page.confirmPasswordInput.sendKeys('uvxyz');
+    await browser.actions().mouseDown(page.passwordInput).perform();
+    expect(await page.form.getAttribute('class')).toMatch('ng-invalid');
+    expect(await page.errorMessages.get(0).getText()).toBe('Password entries do not match');
+  });
+
+  it("Should clear 'Password do not match' error if 'password' and 'confirmPassword' values match", async () => {
+    await page.confirmPasswordInput.clear();
+    await page.confirmPasswordInput.sendKeys('abcdef');
+    await element(by.css('app-root')).click();
+    expect(await page.errorMessages.get(0).isPresent()).toBe(false);
+  });
+};

e2e/src/app.po.ts

@@ -6,6 +6,6 @@ export class AppPage {
   }
 
   getTitleText(): Promise<string> {
-    return element(by.css('app-root .content span')).getText() as Promise<string>;
+    return element(by.css('app-root h1')).getText() as Promise<string>;
   }
 }