feat(#8660) - add link in conversation to navigate to sender's contac…

…t page (#8717)

tests/e2e/default/sms/messages-breadcrumbs.wdio-spec.js → tests/e2e/default/sms/messages-sender-data.wdio-spec.js

@@ -5,8 +5,9 @@ const userFactory = require('@factories/cht/users/users');
 const placeFactory = require('@factories/cht/contacts/place');
 const personFactory = require('@factories/cht/contacts/person');
 const messagesPage = require('@page-objects/default/sms/messages.wdio.page');
+const contactsPage = require('@page-objects/default/contacts/contacts.wdio.page');
 
-describe('Message tab breadcrumbs', () => {
+describe('Message Tab - Sender Data', () => {
   const places = placeFactory.generateHierarchy();
   const clinic = places.get('clinic');
   const health_center = places.get('health_center');
@@ -84,4 +85,19 @@ describe('Message tab breadcrumbs', () => {
     expect(lineage).to.equal(expectedLineage);
   });
 
+  it('should display conversation with link and navigate to contact', async () => {
+    await loginPage.login(offlineUser);
+    await commonElements.waitForPageLoaded();
+    await commonElements.goToMessages();
+
+    await messagesPage.openMessage(patient._id);
+    const header = await messagesPage.getMessageHeader();
+    expect(header.name).to.equal(patient.name);
+    expect(header.phone).to.equal(patient.phone);
+
+    await messagesPage.navigateFromConversationToContact();
+    const title = await contactsPage.getContactInfoName();
+    expect(title).to.equal(patient.name);
+  });
+
 });

tests/page-objects/default/sms/messages.wdio.page.js

@@ -45,6 +45,12 @@ const getMessageHeader = async () => {
   };
 };
 
+const navigateFromConversationToContact = async () => {
+  await $(`${MESSAGE_HEADER} a.name`).waitForClickable();
+  await $(`${MESSAGE_HEADER} a.name`).click();
+  await commonPage.waitForPageLoaded();
+};
+
 const getMessageContent = async  (index = 1) => {
   const sms = await $(`${MESSAGE_CONTENT} li:nth-child(${index})`);
   await sms.waitForDisplayed();
@@ -140,5 +146,6 @@ module.exports = {
   sendReply,
   replyAddRecipients,
   getAmountOfMessagesByPhone,
+  navigateFromConversationToContact,
   getMessagesModalDetails,
 };

webapp/src/ts/components/sender/sender.component.html

@@ -1,15 +1,17 @@
 <div class="sender" [ngClass]="{ 'small-font': sentBy }" *ngIf="message">
   <div>
-    <span *ngIf="sentBy && (message.doc?.name || message.contact?.name || (!message.form && message.name) || message.from || message.sent_by || message.doc?.from)"
+    <span *ngIf="sentBy && getName()"
           class="name"
           translate
-          [translateParams]="{ senderName: message.doc?.name || message.contact?.name || (!message.form && message.name) || message.from || message.sent_by || message.doc?.from || ('messages.unknown.sender' | translate) }">
+          [translateParams]="{ senderName: getName() || ( 'messages.unknown.sender' | translate ) }">
       messages.sent.by
     </span>
-    <span class="name"
-          *ngIf="!sentBy || !(message.doc?.name || message.contact?.name || (!message.form && message.name) || message.from || message.sent_by || message.doc?.from)">
-      {{ message.doc?.name || message.contact?.name || (!message.form && message.name) || message.from || message.sent_by || ('messages.unknown.sender' | translate) }}
-    </span>
+
+    <a class="name" *ngIf="!sentBy && getId() && getName(); else noLinkLabel" [routerLink]="[ '/contacts', getId() ]">{{ getName() }}</a>
+    <ng-template #noLinkLabel>
+      <span class="name">{{ getName() || ( 'messages.unknown.sender' | translate ) }}</span>
+    </ng-template>
+
     <span class="phone" *ngIf="!(message.name && message.name === message.facility?.contact?.phone)">
       {{ message.doc?.phone || message.contact?.phone || message.phone }}
     </span>

webapp/src/ts/components/sender/sender.component.ts

@@ -10,5 +10,16 @@ export class SenderComponent {
   @Input() sentBy;
   @Input() hideLineage;
 
-  constructor() { }
+  getName() {
+    return this.message.doc?.name
+      || this.message.contact?.name
+      || (!this.message.form && this.message.name)
+      || this.message.from
+      || this.message.sent_by
+      || this.message.doc?.from;
+  }
+
+  getId() {
+    return this.message.contact?._id || this.message.doc?._id;
+  }
 }

webapp/tests/karma/ts/components/sender.component.spec.ts

@@ -1,4 +1,5 @@
 import { TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
 import { expect } from 'chai';
 import { By } from '@angular/platform-browser';
 import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
@@ -18,6 +19,7 @@ describe('sender directive', function() {
       imports: [
         TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }),
         PipesModule,
+        RouterModule.forRoot([]),
       ],
       declarations: [
         SenderComponent,
@@ -44,7 +46,7 @@ describe('sender directive', function() {
     fixture.detectChanges();
     await fixture.whenStable();
 
-    expect(getElement('div .name').innerText).to.equal('+123');
+    expect(getElement('div span.name').innerText).to.equal('+123');
   });
 
   it('should render sender when message has sent by', async () => {
@@ -55,7 +57,7 @@ describe('sender directive', function() {
     fixture.detectChanges();
     await fixture.whenStable();
 
-    expect(getElement('div .name').innerText).to.equal('+789');
+    expect(getElement('div span.name').innerText).to.equal('+789');
   });
 
   it('should render sender when message has contact', async () => {
@@ -80,10 +82,50 @@ describe('sender directive', function() {
     fixture.detectChanges();
     await fixture.whenStable();
 
-    expect(getElement('div .name').innerText).to.equal('Clark ');
-    expect(getElement('div .phone').innerText).to.equal('+123');
+    expect(getElement('div span.name').innerText.trim()).to.equal('Clark');
+    expect(getElement('div .phone').innerText.trim()).to.equal('+123');
     expect(getElement('div .position .lineage li:nth-child(1)').innerText).to.equal('Clarks House');
     expect(getElement('div .position .lineage li:nth-child(2)').innerText).to.equal('Smallville');
     expect(getElement('div .position .lineage li:nth-child(3)').innerText).to.equal('Metropolis');
   });
+
+  it('should render sender as a link when message has a contact with id', async () => {
+    fixture.componentInstance.message = {
+      sent_by: '+789',
+      from: '+123',
+      contact: {
+        _id: 'clark-123',
+        name: 'Clark',
+        phone: '+123',
+        parent: {
+          name: 'Clarks House',
+          parent: { name: 'Smallville', parent: { name: 'Metropolis' } },
+        },
+      },
+    };
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(getElement('div a.name').innerText.trim()).to.equal('Clark');
+    expect(getElement('div .phone').innerText.trim()).to.equal('+123');
+    expect(getElement('div .position .lineage li:nth-child(1)').innerText).to.equal('Clarks House');
+    expect(getElement('div .position .lineage li:nth-child(2)').innerText).to.equal('Smallville');
+    expect(getElement('div .position .lineage li:nth-child(3)').innerText).to.equal('Metropolis');
+  });
+
+  it('should render sender as a link when message has a doc with id', async () => {
+    fixture.componentInstance.message = {
+      sent_by: '+789',
+      from: '+123',
+      doc: { _id: 'jane-123', name: 'Jane', phone: '+123' },
+      contact: null,
+    };
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(getElement('div a.name').innerText.trim()).to.equal('Jane');
+    expect(getElement('div .phone').innerText.trim()).to.equal('+123');
+  });
 });