fix(WEB-1041): render identifier images after refresh (#3730)

AnvayKharb · web-flow · commit bd0411911225 · 2026-07-17T09:18:31.000-06:00
diff --git a/src/app/clients/clients-view/identities-tab/identities-tab.component.spec.ts b/src/app/clients/clients-view/identities-tab/identities-tab.component.spec.ts
@@ -0,0 +1,106 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { describe, it, expect, jest, beforeEach } from '@jest/globals';
+
+import { ClientsService } from '../../clients.service';
+import { AuthenticationService } from 'app/core/authentication/authentication.service';
+import { DocumentPreviewService } from 'app/shared/services/document-preview.service';
+import { IdentitiesTabComponent } from './identities-tab.component';
+
+describe('IdentitiesTabComponent', () => {
+  let component: IdentitiesTabComponent;
+  let clientsService: jest.Mocked<ClientsService>;
+  let documentPreviewService: jest.Mocked<DocumentPreviewService>;
+  let markForCheck: jest.Mock;
+
+  beforeEach(async () => {
+    clientsService = {
+      downloadClientIdentificationDocument: jest.fn(() => of(new Blob(['image'], { type: 'image/png' })))
+    } as any;
+    documentPreviewService = {
+      isPreviewable: jest.fn(() => true),
+      resolvePreviewUrl: jest.fn((document: any, downloadFn: any) => {
+        downloadFn(document);
+        return Promise.resolve({ url: `blob:${document.id}`, type: 'image' });
+      }),
+      release: jest.fn()
+    } as any;
+
+    await TestBed.configureTestingModule({
+      imports: [
+        IdentitiesTabComponent,
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        { provide: ClientsService, useValue: clientsService },
+        {
+          provide: AuthenticationService,
+          useValue: { getCredentials: jest.fn(() => ({ permissions: ['ALL_FUNCTIONS'] })) }
+        },
+        { provide: DocumentPreviewService, useValue: documentPreviewService },
+        { provide: MatDialog, useValue: { open: jest.fn() } },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            parent: {
+              snapshot: {
+                paramMap: {
+                  get: jest.fn(() => 'client-99')
+                }
+              }
+            },
+            data: of({ clientIdentities: [], clientIdentifierTemplate: { allowedDocumentTypes: [] } })
+          }
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(IdentitiesTabComponent);
+    component = fixture.componentInstance;
+    markForCheck = jest.fn();
+    (component as any).changeDetectorRef = { markForCheck };
+  });
+
+  it('uses document parentEntityId when resolving a thumbnail', async () => {
+    (component as any).setThumbnail({
+      id: 'doc-1',
+      parentEntityId: 'identifier-1',
+      fileName: 'front.png'
+    });
+
+    await Promise.resolve();
+
+    expect(clientsService.downloadClientIdentificationDocument).toHaveBeenCalledWith('identifier-1', 'doc-1');
+    expect(clientsService.downloadClientIdentificationDocument).not.toHaveBeenCalledWith('client-99', 'doc-1');
+    expect(component.previewThumbnails).toEqual({ 'doc-1': 'blob:doc-1' });
+    expect(markForCheck).toHaveBeenCalledTimes(1);
+  });
+
+  it('falls back to identity id instead of client id when document parentEntityId is absent', async () => {
+    (component as any).setThumbnail(
+      {
+        id: 'doc-2',
+        fileName: 'back.png'
+      },
+      { id: 'identifier-2' }
+    );
+
+    await Promise.resolve();
+
+    expect(clientsService.downloadClientIdentificationDocument).toHaveBeenCalledWith('identifier-2', 'doc-2');
+    expect(clientsService.downloadClientIdentificationDocument).not.toHaveBeenCalledWith('client-99', 'doc-2');
+    expect(component.previewThumbnails).toEqual({ 'doc-2': 'blob:doc-2' });
+    expect(markForCheck).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/app/clients/clients-view/identities-tab/identities-tab.component.ts b/src/app/clients/clients-view/identities-tab/identities-tab.component.ts
@@ -9,6 +9,7 @@
 /** Angular Imports */
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   DestroyRef,
   ElementRef,
@@ -86,6 +87,7 @@ export class IdentitiesTabComponent implements OnDestroy {
   private clientService = inject(ClientsService);
   private translateService = inject(TranslateService);
   private documentPreviewService = inject(DocumentPreviewService);
+  private changeDetectorRef = inject(ChangeDetectorRef);
 
   private destroyRef = inject(DestroyRef);
 
@@ -284,7 +286,7 @@ export class IdentitiesTabComponent implements OnDestroy {
             this.clientService.downloadClientIdentificationDocument(doc.parentEntityId || identity.id, doc.id)
           );
           if (preview.type === 'image') {
-            this.previewThumbnails[doc.id] = preview.url;
+            this.setPreviewThumbnail(doc.id, preview.url);
           }
           items.push({
             src: preview.url,
@@ -343,28 +345,40 @@ export class IdentitiesTabComponent implements OnDestroy {
     }
   }
 
-  private setThumbnail(document: any): void {
+  private setThumbnail(document: any, identity?: any): void {
     if (!this.documentPreviewService.isPreviewable(document)) {
       return;
     }
+    const identifierId = document.parentEntityId || identity?.id;
+    if (!identifierId) {
+      return;
+    }
     this.documentPreviewService
       .resolvePreviewUrl(document, () =>
-        this.clientService.downloadClientIdentificationDocument(document.parentEntityId || this.clientId, document.id)
+        this.clientService.downloadClientIdentificationDocument(identifierId, document.id)
       )
       .then((preview) => {
         if (preview.type === 'image') {
-          this.previewThumbnails[document.id] = preview.url;
+          this.setPreviewThumbnail(document.id, preview.url);
         }
       })
       .catch((): void => undefined);
   }
 
+  private setPreviewThumbnail(documentId: string, thumbnailUrl: string): void {
+    this.previewThumbnails = {
+      ...this.previewThumbnails,
+      [documentId]: thumbnailUrl
+    };
+    this.changeDetectorRef.markForCheck();
+  }
+
   private prefetchThumbnails(): void {
     if (!Array.isArray(this.clientIdentities)) {
       return;
     }
     this.clientIdentities.forEach((identity: any) => {
-      identity.documents?.forEach((doc: any) => this.setThumbnail(doc));
+      identity.documents?.forEach((doc: any) => this.setThumbnail(doc, identity));
     });
   }
 }
diff --git a/src/app/clients/common-resolvers/client-identities.resolver.spec.ts b/src/app/clients/common-resolvers/client-identities.resolver.spec.ts
@@ -0,0 +1,91 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { TestBed } from '@angular/core/testing';
+import { ActivatedRouteSnapshot } from '@angular/router';
+import { of, Subject } from 'rxjs';
+import { describe, it, expect, jest, beforeEach } from '@jest/globals';
+
+import { ClientsService } from '../clients.service';
+import { ClientIdentitiesResolver } from './client-identities.resolver';
+
+describe('ClientIdentitiesResolver', () => {
+  let resolver: ClientIdentitiesResolver;
+  let clientsService: jest.Mocked<ClientsService>;
+
+  const route = {
+    parent: {
+      paramMap: {
+        get: jest.fn(() => '11')
+      }
+    }
+  } as unknown as ActivatedRouteSnapshot;
+
+  beforeEach(() => {
+    clientsService = {
+      getClientIdentifiers: jest.fn(),
+      getClientIdentificationDocuments: jest.fn()
+    } as any;
+
+    TestBed.configureTestingModule({
+      providers: [
+        ClientIdentitiesResolver,
+        { provide: ClientsService, useValue: clientsService }
+      ]
+    });
+
+    resolver = TestBed.inject(ClientIdentitiesResolver);
+  });
+
+  it('emits identities only after their documents have loaded', () => {
+    const firstDocuments$ = new Subject<any[]>();
+    const secondDocuments$ = new Subject<any[]>();
+    const emitted: any[] = [];
+
+    clientsService.getClientIdentifiers.mockReturnValue(
+      of([
+        { id: 101, documentKey: 'A-101' },
+        { id: 202, documentKey: 'B-202' }
+      ])
+    );
+    clientsService.getClientIdentificationDocuments.mockImplementation((identifierId: any) =>
+      identifierId === 101 ? firstDocuments$ : secondDocuments$
+    );
+
+    resolver.resolve(route).subscribe((identities) => emitted.push(identities));
+
+    expect(clientsService.getClientIdentifiers).toHaveBeenCalledWith('11');
+    expect(clientsService.getClientIdentificationDocuments).toHaveBeenCalledWith(101);
+    expect(clientsService.getClientIdentificationDocuments).toHaveBeenCalledWith(202);
+    expect(emitted).toEqual([]);
+
+    firstDocuments$.next([{ id: 1, name: 'front.png' }]);
+    firstDocuments$.complete();
+    expect(emitted).toEqual([]);
+
+    secondDocuments$.next([{ id: 2, name: 'back.png' }]);
+    secondDocuments$.complete();
+
+    expect(emitted).toEqual([
+      [
+        { id: 101, documentKey: 'A-101', documents: [{ id: 1, name: 'front.png' }] },
+        { id: 202, documentKey: 'B-202', documents: [{ id: 2, name: 'back.png' }] }
+      ]
+    ]);
+  });
+
+  it('emits an empty array without requesting documents when there are no identities', () => {
+    const emitted: any[] = [];
+    clientsService.getClientIdentifiers.mockReturnValue(of([]));
+
+    resolver.resolve(route).subscribe((identities) => emitted.push(identities));
+
+    expect(emitted).toEqual([[]]);
+    expect(clientsService.getClientIdentificationDocuments).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/app/clients/common-resolvers/client-identities.resolver.ts b/src/app/clients/common-resolvers/client-identities.resolver.ts
@@ -11,8 +11,8 @@ import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
-import { Observable, forkJoin, from } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable, forkJoin, of } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 
 /** Custom Services */
 import { ClientsService } from '../clients.service';
@@ -30,20 +30,22 @@ export class ClientIdentitiesResolver {
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
     const clientId = route.parent.paramMap.get('clientId');
-    let identitiesData: any;
     return this.clientsService.getClientIdentifiers(clientId).pipe(
-      map((identities: any) => {
-        identitiesData = identities;
-        const docObservable: Observable<any>[] = [];
-        identities.forEach((identity: any) => {
-          docObservable.push(this.clientsService.getClientIdentificationDocuments(identity.id));
-        });
-        forkJoin(docObservable).subscribe((documents) => {
-          documents.forEach((document, index) => {
-            identitiesData[index].documents = document;
-          });
-        });
-        return identitiesData;
+      switchMap((identities: any[]) => {
+        if (!identities?.length) {
+          return of(identities || []);
+        }
+
+        return forkJoin(
+          identities.map((identity: any) =>
+            this.clientsService.getClientIdentificationDocuments(identity.id).pipe(
+              map((documents: any[]) => ({
+                ...identity,
+                documents: documents || []
+              }))
+            )
+          )
+        );
       })
     );
   }
