fix(test): fix test in challenge 29

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

@@ -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: [
-      imports: [ReactiveFormsModule, RouterTestingModule],
+        ListComponent,
-      providers: [BackendService],
+        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 () => {
+  describe('Given Install inside the search input', () => {
-    await fixture.whenStable();
+    it('Then one row is visible', async () => {
-    fixture.detectChanges();
+      //
-
+    });
-    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', () => {
-    component.search.setValue('Install');
+    describe('Given a success answer from API', () => {
-    fixture.detectChanges();
+      it('Then ticket with the description is added to the list with unassigned status', async () => {
-    await fixture.whenStable();
+        //
-
+      });
-    rows = fixture.debugElement.queryAll(By.css('.rows'));
+    });
-    expect(rows.length).toEqual(1);
+
+    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 () => {
+        //
+      });
+    });
   });
 });

apps/testing-todos-list/src/app/list/list.component.ts

@@ -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);
+  ticketStore = inject(TicketStore);
-
+  readonly vm$ = this.ticketStore.vm$;
-  vm$ = this.ticketStore.select({
-    tickets: this.ticketStore.tickets$,
-    loading: this.ticketStore.loading$,
-    error: this.ticketStore.error$,
-  });
 
   search = new FormControl();
 

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

@@ -1,18 +1,5 @@
-import { subscribeSpyTo } from '@hirez_io/observer-spy';
+describe('TicketStore', () => {
-import { of, throwError } from 'rxjs';
+  describe('When adding a new Ticket', () => {
-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$', () => {
     const NEW_TICKET = {
       id: 1,
       description: 'test 2',
@@ -27,34 +14,12 @@ describe('ticketStore', () => {
         completed: false,
       },
     ];
-    it('should add ticket with SUCCESS', () => {
+    describe('Given a success answer from API', () => {
-      spyOn(service, 'newTicket').and.returnValue(of(NEW_TICKET));
+      it('Then array of tickets is of lenght 2', () => {});
-      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);
     });
 
-    it('should NOT add ticket because of service FAILURE', () => {
+    describe('Given a failure answer from API', () => {
-      const ERROR = 'error';
+      it('Then array of tickets still of lenght 1 and error is set', () => {});
-      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);
     });
   });
 });

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

@@ -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);

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

@@ -1,5 +1,5 @@
-import { AsyncPipe, NgIf } from '@angular/common';
+import { NgIf } from '@angular/common';
-import { Component } from '@angular/core';
+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 ?? '');
     }
   }
 }

apps/testing-todos-list/src/app/list/ui/row.component.spec.ts

@@ -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 () => {
+      //
+    });
+  });
+});

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

@@ -1,13 +1,12 @@
-import { AsyncPipe, NgFor } from '@angular/common';
+import { NgFor } from '@angular/common';
-import { Component, Input } from '@angular/core';
+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 { Ticket, TicketUser, User } from '../../backend.service';
-import { TicketStore } from '../ticket.store';
 
 @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
+              <mat-option *ngFor="let user of users" [value]="user.id">{{
-                *ngFor="let user of users$ | async"
+                user.name
-                [value]="user.id"
+              }}</mat-option>
-                >{{ 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);
-  }
 }