From cec38668e1a0e332f86462461475d9932f3c4d9f Mon Sep 17 00:00:00 2001 From: Asli Aykan <56061820+asliayk@users.noreply.github.com> Date: Sun, 10 Nov 2024 17:22:51 +0100 Subject: [PATCH] Communication: Add profile picture to sidebar element and conversation header (#9719) --- .../conversation/one-to-one-chat.model.ts | 7 +++ .../course-conversations.module.ts | 2 - .../conversation-detail-dialog.component.html | 4 +- .../conversation-detail-dialog.component.ts | 2 + .../conversation-header.component.html | 19 +++++++- .../conversation-header.component.ts | 15 +++++- .../group-chat-icon.component.html | 1 - .../group-chat-icon.component.ts | 11 ----- .../sidebar-card-item.component.html | 15 +++++- .../sidebar-card-item.component.ts | 18 +++++++ .../app/shared/sidebar/sidebar.component.html | 2 +- .../app/shared/sidebar/sidebar.component.ts | 4 +- .../app/shared/sidebar/sidebar.module.ts | 2 + ...rsation-add-users-dialog.component.spec.ts | 9 +--- ...nversation-detail-dialog.component.spec.ts | 4 +- .../conversation-header.component.spec.ts | 17 ++++++- .../group-chat-icon.component.spec.ts | 23 --------- .../sidebar-card-item.component.spec.ts | 47 ++++++++++++++----- 18 files changed, 132 insertions(+), 70 deletions(-) delete mode 100644 src/main/webapp/app/overview/course-conversations/other/group-chat-icon/group-chat-icon.component.html delete mode 100644 src/main/webapp/app/overview/course-conversations/other/group-chat-icon/group-chat-icon.component.ts delete mode 100644 src/test/javascript/spec/component/overview/course-conversations/other/group-chat-icon/group-chat-icon.component.spec.ts diff --git a/src/main/webapp/app/entities/metis/conversation/one-to-one-chat.model.ts b/src/main/webapp/app/entities/metis/conversation/one-to-one-chat.model.ts index 76f59620f516..d6c8d128596d 100644 --- a/src/main/webapp/app/entities/metis/conversation/one-to-one-chat.model.ts +++ b/src/main/webapp/app/entities/metis/conversation/one-to-one-chat.model.ts @@ -15,3 +15,10 @@ export class OneToOneChatDTO extends ConversationDTO { export function isOneToOneChatDTO(conversation: ConversationDTO): conversation is OneToOneChatDTO { return conversation.type === ConversationType.ONE_TO_ONE; } + +export function getAsOneToOneChatDTO(conversation: ConversationDTO | undefined): OneToOneChatDTO | undefined { + if (!conversation) { + return undefined; + } + return isOneToOneChatDTO(conversation) ? conversation : undefined; +} diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.module.ts b/src/main/webapp/app/overview/course-conversations/course-conversations.module.ts index 2f6e01364f58..0646118f577f 100644 --- a/src/main/webapp/app/overview/course-conversations/course-conversations.module.ts +++ b/src/main/webapp/app/overview/course-conversations/course-conversations.module.ts @@ -26,7 +26,6 @@ import { GenericConfirmationDialogComponent } from './dialogs/generic-confirmati import { ConversationSettingsComponent } from './dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component'; import { OneToOneChatCreateDialogComponent } from './dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component'; import { GroupChatCreateDialogComponent } from './dialogs/group-chat-create-dialog/group-chat-create-dialog.component'; -import { GroupChatIconComponent } from './other/group-chat-icon/group-chat-icon.component'; import { ArtemisMarkdownModule } from 'app/shared/markdown.module'; import { CourseConversationsCodeOfConductComponent } from 'app/overview/course-conversations/code-of-conduct/course-conversations-code-of-conduct.component'; import { CourseWideSearchComponent } from 'app/overview/course-conversations/course-wide-search/course-wide-search.component'; @@ -79,7 +78,6 @@ const routes: Routes = [ ConversationSettingsComponent, OneToOneChatCreateDialogComponent, GroupChatCreateDialogComponent, - GroupChatIconComponent, CourseWideSearchComponent, ], }) diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html index bd18770a088c..193b823d77b3 100644 --- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html +++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html @@ -6,8 +6,8 @@

@if (getAsChannel(activeConversation); as channel) { } - @if (getAsGroupChat(activeConversation); as groupChat) { - + @if (getAsGroupChat(activeConversation)) { + } {{ conversationService.getConversationName(activeConversation, true) }} diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.ts b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.ts index 840262873e86..bd75071f1610 100644 --- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.ts +++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.ts @@ -7,6 +7,7 @@ import { ConversationService } from 'app/shared/metis/conversations/conversation import { isOneToOneChatDTO } from 'app/entities/metis/conversation/one-to-one-chat.model'; import { getAsGroupChatDTO } from 'app/entities/metis/conversation/group-chat.model'; import { AbstractDialogComponent } from 'app/overview/course-conversations/dialogs/abstract-dialog.component'; +import { faPeopleGroup } from '@fortawesome/free-solid-svg-icons'; export enum ConversationDetailTabs { MEMBERS = 'members', @@ -24,6 +25,7 @@ export class ConversationDetailDialogComponent extends AbstractDialogComponent { @Input() selectedTab: ConversationDetailTabs = ConversationDetailTabs.MEMBERS; isInitialized = false; + readonly faPeopleGroup = faPeopleGroup; initialize() { super.initialize(['course', 'activeConversation', 'selectedTab']); diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html index 1db98b09814d..ddd8dbf400b7 100644 --- a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html +++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html @@ -13,8 +13,23 @@

} - @if (getAsGroupChat(activeConversation); as groupChat) { - + @if (getAsGroupChat(activeConversation)) { + + } + @if (getAsOneToOneChat(activeConversation) && otherUser) { + + } {{ conversationService.getConversationName(activeConversation, true) }}

diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.ts b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.ts index ead5e1856a23..a8c9ff8ffe26 100644 --- a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.ts +++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.ts @@ -1,5 +1,5 @@ import { Component, EventEmitter, OnDestroy, OnInit, Output, inject } from '@angular/core'; -import { faChevronLeft, faSearch, faUserGroup, faUserPlus } from '@fortawesome/free-solid-svg-icons'; +import { faChevronLeft, faPeopleGroup, faSearch, faUserGroup, faUserPlus } from '@fortawesome/free-solid-svg-icons'; import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model'; import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; import { Course } from 'app/entities/course.model'; @@ -18,6 +18,8 @@ import { defaultFirstLayerDialogOptions, getChannelSubTypeReferenceTranslationKe import { catchError } from 'rxjs/operators'; import { MetisService } from 'app/shared/metis/metis.service'; import { CourseSidebarService } from 'app/overview/course-sidebar.service'; +import { getAsOneToOneChatDTO } from 'app/entities/metis/conversation/one-to-one-chat.model'; +import { ConversationUserDTO } from 'app/entities/metis/conversation/conversation-user-dto.model'; @Component({ selector: 'jhi-conversation-header', @@ -39,11 +41,13 @@ export class ConversationHeaderComponent implements OnInit, OnDestroy { activeConversationAsChannel?: ChannelDTO; channelSubTypeReferenceTranslationKey?: string; channelSubTypeReferenceRouterLink?: string; + otherUser?: ConversationUserDTO; faUserPlus = faUserPlus; faUserGroup = faUserGroup; faSearch = faSearch; faChevronLeft = faChevronLeft; + readonly faPeopleGroup = faPeopleGroup; private courseSidebarService: CourseSidebarService = inject(CourseSidebarService); @@ -56,6 +60,7 @@ export class ConversationHeaderComponent implements OnInit, OnDestroy { ) {} getAsGroupChat = getAsGroupChatDTO; + getAsOneToOneChat = getAsOneToOneChatDTO; canAddUsers = canAddUsersToConversation; @@ -64,6 +69,13 @@ export class ConversationHeaderComponent implements OnInit, OnDestroy { this.subscribeToActiveConversation(); } + getOtherUser() { + const conversation = getAsOneToOneChatDTO(this.activeConversation); + if (conversation) { + this.otherUser = conversation.members?.find((user) => !user.isRequestingUser); + } + } + ngOnDestroy() { this.ngUnsubscribe.next(); this.ngUnsubscribe.complete(); @@ -79,6 +91,7 @@ export class ConversationHeaderComponent implements OnInit, OnDestroy { this.activeConversationAsChannel = getAsChannelDTO(conversation); this.channelSubTypeReferenceTranslationKey = getChannelSubTypeReferenceTranslationKey(this.activeConversationAsChannel?.subType); this.channelSubTypeReferenceRouterLink = this.metisService.getLinkForChannelSubType(this.activeConversationAsChannel); + this.getOtherUser(); }); } diff --git a/src/main/webapp/app/overview/course-conversations/other/group-chat-icon/group-chat-icon.component.html b/src/main/webapp/app/overview/course-conversations/other/group-chat-icon/group-chat-icon.component.html deleted file mode 100644 index b685df2fd200..000000000000 --- a/src/main/webapp/app/overview/course-conversations/other/group-chat-icon/group-chat-icon.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/main/webapp/app/overview/course-conversations/other/group-chat-icon/group-chat-icon.component.ts b/src/main/webapp/app/overview/course-conversations/other/group-chat-icon/group-chat-icon.component.ts deleted file mode 100644 index fbcd38cfb5b2..000000000000 --- a/src/main/webapp/app/overview/course-conversations/other/group-chat-icon/group-chat-icon.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; -import { faPeopleGroup } from '@fortawesome/free-solid-svg-icons'; - -@Component({ - selector: 'jhi-group-chat-icon', - templateUrl: './group-chat-icon.component.html', -}) -export class GroupChatIconComponent { - // icons - faPeopleGroup = faPeopleGroup; -} diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html b/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html index 15f1ecdd6e90..634d69ee9022 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html +++ b/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html @@ -54,7 +54,20 @@ [class.muted]="sidebarItem.conversation?.isMuted" [ngClass]="unreadCount() > 0 ? 'fw-bold' : 'fw-normal'" > - @if (sidebarItem.icon) { + @if (otherUser) { + + + } @else if (sidebarItem.icon) { } {{ sidebarItem.title }}(0); + otherUser: any; + + readonly faPeopleGroup = faPeopleGroup; formattedUnreadCount: string = ''; ngOnInit(): void { this.formattedUnreadCount = this.getFormattedUnreadCount(); + this.extractMessageUser(); } ngOnChanges(changes: SimpleChanges): void { @@ -30,4 +36,16 @@ export class SidebarCardItemComponent implements OnInit, OnChanges { } return this.unreadCount().toString() || ''; } + + extractMessageUser(): void { + if (this.sidebarItem.type === 'oneToOneChat' && (this.sidebarItem.conversation as OneToOneChatDTO)?.members) { + this.otherUser = (this.sidebarItem.conversation as OneToOneChatDTO).members!.find((user) => !user.isRequestingUser); + } else { + this.otherUser = null; + } + + if (this.sidebarItem.type === 'groupChat') { + this.sidebarItem.icon = this.faPeopleGroup; + } + } } diff --git a/src/main/webapp/app/shared/sidebar/sidebar.component.html b/src/main/webapp/app/shared/sidebar/sidebar.component.html index becdd0a69eda..b9c6a7403ccf 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar.component.html +++ b/src/main/webapp/app/shared/sidebar/sidebar.component.html @@ -31,7 +31,7 @@ } diff --git a/src/main/webapp/app/shared/sidebar/sidebar.component.ts b/src/main/webapp/app/shared/sidebar/sidebar.component.ts index bb44a30c1ee8..99903955e980 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar.component.ts +++ b/src/main/webapp/app/shared/sidebar/sidebar.component.ts @@ -1,5 +1,5 @@ import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, effect, input, output } from '@angular/core'; -import { faFilter, faFilterCircleXmark, faHashtag, faPlusCircle, faSearch, faUser, faUsers } from '@fortawesome/free-solid-svg-icons'; +import { faFilter, faFilterCircleXmark, faHashtag, faPeopleGroup, faPlusCircle, faSearch, faUser } from '@fortawesome/free-solid-svg-icons'; import { ActivatedRoute, Params } from '@angular/router'; import { Subscription, distinctUntilChanged } from 'rxjs'; import { ProfileService } from '../layouts/profiles/profile.service'; @@ -57,7 +57,7 @@ export class SidebarComponent implements OnDestroy, OnChanges, OnInit { readonly faFilter = faFilter; readonly faFilterCurrentlyApplied = faFilterCircleXmark; readonly faUser = faUser; - readonly faUsers = faUsers; + readonly faPeopleGroup = faPeopleGroup; readonly faPlusCircle = faPlusCircle; readonly faSearch = faSearch; readonly faHashtag = faHashtag; diff --git a/src/main/webapp/app/shared/sidebar/sidebar.module.ts b/src/main/webapp/app/shared/sidebar/sidebar.module.ts index 5a6ca727a8b5..3e5222a0a6e2 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar.module.ts +++ b/src/main/webapp/app/shared/sidebar/sidebar.module.ts @@ -16,6 +16,7 @@ import { SidebarCardDirective } from 'app/shared/sidebar/sidebar-card.directive' import { ConversationOptionsComponent } from 'app/shared/sidebar/conversation-options/conversation-options.component'; import { ArtemisExamSharedModule } from 'app/exam/shared/exam-shared.module'; import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component'; +import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component'; @NgModule({ imports: [ @@ -29,6 +30,7 @@ import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.co SidebarCardDirective, ArtemisExamSharedModule, SearchFilterComponent, + ProfilePictureComponent, ], declarations: [ SidebarAccordionComponent, diff --git a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.spec.ts index e4ea05f90064..d1afbe9f83f1 100644 --- a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.spec.ts +++ b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.spec.ts @@ -14,7 +14,6 @@ import { AddUsersFormData } from 'app/overview/course-conversations/dialogs/conv import { initializeDialog } from '../dialog-test-helpers'; import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe'; import { ChannelIconComponent } from 'app/overview/course-conversations/other/channel-icon/channel-icon.component'; -import { GroupChatIconComponent } from 'app/overview/course-conversations/other/group-chat-icon/group-chat-icon.component'; import { UserPublicInfoDTO } from 'app/core/user/user.model'; import { By } from '@angular/platform-browser'; import { isChannelDTO } from 'app/entities/metis/conversation/channel.model'; @@ -42,13 +41,7 @@ examples.forEach((activeConversation) => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ - ConversationAddUsersDialogComponent, - ConversationAddUsersFormStubComponent, - MockPipe(ArtemisTranslatePipe), - MockComponent(ChannelIconComponent), - MockComponent(GroupChatIconComponent), - ], + declarations: [ConversationAddUsersDialogComponent, ConversationAddUsersFormStubComponent, MockPipe(ArtemisTranslatePipe), MockComponent(ChannelIconComponent)], providers: [ MockProvider(AlertService), MockProvider(NgbActiveModal), diff --git a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.spec.ts index 0f4590fc99b4..07100e45f567 100644 --- a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.spec.ts +++ b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.spec.ts @@ -1,6 +1,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; import { Course } from 'app/entities/course.model'; import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { ConversationDetailDialogComponent, ConversationDetailTabs, @@ -9,7 +10,6 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe'; import { MockComponent, MockPipe, MockProvider } from 'ng-mocks'; import { ChannelIconComponent } from 'app/overview/course-conversations/other/channel-icon/channel-icon.component'; -import { GroupChatIconComponent } from 'app/overview/course-conversations/other/group-chat-icon/group-chat-icon.component'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { ConversationService } from 'app/shared/metis/conversations/conversation.service'; import { generateExampleChannelDTO, generateExampleGroupChatDTO, generateOneToOneChatDTO } from '../../helpers/conversationExampleModels'; @@ -82,8 +82,8 @@ examples.forEach((activeConversation) => { ConversationInfoStubComponent, MockPipe(ArtemisTranslatePipe), MockComponent(ChannelIconComponent), - MockComponent(GroupChatIconComponent), ], + imports: [FontAwesomeModule], providers: [MockProvider(NgbActiveModal), MockProvider(ConversationService)], }).compileComponents(); })); diff --git a/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-header/conversation-header.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-header/conversation-header.component.spec.ts index 1bec632a62d4..32644d2b20b5 100644 --- a/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-header/conversation-header.component.spec.ts +++ b/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-header/conversation-header.component.spec.ts @@ -3,7 +3,6 @@ import { ConversationHeaderComponent } from 'app/overview/course-conversations/l import { Location } from '@angular/common'; import { MockComponent, MockPipe, MockProvider } from 'ng-mocks'; import { ChannelIconComponent } from 'app/overview/course-conversations/other/channel-icon/channel-icon.component'; -import { GroupChatIconComponent } from 'app/overview/course-conversations/other/group-chat-icon/group-chat-icon.component'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe'; import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; @@ -28,6 +27,7 @@ import { MetisModule } from 'app/shared/metis/metis.module'; import { MockTranslateService } from '../../../../../helpers/mocks/service/mock-translate.service'; import { TranslateService } from '@ngx-translate/core'; import { provideRouter } from '@angular/router'; +import { ProfilePictureComponent } from '../../../../../../../../main/webapp/app/shared/profile-picture/profile-picture.component'; const examples: ConversationDTO[] = [ generateOneToOneChatDTO({}), @@ -51,7 +51,7 @@ examples.forEach((activeConversation) => { declarations: [ ConversationHeaderComponent, MockComponent(ChannelIconComponent), - MockComponent(GroupChatIconComponent), + MockComponent(ProfilePictureComponent), MockComponent(FaIconComponent), MockPipe(ArtemisTranslatePipe), ], @@ -138,6 +138,19 @@ examples.forEach((activeConversation) => { }); })); + it('should set otherUser to the non-requesting user in a one-to-one conversation', () => { + const oneToOneChat = generateOneToOneChatDTO({}); + oneToOneChat.members = [ + { id: 1, isRequestingUser: true }, + { id: 2, isRequestingUser: false }, + ]; + + component.activeConversation = oneToOneChat; + component.getOtherUser(); + + expect(component.otherUser).toEqual(oneToOneChat.members[1]); + }); + if (activeConversation instanceof ChannelDTO && activeConversation.subType !== ChannelSubType.GENERAL) { it( 'should navigate to ' + activeConversation.subType, diff --git a/src/test/javascript/spec/component/overview/course-conversations/other/group-chat-icon/group-chat-icon.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/other/group-chat-icon/group-chat-icon.component.spec.ts deleted file mode 100644 index 3ad916f52f04..000000000000 --- a/src/test/javascript/spec/component/overview/course-conversations/other/group-chat-icon/group-chat-icon.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { GroupChatIconComponent } from 'app/overview/course-conversations/other/group-chat-icon/group-chat-icon.component'; -import { MockComponent } from 'ng-mocks'; -import { FaIconComponent } from '@fortawesome/angular-fontawesome'; - -describe('GroupChatIconComponent', () => { - let component: GroupChatIconComponent; - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [GroupChatIconComponent, MockComponent(FaIconComponent)] }).compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(GroupChatIconComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts b/src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts index b82e9af01815..80c64cbad634 100644 --- a/src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts +++ b/src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts @@ -3,22 +3,41 @@ import { SidebarCardItemComponent } from 'app/shared/sidebar/sidebar-card-item/s import { SidebarCardSize } from 'app/types/sidebar'; import { ArtemisTestModule } from '../../../test.module'; import { DifficultyLevel } from 'app/entities/exercise.model'; +import { OneToOneChatDTO } from 'app/entities/metis/conversation/one-to-one-chat.model'; import { input, runInInjectionContext } from '@angular/core'; +import { faPeopleGroup } from '@fortawesome/free-solid-svg-icons'; +import { ProfilePictureComponent } from '../../../../../../main/webapp/app/shared/profile-picture/profile-picture.component'; +import { MockComponent } from 'ng-mocks'; describe('SidebarCardItemComponent', () => { let component: SidebarCardItemComponent; let fixture: ComponentFixture; + let sidebarItemMock: any; beforeEach(() => { TestBed.configureTestingModule({ imports: [ArtemisTestModule], - declarations: [SidebarCardItemComponent], + declarations: [SidebarCardItemComponent, MockComponent(ProfilePictureComponent)], }).compileComponents(); - }); - beforeEach(() => { fixture = TestBed.createComponent(SidebarCardItemComponent); component = fixture.componentInstance; + + sidebarItemMock = { + title: 'testTitle', + id: 'testId', + size: 'M' as SidebarCardSize, + difficulty: DifficultyLevel.EASY, + type: 'oneToOneChat', + conversation: { + members: [ + { id: 2, name: 'RequestingUser', isRequestingUser: true }, + { id: 1, name: 'User1', isRequestingUser: false }, + ], + } as OneToOneChatDTO, + }; + + component.sidebarItem = sidebarItemMock; fixture.detectChanges(); }); @@ -27,16 +46,8 @@ describe('SidebarCardItemComponent', () => { }); it('should display item title', () => { - const testItem = { - title: 'testTitle', - id: 'testId', - size: 'M' as SidebarCardSize, - difficulty: DifficultyLevel.EASY, - }; - component.sidebarItem = testItem; - fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('#test-sidebar-card-title').textContent).toContain(testItem.title); + expect(compiled.querySelector('#test-sidebar-card-title').textContent).toContain(sidebarItemMock.title); }); it('should format unreadCount correctly when count is less than 99', () => { @@ -54,4 +65,16 @@ describe('SidebarCardItemComponent', () => { expect(component.formattedUnreadCount).toBe('99+'); }); }); + + it('should set group icon for group chats in extractMessageUser', () => { + component.sidebarItem.type = 'groupChat'; + component.sidebarItem.icon = undefined; + component.extractMessageUser(); + expect(component.sidebarItem.icon).toBe(faPeopleGroup); + }); + + it('should set otherUser for one-to-one chat in extractMessageUser', () => { + component.extractMessageUser(); + expect(component.otherUser).toEqual(sidebarItemMock.conversation.members[1]); + }); });