commit for training

README.md

@@ -1,27 +1,7 @@
-# ProjectAssessment
+Install first all the dependencies using the command `npm i`
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.2.
+Update webdriver if necessary by `webdriver-update`
 
-## Development server
+After downloading and updating the resources, run the server by `ng server`
 
-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
-
-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.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-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).
+Keep the server running and run the test cases using `protractor`

e2e/data/test.data.ts

@@ -0,0 +1,23 @@
+module.exports = {
+    "customerInfo":{
+        "firstName": "Jane",
+        "lastName": "Doe",
+        "country": "PH",
+        "nationality": "Filipino",
+        "company": "IT",
+        "designation": "CTO",
+        "workExperience": "5yrs",
+        "dataSource": "Google"
+    },
+
+    "updateCustomerInfo":{
+        "firstName": "John",
+        "lastName": "Doe",
+        "country": "PH",
+        "nationality": "Filipino",
+        "company": "IT",
+        "designation": "CTO",
+        "workExperience": "10",
+        "dataSource": "Twitter"
+    }
+}

e2e/features/sampleCRUD.feature

@@ -0,0 +1,35 @@
+Feature: CRUD Sample application
+    As an Admin user, I want to create, update and delete an Employee on my system
+
+    @Login
+    Scenario: Login
+        Given I am on the "login" page
+        When I "login" as "Admin"
+        Then I should see the "dashboard" page
+
+    @Create
+    Scenario: Create a new employee
+        Given I am on the "dashboard" page
+        When I "create" an employee entry
+        Then I should see the "add" success message
+            And I should see it "added" on the employee list table
+
+    @Read
+    Scenario: Read an employee details
+        Given I am on the "dashboard" page
+        When I "view" an employee entry
+        Then I should see the employee entry details on the list
+
+    @Update
+    Scenario: Update an employee
+        Given I am on the "dashboard" page
+        When I "update" an employee entry
+        Then I should see the "update" success message
+            And I should see it "updated" on the employee list table
+
+    @Delete
+    Scenario: Update an employee
+        Given I am on the "dashboard" page
+        When I "delete" an employee entry
+        Then I should see the "update" success message
+            And I should see it "deleted" on the employee list table

e2e/features/security.feature

@@ -0,0 +1,18 @@
+Feature: Security of the application
+    As a registered user, I want to be able to access the application
+    As an unregistered user, I should not be able to access the application
+
+    Scenario Outline: Login as <role>
+        Given I am on the "login" page
+        When I "login" as "<role>"
+        Then I should see the "dashboard" page
+
+    Examples:
+        | role      |
+        | Admin     |
+        | Employee  |
+
+    Scenario: Logout
+        Given I am on the "dashboard" page
+        When I "logout"
+        Then I should see the "login" page

e2e/features/support/parameterTypes.ts

@@ -0,0 +1,30 @@
+// import { defineParameterType } from "cucumber";
+// import { enumPages } from "../../models/enums/pages.enum";
+// import { securityPage } from '../../po/security.po';
+// import { dashBoardPage } from '../../po/dashboard.po';
+
+// export class ParameterUtil {
+//     static toOrFormat(enumToTransform: any) {
+//         const enumArray = [];
+//         Object.keys(enumToTransform).forEach(key => {
+//             enumArray.push(enumPages[key]);
+//         });
+//         const regexp = new RegExp(`(${enumArray.join('|')})`)
+//         return regexp;
+//     }
+// }
+
+// defineParameterType({
+//     regexp: ParameterUtil.toOrFormat(enumPages),
+//     transformer: input => {
+//         let currentPage;
+
+//         if (input === 'login') {
+//             currentPage = new securityPage();
+//         } else {
+//             currentPage = new dashBoardPage();
+//         }
+//         return currentPage;
+//     },
+//     name: 'page'
+// });

e2e/hooks/generic.hooks.ts

@@ -0,0 +1,7 @@
+import { BeforeAll, setDefaultTimeout } from 'cucumber';
+import { browser } from "protractor";
+
+BeforeAll(async () => {
+    browser.waitForAngularEnabled(false);
+    setDefaultTimeout(60 * 10000);
+}); 

