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 index e5e5924d0c..dbd2464dc5 100644 --- 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``); + await oneEvent(person, 'person-image-rendered'); + await expect(person).shadowDom.to.equal( + `
+
+ test value Megan Bowen +
+
+ + +
+
`, + { ignoreAttributes: ['src'] } + ); + }); + it('should render with updated email address text', async () => { + LocalizationHelper.strings = { + _components: { + person: { + emailAddress: 'test value' + } + } + }; + const person = await fixture( + html`` + ); + // await oneEvent(person, 'person-icon-rendered'); + await expect(person).shadowDom.to.equal( + `
+
+ + + +
+
`, + { 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 index a8b6546146..b9398f9151 100644 --- 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`${altText}; type LocalizationStorage = { _components: LocalizationRecord; -} & Record; +} & Record; /** * Helper class for Localization