Skip to content
This repository has been archived by the owner on Sep 2, 2022. It is now read-only.

Commit

Permalink
refactor: use speculoos everywhere
Browse files Browse the repository at this point in the history
  • Loading branch information
@jnizet
jnizet committed Sep 19, 2020
1 parent cb6ed95 commit 721c47c
Show file tree
Hide file tree
Showing 16 changed files with 782 additions and 696 deletions.
144 changes: 88 additions & 56 deletions frontend/src/app/person-family-edit/person-family-edit.component.spec.ts
View file
Expand Up @@ -12,9 +12,61 @@ import { FamilyCommand } from '../models/family.command';
import { FamilyModel } from '../models/family.model';
import { of } from 'rxjs';
import { PageTitleDirective } from '../page-title.directive';
import { ComponentTester } from 'ngx-speculoos';

class PersonFamilyEditComponentTester extends ComponentTester<PersonFamilyEditComponent> {
constructor() {
super(PersonFamilyEditComponent);
}

get title() {
return this.element('h1');
}

get spouseInFrance() {
return this.input('#spouseInFrance');
}

get spouseAbroad() {
return this.input('#spouseAbroad');
}

get noSpouse() {
return this.input('#noSpouse');
}

childFirstName(index: number) {
return this.input(`#childFirstName${index}`);
}

childBirthdate(index: number) {
return this.input(`#childBirthDate${index}`);
}

childLocationFrance(index: number) {
return this.input(`#childLocationFrance${index}`);
}

childLocationAbroad(index: number) {
return this.input(`#childLocationAbroad${index}`);
}

removeChildButton(index: number) {
return this.button(`#removeChild${index}`);
}

get addChildButton() {
return this.button('#add-child');
}

get saveButton() {
return this.button('#save');
}
}

