fix: initials rendering in mgt-person (#2764)

* fix: render when given and surname are null on personType objects * expanded tests to cover more cases of missing/incomplete names * added tests to cover empty strings in names * added stories to cover person-detail data passing
microsoftgraph · Oct 6, 2023 · 882aaf6 · 882aaf6
1 parent 90b8736
commit 882aaf6
Show file tree

Hide file tree

Showing 3 changed files with 140 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
@@ -63,4 +63,131 @@ describe('mgt-person - tests', () => {
 
     expect(screen.queryByTestId('flyout-slot')).toBeDefined();
   });
+
+  it('should render with initials when given name and surname are supplied', async () => {
+    Providers.globalProvider = new MockProvider(true);
+    person = await fixture(
+      `<mgt-person person-details='${JSON.stringify({
+        displayName: 'Frank Herbert',
+        mail: 'herbert@dune.net',
+        givenName: 'Brian',
+        surname: 'Herbert',
+        personType: {}
+      })}' view="twoLines"></mgt-person>`
+    );
+    expect(person).not.toBeUndefined();
+    const initials = await screen.findByText('BH');
+    expect(initials).toBeDefined();
+  });
+
+  it('should render with initials when given name and surname are null', 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();
+  });
+
+  it('should render with first initial when only given name is supplied', async () => {
+    Providers.globalProvider = new MockProvider(true);
+    person = await fixture(
+      `<mgt-person person-details='${JSON.stringify({
+        displayName: 'Frank Herbert',
+        mail: 'herbert@dune.net',
+        givenName: 'Frank',
+        surname: null,
+        personType: {}
+      })}' view="twoLines"></mgt-person>`
+    );
+    expect(person).not.toBeUndefined();
+    const initials = await screen.findByText('F');
+    expect(initials).toBeDefined();
+  });
+
+  it('should render with first initial when only given name is populated and surname is an empty string', async () => {
+    Providers.globalProvider = new MockProvider(true);
+    person = await fixture(
+      `<mgt-person person-details='${JSON.stringify({
+        displayName: 'Frank Herbert',
+        mail: 'herbert@dune.net',
+        givenName: 'Frank',
+        surname: '',
+        personType: {}
+      })}' view="twoLines"></mgt-person>`
+    );
+    expect(person).not.toBeUndefined();
+    const initials = await screen.findByText('F');
+    expect(initials).toBeDefined();
+  });
+
+  it('should render with last initial when only surname is supplied', 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: 'Herbert',
+        personType: {}
+      })}' view="twoLines"></mgt-person>`
+    );
+    expect(person).not.toBeUndefined();
+    const initials = await screen.findByText('H');
+    expect(initials).toBeDefined();
+  });
+  it('should render with last initial when only surname is populated and given name is an empty string', async () => {
+    Providers.globalProvider = new MockProvider(true);
+    person = await fixture(
+      `<mgt-person person-details='${JSON.stringify({
+        displayName: 'Frank Herbert',
+        mail: 'herbert@dune.net',
+        givenName: '',
+        surname: 'Herbert',
+        personType: {}
+      })}' view="twoLines"></mgt-person>`
+    );
+    expect(person).not.toBeUndefined();
+    const initials = await screen.findByText('H');
+    expect(initials).toBeDefined();
+  });
+
+  it('should render with one initial when only displayName of one word is supplied', async () => {
+    Providers.globalProvider = new MockProvider(true);
+    person = await fixture(
+      `<mgt-person person-details='${JSON.stringify({
+        displayName: 'Frank',
+        mail: 'herbert@dune.net',
+        givenName: null,
+        surname: null,
+        personType: {}
+      })}' view="twoLines"></mgt-person>`
+    );
+    expect(person).not.toBeUndefined();
+    const initials = await screen.findByText('F');
+    expect(initials).toBeDefined();
+  });
+
+  it('should render with two initial when only displayName of more than two words is supplied', async () => {
+    Providers.globalProvider = new MockProvider(true);
+    person = await fixture(
+      `<mgt-person person-details='${JSON.stringify({
+        displayName: 'Frank van Herbert',
+        mail: 'herbert@dune.net',
+        givenName: null,
+        surname: null,
+        personType: {}
+      })}' view="twoLines"></mgt-person>`
+    );
+    expect(person).not.toBeUndefined();
+    const initials = await screen.findByText('FV');
+    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
@@ -258,10 +258,7 @@ export class MgtPerson extends MgtTemplatedComponent {
    *
    * @type {IDynamicPerson}
    */
-  @property({
-    attribute: null,
-    type: Object
-  })
+  @state()
   private get personDetailsInternal(): IDynamicPerson {
     return this._personDetailsInternal;
   }
@@ -1213,8 +1210,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) {

diff --git a/stories/components/person/person.properties.stories.js b/stories/components/person/person.properties.stories.js
@@ -418,3 +418,13 @@ export const moreExamples = () => html`
   </div>
 
 `;
+
+export const personDetailExamples = () => html`
+<mgt-person person-details='{"displayName":"Frank Herbert","mail":"herbert@dune.net","givenName":null,"surname":null,"personType":{}}' view="twoLines"></mgt-person>
+<br>
+<mgt-person person-details='{"displayName":"Frank van Herbert","mail":"herbert@dune.net","givenName":null,"surname":null,"personType":{}}' view="twoLines"></mgt-person>
+<br>
+<mgt-person person-details='{"displayName":"Frank Herbert","mail":"herbert@dune.net","givenName":"Frank","surname":null,"personType":{}}' view="twoLines"></mgt-person>
+<br>
+<mgt-person person-details='{"displayName":"Frank Herbert","mail":"herbert@dune.net","givenName":null,"surname":"Herbert","personType":{}}' view="twoLines"></mgt-person>
+ `;