hardi
/
angular4-testing
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Post-Comment-Final

unit-test
Florian Hartwich 2017-04-18 00:16:04 +02:00
parent cdc7a6f0e9
commit 68faa52098
8 changed files with 82 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
project-manager/e2e/page-object/abstract-header.po.ts
View File

@ -1,23 +1,42 @@
import {element, by} from "protractor";
import {AbstractPage} from "./abstract-page.po";
/**
* PageObject Klasse zur Repräsentation jeder
* Seite mit Navigations Header und weiteren Router-Outlets
*
* @author FHartwich
*/
export class AbstractHeaderPage extends AbstractPage {
/**
* Überschrift auf der Seite
* @type {ElementFinder}
*/
head = element(by.css('h1'));
/**
* Schnellzugriff Dropdown Button
* @type {ElementFinder}
*/
schnellzugriffBtn = element(by.className('dropdown'));
/**
* Validierung der gegebenen Seiten-Überschrift
* @param headline - zu validierende Überschrift
*/
validatePageHeadline(headline: string) {
const head = element(by.css('h1'));
expect(head.getText()).toBe(headline);
}
clickBrandLink(linkText: string) {
const headerEntry = element(by.linkText(linkText));
headerEntry.click()
expect(this.head.getText()).toBe(headline);
}
/**
* Klick auf ein Element im Schnellzugriff Dropdown
* @param linkText - Link-Bezeichnung aus dem Menü
*/
clickSchnellzugriffFollowedBy(linkText: string) {
// starts with css Selector: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
const schnellzugriffBtn = element(by.className('dropdown'));
schnellzugriffBtn.click();
schnellzugriffBtn.element(by.linkText(linkText)).click();
this.schnellzugriffBtn.click();
this.schnellzugriffBtn.element(by.linkText(linkText)).click();
}
}

14
project-manager/e2e/page-object/abstract-page.po.ts
View File

