Merge pull request #108 from PagerDuty/issue-80

src/components/IncidentTable/subcomponents/PersonInitialsComponents.js

@@ -31,7 +31,7 @@ const PersonInitialsComponent = ({
         // initials: getInitials(user.summary),
         id: user.id,
         html_url: user.html_url,
-        color: CSS.supports('color', color) ? color : 'black',
+        color: CSS.supports && CSS.supports('color', color) ? color : 'black',
       };
     })
     : [];
@@ -44,10 +44,18 @@ const PersonInitialsComponent = ({
             <Avatar
               color="white"
               mr={1}
+              whiteSpace="nowrap"
+              overflow="hidden"
               name={user.summary}
               href={user.html_url}
               size="sm"
               bg={user.color}
+              getInitials={(name) => {
+                const allNames = name.trim().split(' ');
+                const firstInitial = allNames[0].match(/./u);
+                const lastInitial = allNames[allNames.length - 1].match(/./u);
+                return `${firstInitial}${lastInitial}`;
+              }}
             />
           </Link>
         </Tooltip>

src/components/IncidentTable/subcomponents/PersonInitialsComponents.test.js

@@ -0,0 +1,53 @@
+import {
+  Provider,
+} from 'react-redux';
+
+import {
+  mockStore,
+} from 'mocks/store.test';
+
+import {
+  generateMockUsers,
+} from 'mocks/users.test';
+
+import {
+  mount,
+} from 'enzyme';
+
+import PersonInitialsComponents from './PersonInitialsComponents';
+
+describe('PersonInitialsComponents', () => {
+  const users = generateMockUsers(2);
+  users[0].summary = 'Abraham Lincoln';
+  users[1].summary = 'George Washington 📟';
+  let baseStore;
+  let store;
+  beforeEach(() => {
+    const usersMap = {};
+    users.forEach((user) => {
+      usersMap[user.id] = user;
+    });
+    baseStore = {
+      users: {
+        usersMap,
+      },
+    };
+    store = mockStore(baseStore);
+    global.CSS = jest.fn();
+  });
+
+  it('should render component with assignee initials', () => {
+    const displayedUsers = users.map((user) => ({
+      user,
+    }));
+    const wrapper = mount(
+      <Provider store={store}>
+        <PersonInitialsComponents displayedUsers={displayedUsers} />
+      </Provider>,
+    );
+    // Initials should be rendered
+    expect(wrapper.find('div[role="img"]').contains('AL')).toBeTruthy();
+    // Emojis should also be rendered as initials
+    expect(wrapper.find('div[role="img"]').contains('G📟')).toBeTruthy();
+  });
+});

src/mocks/users.test.js

@@ -6,9 +6,11 @@ const generateMockUser = () => {
   // Generate Faker stubs for user
   const id = faker.string.alphanumeric(7);
   const userName = faker.person.fullName();
+  const color = faker.color.human();
   return {
     id,
     summary: userName,
+    color,
     self: `https://api.pagerduty.com/users/${id}`,
     html_url: `https://www.pagerduty.com/users/${id}`,
   };