mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-13 14:23:02 -05:00
fix(test): move all test apps
This commit is contained in:
thomas
112
apps/testing/todos-list/src/app/list/list.component.spec.ts
Normal file
112
apps/testing/todos-list/src/app/list/list.component.spec.ts
Normal file
@@ -0,0 +1,112 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
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';
|
||||
|
||||
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({
|
||||
imports: [
|
||||
ListComponent,
|
||||
ReactiveFormsModule,
|
||||
RouterTestingModule,
|
||||
NoopAnimationsModule,
|
||||
],
|
||||
providers: [
|
||||
{
|
||||
provide: BackendService,
|
||||
useValue: {
|
||||
users: () => of(USERS),
|
||||
tickets: () => of(TICKETS),
|
||||
},
|
||||
},
|
||||
],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
describe('Given Install inside the search input', () => {
|
||||
it('Then one row is visible', async () => {
|
||||
//
|
||||
});
|
||||
});
|
||||
|
||||
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 () => {
|
||||
//
|
||||
});
|
||||
});
|
||||
|
||||
describe('Given a failure answer from API', () => {
|
||||
it('Then an error is displayed at the bottom of the list', async () => {
|
||||
//
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
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 () => {
|
||||
//
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('When clicking on first ticket', () => {
|
||||
it('Then we navigate to detail/0', async () => {
|
||||
//
|
||||
});
|
||||
});
|
||||
});
|
||||
76
apps/testing/todos-list/src/app/list/list.component.ts
Normal file
76
apps/testing/todos-list/src/app/list/list.component.ts
Normal file
@@ -0,0 +1,76 @@
|
||||
import { NgFor, NgIf } from '@angular/common';
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { LetDirective } from '@ngrx/component';
|
||||
import { provideComponentStore } from '@ngrx/component-store';
|
||||
import { TicketStore } from './ticket.store';
|
||||
import { AddComponent } from './ui/add.component';
|
||||
import { RowComponent } from './ui/row.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-list',
|
||||
standalone: true,
|
||||
imports: [
|
||||
ReactiveFormsModule,
|
||||
AddComponent,
|
||||
RowComponent,
|
||||
MatFormFieldModule,
|
||||
MatProgressBarModule,
|
||||
NgIf,
|
||||
NgFor,
|
||||
MatInputModule,
|
||||
LetDirective,
|
||||
],
|
||||
template: `
|
||||
<h2 class="text-xl mb-2">Tickets</h2>
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Search</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
[formControl]="search"
|
||||
placeholder="write an article" />
|
||||
</mat-form-field>
|
||||
|
||||
<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"
|
||||
[users]="vm.users"
|
||||
(assign)="ticketStore.assignTicket($event)"
|
||||
(closeTicket)="ticketStore.done($event)">
|
||||
</app-row>
|
||||
</ul>
|
||||
<footer class="text-red-500">
|
||||
{{ vm.error }}
|
||||
</footer>
|
||||
</ng-container>
|
||||
`,
|
||||
providers: [provideComponentStore(TicketStore)],
|
||||
host: {
|
||||
class: 'p-5 block',
|
||||
},
|
||||
})
|
||||
export class ListComponent implements OnInit {
|
||||
ticketStore = inject(TicketStore);
|
||||
readonly vm$ = this.ticketStore.vm$;
|
||||
|
||||
search = new FormControl();
|
||||
|
||||
ngOnInit(): void {
|
||||
this.ticketStore.search(this.search.valueChanges);
|
||||
}
|
||||
}
|
||||
29
apps/testing/todos-list/src/app/list/ticket.store.spec.ts
Normal file
29
apps/testing/todos-list/src/app/list/ticket.store.spec.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
describe('TicketStore', () => {
|
||||
describe('When init', () => {
|
||||
it('Then calls backend.users', async () => {
|
||||
//
|
||||
});
|
||||
|
||||
it('Then calls backend.tickets', async () => {
|
||||
//
|
||||
});
|
||||
|
||||
describe('Given all api returns success response', () => {
|
||||
it('Then tickets and users should be merged ', async () => {
|
||||
//
|
||||
});
|
||||
});
|
||||
|
||||
describe('Given users api returns failure response', () => {
|
||||
it('Then tickets should not have any assignee', () => {
|
||||
//
|
||||
});
|
||||
});
|
||||
|
||||
describe('When adding a new ticket with success', () => {
|
||||
it('Then ticket is added to the list', async () => {
|
||||
//
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
180
apps/testing/todos-list/src/app/list/ticket.store.ts
Normal file
180
apps/testing/todos-list/src/app/list/ticket.store.ts
Normal file
@@ -0,0 +1,180 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import {
|
||||
ComponentStore,
|
||||
OnStateInit,
|
||||
OnStoreInit,
|
||||
tapResponse,
|
||||
} from '@ngrx/component-store';
|
||||
import { pipe } from 'rxjs';
|
||||
import { mergeMap, tap } from 'rxjs/operators';
|
||||
import { BackendService, Ticket, User } from '../backend.service';
|
||||
|
||||
export interface TicketState {
|
||||
tickets: Ticket[];
|
||||
search: string;
|
||||
users: User[];
|
||||
loading: boolean;
|
||||
error: unknown;
|
||||
}
|
||||
|
||||
const initialState: TicketState = {
|
||||
tickets: [],
|
||||
search: '',
|
||||
users: [],
|
||||
loading: false,
|
||||
error: '',
|
||||
};
|
||||
|
||||
@Injectable()
|
||||
export class TicketStore
|
||||
extends ComponentStore<TicketState>
|
||||
implements OnStoreInit, OnStateInit
|
||||
{
|
||||
readonly users$ = this.select((state) => state.users);
|
||||
readonly error$ = this.select((state) => state.error);
|
||||
readonly loading$ = this.select((state) => state.loading);
|
||||
private readonly ticketsInput$ = this.select((state) => state.tickets);
|
||||
private readonly search$ = this.select((state) => state.search);
|
||||
|
||||
private readonly ticketsUsers$ = this.select(
|
||||
this.users$,
|
||||
this.ticketsInput$,
|
||||
(users, tickets) =>
|
||||
users && users.length > 0
|
||||
? tickets.map((ticket) => ({
|
||||
...ticket,
|
||||
assignee:
|
||||
users.find((user) => user.id === ticket.assigneeId)?.name ??
|
||||
'unassigned',
|
||||
}))
|
||||
: tickets
|
||||
);
|
||||
|
||||
readonly tickets$ = this.select(
|
||||
this.ticketsUsers$,
|
||||
this.search$,
|
||||
(tickets, search) =>
|
||||
tickets.filter((t) =>
|
||||
t.description.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
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);
|
||||
newTickets[index] = ticket;
|
||||
return {
|
||||
...state,
|
||||
loading: false,
|
||||
tickets: newTickets,
|
||||
};
|
||||
});
|
||||
|
||||
readonly search = this.updater((state, search: string) => ({
|
||||
...state,
|
||||
search,
|
||||
}));
|
||||
|
||||
private backend = inject(BackendService);
|
||||
|
||||
ngrxOnStoreInit() {
|
||||
this.setState(initialState);
|
||||
}
|
||||
|
||||
ngrxOnStateInit() {
|
||||
this.loadTickets();
|
||||
this.loadUsers();
|
||||
}
|
||||
|
||||
readonly loadTickets = this.effect<void>(
|
||||
pipe(
|
||||
tap(() => this.patchState({ loading: true, error: '' })),
|
||||
mergeMap(() =>
|
||||
this.backend.tickets().pipe(
|
||||
tapResponse(
|
||||
(tickets) =>
|
||||
this.patchState({
|
||||
loading: false,
|
||||
tickets,
|
||||
}),
|
||||
(error: unknown) => this.patchState({ error, loading: false })
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
readonly loadUsers = this.effect<void>(
|
||||
pipe(
|
||||
tap(() => this.patchState({ loading: true, error: '' })),
|
||||
mergeMap(() =>
|
||||
this.backend.users().pipe(
|
||||
tapResponse(
|
||||
(users) =>
|
||||
this.patchState({
|
||||
loading: false,
|
||||
users,
|
||||
}),
|
||||
(error: unknown) => this.patchState({ error, loading: false })
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
readonly addTicket = this.effect<string>(
|
||||
pipe(
|
||||
tap(() => this.patchState({ loading: true, error: '' })),
|
||||
mergeMap((description) =>
|
||||
this.backend.newTicket({ description }).pipe(
|
||||
tapResponse(
|
||||
(newTicket) =>
|
||||
this.patchState((state: TicketState) => ({
|
||||
loading: false,
|
||||
tickets: [...state.tickets, newTicket],
|
||||
})),
|
||||
(error: unknown) => this.patchState({ error, loading: false })
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
readonly assignTicket = this.effect<{ userId: number; ticketId: number }>(
|
||||
pipe(
|
||||
tap(() => this.patchState({ loading: true, error: '' })),
|
||||
mergeMap((info) =>
|
||||
this.backend.assign(info.ticketId, Number(info.userId)).pipe(
|
||||
tapResponse(
|
||||
(newTicket) => this.updateAssignee(newTicket),
|
||||
(error: unknown) => this.patchState({ error, loading: false })
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
readonly done = this.effect<number>(
|
||||
pipe(
|
||||
tap(() => this.patchState({ loading: true, error: '' })),
|
||||
mergeMap((ticketId) =>
|
||||
this.backend.complete(ticketId, true).pipe(
|
||||
tapResponse(
|
||||
(newTicket) => this.updateAssignee(newTicket),
|
||||
(error: unknown) => this.patchState({ error, loading: false })
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
59
apps/testing/todos-list/src/app/list/ui/add.component.ts
Normal file
59
apps/testing/todos-list/src/app/list/ui/add.component.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
import { NgIf } from '@angular/common';
|
||||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
import {
|
||||
FormControl,
|
||||
FormGroup,
|
||||
ReactiveFormsModule,
|
||||
Validators,
|
||||
} from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
|
||||
@Component({
|
||||
selector: 'app-add',
|
||||
standalone: true,
|
||||
imports: [
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatButtonModule,
|
||||
NgIf,
|
||||
],
|
||||
template: ` <form [formGroup]="form" #ngForm="ngForm" (ngSubmit)="submit()">
|
||||
<mat-form-field class="example-full-width" appearance="fill">
|
||||
<mat-label>Description</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
formControlName="description"
|
||||
placeholder="My new task" />
|
||||
<mat-error *ngIf="form.controls.description.hasError('required')">
|
||||
Description is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<button
|
||||
class="ml-4"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
type="submit"
|
||||
[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),
|
||||
});
|
||||
|
||||
submit() {
|
||||
if (this.form.valid) {
|
||||
this.addTicket.emit(this.form.value.description ?? '');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 () => {
|
||||
//
|
||||
});
|
||||
});
|
||||
});
|
||||
84
apps/testing/todos-list/src/app/list/ui/row.component.ts
Normal file
84
apps/testing/todos-list/src/app/list/ui/row.component.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
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, User } from '../../backend.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-row',
|
||||
standalone: true,
|
||||
imports: [
|
||||
RouterLink,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatButtonModule,
|
||||
MatSelectModule,
|
||||
NgFor,
|
||||
],
|
||||
template: `
|
||||
<li
|
||||
class="flex-grow flex items-center gap-5 justify-between"
|
||||
[class.bg-green-200]="ticket.completed">
|
||||
<button [routerLink]="['/detail', ticket.id]" class="flex flex-col gap-2">
|
||||
<div><span class="font-bold">Ticket:</span> {{ ticket.id }}</div>
|
||||
<div>
|
||||
<span class="font-bold">Description:</span> {{ ticket.description }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-bold">Assignee:</span> {{ $any(ticket).assignee }}
|
||||
</div>
|
||||
<div><span class="font-bold">Done:</span> {{ ticket.completed }}</div>
|
||||
</button>
|
||||
<div class="flex flex-col">
|
||||
<form
|
||||
[formGroup]="form"
|
||||
#ngForm="ngForm"
|
||||
(ngSubmit)="submit()"
|
||||
class="flex justify-center items-center gap-4">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Assign to</mat-label>
|
||||
<mat-select formControlName="assignee">
|
||||
<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)="closeTicket.emit(ticket.id)"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
type="button">
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
`,
|
||||
host: {
|
||||
class: 'p-4 border border-blue-500 rounded flex',
|
||||
},
|
||||
})
|
||||
export class RowComponent {
|
||||
@Input() ticket!: TicketUser | Ticket;
|
||||
@Input() users!: User[];
|
||||
|
||||
@Output() assign = new EventEmitter<{ userId: number; ticketId: number }>();
|
||||
@Output() closeTicket = new EventEmitter<number>();
|
||||
|
||||
form = new FormGroup({
|
||||
assignee: new FormControl(0, { nonNullable: true }),
|
||||
});
|
||||
|
||||
submit() {
|
||||
this.assign.emit({
|
||||
ticketId: this.ticket.id,
|
||||
userId: this.form.getRawValue().assignee,
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user