Issue 178

yacs-admin-angular/src/app/department/department-list/department-list.component.html

@@ -26,8 +26,8 @@ <h3>New Department</h3>
 
 </div>
 
-<div class="row">
-  <div class="col-xs-6"><h2>All Departments</h2></div>
+<div class="row" *ngIf="!error">
+  <div class="col-xs-6"><h2 *ngIf = "!selectedSchool">All Departments</h2><h2 *ngIf="selectedSchool">Departments in the {{selectedSchool.name}}</h2></div>
   <div class="col-xs-6 new-object-link"><h3><a *ngIf="!creatingDept" (click)="showDeptForm()" id="newDeptBtn"> <i class="fa fa-plus" aria-hidden="true"></i>  New Department</a></h3></div>
 </div>
 <!--<department-detail [dept]="selectedDept"></department-detail>
@@ -37,7 +37,7 @@ <h3>New Department</h3>
   <button id="collapse" [hidden]="!selectedDept" class="btn btn-search" (click)="onSelect(null)">Collapse</button>
 -->
 
-<table class="table">
+<table class="table" *ngIf="!error">
   <thead>
     <tr>
       <th class="id">ID</th>
@@ -61,3 +61,9 @@ <h3>New Department</h3>
 
   </tbody>
 </table>
+
+<div id="errorMsg" *ngIf="error">
+  <h1>An error occured!</h1>
+  <h4>The school you queried for does not exist.</h4>
+
+</div>

yacs-admin-angular/src/app/department/department-list/department-list.component.spec.ts

@@ -8,15 +8,181 @@ import {InMemoryDataService} from '../../services/in-memory-data.service';
 import {HttpClientInMemoryWebApiModule} from 'angular-in-memory-web-api';
 import {RouterTestingModule} from '@angular/router/testing';
 import {YacsService} from '../../services/yacs.service';
-describe('DepartmentListComponent', () => {
+import {ActivatedRoute} from '@angular/router';
+import {Observable} from 'rxjs/Rx';
+describe('DepartmentListComponent, no params', () => {
   let component: DepartmentListComponent;
   let fixture: ComponentFixture<DepartmentListComponent>;
+  let mockParams = [{}];
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [FormsModule, HttpClientModule, HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true}), RouterTestingModule],
+      declarations: [ DepartmentListComponent, DepartmentDetailComponent ],
+      providers: [{provide: YacsService, useClass: FakeYacsService},
+      {provide: ActivatedRoute, useValue:
+          {'queryParams': Observable.from(mockParams)}
+        } 
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+
+    fixture = TestBed.createComponent(DepartmentListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    spyOn(component, 'getDepts');
+    spyOn(component, 'getSchools');
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+    it('should display a header titled \'All Departments\'',() => {
+      var header=document.getElementsByTagName('h2')[0];
+      expect(header.textContent).toMatch('All Departments');
+    });
+  it('renders header', () => {
+    var header = document.getElementsByClassName("table");
+    var ths = header[0].getElementsByTagName("th");
+    expect(ths[0].textContent).toContain('ID');
+    expect(ths[1].textContent).toContain('Code');
+    expect(ths[2].textContent).toContain('Name');
+  });
+
+  it('calls getDepts()', async()=>{
+    tick();
+    expect(component.getDepts).toHaveBeenCalled();
+  });
+
+  it('renders deparment', async() => {
+    //making sure we can access component departments
+    //console.log(component.departments);
+
+    //write the actual tests here
+    var tbody = document.getElementsByTagName("tbody");
+    var rows = tbody[0].getElementsByTagName('tr');
+    //console.log(tbody[0].getElementsByTagName('tr'));
+
+    for (var i = 0; i<component.departments.length; i++){
+      //console.log("DEPARTMENT COMPONENT");
+      //console.log(component.departments[i]);
+      //console.log("ROW");
+      //console.log(rows[i]);
+
+      // Get table data.
+      var data = rows[i].getElementsByTagName('td');
+
+      // Make sure department properties correspond with rows of the same index.
+      expect(component.departments[i].id).toMatch(data[0].innerHTML);
+      expect(component.departments[i].code).toMatch(data[1].innerHTML);
+      expect(component.departments[i].name).toMatch(data[2].innerHTML);
+    }
+  });
+
+  describe('before clicking \'New Department\'', () => {
+
+
+    it('should not display the form', () => {
+      expect(document.getElementById('newDept')).toBeNull();
+    });
+
+    it('should display \'New Department\'',() => {
+      expect(document.getElementsByClassName('new-object-link')[0]).toBeTruthy();
+    });
+  });
+  describe('after clicking \'New Department\'', () => {
+    beforeEach(async()=>{
+      const newDeptBtn=document.getElementById('newDeptBtn');
+      newDeptBtn.click();
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+      });
+
+    });
+
+    beforeEach(()=>{
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+      });
+    });
+
+    it('should set creatingDept to true', async() => {
+      tick();
+      expect(component.creatingDept).toEqual(true);
+    });
+    it('should render the form', async() => {
+      tick(); 
+      expect(document.getElementById('newDept')).toBeTruthy();
+      //expect(component.selectedDept).toEqual(expectedDept);
+    });
+
+    describe('when \'Cancel\' is pressed', () => {
+      beforeEach(async()=>{
+        const cancelBtn=document.getElementById('cancelBtn');
+        cancelBtn.click();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+        });
+      });
+
+      beforeEach(()=>{
+        spyOn(component, 'cancelNewDept').and.callThrough();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+        });
+      });
+
+        /*This spec is pending until we can replace
+         *  this dialog with a Bootstrap modal.*/
+
+        xit('displays the dialog', async()=>{
+          tick();
+          expect(component.cancelNewDept).toHaveBeenCalled();
+        });
+
+});
+
 