describe('PersonFamilyEditComponent', () => {
let route: ActivatedRoute;
let tester: PersonFamilyEditComponentTester;

beforeEach(() => {
route = {
Expand All @@ -39,35 +91,32 @@ describe('PersonFamilyEditComponent', () => {
GlobeNgbModule.forRoot()
]
});

tester = new PersonFamilyEditComponentTester();
});

it('should display person full name in title', () => {
route.snapshot.data.family = null;

const fixture = TestBed.createComponent(PersonFamilyEditComponent);
fixture.detectChanges();
tester.detectChanges();

expect(fixture.componentInstance.person.id).toBe(42);
expect(fixture.nativeElement.querySelector('h1').textContent).toBe(
'Éditer la situation familiale de John Doe'
);
expect(tester.componentInstance.person.id).toBe(42);
expect(tester.title).toHaveText('Éditer la situation familiale de John Doe');
});

it('should have a form when no family', () => {
route.snapshot.data.family = null;

const fixture = TestBed.createComponent(PersonFamilyEditComponent);
fixture.detectChanges();
tester.detectChanges();

expect(fixture.componentInstance.familyForm.value).toEqual({
expect(tester.componentInstance.familyForm.value).toEqual({
spouseLocation: null,
children: []
} as FamilyCommand);

const element: HTMLElement = fixture.nativeElement;
expect((element.querySelector('#spouseInFrance') as HTMLInputElement).checked).toBe(false);
expect((element.querySelector('#spouseAbroad') as HTMLInputElement).checked).toBe(false);
expect((element.querySelector('#noSpouse') as HTMLInputElement).checked).toBe(true);
expect(tester.spouseInFrance).not.toBeChecked();
expect(tester.spouseAbroad).not.toBeChecked();
expect(tester.noSpouse).toBeChecked();
});

it('should have a form when family is present', () => {
Expand All @@ -82,10 +131,9 @@ describe('PersonFamilyEditComponent', () => {
]
} as FamilyModel;

const fixture = TestBed.createComponent(PersonFamilyEditComponent);
fixture.detectChanges();
tester.detectChanges();

expect(fixture.componentInstance.familyForm.value).toEqual({
expect(tester.componentInstance.familyForm.value).toEqual({
spouseLocation: 'FRANCE',
children: [
{
Expand All @@ -96,18 +144,13 @@ describe('PersonFamilyEditComponent', () => {
]
} as FamilyCommand);

const element: HTMLElement = fixture.nativeElement;
expect((element.querySelector('#spouseInFrance') as HTMLInputElement).checked).toBe(true);
expect((element.querySelector('#spouseAbroad') as HTMLInputElement).checked).toBe(false);
expect((element.querySelector('#noSpouse') as HTMLInputElement).checked).toBe(false);
expect((element.querySelector('#childFirstName0') as HTMLInputElement).value).toBe('John');
expect((element.querySelector('#childBirthDate0') as HTMLInputElement).value).toBe(
'30/11/2000'
);
expect((element.querySelector('#childLocationFrance0') as HTMLInputElement).checked).toBe(
false
);
expect((element.querySelector('#childLocationAbroad0') as HTMLInputElement).checked).toBe(true);
expect(tester.spouseInFrance).toBeChecked();
expect(tester.spouseAbroad).not.toBeChecked();
expect(tester.noSpouse).not.toBeChecked();
expect(tester.childFirstName(0)).toHaveValue('John');
expect(tester.childBirthdate(0)).toHaveValue('30/11/2000');
expect(tester.childLocationFrance(0)).not.toBeChecked();
expect(tester.childLocationAbroad(0)).toBeChecked();
});

it('should add and remove child', () => {
Expand All @@ -122,29 +165,21 @@ describe('PersonFamilyEditComponent', () => {
]
} as FamilyModel;

const fixture = TestBed.createComponent(PersonFamilyEditComponent);
fixture.detectChanges();

const element: HTMLElement = fixture.nativeElement;
(element.querySelector('#add-child') as HTMLButtonElement).click();
fixture.detectChanges();

expect(fixture.componentInstance.children.length).toBe(2);
expect((element.querySelector('#childBirthDate1') as HTMLInputElement).value).toBe('');
expect((element.querySelector('#childLocationFrance1') as HTMLInputElement).checked).toBe(true);
expect((element.querySelector('#childLocationAbroad1') as HTMLInputElement).checked).toBe(
false
);

(element.querySelector('#removeChild0') as HTMLButtonElement).click();
fixture.detectChanges();

expect(fixture.componentInstance.children.length).toBe(1);
expect((element.querySelector('#childBirthDate0') as HTMLInputElement).value).toBe('');
expect((element.querySelector('#childLocationFrance0') as HTMLInputElement).checked).toBe(true);
expect((element.querySelector('#childLocationAbroad0') as HTMLInputElement).checked).toBe(
false
);
tester.detectChanges();

tester.addChildButton.click();

expect(tester.componentInstance.children.length).toBe(2);
expect(tester.childBirthdate(1)).toHaveValue('');
expect(tester.childLocationFrance(1)).toBeChecked();
expect(tester.childLocationAbroad(1)).not.toBeChecked();

tester.removeChildButton(0).click();

expect(tester.componentInstance.children.length).toBe(1);
expect(tester.childBirthdate(0)).toHaveValue('');
expect(tester.childLocationFrance(0)).toBeChecked();
expect(tester.childLocationAbroad(0)).not.toBeChecked();
});

it('should save the family is present', () => {
Expand All @@ -159,17 +194,14 @@ describe('PersonFamilyEditComponent', () => {
]
} as FamilyModel;

const fixture = TestBed.createComponent(PersonFamilyEditComponent);
fixture.detectChanges();
tester.detectChanges();

const familyService: FamilyService = TestBed.inject(FamilyService);
spyOn(familyService, 'save').and.returnValue(of(undefined));
const router: Router = TestBed.inject(Router);
spyOn(router, 'navigate');

const element: HTMLElement = fixture.nativeElement;
(element.querySelector('#save') as HTMLButtonElement).click();
fixture.detectChanges();
tester.saveButton.click();

const command: FamilyCommand = {
spouseLocation: 'FRANCE',
Expand Down
97 changes: 56 additions & 41 deletions frontend/src/app/person-family/person-family.component.spec.ts
View file
Expand Up @@ -12,12 +12,37 @@ import { By } from '@angular/platform-browser';
import { EMPTY, of } from 'rxjs';
import { PageTitleDirective } from '../page-title.directive';
import { FullnamePipe } from '../fullname.pipe';
import { fakeRoute, fakeSnapshot } from 'ngx-speculoos';
import { ComponentTester, fakeRoute, fakeSnapshot } from 'ngx-speculoos';
import { CurrentPersonService } from '../current-person.service';

class PersonFamilyComponentTester extends ComponentTester<PersonFamilyComponent> {
constructor() {
super(PersonFamilyComponent);
}

get noFamily() {
return this.element('#no-family');
}

get family() {
return this.element('#family');
}

get situationComponents(): Array<SituationComponent> {
return this.debugElement
.queryAll(By.directive(SituationComponent))
.map(d => d.componentInstance);
}

get deleteButton() {
return this.button('#delete');
}
}

describe('PersonFamilyComponent', () => {
let route: ActivatedRoute;
let currentPersonService: CurrentPersonService;
let tester: PersonFamilyComponentTester;

beforeEach(() => {
route = fakeRoute({
Expand All @@ -42,23 +67,21 @@ describe('PersonFamilyComponent', () => {
firstName: 'John',
lastName: 'Doe'
});

tester = new PersonFamilyComponentTester();
});

it('should display no family message if no family', () => {
route.snapshot.data.family = null;
const fixture = TestBed.createComponent(PersonFamilyComponent);
fixture.detectChanges();

const component = fixture.componentInstance;
expect(component.family).toBeNull();
expect(component.france).toBeFalsy();
expect(component.abroad).toBeFalsy();
expect(component.person.id).toBe(42);

expect(fixture.nativeElement.querySelector('#no-family').textContent).toContain(
`Pas d'information`
);
expect(fixture.nativeElement.querySelector('#family')).toBeFalsy();
tester.detectChanges();

expect(tester.componentInstance.family).toBeNull();
expect(tester.componentInstance.france).toBeFalsy();
expect(tester.componentInstance.abroad).toBeFalsy();
expect(tester.componentInstance.person.id).toBe(42);

expect(tester.noFamily).toContainText(`Pas d'information`);
expect(tester.family).toBeNull();
});

it('should display family if family present', () => {
Expand All @@ -79,12 +102,10 @@ describe('PersonFamilyComponent', () => {
} as FamilyModel;
route.snapshot.data.family = family;

const fixture = TestBed.createComponent(PersonFamilyComponent);
fixture.detectChanges();
tester.detectChanges();

const component = fixture.componentInstance;
expect(component.family).toBe(family);
expect(component.france).toEqual({
expect(tester.componentInstance.family).toBe(family);
expect(tester.componentInstance.france).toEqual({
spousePresent: false,
children: [
{
Expand All @@ -94,7 +115,7 @@ describe('PersonFamilyComponent', () => {
}
]
} as Situation);
expect(component.abroad).toEqual({
expect(tester.componentInstance.abroad).toEqual({
spousePresent: true,
children: [
{
Expand All @@ -105,12 +126,11 @@ describe('PersonFamilyComponent', () => {
]
} as Situation);

expect(fixture.nativeElement.querySelector('#no-family')).toBeFalsy();
expect(fixture.nativeElement.querySelector('#family')).toBeTruthy();
const situationComponents = fixture.debugElement.queryAll(By.directive(SituationComponent));
expect(situationComponents.length).toBe(2);
expect(situationComponents[0].componentInstance.situation).toBe(component.france);
expect(situationComponents[1].componentInstance.situation).toBe(component.abroad);
expect(tester.noFamily).toBeNull();
expect(tester.family).not.toBeNull();
expect(tester.situationComponents.length).toBe(2);
expect(tester.situationComponents[0].situation).toBe(tester.componentInstance.france);
expect(tester.situationComponents[1].situation).toBe(tester.componentInstance.abroad);
});

it('should delete family after confirmation', () => {
Expand All @@ -120,25 +140,22 @@ describe('PersonFamilyComponent', () => {
} as FamilyModel;
route.snapshot.data.family = family;

const fixture = TestBed.createComponent(PersonFamilyComponent);
fixture.detectChanges();
tester.detectChanges();

const confirmService: ConfirmService = TestBed.inject(ConfirmService);
const familyService: FamilyService = TestBed.inject(FamilyService);

spyOn(confirmService, 'confirm').and.returnValue(of(undefined));
spyOn(familyService, 'delete').and.returnValue(of(undefined));

fixture.nativeElement.querySelector('#delete').click();
fixture.detectChanges();
const component = fixture.componentInstance;
tester.deleteButton.click();

expect(component.family).toBeNull();
expect(component.france).toBeFalsy();
expect(component.abroad).toBeFalsy();
expect(tester.componentInstance.family).toBeNull();
expect(tester.componentInstance.france).toBeFalsy();
expect(tester.componentInstance.abroad).toBeFalsy();

expect(fixture.nativeElement.querySelector('#no-family')).toBeTruthy();
expect(fixture.nativeElement.querySelector('#family')).toBeFalsy();
expect(tester.noFamily).not.toBeNull();
expect(tester.family).toBeNull();

expect(confirmService.confirm).toHaveBeenCalled();
expect(familyService.delete).toHaveBeenCalledWith(42);
Expand All @@ -151,18 +168,16 @@ describe('PersonFamilyComponent', () => {
} as FamilyModel;
route.snapshot.data.family = family;

const fixture = TestBed.createComponent(PersonFamilyComponent);
fixture.detectChanges();
tester.detectChanges();

const confirmService: ConfirmService = TestBed.inject(ConfirmService);
const familyService: FamilyService = TestBed.inject(FamilyService);

spyOn(confirmService, 'confirm').and.returnValue(EMPTY);
spyOn(familyService, 'delete').and.returnValue(of(undefined));

fixture.nativeElement.querySelector('#delete').click();
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('#family')).toBeTruthy();
tester.deleteButton.click();
expect(tester.family).not.toBeNull();

expect(confirmService.confirm).toHaveBeenCalled();
expect(familyService.delete).not.toHaveBeenCalled();
Expand Down

0 comments on commit 721c47c

Please sign in to comment.