e2e/models/enums/pages.enum.ts

@@ -0,0 +1,4 @@
+export enum enumPages {
+    LOGIN = 'login',
+    DASHBOARD = 'dashboard'
+}

e2e/po/dashboard.po.ts

@@ -0,0 +1,81 @@
+import { browser, element, by, protractor } from 'protractor';
+import { dashboard_fillForm } from './dashboard_form.po';
+import { utils } from '../utils/helper.utils';
+
+const form = new dashboard_fillForm();
+
+export class dashBoardPage {
+
+    private url = "http://localhost:4200/dashboard";
+    private componentName = "app-dashboard";
+    private testData = require("../data/test.data");
+
+    //get objects
+    getURL(){ return this.url; }
+
+    get logoutButton(){ return element(by.css(`${this.componentName} a[href='/login']`)); }
+
+    get newEmployeeBtn(){ return element(by.xpath('//span[contains(text(),"New Employee")]')); }
+
+    get nextPageBtn(){ return element(by.css(`${this.componentName} span[class="ui-paginator-icon pi pi-caret-right"]`)); }
+
+
+    //Methods
+    navigate(){ browser.get(this.url); }
+
+    async getwelcomeMessage(){ return await element(by.css(`${this.componentName} h2`)).getText(); }
+
+    async logout(){ await this.logoutButton.click(); }
+
+    async createNewEmployee(){
+        await this.newEmployeeBtn.click();
+        await form.fillEmployeeDetails("add");
+    }
+
+    async nextPage(){        
+        await this.nextPageBtn.click();
+    }
+
+    async verifyEmployee(action: string){
+        if(action === 'add' || action === 'view'){
+            await utils.verifyTableElements("verify", this.testData.customerInfo.firstName + " "+this.testData.customerInfo.lastName);
+        } else if(action === 'verify') {
+            await utils.verifyTableElements("verify", this.testData.updateCustomerInfo.firstName + " "+this.testData.updateCustomerInfo.lastName);
+        }
+    }
+
+    async updateEmployee(){
+        //code for listing all TD
+        // const rows = await element.all(by.tagName("tr"));
+        // for (let i = 0; i < rows.length; i++) {
+        //     //console.log("DEBUG: ", await rows[i].getText());
+        //     const rowText = await rows[i].getText();
+        //     if(rowText.includes(this.testData.customerInfo.firstName + " "+this.testData.customerInfo.lastName)){
+        //         await rows[i].click();
+        //     }
+        // }
+
+        await utils.verifyTableElements("click", this.testData.customerInfo.firstName + " "+this.testData.customerInfo.lastName);
+
+        await browser.sleep(2000);
+        await form.fillEmployeeDetails("update");
+    }
+
+    async deleteEmployee(){
+        //code for listing all TD
+        // const rows = await element.all(by.tagName("tr"));
+
+        // for (let i = 0; i < rows.length; i++) {
+        //     //console.log("DEBUG: ", await rows[i].getText());
+        //     const rowText = await rows[i].getText();
+        //     if(rowText.includes(this.testData.updateCustomerInfo.firstName + " "+this.testData.updateCustomerInfo.lastName)){
+        //         await rows[i].$$('button').click();
+        //     }
+        // }
+
+        await utils.verifyTableElements("delete", this.testData.updateCustomerInfo.firstName + " "+this.testData.updateCustomerInfo.lastName);
+
+        utils.verifyAndCloseAlert("Are you sure you want to remove "+this.testData.updateCustomerInfo.firstName + " "+this.testData.updateCustomerInfo.lastName+" from the list of employees?");
+        await browser.sleep(2000);
+    }
+}

e2e/po/dashboard_form.po.ts