+    describe('When \'Create Department\' is pressed', () => {
+      beforeEach(async()=>{
+        const createBtn=document.getElementById('createBtn');
+        createBtn.click();
+      });
+
+      beforeEach(()=>{
+        spyOn(component,'createDept');
+      });
+
+      it('should call createDept', async()=>{
+        tick();
+        expect(component.createDept).toHaveBeenCalled();
+      });
+    });
+
+  }); 
+
+
+});
+
+describe('DepartmentListComponent, valid school id passed', () => {
+  let component: DepartmentListComponent;
+  let fixture: ComponentFixture<DepartmentListComponent>;
+  let mockParams = [{'school_id':3}];
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [FormsModule, HttpClientModule, HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true}), RouterTestingModule],
       declarations: [ DepartmentListComponent, DepartmentDetailComponent ],
-      providers: [{provide: YacsService, useClass: FakeYacsService}]
+      providers: [{provide: YacsService, useClass: FakeYacsService},
+      {provide: ActivatedRoute, useValue:
+          {'queryParams': Observable.from(mockParams)}
+        } 
+      ]
     })
     .compileComponents();
   }));
@@ -41,7 +207,11 @@ describe('DepartmentListComponent', () => {
     expect(ths[1].textContent).toContain('Code');
     expect(ths[2].textContent).toContain('Name');
   });
