Merge pull request #8167 from opf/fix/user-avatar-emoji

Ensure user-avatar splits not on character bytes, but unicode chars

frontend/src/app/components/user/user-avatar/user-avatar.component.spec.ts

@@ -0,0 +1,95 @@
+// -- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) 2012-2020 the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See docs/COPYRIGHT.rdoc for more details.
+// ++
+
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {PathHelperService} from 'core-app/modules/common/path-helper/path-helper.service';
+import {UserAvatarComponent} from "core-components/user/user-avatar/user-avatar.component";
+
+describe('UserAvatar component test', () => {
+  let app:UserAvatarComponent;
+  let fixture:ComponentFixture<UserAvatarComponent>;
+  let element:HTMLElement;
+  let user:any;
+
+  beforeEach(async(() => {
+
+    // noinspection JSIgnoredPromiseFromCall
+    TestBed.configureTestingModule({
+      declarations: [
+        UserAvatarComponent
+      ],
+      providers: [
+        PathHelperService
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserAvatarComponent);
+    app = fixture.debugElement.componentInstance;
+    element = fixture.elementRef.nativeElement;
+  }));
+
+  describe('Regular initials', () => {
+    beforeEach(async(() => {
+      user = {
+        id: 1,
+        name: 'First Last',
+      };
+
+      app.user = user;
+      element.dataset.useFallback = 'true';
+      app.ngAfterViewInit();
+      fixture.detectChanges();
+    }));
+
+    it('should render the fallback avatar', function () {
+      const link = element.querySelector('.avatar-default')!;
+      expect(app.userInitials).toEqual('FL');
+      expect(link.textContent).toEqual('FL');
+    });
+  });
+
+  describe('Emoji initials', () => {
+    beforeEach(async(() => {
+      user = {
+        id: 1,
+        name: "️\uFE0F Foo Bar",
+      };
+
+      app.user = user;
+      element.dataset.useFallback = 'true';
+      app.ngAfterViewInit();
+      fixture.detectChanges();
+    }));
+
+    it('should render the fallback avatar', function () {
+      const link = element.querySelector('.avatar-default')!;
+      expect(app.userInitials).toEqual('\uFe0F' + 'B');
+      expect(link.textContent).toEqual('\uFe0F' + 'B');
+    });
+  });
+});

frontend/src/app/components/user/user-avatar/user-avatar.component.ts

@@ -27,24 +27,14 @@
 //++
 
 import {UserResource} from 'core-app/modules/hal/resources/user-resource';
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input,
-  OnChanges,
-  SimpleChanges
-} from "@angular/core";
-import {DynamicBootstrapper} from "core-app/globals/dynamic-bootstrapper";
+import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input} from "@angular/core";
 import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service";
 import {ColorsService} from "core-app/modules/common/colors/colors.service";
 
 export const userAvatarSelector = 'user-avatar';
 
 @Component({
-selector: userAvatarSelector,
+  selector: userAvatarSelector,
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './user-avatar.component.html'
 })
@@ -96,14 +86,12 @@ export class UserAvatarComponent implements AfterViewInit {
   }
 
   private getInitials(name:string) {
-    let names = name.split(' '),
-      initials = names[0].substring(0, 1).toUpperCase();
+    let characters = [...name];
+    let lastSpace = name.lastIndexOf(' ');
+    let first = characters[0]?.toUpperCase();
+    let last = name[lastSpace + 1]?.toUpperCase();
 
-    if (names.length > 1) {
-      initials += names[names.length - 1].substring(0, 1).toUpperCase();
-    }
-
-    return initials;
+    return [first, last].join("");
   }
 }