test(user-profile component): added unit tests to the user-profile comp

Added unit tests to the user profile component.  updated package.json with new Test and Commit
script.  Updated contribute.md with script.

test #4

CONTRIBUTING.md

@@ -32,7 +32,7 @@ Any release from master will have a unique version
 1. All work must be done in a fork off the dev branch
 2. Ensure any install or build dependencies are removed
 3. All Git commits within a PR must be conventional commits using [commitizen](https://github.com/commitizen/cz-cli) and enforced by [husky](https://github.com/typicode/husky)
-   1. Run `$ git cz` when committing changes
+   1. Run `$ npm run commit` when committing changes
 4. Increase version numbers [accordingly](#versioning)
 5. The code must comply to the configured TSLint and Sass Lint rules
 6. Open pull request on the `develop` branch of your fork

frontend/src/app/user-profile/user-profile.component.html

@@ -9,7 +9,7 @@ <h4>Your Profile</h4>
           </div>
         </div>
         <div id="formContent">
-          <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm)">
+          <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm)" id="userForm">
             <div class="col-md-12">
               <div class="form-group row">
                 <label for="firstName" class="col-4 col-form-label">First Name:</label>

frontend/src/app/user-profile/user-profile.component.spec.ts

@@ -1,16 +1,26 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { UserProfileComponent } from './user-profile.component';
+import { ReactiveFormsModule, ValidationErrors } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { AppRoutingModule } from '../app-routing.module';
+import { By } from '@angular/platform-browser';
+import { UserService } from '../user.service';
+
+const userService = {
+  patchUser: () => {},
+};
 
 describe('UserProfileComponent', () => {
   let component: UserProfileComponent;
   let fixture: ComponentFixture<UserProfileComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ UserProfileComponent ]
-    })
-    .compileComponents();
+      declarations: [UserProfileComponent],
+      imports: [ReactiveFormsModule, HttpClientModule, AppRoutingModule],
+      providers: [{ provide: UserService, useValue: userService }],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -22,4 +32,69 @@ describe('UserProfileComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('it should fail when form is empty', () => {
+    expect(component.userForm.valid).toBeFalsy();
+  });
+
+  it('it should fail when First Name is not valid', () => {
+    const firstName = component.userForm.controls.firstName;
+    expect(firstName.valid).toBeFalsy();
+  });
+
+  it('it should pass if First Name has errors', () => {
+    let errors: ValidationErrors;
+    const firstName = component.userForm.controls.firstName;
+    errors = firstName.errors || {};
+    expect(errors).toBeTruthy();
+  });
+
+  it('it should fail when Last Name is not valid', () => {
+    const lastName = component.userForm.controls.lastName;
+    expect(lastName.valid).toBeFalsy();
+  });
+
+  it('it should pass if Last Name has errors', () => {
+    let errors: ValidationErrors;
+    const lastName = component.userForm.controls.lastName;
+    errors = lastName.errors || {};
+    expect(errors).toBeTruthy();
+  });
+
+  it('it should fail when Title is not valid', () => {
+    const title = component.userForm.controls.title;
+    expect(title.valid).toBeFalsy();
+  });
+
+  it('it should pass if First Name has errors', () => {
+    let errors: ValidationErrors;
+    const title = component.userForm.controls.title;
+    errors = title.errors || {};
+    expect(errors).toBeTruthy();
+  });
+
+  it('it should pass if On Submit is executed once', () => {
+    expect(component.isEdit).toBeFalsy();
+    expect(component.userForm.enabled).toBeFalsy();
+    const userForm = fixture.debugElement.query(By.css('#userForm'));
+    userForm.triggerEventHandler('submit', null);
+    expect(component.isEdit).toBeTruthy();
+    expect(component.userForm.enabled).toBeTruthy();
+  });
+
+  it('it should pass if On Submit is executed twice', () => {
+    const mockedUserService = fixture.debugElement.injector.get(UserService);
+    spyOn(mockedUserService, 'patchUser');
+    expect(component.isEdit).toBeFalsy();
+    expect(component.userForm.enabled).toBeFalsy();
+    const userForm = fixture.debugElement.query(By.css('#userForm'));
+    userForm.triggerEventHandler('submit', null);
+    expect(component.isEdit).toBeTruthy();
+    expect(component.userForm.enabled).toBeTruthy();
+    component.userForm.controls.firstName.setValue('Foo');
+    component.userForm.controls.lastName.setValue('Bar');
+    component.userForm.controls.title.setValue('Profressor');
+    expect(component.userForm.valid).toBeTruthy();
+    expect(mockedUserService.patchUser);
+  });
 });

package.json

@@ -4,7 +4,7 @@
   "description": "An organizational asset and vulnerability management tool",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "cd frontend && npm run-script test",
     "start": "node dist/app.js",
     "ngServe": "cd frontend && npm run-script build && npm run-script start",
     "nodemon:watch": "nodemon -e ts --exec \"npm run tsc\"",
@@ -19,7 +19,8 @@
     "tsc": "rimraf dist && tsc && npm start",
     "lint": "tslint --project . && cd frontend && npm run-script lint",
     "lint:fix": "tslint --fix --project . && cd frontend && npm run-script lint --fix=true",
-    "release": "standard-version"
+    "release": "standard-version",
+    "commit": "git cz"
   },
   "nodemonConfig": {
     "ignore": [