-
+    it('should render header with school name', async() => {
+      var header=document.getElementsByTagName('h2')[0];
+      var pattern = 'Departments in the '+component.selectedSchool.name;
+      expect(header.textContent).toMatch(pattern);
+    });
   it('calls getDepts()', async()=>{
     tick();
     expect(component.getDepts).toHaveBeenCalled();
@@ -160,3 +330,47 @@ describe('DepartmentListComponent', () => {
 
 
 });
+
+
+describe('DepartmentListComponent, invalid school id passed', () => {
+  let component: DepartmentListComponent;
+  let fixture: ComponentFixture<DepartmentListComponent>;
+  let mockParams = [{'school_id':42069}];
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [FormsModule, HttpClientModule, HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true}), RouterTestingModule],
+      declarations: [ DepartmentListComponent, DepartmentDetailComponent ],
+      providers: [{provide: YacsService, useClass: FakeYacsService},
+      {provide: ActivatedRoute, useValue:
+          {'queryParams': Observable.from(mockParams)}
+        } 
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+
+    fixture = TestBed.createComponent(DepartmentListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    spyOn(component, 'getDepts');
+    spyOn(component, 'getSchools');
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+     it('should set error to true',()=>{
+      expect(component.error).toBe(true);
+    });
+
+    it('should display an error message', async() => {
+      tick();
+      var errorMessage=document.getElementById('errorMsg');
+      expect(errorMessage).toBeTruthy();
+    }); 
+
+
+});

yacs-admin-angular/src/app/department/department-list/department-list.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Department } from '../department';
 import {YacsService} from '../../services/yacs.service';
 import {School} from '../../school/school';
-
+import { ActivatedRoute } from '@angular/router';
 @Component({
   selector: 'department-list',
   templateUrl: './department-list.component.html',
@@ -15,7 +15,10 @@ export class DepartmentListComponent implements OnInit {
   creatingDept: boolean;
   departments: Department[];
   schools: School[];
-  constructor(private yacsService: YacsService) { }
+  school_id: number;
+  selectedSchool: School;
+  error: boolean;
+  constructor(private route: ActivatedRoute, private yacsService: YacsService) { }
   /*selectedDept: Department;
   onSelect(dept: Department): void{
     let newDept = new Department(dept.id,dept.code, dept.name, dept.school_id);
@@ -26,6 +29,11 @@ export class DepartmentListComponent implements OnInit {
     this.yacsService.getDepts()
       .subscribe(departments => this.departments = departments);
   }
+
+  getDeptsById(id: number): void{
+    this.yacsService.getDeptsBySchoolID(id)
+      .subscribe(departments => this.departments = departments);  
+  }
 
   getSchools(): void{
     this.yacsService.getSchools()
@@ -47,7 +55,12 @@ export class DepartmentListComponent implements OnInit {
     if(confirm(promptString)){
       this.yacsService.deleteDepartment(dept)
         .subscribe(()=>{
-          this.getDepts();
+            if(this.school_id){
+              this.getDeptsById(this.school_id);
+            }
+            else{
+              this.getDepts();
+            }
         });
     }
   }
@@ -62,19 +75,48 @@ export class DepartmentListComponent implements OnInit {
         this.yacsService.addDepartment(newDept)
           .subscribe( ()=>{
             //Get departments with new dept
-            this.getDepts();
+            if(this.school_id){
+              this.getDeptsById(this.school_id);
+            }
+            else{
+              this.getDepts();
+            }
             this.creatingDept=false;
           }
         );
       });
 
 
   }
-
+  setSchoolId(): void{
+    this.route.queryParams
+      .filter(params => params.school_id)
+      .subscribe(params =>{
+        this.school_id=Number(params.school_id);
+        this.yacsService.getSchoolByID(this.school_id)
+        .subscribe( school=>{
+          if(!school){
+            this.error=true;
+          }
+          else{
+            this.selectedSchool = school;
+            console.log(this.selectedSchool);
+          }
+        }, error=>{this.error=true;} );
+      });
+  }
   ngOnInit() {
     this.creatingDept=false;
+    this.error=false;
+
+    this.setSchoolId();
     this.getSchools();
-    this.getDepts();
+    if(this.school_id){
+      this.getDeptsById(this.school_id);
+    }
+    else{
+      this.getDepts();
+    }
   }
 
 }

yacs-admin-angular/src/app/school/school-list/school-list.component.html

@@ -33,7 +33,7 @@ <h3>New School</h3>
       <td class="id">{{school.id}}</td>
       <td>{{school.name}}</td> 
       <td class="code"><a routerLink={{school.id}}>Details</a></td> 
-      <td class="code"><a>Show Depts.</a></td>
+      <td class="code"><a routerLink="/departments" [queryParams]="{school_id: school.id }">Show Depts.</a></td>
       <td class="code"><a class="delete" (click)="deleteSchool(school)">Delete</a></td>
     </tr>