fix: typing for LocalizationHelper.strings (#2998)

adds extended tests for Localization on mgt-person removes the initials property from the default set of strings for mgt-person
microsoftgraph · Feb 2, 2024 · 0317fc2 · 0317fc2
1 parent c8c564d
commit 0317fc2
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 25 deletions.
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts
@@ -5,7 +5,7 @@
  * -------------------------------------------------------------------------------------------
  */
 import { fixture, html, expect, oneEvent } from '@open-wc/testing';
-import { MockProvider, Providers } from '@microsoft/mgt-element';
+import { LocalizationHelper, MockProvider, Providers } from '@microsoft/mgt-element';
 import { registerMgtPersonComponent } from './mgt-person';
 
 describe('mgt-person - tests', () => {
@@ -171,3 +171,66 @@ describe('mgt-person - tests', () => {
     await expect(person.shadowRoot.querySelector('span.initials')).lightDom.to.equal('FV');
   });
 });
+
+describe('mgt-person - localization', () => {
+  registerMgtPersonComponent();
+  Providers.globalProvider = new MockProvider(true);
+
+  afterEach(() => {
+    LocalizationHelper.strings = {
+      _components: {}
+    };
+  });
+  it('should render with updated photo for text', async () => {
+    LocalizationHelper.strings = {
+      _components: {
+        person: {
+          photoFor: 'test value'
+        }
+      }
+    };
+    const person = await fixture(html`<mgt-person person-query="me" view="twolines"></mgt-person>`);
+    await oneEvent(person, 'person-image-rendered');
+    await expect(person).shadowDom.to.equal(
+      `<div class=" person-root twolines " dir="ltr">
+        <div class="avatar-wrapper">
+          <img alt="test value Megan Bowen" src="">
+        </div>
+        <div class=" details-wrapper ">
+              <div class="line1" role="presentation" aria-label="Megan Bowen">Megan Bowen</div>
+              <div class="line2" role="presentation" aria-label="Auditor">Auditor</div>
+        </div>
+      </div>`,
+      { ignoreAttributes: ['src'] }
+    );
+  });
+  it('should render with updated email address text', async () => {
+    LocalizationHelper.strings = {
+      _components: {
+        person: {
+          emailAddress: 'test value'
+        }
+      }
+    };
+    const person = await fixture(
+      html`<mgt-person person-details='${JSON.stringify({
+        mail: 'herbert@dune.net',
+        personType: {}
+      })}' view="image"></mgt-person>`
+    );
+    // await oneEvent(person, 'person-icon-rendered');
+    await expect(person).shadowDom.to.equal(
+      `<div class="noline person-root small" dir="ltr">
+        <div class="avatar-wrapper">
+          <span
+            class="contact-icon"
+            title="test value herbert@dune.net"
+          >
+            <i></i>
+          </span>
+        </div>
+      </div>`,
+      { ignoreAttributes: ['src'] }
+    );
+  });
+});
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -656,7 +656,9 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     const hasImage = imageSrc && !this._isInvalidImageSrc && this.avatarType === 'photo';
     const imageOnly = this.avatarType === 'photo' && this.view === 'image';
     const titleText =
-      (personDetailsInternal?.displayName || getEmailFromGraphEntity(personDetailsInternal)) ?? undefined;
+      (personDetailsInternal?.displayName ||
+        `${this.strings.emailAddress} ${getEmailFromGraphEntity(personDetailsInternal)}`) ??
+      undefined;
     const imageTemplate = html`<img
       title="${ifDefined(imageOnly ? titleText : undefined)}"
       alt=${altText}
@@ -813,26 +815,6 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
    * @memberof MgtPersonCard
    */
   protected renderAvatar(personDetailsInternal: IDynamicPerson, image: string, presence: Presence): TemplateResult {
-    const hasInitials = !image || this._isInvalidImageSrc || this.avatarType === 'initials';
-
-    let title = '';
-
-    if (hasInitials && personDetailsInternal) {
-      title = `${this.strings.initials} ${this.getInitials(personDetailsInternal)}`;
-    } else {
-      title = personDetailsInternal ? personDetailsInternal.displayName || '' : '';
-      if (title !== '') {
-        title = `${this.strings.photoFor} ${title}`;
-      }
-    }
-
-    if (title === '') {
-      const emailAddress = getEmailFromGraphEntity(personDetailsInternal);
-      if (emailAddress !== null) {
-        title = `${this.strings.emailAddress} ${emailAddress}`;
-      }
-    }
-
     const imageTemplate: TemplateResult = this.renderImage(personDetailsInternal, image);
     const presenceTemplate: TemplateResult = this.renderPresence(presence);
 

diff --git a/packages/mgt-components/src/components/mgt-person/strings.ts b/packages/mgt-components/src/components/mgt-person/strings.ts
@@ -26,6 +26,5 @@ const activityMap = {
 export const strings = {
   ...activityMap,
   photoFor: 'Photo for',
-  emailAddress: 'Email address',
-  initials: 'Initials'
+  emailAddress: 'Email address'
 };
diff --git a/packages/mgt-element/src/utils/LocalizationHelper.ts b/packages/mgt-element/src/utils/LocalizationHelper.ts
@@ -12,7 +12,7 @@ type LocalizationRecord = Record<string, ComponentLocalizationRecord>;
 
 type LocalizationStorage = {
   _components: LocalizationRecord;
-} & Record<string, string>;
+} & Record<string, string | LocalizationRecord>;
 
 /**
  * Helper class for Localization