@@ -0,0 +1,65 @@
+import { element, by, browser, protractor } from 'protractor';
+import { utils } from '../utils/helper.utils';
+
+export class dashboard_fillForm {
+
+    private formName = "form";
+    private testData = require("../data/test.data");
+
+    //GET ALL THE FIELDS
+    get firstNameField(){ return element(by.tagName(`${this.formName} input[ng-reflect-name="firstName"]`)); }
+
+    get lastNameField(){ return element(by.tagName(`${this.formName} input[ng-reflect-name="lastName"]`)); }
+
+    get countryField(){ return element(by.tagName(`${this.formName} input[ng-reflect-name="country"]`)); }
+
+    get nationalityField(){ return element(by.tagName(`${this.formName} input[ng-reflect-name="nationality"]`)); }
+
+    get companyField(){ return element(by.tagName(`${this.formName} input[ng-reflect-name="company"]`)); }
+
+    get designationField(){ return element(by.tagName(`${this.formName} input[ng-reflect-name="designation"]`)); }
+
+    get workExpField(){ return element(by.tagName(`${this.formName} input[ng-reflect-name="workExp"]`)); }
+
+    get dataSrc(){return element(by.tagName(`${this.formName} label`)); }
+
+    get addButton(){ return element(by.tagName(`${this.formName} button[ng-reflect-label="Add"]`)); }
+
+    get updateButton(){ return element(by.tagName(`${this.formName} button[ng-reflect-label="Update"]`)); }
+
+    get dataSrcList(){
+        return element.all(by.xpath("//li[@role='option']"));
+    }
+
+    //METHODS OR ACTION
+    async fillEmployeeDetails(action: string){
+        let jsonAction;
+
+        if(action == 'add'){
+            jsonAction = this.testData.customerInfo;
+        } else {
+            jsonAction = this.testData.updateCustomerInfo;
+        }
+
+        utils.type_(this.firstNameField, jsonAction.firstName);
+        utils.type_(this.lastNameField, jsonAction.lastName);
+        utils.type_(this.countryField, jsonAction.country);
+        utils.type_(this.nationalityField, jsonAction.nationality);
+        utils.type_(this.companyField, jsonAction.company);
+        utils.type_(this.designationField, jsonAction.designation);
+        utils.type_(this.workExpField, jsonAction.workExperience);
+        await this.dataSrc.click();
+
+        const dpdElement = element.all(by.xpath("//li[@role='option']"));
+        const dpdItems = await dpdElement.getText();
+        //console.log('DEBUG: ', dpdItems);
+
+        dpdElement.get(dpdItems.indexOf(jsonAction.dataSource)).click();
+
+        if(action == 'add'){
+            await this.addButton.click();
+        } else {
+            await this.updateButton.click();
+        }
+    }
+}

e2e/po/dashboard_msgAlert.po.ts

@@ -0,0 +1,8 @@
+import { element, by } from 'protractor';
+
+export class dashboard_messageAlert {
+
+    async getSuccessMessage(){
+        return element(by.id("success-message")).getText();
+    }
+}

e2e/po/security.po.ts

@@ -0,0 +1,44 @@
+import { by, element, browser } from 'protractor'
+
+export class securityPage {
+    // elements within the page
+    // action that you could do to/within the page
+    // get properties of the page
+
+    private url = "http://localhost:4200/login"
+    private componentName = "app-login";
+
+    getURL(){
+        return this.url;
+    }
+
+    get loginHeader(){
+        return element(by.css(`${this.componentName} span[class='ui-panel-title ng-tns-c2-6 ng-star-inserted']`));
+    }
+
+    get userNameField(){
+        //Template Literals ``
+        return element(by.css(`${this.componentName} input[id='username-field']`)); //String interpolation
+    }
+
+    get passwordField(){
+        return element(by.css(`${this.componentName} input[id='password-field']`));
+    }
+
+    get logInButton(){
+        return element(by.css(`${this.componentName} button[label='Login']`));
+    }
+
+    async navigate(){
+        await browser.get(this.url);
+    }
+
+    async login(role: string = "Employee"){
+        const userCredentials = browser.params.users[role];
+
+        // input username and password then click button
+        await this.userNameField.sendKeys(userCredentials.username);
+        await this.passwordField.sendKeys(userCredentials.password);
+        await this.logInButton.click();
+    }
+}