Merge branch 'master' of https://github.com/ioet/time-tracker-ui into Time-Clock-Timer-Component

Author: daros10

.github/workflows/master_time-tracker-ui.yml renamed to .github/workflows/CD-time-tracker-ui.yml

@@ -1,30 +1,33 @@
 # Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
 # More GitHub Actions for Azure: https://github.com/Azure/actions
 
-name: Build and deploy Node.js app to Azure Web App - time-tracker-ui
+name: CD process to deploy to App-Service service
 
 on:
-  push:
+  # Trigger the workflow on pull request but only for the master branch
+  pull_request:
+    types: [closed]
     branches:
       - master
 
 jobs:
   build-and-deploy:
+    name: Deploy to Azure
     runs-on: ubuntu-latest
-
+    timeout-minutes: 60
     steps:
-    - uses: actions/checkout@master
+    - name: Checkout of master
+      uses: actions/checkout@master
 
     - name: Set up Node.js version
       uses: actions/setup-node@v1
       with:
         node-version: '12.x'
 
-    - name: npm install, build, and test
+    - name: 'run: npm install and build'
       run: |
         npm install
-        npm run build --if-present
-#        npm run test --if-present
+        npm run build --prod --if-present
 
     - name: 'Deploy to Azure Web App'
       uses: azure/webapps-deploy@v1

.github/workflows/CI-time-tracker-ui.yml

@@ -0,0 +1,50 @@
+name: CI process for time-tracker app
+
+on:
+  # Trigger the workflow on push or pull request
+  push:
+    branches:
+      - '*'
+      - '*/*'
+      - '!master'
+
+  pull_request:
+    types: [opened, edited, reopened, synchronize]
+    branches:
+      - master
+
+jobs:
+  security-audit:
+    name: Running npm audit
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    steps:
+      - name: Clone and checkout branch
+        uses: actions/checkout@master
+
+      - name: Set up Node.js version
+        uses: actions/setup-node@v1
+        with:
+          node-version: '12.x'
+
+      - name: Security Audit
+        run: npm audit --audit-level=moderate
+
+  ci-test:
+    name: Running unit tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 90
+    steps:
+    - name: Clone and checkout branch
+      uses: actions/checkout@master
+
+    - name: Set up Node.js version
+      uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Run the test
+      run: npm run ci-test --if-present

package.json

@@ -6,6 +6,7 @@
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
+    "ci-test": "ng test --no-watch --no-progress --browsers ChromeHeadless",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },

src/app/components/options-sidebar/project-management/project-management.component.spec.ts

@@ -1,9 +1,11 @@
 import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
-
 import { ProjectManagementComponent } from './project-management.component';
 import { Project } from '../../../interfaces/project';
 import { ProjectService } from '../../../services/project.service';
 import { of } from 'rxjs';
+import { CreateProjectComponent } from '../../../components/shared/create-project/create-project.component';
+import { ProjectListComponent } from '../../../components/shared/project-list/project-list.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 describe('ProjectManagementComponent', () => {
   let component: ProjectManagementComponent;
@@ -42,8 +44,12 @@ describe('ProjectManagementComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProjectManagementComponent ],
-      providers: [ { provide: ProjectService, useValue: projectServiceStub }]
+      declarations: [ ProjectManagementComponent, CreateProjectComponent, ProjectListComponent ],
+      providers: [ { provide: ProjectService, useValue: projectServiceStub }],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule
+      ]
     })
     .compileComponents();
   }));

src/app/components/options-sidebar/project-management/project-management.component.ts

@@ -35,7 +35,6 @@ export class ProjectManagementComponent implements OnInit {
       };
       this.projects = this.projects.concat(newProject);
     }
-    console.log(this.projects);
   }
 
   editProject(projectId) {

src/app/components/shared/create-project/create-project.component.spec.ts

@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CreateProjectComponent } from './create-project.component';
 import { Validators, FormBuilder } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 describe('CreateProjectComponent', () => {
   let component: CreateProjectComponent;
@@ -10,9 +11,10 @@ describe('CreateProjectComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ CreateProjectComponent ],
-      providers: [
-        FormBuilder
-      ],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule
+      ]
     })
     .compileComponents();
   }));
