vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(test): fix test in challenge 29

Browse Source
This commit is contained in:
ThomasL
2023-07-05 16:44:53 +02:00
parent b7cd85231c
commit 22430f9499
7 changed files with 169 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
apps/testing-todos-list/src/app/list/list.component.spec.ts
View File

@@ -1,21 +1,52 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { of } from 'rxjs';
import { BackendService } from '../backend.service';
import { ListComponent } from './list.component';
import { AddComponent } from './ui/add.component';
import { RowComponent } from './ui/row.component';
const USERS = [
{ id: 1, name: 'titi' },
{ id: 2, name: 'george' },
];
const TICKETS = [
{
id: 0,
description: 'Install a monitor arm',
assigneeId: 1,
completed: false,
},
{
id: 1,
description: 'Coucou',
assigneeId: 1,
completed: false,
},
];
describe('ListComponent', () => {
let component: ListComponent;
let fixture: ComponentFixture<ListComponent>;
//To change with a setup function
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ListComponent, AddComponent, RowComponent],
imports: [ReactiveFormsModule, RouterTestingModule],
providers: [BackendService],
imports: [
ListComponent,
ReactiveFormsModule,
RouterTestingModule,
NoopAnimationsModule,
],
providers: [
{
provide: BackendService,
useValue: {
users: () => of(USERS),
tickets: () => of(TICKETS),
},
},
],
}).compileComponents();
});
@@ -25,18 +56,51 @@ describe('ListComponent', () => {
fixture.detectChanges();
});
it('should search on table', async () => {
await fixture.whenStable();
fixture.detectChanges();
describe('Given Install inside the search input', () => {
it('Then one row is visible', async () => {
//
});
});
let rows = fixture.debugElement.queryAll(By.css('.rows'));
expect(rows.length).toEqual(2);
describe('When typing a description and clicking on add a new ticket', () => {
describe('Given a success answer from API', () => {
it('Then ticket with the description is added to the list with unassigned status', async () => {
//
});
});
component.search.setValue('Install');
fixture.detectChanges();
await fixture.whenStable();
describe('Given a failure answer from API', () => {
it('Then an error is displayed at the bottom of the list', async () => {
//
});
});
});
rows = fixture.debugElement.queryAll(By.css('.rows'));
expect(rows.length).toEqual(1);
describe('When assigning first ticket to george', () => {
describe('Given a success answer from API', () => {
it('Then first ticket is assigned to George', async () => {
//
});
});
describe('Given a failure answer from API', () => {
it('Then an error is displayed at the bottom of the list', async () => {
//
});
});
});
describe('When finishing first ticket', () => {
describe('Given a success answer from API', () => {
it('Then first ticket is done', async () => {
//
});
});
describe('Given a failure answer from API', () => {
it('Then an error is displayed at the bottom of the list', async () => {
//
});
});
});
});

23
apps/testing-todos-list/src/app/list/list.component.ts
View File

