{{selectedContact?.doc?.name}}
{{'contact.deceased.title' | translate}}
diff --git a/webapp/src/ts/modules/contacts/contacts-content.component.ts b/webapp/src/ts/modules/contacts/contacts-content.component.ts
index 21c643f2f60..0affc0fca95 100644
--- a/webapp/src/ts/modules/contacts/contacts-content.component.ts
+++ b/webapp/src/ts/modules/contacts/contacts-content.component.ts
@@ -27,6 +27,7 @@ import { ErrorLogComponent } from '@mm-components/error-log/error-log.component'
import { FastActionButtonComponent } from '@mm-components/fast-action-button/fast-action-button.component';
import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
import { AuthDirective } from '@mm-directives/auth.directive';
+import { ContactPhotoComponent } from '@mm-components/contact-photo/contact-photo.component';
import { ContentRowListItemComponent } from '@mm-components/content-row-list-item/content-row-list-item.component';
import { ResourceIconPipe } from '@mm-pipes/resource-icon.pipe';
import { SummaryPipe } from '@mm-pipes/message.pipe';
@@ -47,6 +48,7 @@ import {
NgFor,
TranslateDirective,
AuthDirective,
+ ContactPhotoComponent,
ContentRowListItemComponent,
RouterLink,
TranslatePipe,
diff --git a/webapp/tests/karma/ts/components/contact-photo.component.spec.ts b/webapp/tests/karma/ts/components/contact-photo.component.spec.ts
new file mode 100644
index 00000000000..fd6ce23f482
--- /dev/null
+++ b/webapp/tests/karma/ts/components/contact-photo.component.spec.ts
@@ -0,0 +1,206 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import sinon from 'sinon';
+import { expect } from 'chai';
+
+import { ContactPhotoComponent } from '@mm-components/contact-photo/contact-photo.component';
+import { DbService } from '@mm-services/db.service';
+import { ResourceIconsService } from '@mm-services/resource-icons.service';
+
+describe('ContactPhotoComponent', () => {
+ let component: ContactPhotoComponent;
+ let fixture: ComponentFixture
;
+ let getAttachment;
+ let get;
+ let createObjectURL;
+ let revokeObjectURL;
+ let originalCreate;
+ let originalRevoke;
+ let resourceIconsService;
+
+ const photoBlob = new Blob(['photo-bytes'], { type: 'image/jpeg' });
+
+ beforeEach(() => {
+ getAttachment = sinon.stub().resolves(photoBlob);
+ get = sinon.stub();
+ const dbService = {
+ get: () => ({ getAttachment, get }),
+ };
+ resourceIconsService = {
+ getImg: sinon.stub().returns(''),
+ };
+
+ createObjectURL = sinon.stub().returns('blob:fake-url');
+ revokeObjectURL = sinon.stub();
+ originalCreate = window.URL.createObjectURL;
+ originalRevoke = window.URL.revokeObjectURL;
+ window.URL.createObjectURL = createObjectURL;
+ window.URL.revokeObjectURL = revokeObjectURL;
+
+ return TestBed.configureTestingModule({
+ imports: [
+ TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }),
+ ContactPhotoComponent,
+ ],
+ providers: [
+ { provide: DbService, useValue: dbService },
+ { provide: ResourceIconsService, useValue: resourceIconsService },
+ ],
+ })
+ .compileComponents()
+ .then(() => {
+ fixture = TestBed.createComponent(ContactPhotoComponent);
+ component = fixture.componentInstance;
+ });
+ });
+
+ afterEach(() => {
+ window.URL.createObjectURL = originalCreate;
+ window.URL.revokeObjectURL = originalRevoke;
+ sinon.restore();
+ });
+
+ const setDoc = async (doc) => {
+ component.doc = doc;
+ await component.ngOnChanges({
+ doc: { currentValue: doc, previousValue: undefined, firstChange: true, isFirstChange: () => true },
+ } as any);
+ fixture.detectChanges();
+ };
+
+ it('loads blob when doc has matching photo and attachment stub', async () => {
+ await setDoc({
+ _id: 'c-1',
+ photo: 'amina.jpg',
+ _attachments: { 'user-file-amina.jpg': { content_type: 'image/jpeg', stub: true } },
+ });
+
+ expect(getAttachment.calledOnceWithExactly('c-1', 'user-file-amina.jpg')).to.be.true;
+ expect(createObjectURL.calledOnceWith(photoBlob)).to.be.true;
+ expect(component.objectUrl).to.exist;
+ });
+
+ it('renders no img and skips fetch when doc has no photo field', async () => {
+ await setDoc({ _id: 'c-1', _attachments: {} });
+
+ expect(getAttachment.called).to.be.false;
+ expect(component.objectUrl).to.be.undefined;
+ });
+
+ it('skips fetch when photo field set but no matching attachment stub', async () => {
+ await setDoc({ _id: 'c-1', photo: 'amina.jpg', _attachments: {} });
+
+ expect(getAttachment.called).to.be.false;
+ expect(component.objectUrl).to.be.undefined;
+ });
+
+ it('falls back silently when getAttachment rejects with 404', async () => {
+ const warn = sinon.stub(console, 'warn');
+ getAttachment.rejects({ status: 404 });
+
+ await setDoc({
+ _id: 'c-1',
+ photo: 'amina.jpg',
+ _attachments: { 'user-file-amina.jpg': { stub: true } },
+ });
+
+ expect(component.objectUrl).to.be.undefined;
+ expect(warn.calledOnce).to.be.true;
+ });
+
+ it('rethrows getAttachment errors other than 404', async () => {
+ getAttachment.rejects({ status: 500 });
+
+ component.doc = {
+ _id: 'c-1',
+ photo: 'amina.jpg',
+ _attachments: { 'user-file-amina.jpg': { stub: true } },
+ };
+ let err;
+ try {
+ await component.ngOnChanges({
+ doc: { currentValue: component.doc, previousValue: undefined, firstChange: true, isFirstChange: () => true },
+ } as any);
+ } catch (e) {
+ err = e;
+ }
+ expect(err).to.deep.include({ status: 500 });
+ });
+
+ it('defaults photoField to "photo" when input is unbound or undefined', async () => {
+ await setDoc({
+ _id: 'c-1',
+ photo: 'amina.jpg',
+ _attachments: { 'user-file-amina.jpg': { stub: true } },
+ });
+
+ expect(getAttachment.calledWith('c-1', 'user-file-amina.jpg')).to.be.true;
+
+ getAttachment.resetHistory();
+ component.photoField = undefined;
+ await setDoc({
+ _id: 'c-2',
+ photo: 'bob.jpg',
+ _attachments: { 'user-file-bob.jpg': { stub: true } },
+ });
+ expect(getAttachment.calledWith('c-2', 'user-file-bob.jpg')).to.be.true;
+ });
+
+ it('honours an explicit photoField override', async () => {
+ component.photoField = 'picture';
+ await setDoc({
+ _id: 'c-1',
+ picture: 'amina.jpg',
+ _attachments: { 'user-file-amina.jpg': { stub: true } },
+ });
+
+ expect(getAttachment.calledOnceWith('c-1', 'user-file-amina.jpg')).to.be.true;
+ });
+
+ it('falls back to docId fetch when doc input is not provided', async () => {
+ get.resolves({
+ _id: 'c-1',
+ photo: 'amina.jpg',
+ _attachments: { 'user-file-amina.jpg': { stub: true } },
+ });
+ component.docId = 'c-1';
+ await component.ngOnChanges({
+ docId: { currentValue: 'c-1', previousValue: undefined, firstChange: true, isFirstChange: () => true },
+ } as any);
+
+ expect(get.calledOnceWith('c-1')).to.be.true;
+ expect(getAttachment.calledOnceWith('c-1', 'user-file-amina.jpg')).to.be.true;
+ });
+
+ it('revokes prior object URL and re-fetches on doc input change', async () => {
+ await setDoc({
+ _id: 'c-1',
+ photo: 'amina.jpg',
+ _attachments: { 'user-file-amina.jpg': { stub: true } },
+ });
+ expect(createObjectURL.callCount).to.equal(1);
+
+ createObjectURL.returns('blob:fake-url-2');
+ await setDoc({
+ _id: 'c-2',
+ photo: 'bob.jpg',
+ _attachments: { 'user-file-bob.jpg': { stub: true } },
+ });
+
+ expect(revokeObjectURL.calledOnceWith('blob:fake-url')).to.be.true;
+ expect(createObjectURL.callCount).to.equal(2);
+ expect(getAttachment.calledWith('c-2', 'user-file-bob.jpg')).to.be.true;
+ });
+
+ it('revokes the object URL on destroy', async () => {
+ await setDoc({
+ _id: 'c-1',
+ photo: 'amina.jpg',
+ _attachments: { 'user-file-amina.jpg': { stub: true } },
+ });
+
+ component.ngOnDestroy();
+
+ expect(revokeObjectURL.calledOnceWith('blob:fake-url')).to.be.true;
+ });
+});
diff --git a/webapp/tests/karma/ts/modules/contacts/contacts-content.component.spec.ts b/webapp/tests/karma/ts/modules/contacts/contacts-content.component.spec.ts
index 19741028e38..f035d8a6c22 100644
--- a/webapp/tests/karma/ts/modules/contacts/contacts-content.component.spec.ts
+++ b/webapp/tests/karma/ts/modules/contacts/contacts-content.component.spec.ts
@@ -12,6 +12,7 @@ import { ContactsActions } from '@mm-actions/contacts';
import { Selectors } from '@mm-selectors/index';
import { ResourceIconPipe } from '@mm-pipes/resource-icon.pipe';
import { ResourceIconsService } from '@mm-services/resource-icons.service';
+import { DbService } from '@mm-services/db.service';
import { ChangesService } from '@mm-services/changes.service';
import { ContactChangeFilterService } from '@mm-services/contact-change-filter.service';
import { XmlFormsService } from '@mm-services/xml-forms.service';
@@ -128,6 +129,9 @@ describe('Contacts content component', () => {
{ provide: Router, useValue: router },
{ provide: ResourceIconPipe, useValue: { transform: sinon.stub() } },
{ provide: ResourceIconsService, useValue: { getImg: sinon.stub() } },
+ { provide: DbService, useValue: {
+ get: () => ({ getAttachment: sinon.stub().resolves(), get: sinon.stub().resolves({}) })
+ } },
{ provide: ContactChangeFilterService, useValue: contactChangeFilterService },
{ provide: ChangesService, useValue: changesService },
{ provide: ChangesService, useValue: changesService },
@@ -165,6 +169,23 @@ describe('Contacts content component', () => {
expect(component).to.exist;
});
+ it('renders mm-contact-photo in the profile heading wired to the selected contact', () => {
+ selectedContact.doc = { _id: 'c-1', name: 'Amina' };
+ selectedContact.type = { icon: 'medic-person', photo_field: 'face_pic' };
+ store.overrideSelector(Selectors.getSelectedContact, selectedContact);
+ fixture.detectChanges();
+
+ const heading = fixture.nativeElement.querySelector('.row.heading mm-contact-photo');
+ expect(heading).to.exist;
+
+ const photoComponent = fixture.debugElement
+ .query(el => el.nativeElement === heading)
+ .componentInstance;
+ expect(photoComponent.photoField).to.equal('face_pic');
+ expect(photoComponent.fallbackIcon).to.equal('medic-person');
+ expect(photoComponent.doc).to.deep.equal(selectedContact.doc);
+ });
+
it('ngOnDestroy() should unsubscribe from observables and reset state', () => {
const unsubscribeSpy = sinon.spy(component.subscriptions, 'unsubscribe');
const clearSelectionStub = sinon.stub(ContactsActions.prototype, 'clearSelection');