@@ -26,4 +28,74 @@ describe('CreateProjectComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should send the form data on onSubmit buton #onSubmit', () => {
+    const project = {
+      name: 'app 4',
+      details: 'It is a good app',
+      status: 'inactive',
+      completed: true
+    };
+
+    spyOn(component.savedProject, 'emit');
+    component.onSubmit(project);
+    expect(component.savedProject.emit).toHaveBeenCalled();
+  });
+
+  it('should clean the form and send a cancelForm event #reset', () => {
+    const project = {
+      name: 'app 4',
+      details: 'It is a good app',
+      status: 'inactive',
+      completed: true
+    };
+
+    component.projectForm.setValue(project);
+    spyOn(component.cancelForm, 'emit');
+    component.reset();
+    expect(component.projectForm.value.name).toEqual(null);
+    expect(component.projectForm.value.details).toEqual(null);
+    expect(component.projectForm.value.status).toEqual(null);
+    expect(component.projectForm.value.completed).toEqual(null);
+
+    expect(component.cancelForm.emit).toHaveBeenCalled();
+  });
+
+  it('form invalid when empty', () => {
+    expect(component.projectForm.valid).toBeFalsy();
+  });
+
+  it('name field validity', () => {
+    const name = component.projectForm.controls.name;
+    expect(name.valid).toBeFalsy();
+
+    name.setValue('');
+    expect(name.hasError('required')).toBeTruthy();
+
+    name.setValue('A');
+    expect(name.hasError('required')).toBeFalsy();
+  });
+
+  it('details field validity', () => {
+    const details = component.projectForm.controls.details;
+    expect(details.valid).toBeFalsy();
+
+    details.setValue('');
+    expect(details.hasError('required')).toBeTruthy();
+
+    details.setValue('A');
+    expect(details.hasError('required')).toBeFalsy();
+  });
+
+  it('status field validity', () => {
+    const status = component.projectForm.controls.status;
+    expect(status.valid).toBeFalsy();
+
+    status.setValue('');
+    expect(status.hasError('required')).toBeTruthy();
+
+    status.setValue('A');
+    expect(status.hasError('required')).toBeFalsy();
+  });
+
 });

src/app/components/shared/modal/modal.component.spec.ts

@@ -22,4 +22,22 @@ describe('ModalComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should emit removeProject event #removedProject', () => {
+    const project = {
+      id: 1,
+      name: 'app 4',
+      details: 'It is a good app',
+      status: 'inactive',
+      completed: true
+    };
+
+    spyOn(component.removeProject, 'emit');
+    component.project = project;
+    fixture.detectChanges();
+    component.removedProject(project.id);
+    expect(component.removeProject.emit).toHaveBeenCalled();
+    component.cancelDeleteModal.nativeElement.click();
+  });
 });
+

src/app/components/shared/project-list/project-list.component.spec.ts

@@ -22,4 +22,37 @@ describe('ProjectListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should emit deleteProject event #removeProject', () => {
+    const project = {
+      id: 1,
+      name: 'app 4',
+      details: 'It is a good app',
+      status: 'inactive',
+      completed: true
+    };
+
+    component.projectToDelete = project;
+    spyOn(component.deleteProject, 'emit');
+    component.removeProject(project.id);
+    expect(component.deleteProject.emit).toHaveBeenCalled();
+    expect(component.projectToDelete).toBe(null);
+  });
+
+  it('should open delete modal #openModal', () => {
+    const project = {
+      id: 1,
+      name: 'app 4',
+      details: 'It is a good app',
+      status: 'inactive',
+      completed: true
+    };
+
+    component.openModal(project);
+    expect(component.projectToDelete.id).toBe(1);
+    expect(component.projectToDelete.name).toBe('app 4');
+    expect(component.projectToDelete.details).toBe('It is a good app');
+    expect(component.projectToDelete.status).toBe('inactive');
+    expect(component.projectToDelete.completed).toBe(true);
+  });
 });

src/app/services/project.service.spec.ts

@@ -1,23 +1,61 @@
 import { TestBed, inject, async } from '@angular/core/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { Project } from '../interfaces/project';
 import { ProjectService } from './project.service';
 
 describe('ProjectService', () => {
   let service: ProjectService;
+  let httpMock: HttpTestingController;
+
+  const projects: Project[] = [{
+    id: 1,
+    name: 'app 1',
+    details: 'It is a good app',
+    status: 'inactive',
+    completed: true
+  },
+  {
+    id: 2,
+    name: 'app 2',
+    details: 'It is a good app',
+    status: 'inactive',
+    completed: false
+  },
+  {
+    id: 3,
+    name: 'app 3',
+    details: 'It is a good app',
+    status: 'active',
+    completed: true
+  }
+  ];
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule]
     });
     service = TestBed.inject(ProjectService);
+    httpMock = TestBed.inject(HttpTestingController);
   });
 
+  afterEach (() => {
+    httpMock.verify ();
+  });
 
   it('should create', inject([HttpClientTestingModule, ProjectService],
     (httpClient: HttpClientTestingModule, apiService: ProjectService) => {
       expect(apiService).toBeTruthy();
       expect(httpClient).toBeTruthy();
   }));
 
+  it('should get projects  API/GET #getProjects', () => {
+    service.getProjects().subscribe(projects => {
+        expect(projects.length).toBe(3);
+        expect(projects).toEqual(projects);
+    });
+    const request = httpMock.expectOne('assets/project.json');
+    expect(request.request.method).toBe('GET');
+    request.flush(projects);
+    });
+
 });