TSK-196 Add test to workbasket access-items-components

admin/src/app/workbasket/details/access-items/access-items.component.html

@@ -9,7 +9,7 @@
 		<h4 class="panel-header">{{workbasket.name}}</h4>
 	</div>
 	<div class="panel-body">
-		<table class="table table-striped table-center">
+		<table id="table-access-items"class="table table-striped table-center">
 			<thead>
 				<tr>
 					<th></th>
@@ -102,7 +102,7 @@
 				</tr>
 			</tbody>
 		</table>
-			<button type="button" (click)="addAccessItem()" class="btn btn-default">
+			<button id="button-add-access-item" type="button" (click)="addAccessItem()" class="btn btn-default">
 				<span><svg-icon class="green small" src="./assets/icons/wb-add.svg"></svg-icon></span>
 				Add new access
 			</button>

admin/src/app/workbasket/details/access-items/access-items.component.spec.ts

@@ -6,7 +6,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { HttpModule, JsonpModule } from '@angular/http';
 import { Workbasket } from 'app/model/workbasket';
 import { SpinnerComponent } from '../../../shared/spinner/spinner.component';
-import { AlertService } from '../../../services/alert.service';
+import { AlertService, AlertModel , AlertType } from '../../../services/alert.service';
 import { GeneralMessageModalComponent } from '../../../shared/general-message-modal/general-message-modal.component';
 import { Links } from '../../../model/links';
 import { Observable } from 'rxjs/Observable';
@@ -16,7 +16,7 @@ import { WorkbasketAccessItems } from '../../../model/workbasket-access-items';
 describe('AccessItemsComponent', () => {
 	let component: AccessItemsComponent;
 	let fixture: ComponentFixture<AccessItemsComponent>;
-	let workbasketService;
+	let workbasketService, debugElement, alertService;
 
 	beforeEach(async(() => {
 		TestBed.configureTestingModule({
@@ -33,12 +33,72 @@ describe('AccessItemsComponent', () => {
 		component = fixture.componentInstance;
 		component.workbasket = new Workbasket('1')
 		workbasketService = TestBed.get(WorkbasketService);
-		spyOn(workbasketService, 'getWorkBasketAccessItems').and.returnValue(Observable.of(new Array<WorkbasketAccessItems>(new WorkbasketAccessItems())));
+		alertService = TestBed.get(AlertService);
+		spyOn(workbasketService, 'getWorkBasketAccessItems').and.returnValue(Observable.of(new Array<WorkbasketAccessItems>(new WorkbasketAccessItems('id1', '1', 'accessID1', false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, new Array<Links>(new Links('setWorkbasketAccessItems',''))),
+																															new WorkbasketAccessItems('id2', '1', 'accessID2'))));
+		spyOn(workbasketService, 'updateWorkBasketAccessItem').and.returnValue(Observable.of(true)),
+		spyOn(alertService, 'triggerAlert').and.returnValue(Observable.of(true)),
+		debugElement = fixture.debugElement.nativeElement;
 
 		fixture.detectChanges();
 	});
 
+	afterEach(() => {
+		document.body.removeChild(debugElement);
+	});
+
+
 	it('should create', () => {
 		expect(component).toBeTruthy();
 	});
+
+	it('should show two access items if server returns two entries', () => {
+		expect(debugElement.querySelectorAll('#table-access-items > tbody > tr').length).toBe(2);
+
+	});
+
+	it('should show Add new access item button', () => {
+		expect(debugElement.querySelector('#button-add-access-item')).toBeTruthy;
+	});
+
+	it('should highlight modified input', () => {
+		expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBeNull();
+		debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].querySelector('input').click();
+		fixture.detectChanges();
+		component
+		expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBe('has-changes');
+	});
+
+	it('should undo changes if undo changes button is clicked', () => {
+		debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].querySelector('input').click();
+		fixture.detectChanges();
+		expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBe('has-changes');
+		expect(debugElement.querySelectorAll('#wb-information > div > div')[0].querySelectorAll('button').length).toBe(2);
+		debugElement.querySelectorAll('#wb-information > div > div')[0].querySelectorAll('button')[1].click();
+		fixture.detectChanges();
+		expect(debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelectorAll('td')[5].getAttribute('class')).toBeNull();
+	});
+
+	it('should remove an access item if remove button is clicked', () => {
+		expect(debugElement.querySelectorAll('#table-access-items > tbody > tr').length).toBe(2);
+		debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelector('td > button').click();
+		fixture.detectChanges();
+		expect(debugElement.querySelectorAll('#table-access-items > tbody > tr').length).toBe(1);
+	});
+
+	it('should validate access-items before saving', () => {
+		debugElement.querySelector('#button-add-access-item').click();
+		fixture.detectChanges();
+		expect(component.onSave()).toBeUndefined();
+		component.accessItems[2].accessId = 'someText';
+		component.onSave();
+		expect(workbasketService.updateWorkBasketAccessItem).toHaveBeenCalled();
+	});
+
+
+	it('should show alert successfull after saving', () => {
+		component.onSave();
+		expect(alertService.triggerAlert).toHaveBeenCalledWith(new AlertModel(AlertType.SUCCESS, `Workbasket  ${component.workbasket.key} Access items were saved successfully`));
+	});
+
 });

admin/src/app/workbasket/details/access-items/access-items.component.ts

@@ -56,17 +56,23 @@ export class AccessItemsComponent implements OnInit {
 		this.accessItemsClone.splice(index,1);
 	}
 
-	onSave() {
+	onSave(): boolean {
 		if(this.validateAccessItems()){
 			return;
 		}
+		if(!this.accessItems[0].links){
+			return;
+		}
+
 		this.workbasketService.updateWorkBasketAccessItem(Utils.getTagLinkRef(this.accessItems[0].links, 'setWorkbasketAccessItems').href, this.accessItems).subscribe(response =>{
 			this.accessItemsClone = this.cloneaccessItems(this.accessItems);
 			this.accessItemsResetClone = this.cloneaccessItems(this.accessItems);
-			this.alertService.triggerAlert(new AlertModel(AlertType.SUCCESS, `Workbasket  ${this.workbasket.key} Access items were saved successfully`))
+			this.alertService.triggerAlert(new AlertModel(AlertType.SUCCESS, `Workbasket  ${this.workbasket.key} Access items were saved successfully`));
+			return true;
 		},
 		error => {
 			this.modalErrorMessage = error.message;
+			return false;
 		})
 	}