feat: add edit page

src/app/components/contact-list-table/contact-list-table.spec.ts

@@ -7,21 +7,25 @@ import { ContactService } from '../../pages/main/contact.service';
 import { ContactDTO } from '../../models/ContactDTO';
 import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
+import { Router } from '@angular/router';
 
 describe('ContactListTable', () => {
   let component: ContactListTable;
   let fixture: ComponentFixture<ContactListTable>;
   let contactService: jasmine.SpyObj<ContactService>;
+  let router: jasmine.SpyObj<Router>;
   let CONTACT_LIST_MOCK: ContactDTO[];
 
   beforeEach(async () => {
     contactService = jasmine.createSpyObj(ContactService.name, ['delete']);
+    router = jasmine.createSpyObj(Router.name, ['navigate']);
     CONTACT_LIST_MOCK = [new ContactDTO(1, 'MOCK', 'MOCK', '5491122222222')];
     await TestBed.configureTestingModule({
       imports: [ContactListTable],
       providers: [
         { provide: STRINGS_INJECTOR, useValue: strings },
         { provide: ContactService, useValue: contactService },
+        { provide: Router, useValue: router },
       ],
     }).compileComponents();
     contactService.delete.and.returnValue(of([]));
@@ -36,7 +40,7 @@ describe('ContactListTable', () => {
   });
 
   describe('delete', () => {
-    it('should call for valid ID', () => {
+    it('should call delete for valid ID', () => {
       const deleteSpy = spyOn(component, 'delete').and.callThrough();
       const deleteButton = fixture.debugElement
         .query(By.css('app-contact-actions-bar'))
@@ -55,4 +59,22 @@ describe('ContactListTable', () => {
     });
   });
 
+  describe('edit', () => {
+    it("shouldn't navigate if ID is falsy", () => {
+      CONTACT_LIST_MOCK[0].id = undefined;
+      const editButton = fixture.debugElement
+        .query(By.css('app-contact-actions-bar'))
+        .query(By.css('.btn--edit'));
+      editButton.triggerEventHandler('click');
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+
+    it('should call navigate for valid ID', () => {
+      const editButton = fixture.debugElement
+        .query(By.css('app-contact-actions-bar'))
+        .query(By.css('.btn--edit'));
+      editButton.triggerEventHandler('click');
+      expect(router.navigate).toHaveBeenCalledOnceWith(['edit', CONTACT_LIST_MOCK[0].id]);
+    });
+  });
 });

src/app/components/contact-list-table/contact-list-table.ts

@@ -1,8 +1,9 @@
 import { Component, inject, input } from '@angular/core';
 import { STRINGS_INJECTOR } from '../../app.config';
 import { ContactDTO } from '../../models/ContactDTO';
-import { ContactActionsBar } from "../contact-actions-bar/contact-actions-bar";
+import { ContactActionsBar } from '../contact-actions-bar/contact-actions-bar';
 import { ContactService } from '../../pages/main/contact.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-contact-list-table',
@@ -14,14 +15,15 @@ export class ContactListTable {
   contactList = input<ContactDTO[]>([]);
   protected readonly strings = inject(STRINGS_INJECTOR);
   private readonly contactService = inject(ContactService);
+  private readonly router = inject(Router);
 
   edit(id?: number) {
-    if(!id) return;
+    if (!id) return;
+    this.router.navigate(['edit', id]);
   }
 
   delete(id?: number) {
-    if(!id) return;
+    if (!id) return;
     this.contactService.delete(id).subscribe();
   }
-  
 }