@ -1,9 +1,23 @@
import {browser} from "protractor";
/**
* PageObject Klasse, als Grundlage für Browserinteraktion
*
* @author FHartwich
*/
export class AbstractPage {
/**
* baseUrl aus der Protractor Konfiguration
* @type {string}
*/
baseUrl: string = browser.baseUrl + '/';
/**
* prüft ob die aktuelle URL mit dem gegebene Pfad
* übereinstimmt
* @param urlEnding - URL Appendix
*/
validateCurrentUrl(urlEnding: string) {
expect(browser.getCurrentUrl()).toBe(this.baseUrl + urlEnding);
}

7
project-manager/e2e/task/create-new-task.e2e-spec.ts
View File

@ -2,6 +2,12 @@ import {browser} from 'protractor';
import {TaskOverviewPage} from "../page-object/task/task-overview.po";
import {TaskEditPage} from "../page-object/task/task-edit.po";
/**
* E2E Testsuite für seitenübergreifende
* Interaktionen beim Erstellen einer neuen Aufagbe
*
* @author FHartwich
*/
describe('Create New Task Form', function () {
it('should redirect to "New Task Form" and contain new entry in list after creation with valid title and assignee-email', () => {
@ -24,7 +30,6 @@ describe('Create New Task Form', function () {
const taskEditPage = new TaskEditPage(true);
taskEditPage.clearEnterTitle(testTitle);
taskEditPage.clearEnterDescription('');
browser.pause();
taskEditPage.validateError('title');
});

7
project-manager/e2e/task/edit-task.e2e-spec.ts
View File

@ -2,6 +2,13 @@ import {browser} from 'protractor';
import {TaskOverviewPage} from "../page-object/task/task-overview.po";
import {TaskEditPage} from "../page-object/task/task-edit.po";
/**
* E2E Test für die seitenübergreifende Interaktion beim
* Bearbeiten von Aufgaben
*
* @author FHartwich
*/
describe('Edit Task Form', function () {
const dbTask = {

11
project-manager/projects-server/test.json
View File

@ -2,7 +2,7 @@
"tasks": [
{
"id": 3,
"title": "Ersten Prototyp mit Angular 2.0 entwickeln",
"title": "Ersten Prototyp mit Angular 4.0 entwickelt",
"description": "Der Prototyp soll zeigen, wie Routing und HTTP-Anbindung umgesetzt werden können.",
"tags": [],
"state": "IN_PROGRESS",
@ -57,6 +57,15 @@
"state": "IN_PROGRESS",
"title": "New Task",
"id": 9
},
{
"assignee": {
"email": "testuser@test.com"
},
"tags": [],
"state": "BACKLOG",
"title": "valid title",
"id": 10
}
]
}

11
project-manager/src/app/mocks/mock-task-item.component.ts Normal file
View File

@ -0,0 +1,11 @@
import {Component} from "@angular/core";
@Component({
selector: 'pjm-task-item',
template: '',
inputs: ['task', 'selected'],
outputs: ['taskSelected', 'taskDelete'],
})
export class MockTaskItemComponent {
}

96
project-manager/src/app/tasks/edit-task/edit-task.component.spec.ts
View File

@ -1,17 +1,10 @@
import {TaskService} from '../../services/task-service/task.service';
import {RouterTestingModule} from '@angular/router/testing';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {TestBed, inject} from '@angular/core/testing';
import {TestBed} from '@angular/core/testing';
import {EditTaskComponent} from './edit-task.component';
import {ShowErrorComponent} from '../../show-error/show-error.component';
import {APPLICATION_VALIDATORS} from '../../models/app-validators';
import {ActivatedRoute, Router} from '@angular/router';
import {fakeAsync, tick} from '@angular/core/testing';
import {Title} from '@angular/platform-browser';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {MockTaskService} from '../../mocks/mock-task-service';
import {generateRandomString} from "../../test/test.helper";
@ -112,91 +105,4 @@ describe('EditTask Component', () => {
});
/**
* Hinweis: Die folgende TestSuite entstammt dem ursprünglichen edit-task.component.spec.ts Tests
* dieses Projektes und ist geistiges Eigentum vom Chritoph Höller, dem Ersteller des Ausgangsprojektes
*/
describe('Routing', () => {
@Component({
template: '<router-outlet></router-outlet>'
})
class TestComponent {
}
let taskService: TaskService;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [FormsModule, RouterTestingModule.withRoutes([
{path: 'new', component: EditTaskComponent},
{path: 'edit/:id', component: EditTaskComponent}
],
)],
declarations: [EditTaskComponent, ShowErrorComponent, APPLICATION_VALIDATORS, TestComponent],
providers: [
Title,
{provide: TaskService, useClass: MockTaskService},
]
});
});
beforeEach(inject([TaskService], (_taskService) => {
taskService = _taskService;
}));
it('should load the correct task in Edit-Mode', fakeAsync(() => {
const fixture = TestBed.createComponent(EditTaskComponent);
const route = TestBed.get(ActivatedRoute);
(<any>route.params).next({id: '42'});
const element = fixture.nativeElement;
const spy = spyOn(taskService, 'getTask');
const fakeTask = {title: 'Task1', assignee: {name: 'John'}};
spy.and.returnValue(new BehaviorSubject(fakeTask));
fixture.autoDetectChanges(true);
fixture.whenStable().then(() => {
tick();
expect(spy).toHaveBeenCalledWith('42');
const titleInput = element.querySelector('#title');
expect(titleInput.value).toBe(fakeTask.title);
const assigneeInput = element.querySelector('#assignee_name');
expect(assigneeInput.value).toBe(fakeTask.assignee.name);
});
}));
it('should load the correct task (with router)', fakeAsync(() => {
const fixture = TestBed.createComponent(TestComponent);
const router = TestBed.get(Router);
router.navigateByUrl('edit/42');
const spy = spyOn(taskService, 'getTask');
const fakeTask = {title: 'Task1', assignee: {name: 'John'}};
spy.and.returnValue(new BehaviorSubject(fakeTask));
fixture.whenStable().then(() => {
tick();
expect(spy).toHaveBeenCalledWith('42');
const titleInput = fixture.nativeElement.querySelector('#title');
expect(titleInput.value).toBe(fakeTask.title);
});
}));
it('should work without passing URL-Parameter', fakeAsync(() => {
const fixture = TestBed.createComponent(TestComponent);
const router = TestBed.get(Router);
router.navigateByUrl('new');
const spy = spyOn(taskService, 'getTask');
fixture.whenStable().then(() => {
tick();
expect(spy).not.toHaveBeenCalled();
const titleInput = fixture.nativeElement.querySelector('#title');
expect(titleInput.value).toBe('');
});
}));
});
});

12
project-manager/src/app/tasks/task-list/task-overview.component.spec.ts → project-manager/src/app/tasks/task-list/task-list.component.spec.ts
View File

@ -3,24 +3,21 @@ import {Router} from "@angular/router";
import {ReactiveFormsModule} from "@angular/forms";
import {inject} from "@angular/core/testing";
import {TaskListComponent} from "./task-list.component";
import {TaskItemComponent} from "./task-item.component";
import {RouterTestingModule} from "@angular/router/testing";
import {MockTaskService} from "../../mocks/mock-task-service";
import {TaskService} from "../../services/task-service/task.service";
import {MockTaskItemComponent} from '../../mocks/mock-task-item.component'
describe('Task Overview Component Routing', () => {
let component: TaskListComponent;
let fixture;
let router;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ReactiveFormsModule, RouterTestingModule.withRoutes([])],
declarations: [TaskListComponent, TaskItemComponent],
providers: [ {provide: TaskService, useClass: MockTaskService}
]
declarations: [TaskListComponent, MockTaskItemComponent],
providers: [ {provide: TaskService, useClass: MockTaskService} ]
});
fixture = TestBed.createComponent(TaskListComponent);
component = fixture.componentInstance;
@ -35,7 +32,6 @@ describe('Task Overview Component Routing', () => {
it('should call Router.navigate with id to open quickedit ',() => {
fixture.whenStable().then(() => {
let taskId = 12;
let spyNavigation = spyOn(router, 'navigate');
component.selectTask(taskId);