-
Notifications
You must be signed in to change notification settings - Fork 305
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
90b8736
commit 882aaf6
Showing
3 changed files
with
140 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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: '[email protected]', | ||
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: '[email protected]', | ||
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: '[email protected]', | ||
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: '[email protected]', | ||
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: '[email protected]', | ||
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: '[email protected]', | ||
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: '[email protected]', | ||
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: '[email protected]', | ||
givenName: null, | ||
surname: null, | ||
personType: {} | ||
})}' view="twoLines"></mgt-person>` | ||
); | ||
expect(person).not.toBeUndefined(); | ||
const initials = await screen.findByText('FV'); | ||
expect(initials).toBeDefined(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -418,3 +418,13 @@ export const moreExamples = () => html` | |
</div> | ||
`; | ||
|
||
export const personDetailExamples = () => html` | ||
<mgt-person person-details='{"displayName":"Frank Herbert","mail":"[email protected]","givenName":null,"surname":null,"personType":{}}' view="twoLines"></mgt-person> | ||
<br> | ||
<mgt-person person-details='{"displayName":"Frank van Herbert","mail":"[email protected]","givenName":null,"surname":null,"personType":{}}' view="twoLines"></mgt-person> | ||
<br> | ||
<mgt-person person-details='{"displayName":"Frank Herbert","mail":"[email protected]","givenName":"Frank","surname":null,"personType":{}}' view="twoLines"></mgt-person> | ||
<br> | ||
<mgt-person person-details='{"displayName":"Frank Herbert","mail":"[email protected]","givenName":null,"surname":"Herbert","personType":{}}' view="twoLines"></mgt-person> | ||
`; |