fixing render problem when given and surname are null on personType o…

…bjects
microsoftgraph · Oct 5, 2023 · 5c50d22 · 5c50d22
1 parent ac41815
commit 5c50d22
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 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
@@ -67,4 +67,20 @@ describe('mgt-person - tests', () => {
 
     expect(screen.queryByTestId('flyout-slot')).toBeDefined();
   });
+
+  it('should render with initials using the supplied details', async () => {
+    Providers.globalProvider = new MockProvider(true);
+    person = await fixture(
+      `<mgt-person person-details='${JSON.stringify({
+        displayName: 'Frank Herbert',
+        mail: 'herbert@dune.net',
+        givenName: null,
+        surname: null,
+        personType: {}
+      })}' view="twoLines"></mgt-person>`
+    );
+    expect(person).not.toBeUndefined();
+    const initials = await screen.findByText('FH');
+    expect(initials).toBeDefined();
+  });
 });
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -261,10 +261,7 @@ export class MgtPerson extends MgtTemplatedComponent {
    *
    * @type {IDynamicPerson}
    */
-  @property({
-    attribute: null,
-    type: Object
-  })
+  @state()
   private get personDetailsInternal(): IDynamicPerson {
     return this._personDetailsInternal;
   }
@@ -1216,8 +1213,8 @@ export class MgtPerson extends MgtTemplatedComponent {
 
     let initials = '';
     if (isUser(person)) {
-      initials += person.givenName[0].toUpperCase();
-      initials += person.surname[0].toUpperCase();
+      initials += person.givenName?.[0].toUpperCase() ?? '';
+      initials += person.surname?.[0].toUpperCase() ?? '';
     }
 
     if (!initials && person.displayName) {