@@ -36,15 +36,23 @@ import { RowComponent } from './ui/row.component';
placeholder="write an article" />
</mat-form-field>
<app-add></app-add>
<ng-container *ngrxLet="vm$ as vm">
<app-add
[loading]="vm.loading"
(addTicket)="ticketStore.addTicket($event)"></app-add>
<mat-progress-bar
mode="query"
*ngIf="vm.loading"
class="mt-5"></mat-progress-bar>
<ul class="flex flex-col gap-4 max-w-3xl">
<app-row *ngFor="let t of vm.tickets" [ticket]="t"> </app-row>
<app-row
*ngFor="let t of vm.tickets"
[ticket]="t"
[users]="vm.users"
(assign)="ticketStore.assignTicket($event)"
(closeTicket)="ticketStore.done($event)">
</app-row>
</ul>
<footer class="text-red-500">
{{ vm.error }}
@@ -57,13 +65,8 @@ import { RowComponent } from './ui/row.component';
},
})
export class ListComponent implements OnInit {
private ticketStore = inject(TicketStore);
vm$ = this.ticketStore.select({
tickets: this.ticketStore.tickets$,
loading: this.ticketStore.loading$,
error: this.ticketStore.error$,
});
ticketStore = inject(TicketStore);
readonly vm$ = this.ticketStore.vm$;
search = new FormControl();

47
apps/testing-todos-list/src/app/list/ticket.store.spec.ts
View File

@@ -1,18 +1,5 @@
import { subscribeSpyTo } from '@hirez_io/observer-spy';
import { of, throwError } from 'rxjs';
import { BackendService } from '../backend.service';
import { TicketStore } from './ticket.store';
describe('ticketStore', () => {
let fixture: TicketStore;
let service: BackendService;
beforeEach(() => {
service = new BackendService();
fixture = new TicketStore(service);
});
describe('addTicket$', () => {
describe('TicketStore', () => {
describe('When adding a new Ticket', () => {
const NEW_TICKET = {
id: 1,
description: 'test 2',
@@ -27,34 +14,12 @@ describe('ticketStore', () => {
completed: false,
},
];
it('should add ticket with SUCCESS', () => {
spyOn(service, 'newTicket').and.returnValue(of(NEW_TICKET));
fixture.patchState({ tickets });
const expectedTicket = [...tickets, NEW_TICKET];
fixture.addTicket('test');
const state = subscribeSpyTo(fixture.state$).getFirstValue();
expect(service.newTicket).toHaveBeenCalled();
expect(state.loading).toEqual(false);
expect(state.tickets).toEqual(expectedTicket);
describe('Given a success answer from API', () => {
it('Then array of tickets is of lenght 2', () => {});
});
it('should NOT add ticket because of service FAILURE', () => {
const ERROR = 'error';
spyOn(service, 'newTicket').and.returnValue(throwError(ERROR));
fixture.patchState({ tickets });
const expectedTicket = [...tickets];
fixture.addTicket('test');
const state = subscribeSpyTo(fixture.state$).getFirstValue();
expect(service.newTicket).toHaveBeenCalled();
expect(state.loading).toEqual(false);
expect(state.tickets).toEqual(expectedTicket);
expect(state.error).toEqual(ERROR);
describe('Given a failure answer from API', () => {
it('Then array of tickets still of lenght 1 and error is set', () => {});
});
});
});

10
apps/testing-todos-list/src/app/list/ticket.store.ts
View File

@@ -59,6 +59,16 @@ export class TicketStore
)
);
readonly vm$ = this.select(
{
tickets: this.tickets$,
users: this.users$,
loading: this.loading$,
error: this.error$,
},
{ debounce: true }
);
readonly updateAssignee = this.updater((state, ticket: Ticket) => {
const newTickets = [...state.tickets];
const index = newTickets.findIndex((t) => t.id === ticket.id);

18
apps/testing-todos-list/src/app/list/ui/add.component.ts
View File

@@ -1,5 +1,5 @@
import { AsyncPipe, NgIf } from '@angular/common';
import { Component } from '@angular/core';
import { NgIf } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import {
FormControl,
FormGroup,
@@ -9,7 +9,6 @@ import {
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { TicketStore } from '../ticket.store';
@Component({
selector: 'app-add',
@@ -19,7 +18,6 @@ import { TicketStore } from '../ticket.store';
MatFormFieldModule,
MatInputModule,
MatButtonModule,
AsyncPipe,
NgIf,
],
template: ` <form [formGroup]="form" #ngForm="ngForm" (ngSubmit)="submit()">
@@ -39,23 +37,23 @@ import { TicketStore } from '../ticket.store';
mat-flat-button
color="primary"
type="submit"
[disabled]="loading$ | async">
[disabled]="loading">
Add new Ticket
</button>
</form>`,
})
export class AddComponent {
@Input() loading = false;
@Output() addTicket = new EventEmitter<string>();
form = new FormGroup({
description: new FormControl(null, Validators.required),
});
loading$ = this.ticketStore.loading$;
constructor(private ticketStore: TicketStore) {}
submit() {
if (this.form.valid) {
this.ticketStore.addTicket(this.form.value.description ?? '');
this.addTicket.emit(this.form.value.description ?? '');
}
}
}

41
apps/testing-todos-list/src/app/list/ui/row.component.spec.ts Normal file
View File

@@ -0,0 +1,41 @@
const USERS = [
{ id: 1, name: 'titi' },
{ id: 2, name: 'George' },
];
const TICKET_NOT_ASSIGNED = {
id: 0,
description: 'Install a monitor arm',
assignee: 'unassigned',
completed: false,
};
const TICKET_ASSIGNED = {
id: 1,
description: 'Install a monitor arm',
assignee: 'titi',
completed: false,
};
describe('RowComponent', () => {
describe('Given an unassigned ticket', () => {
describe('When we assign it to titi', () => {
it('Then assign event is emitted with ticketId 0 and userId 1', async () => {
//
});
});
});
describe('Given an assigned ticket', () => {
describe('When we click the done button', () => {
it('Then closeTicket event is emitted with ticketId 1 ', async () => {
//
});
});
});
describe('When clicking on ticket', () => {
it('Then navigation should be triggered with url detail/0', async () => {
//
});
});
});

30
apps/testing-todos-list/src/app/list/ui/row.component.ts
View File

@@ -1,13 +1,12 @@
import { AsyncPipe, NgFor } from '@angular/common';
import { Component, Input } from '@angular/core';
import { NgFor } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { RouterLink } from '@angular/router';
import { Ticket, TicketUser } from '../../backend.service';
import { TicketStore } from '../ticket.store';
import { Ticket, TicketUser, User } from '../../backend.service';
@Component({
selector: 'app-row',
@@ -19,7 +18,6 @@ import { TicketStore } from '../ticket.store';
MatInputModule,
MatButtonModule,
MatSelectModule,
AsyncPipe,
NgFor,
],
template: `
@@ -45,17 +43,15 @@ import { TicketStore } from '../ticket.store';
<mat-form-field appearance="fill">
<mat-label>Assign to</mat-label>
<mat-select formControlName="assignee">
<mat-option
*ngFor="let user of users$ | async"
[value]="user.id"
>{{ user.name }}</mat-option
>
<mat-option *ngFor="let user of users" [value]="user.id">{{
user.name
}}</mat-option>
</mat-select>
</mat-form-field>
<button mat-flat-button color="primary" type="submit">Assign</button>
</form>
<button
(click)="done(ticket.id)"
(click)="closeTicket.emit(ticket.id)"
mat-flat-button
color="primary"
type="button">
@@ -70,23 +66,19 @@ import { TicketStore } from '../ticket.store';
})
export class RowComponent {
@Input() ticket!: TicketUser | Ticket;
@Input() users!: User[];
users$ = this.ticketStore.users$;
@Output() assign = new EventEmitter<{ userId: number; ticketId: number }>();
@Output() closeTicket = new EventEmitter<number>();
form = new FormGroup({
assignee: new FormControl(0, { nonNullable: true }),
});
constructor(private ticketStore: TicketStore) {}
submit() {
this.ticketStore.assignTicket({
this.assign.emit({
ticketId: this.ticket.id,
userId: this.form.getRawValue().assignee,
});
}
done(ticketId: number) {
this.ticketStore.done(ticketId);
}
}