Skip to content

Commit

Permalink
fix: initials rendering in mgt-person (#2764)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@gavinbarron
gavinbarron authored Oct 6, 2023
1 parent 90b8736 commit 882aaf6
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 6 deletions.
127 changes: 127 additions & 0 deletions packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
9 changes: 3 additions & 6 deletions packages/mgt-components/src/components/mgt-person/mgt-person.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,10 +258,7 @@ export class MgtPerson extends MgtTemplatedComponent {
*
* @type {IDynamicPerson}
*/
@property({
attribute: null,
type: Object
})
@state()
private get personDetailsInternal(): IDynamicPerson {
return this._personDetailsInternal;
}
Expand Down Expand Up @@ -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) {
Expand Down
10 changes: 10 additions & 0 deletions stories/components/person/person.properties.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;

0 comments on commit 882aaf6

Please sign in to comment.