Skip to content

Commit 882aaf6

Browse files
gavinbarrongavinbarron
authored
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
1 parent 90b8736 commit 882aaf6

File tree

3 files changed

+140
-6
lines changed

3 files changed

+140
-6
lines changed

‎packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,4 +63,131 @@ describe('mgt-person - tests', () => {
6363

6464
expect(screen.queryByTestId('flyout-slot')).toBeDefined();
6565
});
66+
67+
it('should render with initials when given name and surname are supplied', async () => {
68+
Providers.globalProvider = new MockProvider(true);
69+
person = await fixture(
70+
`<mgt-person person-details='${JSON.stringify({
71+
displayName: 'Frank Herbert',
72+
mail: '[email protected]',
73+
givenName: 'Brian',
74+
surname: 'Herbert',
75+
personType: {}
76+
})}' view="twoLines"></mgt-person>`
77+
);
78+
expect(person).not.toBeUndefined();
79+
const initials = await screen.findByText('BH');
80+
expect(initials).toBeDefined();
81+
});
82+
83+
it('should render with initials when given name and surname are null', async () => {
84+
Providers.globalProvider = new MockProvider(true);
85+
person = await fixture(
86+
`<mgt-person person-details='${JSON.stringify({
87+
displayName: 'Frank Herbert',
88+
mail: '[email protected]',
89+
givenName: null,
90+
surname: null,
91+
personType: {}
92+
})}' view="twoLines"></mgt-person>`
93+
);
94+
expect(person).not.toBeUndefined();
95+
const initials = await screen.findByText('FH');
96+
expect(initials).toBeDefined();
97+
});
98+
99+
it('should render with first initial when only given name is supplied', async () => {
100+
Providers.globalProvider = new MockProvider(true);
101+
person = await fixture(
102+
`<mgt-person person-details='${JSON.stringify({
103+
displayName: 'Frank Herbert',
104+
mail: '[email protected]',
105+
givenName: 'Frank',
106+
surname: null,
107+
personType: {}
108+
})}' view="twoLines"></mgt-person>`
109+
);
110+
expect(person).not.toBeUndefined();
111+
const initials = await screen.findByText('F');
112+
expect(initials).toBeDefined();
113+
});
114+
115+
it('should render with first initial when only given name is populated and surname is an empty string', async () => {
116+
Providers.globalProvider = new MockProvider(true);
117+
person = await fixture(
118+
`<mgt-person person-details='${JSON.stringify({
119+
displayName: 'Frank Herbert',
120+
mail: '[email protected]',
121+
givenName: 'Frank',
122+
surname: '',
123+
personType: {}
124+
})}' view="twoLines"></mgt-person>`
125+
);
126+
expect(person).not.toBeUndefined();
127+
const initials = await screen.findByText('F');
128+
expect(initials).toBeDefined();
129+
});
130+
131+
it('should render with last initial when only surname is supplied', async () => {
132+
Providers.globalProvider = new MockProvider(true);
133+
person = await fixture(
134+
`<mgt-person person-details='${JSON.stringify({
135+
displayName: 'Frank Herbert',
136+
mail: '[email protected]',
137+
givenName: null,
138+
surname: 'Herbert',
139+
personType: {}
140+
})}' view="twoLines"></mgt-person>`
141+
);
142+
expect(person).not.toBeUndefined();
143+
const initials = await screen.findByText('H');
144+
expect(initials).toBeDefined();
145+
});
146+
it('should render with last initial when only surname is populated and given name is an empty string', async () => {
147+
Providers.globalProvider = new MockProvider(true);
148+
person = await fixture(
149+
`<mgt-person person-details='${JSON.stringify({
150+
displayName: 'Frank Herbert',
151+
mail: '[email protected]',
152+
givenName: '',
153+
surname: 'Herbert',
154+
personType: {}
155+
})}' view="twoLines"></mgt-person>`
156+
);
157+
expect(person).not.toBeUndefined();
158+
const initials = await screen.findByText('H');
159+
expect(initials).toBeDefined();
160+
});
161+
162+
it('should render with one initial when only displayName of one word is supplied', async () => {
163+
Providers.globalProvider = new MockProvider(true);
164+
person = await fixture(
165+
`<mgt-person person-details='${JSON.stringify({
166+
displayName: 'Frank',
167+
mail: '[email protected]',
168+
givenName: null,
169+
surname: null,
170+
personType: {}
171+
})}' view="twoLines"></mgt-person>`
172+
);
173+
expect(person).not.toBeUndefined();
174+
const initials = await screen.findByText('F');
175+
expect(initials).toBeDefined();
176+
});
177+
178+
it('should render with two initial when only displayName of more than two words is supplied', async () => {
179+
Providers.globalProvider = new MockProvider(true);
180+
person = await fixture(
181+
`<mgt-person person-details='${JSON.stringify({
182+
displayName: 'Frank van Herbert',
183+
mail: '[email protected]',
184+
givenName: null,
185+
surname: null,
186+
personType: {}
187+
})}' view="twoLines"></mgt-person>`
188+
);
189+
expect(person).not.toBeUndefined();
190+
const initials = await screen.findByText('FV');
191+
expect(initials).toBeDefined();
192+
});
66193
});

‎packages/mgt-components/src/components/mgt-person/mgt-person.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -258,10 +258,7 @@ export class MgtPerson extends MgtTemplatedComponent {
258258
*
259259
* @type {IDynamicPerson}
260260
*/
261-
@property({
262-
attribute: null,
263-
type: Object
264-
})
261+
@state()
265262
private get personDetailsInternal(): IDynamicPerson {
266263
return this._personDetailsInternal;
267264
}
@@ -1213,8 +1210,8 @@ export class MgtPerson extends MgtTemplatedComponent {
12131210

12141211
let initials = '';
12151212
if (isUser(person)) {
1216-
initials += person.givenName[0].toUpperCase();
1217-
initials += person.surname[0].toUpperCase();
1213+
initials += person.givenName?.[0]?.toUpperCase() ?? '';
1214+
initials += person.surname?.[0]?.toUpperCase() ?? '';
12181215
}
12191216

12201217
if (!initials && person.displayName) {

‎stories/components/person/person.properties.stories.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -418,3 +418,13 @@ export const moreExamples = () => html`
418418
</div>
419419
420420
`;
421+
422+
export const personDetailExamples = () => html`
423+
<mgt-person person-details='{"displayName":"Frank Herbert","mail":"[email protected]","givenName":null,"surname":null,"personType":{}}' view="twoLines"></mgt-person>
424+
<br>
425+
<mgt-person person-details='{"displayName":"Frank van Herbert","mail":"[email protected]","givenName":null,"surname":null,"personType":{}}' view="twoLines"></mgt-person>
426+
<br>
427+
<mgt-person person-details='{"displayName":"Frank Herbert","mail":"[email protected]","givenName":"Frank","surname":null,"personType":{}}' view="twoLines"></mgt-person>
428+
<br>
429+
<mgt-person person-details='{"displayName":"Frank Herbert","mail":"[email protected]","givenName":null,"surname":"Herbert","personType":{}}' view="twoLines"></mgt-person>
430+
`;

0 commit comments

Comments
 (0)