From cdfd2478e195dbf4222dc5aedef79d177c3fa303 Mon Sep 17 00:00:00 2001 From: katebatura Date: Sun, 31 Oct 2021 13:09:33 +0300 Subject: [PATCH 1/5] feat(chat): provide custom template to title --- .../theme/components/chat/chat.component.ts | 36 ++++++++++++++++++- .../theme/components/chat/chat.module.ts | 3 +- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/src/framework/theme/components/chat/chat.component.ts b/src/framework/theme/components/chat/chat.component.ts index ca4c5b96c7..b7bba37a4b 100644 --- a/src/framework/theme/components/chat/chat.component.ts +++ b/src/framework/theme/components/chat/chat.component.ts @@ -17,6 +17,8 @@ import { SimpleChanges, AfterContentInit, OnChanges, + Directive, + TemplateRef, } from '@angular/core'; import { NbStatusService } from '../../services/status.service'; @@ -101,6 +103,15 @@ import { NbCustomMessageService } from './custom-message.service'; * // chat message, available multiple types * ``` * + * A custom template can be provided to title. It will be used instead of `[title]` input: + * ```ts + * + * + * Your custom template for title + * + * + * ``` + * * Two users conversation showcase: * @stacked-example(Conversation, chat/chat-conversation-showcase.component) * @@ -237,7 +248,15 @@ import { NbCustomMessageService } from './custom-message.service'; selector: 'nb-chat', styleUrls: ['./chat.component.scss'], template: ` -
{{ title }}
+
+ + + + {{ title }} + +
+
@@ -253,6 +272,14 @@ import { NbCustomMessageService } from './custom-message.service'; ], }) export class NbChatComponent implements OnChanges, AfterContentInit, AfterViewInit { + @ContentChild(NbChatTitleDirective) + get templateTitle(): NbChatTitleDirective { return this._templateTitle; } + set templateTitle(value: NbChatTitleDirective) { + if (value) { + this._templateTitle = value; + } + } + protected _templateTitle: NbChatTitleDirective; @Input() title: string; @@ -394,3 +421,10 @@ export class NbChatComponent implements OnChanges, AfterContentInit, AfterViewIn return []; } } + +@Directive({ + selector: `[nbChatTitle]`, +}) +export class NbChatTitleDirective { + constructor(public templateRef: TemplateRef) {} +} diff --git a/src/framework/theme/components/chat/chat.module.ts b/src/framework/theme/components/chat/chat.module.ts index cf2c91969b..594836ec1f 100644 --- a/src/framework/theme/components/chat/chat.module.ts +++ b/src/framework/theme/components/chat/chat.module.ts @@ -11,7 +11,7 @@ import { NbButtonModule } from '../button/button.module'; import { NbInputModule } from '../input/input.module'; import { NbIconModule } from '../icon/icon.module'; -import { NbChatComponent } from './chat.component'; +import { NbChatComponent, NbChatTitleDirective } from './chat.component'; import { NbChatMessageComponent } from './chat-message.component'; import { NbChatFormComponent } from './chat-form.component'; import { NbChatMessageTextComponent } from './chat-message-text.component'; @@ -35,6 +35,7 @@ const NB_CHAT_COMPONENTS = [ const NB_CHAT_DIRECTIVES = [ NbChatCustomMessageDirective, + NbChatTitleDirective, ]; @NgModule({ From 63a85569a0a279fb57b678d0e81bfbcf9db54cff Mon Sep 17 00:00:00 2001 From: katebatura Date: Thu, 4 Nov 2021 14:13:36 +0300 Subject: [PATCH 2/5] feat(chat): template as chat title --- schematics/dist/utils/playground.js.map | 1 + src/app/playground-components.ts | 6 ++ .../chat/chat-title.directive.spec.ts | 8 +++ .../components/chat/chat-title.directive.ts | 10 +++ .../theme/components/chat/chat.component.ts | 55 +++++------------ .../theme/components/chat/chat.module.ts | 34 +++-------- src/framework/theme/public_api.ts | 1 + .../with-layout/chat/chat-routing.module.ts | 11 +++- .../chat/chat-template-title.component.html | 21 +++++++ .../chat/chat-template-title.component.ts | 61 +++++++++++++++++++ .../with-layout/chat/chat.module.ts | 10 +-- 11 files changed, 143 insertions(+), 75 deletions(-) create mode 100644 schematics/dist/utils/playground.js.map create mode 100644 src/framework/theme/components/chat/chat-title.directive.spec.ts create mode 100644 src/framework/theme/components/chat/chat-title.directive.ts create mode 100644 src/playground/with-layout/chat/chat-template-title.component.html create mode 100644 src/playground/with-layout/chat/chat-template-title.component.ts diff --git a/schematics/dist/utils/playground.js.map b/schematics/dist/utils/playground.js.map new file mode 100644 index 0000000000..bcd996c8a7 --- /dev/null +++ b/schematics/dist/utils/playground.js.map @@ -0,0 +1 @@ +{"version":3,"file":"playground.js","sourceRoot":"","sources":["../../utils/playground.ts"],"names":[],"mappings":"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"} diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts index 618d6ab42f..1b8e5ec787 100644 --- a/src/app/playground-components.ts +++ b/src/app/playground-components.ts @@ -480,6 +480,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [ component: 'ChatCustomMessageComponent', name: 'Chat Custom Message', }, + { + path: 'chat-template-title.component', + link: '/chat/chat-template-title.component', + component: 'ChatTemplateTitleComponent', + name: 'Chat Template Title', + }, ], }, { diff --git a/src/framework/theme/components/chat/chat-title.directive.spec.ts b/src/framework/theme/components/chat/chat-title.directive.spec.ts new file mode 100644 index 0000000000..c7b5b4d052 --- /dev/null +++ b/src/framework/theme/components/chat/chat-title.directive.spec.ts @@ -0,0 +1,8 @@ +import { ChatTitleDirective } from './chat-title.directive'; + +describe('ChatTitleDirective', () => { + it('should create an instance', () => { + const directive = new ChatTitleDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/framework/theme/components/chat/chat-title.directive.ts b/src/framework/theme/components/chat/chat-title.directive.ts new file mode 100644 index 0000000000..5d19673194 --- /dev/null +++ b/src/framework/theme/components/chat/chat-title.directive.ts @@ -0,0 +1,10 @@ +import { Directive, Input, TemplateRef } from '@angular/core'; + +@Directive({ + selector: `[nbChatTitle]`, +}) +export class NbChatTitleDirective { + @Input() context: Object = {}; + + constructor(public templateRef: TemplateRef) {} +} diff --git a/src/framework/theme/components/chat/chat.component.ts b/src/framework/theme/components/chat/chat.component.ts index b7bba37a4b..40657df663 100644 --- a/src/framework/theme/components/chat/chat.component.ts +++ b/src/framework/theme/components/chat/chat.component.ts @@ -17,8 +17,6 @@ import { SimpleChanges, AfterContentInit, OnChanges, - Directive, - TemplateRef, } from '@angular/core'; import { NbStatusService } from '../../services/status.service'; @@ -28,6 +26,7 @@ import { convertToBoolProperty, NbBooleanInput } from '../helpers'; import { NbChatFormComponent } from './chat-form.component'; import { NbChatMessageComponent } from './chat-message.component'; import { NbCustomMessageService } from './custom-message.service'; +import { NbChatTitleDirective } from './chat-title.directive'; /** * Conversational UI collection - a set of components for chat-like UI construction. @@ -103,14 +102,8 @@ import { NbCustomMessageService } from './custom-message.service'; * // chat message, available multiple types * ``` * - * A custom template can be provided to title. It will be used instead of `[title]` input: - * ```ts - * - * - * Your custom template for title - * - * - * ``` + * You could provide a title template via the `nbChatTitle` directive. It overrides `title` input. + * @stacked-example(Custom message, chat/chat-template-title.component) * * Two users conversation showcase: * @stacked-example(Conversation, chat/chat-conversation-showcase.component) @@ -249,8 +242,11 @@ import { NbCustomMessageService } from './custom-message.service'; styleUrls: ['./chat.component.scss'], template: `
- + {{ title }} @@ -267,20 +263,9 @@ import { NbCustomMessageService } from './custom-message.service';
`, - providers: [ - NbCustomMessageService, - ], + providers: [NbCustomMessageService], }) export class NbChatComponent implements OnChanges, AfterContentInit, AfterViewInit { - @ContentChild(NbChatTitleDirective) - get templateTitle(): NbChatTitleDirective { return this._templateTitle; } - set templateTitle(value: NbChatTitleDirective) { - if (value) { - this._templateTitle = value; - } - } - protected _templateTitle: NbChatTitleDirective; - @Input() title: string; /** @@ -302,7 +287,7 @@ export class NbChatComponent implements OnChanges, AfterContentInit, AfterViewIn */ @Input() get scrollBottom(): boolean { - return this._scrollBottom + return this._scrollBottom; } set scrollBottom(value: boolean) { this._scrollBottom = convertToBoolProperty(value); @@ -313,9 +298,9 @@ export class NbChatComponent implements OnChanges, AfterContentInit, AfterViewIn @ViewChild('scrollable') scrollable: ElementRef; @ContentChildren(NbChatMessageComponent) messages: QueryList; @ContentChild(NbChatFormComponent) chatForm: NbChatFormComponent; + @ContentChild(NbChatTitleDirective) templateTitle: NbChatTitleDirective; - constructor(protected statusService: NbStatusService) { - } + constructor(protected statusService: NbStatusService) {} ngOnChanges(changes: SimpleChanges) { if ('status' in changes) { @@ -328,11 +313,10 @@ export class NbChatComponent implements OnChanges, AfterContentInit, AfterViewIn } ngAfterViewInit() { - this.messages.changes - .subscribe((messages) => { - this.messages = messages; - this.updateView(); - }); + this.messages.changes.subscribe((messages) => { + this.messages = messages; + this.updateView(); + }); this.updateView(); } @@ -421,10 +405,3 @@ export class NbChatComponent implements OnChanges, AfterContentInit, AfterViewIn return []; } } - -@Directive({ - selector: `[nbChatTitle]`, -}) -export class NbChatTitleDirective { - constructor(public templateRef: TemplateRef) {} -} diff --git a/src/framework/theme/components/chat/chat.module.ts b/src/framework/theme/components/chat/chat.module.ts index 594836ec1f..4aec9a5b5b 100644 --- a/src/framework/theme/components/chat/chat.module.ts +++ b/src/framework/theme/components/chat/chat.module.ts @@ -11,7 +11,7 @@ import { NbButtonModule } from '../button/button.module'; import { NbInputModule } from '../input/input.module'; import { NbIconModule } from '../icon/icon.module'; -import { NbChatComponent, NbChatTitleDirective } from './chat.component'; +import { NbChatComponent } from './chat.component'; import { NbChatMessageComponent } from './chat-message.component'; import { NbChatFormComponent } from './chat-form.component'; import { NbChatMessageTextComponent } from './chat-message-text.component'; @@ -21,6 +21,7 @@ import { NbChatMessageMapComponent } from './chat-message-map.component'; import { NbChatOptions } from './chat.options'; import { NbChatAvatarComponent } from './chat-avatar.component'; import { NbChatCustomMessageDirective } from './chat-custom-message.directive'; +import { NbChatTitleDirective } from './chat-title.directive'; const NB_CHAT_COMPONENTS = [ NbChatComponent, @@ -33,44 +34,25 @@ const NB_CHAT_COMPONENTS = [ NbChatAvatarComponent, ]; -const NB_CHAT_DIRECTIVES = [ - NbChatCustomMessageDirective, - NbChatTitleDirective, -]; +const NB_CHAT_DIRECTIVES = [NbChatCustomMessageDirective, NbChatTitleDirective]; @NgModule({ - imports: [ - NbSharedModule, - NbIconModule, - NbInputModule, - NbButtonModule, - ], - declarations: [ - ...NB_CHAT_COMPONENTS, - ...NB_CHAT_DIRECTIVES, - ], - exports: [ - ...NB_CHAT_COMPONENTS, - ...NB_CHAT_DIRECTIVES, - ], + imports: [NbSharedModule, NbIconModule, NbInputModule, NbButtonModule], + declarations: [...NB_CHAT_COMPONENTS, ...NB_CHAT_DIRECTIVES], + exports: [...NB_CHAT_COMPONENTS, ...NB_CHAT_DIRECTIVES], }) export class NbChatModule { - static forRoot(options?: NbChatOptions): ModuleWithProviders { return { ngModule: NbChatModule, - providers: [ - { provide: NbChatOptions, useValue: options || {} }, - ], + providers: [{ provide: NbChatOptions, useValue: options || {} }], }; } static forChild(options?: NbChatOptions): ModuleWithProviders { return { ngModule: NbChatModule, - providers: [ - { provide: NbChatOptions, useValue: options || {} }, - ], + providers: [{ provide: NbChatOptions, useValue: options || {} }], }; } } diff --git a/src/framework/theme/public_api.ts b/src/framework/theme/public_api.ts index be972ac27d..f0175f3c6f 100644 --- a/src/framework/theme/public_api.ts +++ b/src/framework/theme/public_api.ts @@ -112,6 +112,7 @@ export * from './components/chat/chat.module'; export * from './components/chat/chat.options'; export * from './components/chat/chat-avatar.component'; export * from './components/chat/chat-custom-message.directive'; +export * from './components/chat/chat-title.directive'; export * from './components/spinner/spinner.component'; export * from './components/spinner/spinner.directive'; export * from './components/spinner/spinner.module'; diff --git a/src/playground/with-layout/chat/chat-routing.module.ts b/src/playground/with-layout/chat/chat-routing.module.ts index d824e6a760..2fc77dc935 100644 --- a/src/playground/with-layout/chat/chat-routing.module.ts +++ b/src/playground/with-layout/chat/chat-routing.module.ts @@ -5,7 +5,7 @@ */ import { NgModule } from '@angular/core'; -import { RouterModule, Route} from '@angular/router'; +import { RouterModule, Route } from '@angular/router'; import { ChatColorsComponent } from './chat-colors.component'; import { ChatConversationShowcaseComponent } from './chat-conversation-showcase.component'; import { ChatDropComponent } from './chat-drop.component'; @@ -14,6 +14,7 @@ import { ChatShowcaseComponent } from './chat-showcase.component'; import { ChatSizesComponent } from './chat-sizes.component'; import { ChatTestComponent } from './chat-test.component'; import { ChatCustomMessageComponent } from './chat-custom-message.component'; +import { ChatTemplateTitleComponent } from './chat-template-title.component'; const routes: Route[] = [ { @@ -48,10 +49,14 @@ const routes: Route[] = [ path: 'chat-custom-message.component', component: ChatCustomMessageComponent, }, + { + path: 'chat-template-title.component', + component: ChatTemplateTitleComponent, + }, ]; @NgModule({ - imports: [ RouterModule.forChild(routes) ], - exports: [ RouterModule ], + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], }) export class ChatRoutingModule {} diff --git a/src/playground/with-layout/chat/chat-template-title.component.html b/src/playground/with-layout/chat/chat-template-title.component.html new file mode 100644 index 0000000000..3020a1b12f --- /dev/null +++ b/src/playground/with-layout/chat/chat-template-title.component.html @@ -0,0 +1,21 @@ + + +
Chat title content from template. Here is the text provided via context: "{{ data.text }}"
+ + + + + + diff --git a/src/playground/with-layout/chat/chat-template-title.component.ts b/src/playground/with-layout/chat/chat-template-title.component.ts new file mode 100644 index 0000000000..f719676b47 --- /dev/null +++ b/src/playground/with-layout/chat/chat-template-title.component.ts @@ -0,0 +1,61 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { Component } from '@angular/core'; +import { ChatShowcaseService } from './chat-showcase.service'; + +@Component({ + templateUrl: './chat-template-title.component.html', + providers: [ChatShowcaseService], + styles: [ + ` + ::ng-deep nb-layout-column { + justify-content: center; + display: flex; + } + nb-chat { + width: 500px; + } + `, + ], +}) +export class ChatTemplateTitleComponent { + messages: any[]; + + constructor(protected chatShowcaseService: ChatShowcaseService) { + this.messages = this.chatShowcaseService.loadMessages(); + } + + sendMessage(event: any) { + const files = !event.files + ? [] + : event.files.map((file) => { + return { + url: file.src, + type: file.type, + icon: 'file-text-outline', + }; + }); + + this.messages.push({ + text: event.message, + date: new Date(), + reply: true, + type: files.length ? 'file' : 'text', + files: files, + user: { + name: 'Jonh Doe', + avatar: 'https://i.gifer.com/no.gif', + }, + }); + const botReply = this.chatShowcaseService.reply(event.message); + if (botReply) { + setTimeout(() => { + this.messages.push(botReply); + }, 500); + } + } +} diff --git a/src/playground/with-layout/chat/chat.module.ts b/src/playground/with-layout/chat/chat.module.ts index 7e925108ff..c9f21921e0 100644 --- a/src/playground/with-layout/chat/chat.module.ts +++ b/src/playground/with-layout/chat/chat.module.ts @@ -18,6 +18,7 @@ import { ChatSizesComponent } from './chat-sizes.component'; import { ChatTestComponent } from './chat-test.component'; import { ChatCustomMessageComponent } from './chat-custom-message.component'; import { ChatCustomMessageTableComponent } from './components/chat-custom-message-table.component'; +import { ChatTemplateTitleComponent } from './chat-template-title.component'; @NgModule({ declarations: [ @@ -30,13 +31,8 @@ import { ChatCustomMessageTableComponent } from './components/chat-custom-messag ChatTestComponent, ChatCustomMessageComponent, ChatCustomMessageTableComponent, + ChatTemplateTitleComponent, ], - imports: [ - CommonModule, - NbChatModule.forRoot(), - NbCardModule, - NbButtonModule, - ChatRoutingModule, - ], + imports: [CommonModule, NbChatModule.forRoot(), NbCardModule, NbButtonModule, ChatRoutingModule], }) export class ChatModule {} From 301f27618294db5fce45cf220bad8c21e9ed01cb Mon Sep 17 00:00:00 2001 From: katebatura Date: Tue, 9 Nov 2021 14:23:06 +0300 Subject: [PATCH 3/5] feat(chat): template as chat title --- schematics/dist/utils/playground.js.map | 1 - .../chat/chat-title.directive.spec.ts | 105 +++++++++++++++++- .../theme/components/chat/chat.component.ts | 8 +- 3 files changed, 104 insertions(+), 10 deletions(-) delete mode 100644 schematics/dist/utils/playground.js.map diff --git a/schematics/dist/utils/playground.js.map b/schematics/dist/utils/playground.js.map deleted file mode 100644 index bcd996c8a7..0000000000 --- a/schematics/dist/utils/playground.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"playground.js","sourceRoot":"","sources":["../../utils/playground.ts"],"names":[],"mappings":"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"} diff --git a/src/framework/theme/components/chat/chat-title.directive.spec.ts b/src/framework/theme/components/chat/chat-title.directive.spec.ts index c7b5b4d052..4dd642e901 100644 --- a/src/framework/theme/components/chat/chat-title.directive.spec.ts +++ b/src/framework/theme/components/chat/chat-title.directive.spec.ts @@ -1,8 +1,103 @@ -import { ChatTitleDirective } from './chat-title.directive'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -describe('ChatTitleDirective', () => { - it('should create an instance', () => { - const directive = new ChatTitleDirective(); - expect(directive).toBeTruthy(); +import { NbThemeModule } from '../../theme.module'; +import { NbChatModule } from './chat.module'; + +@Component({ + selector: 'nb-chat-title-template-test', + template: ` + + +
+ Chat title content from template. Here is the text provided via context: "{{ data.text }}" +
+ + + + + + + + + `, +}) +export class NbChatTitleTemplateTestComponent { + @ViewChild('templateTitle') templateTitle: ElementRef; + + title: string; + + messages = []; + + loadMessages(): void { + this.messages = [ + { + reply: false, + type: 'link', + optionalData: { + href: 'https://akveo.github.io/ngx-admin/', + label: 'Visit Akveo Nebular', + }, + date: new Date(), + user: { + name: 'Frodo Baggins', + avatar: 'https://i.gifer.com/no.gif', + }, + }, + { + text: 'Hello, how are you?', + reply: true, + type: 'text', + date: new Date(), + user: { + name: 'Bilbo Baggins', + avatar: '', + }, + }, + ]; + } +} + +describe('Directive nbChatTitle: NbChatTitleDirective', () => { + let fixture: ComponentFixture; + let component: NbChatTitleTemplateTestComponent; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [BrowserAnimationsModule, NbThemeModule.forRoot(), NbChatModule], + declarations: [NbChatTitleTemplateTestComponent], + }); + + fixture = TestBed.createComponent(NbChatTitleTemplateTestComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should render title template if provided', () => { + const chatTitleTemplateElement = fixture.nativeElement.querySelector('.template-title'); + expect(chatTitleTemplateElement).toBeTruthy(); + expect(chatTitleTemplateElement).toEqual(component.templateTitle.nativeElement); + }); + + it('should not render text title if template title is provided', () => { + const titleText = 'Some title'; + component.title = titleText; + const chatHeaderElement: HTMLElement = fixture.nativeElement.querySelector('.header'); + const chatTitleTemplateElement = fixture.nativeElement.querySelector('.template-title'); + + expect(chatHeaderElement.innerText).not.toEqual(titleText); + expect(chatTitleTemplateElement).toBeTruthy(); }); }); diff --git a/src/framework/theme/components/chat/chat.component.ts b/src/framework/theme/components/chat/chat.component.ts index 40657df663..6b9aa1af2b 100644 --- a/src/framework/theme/components/chat/chat.component.ts +++ b/src/framework/theme/components/chat/chat.component.ts @@ -243,9 +243,9 @@ import { NbChatTitleDirective } from './chat-title.directive'; template: `
@@ -298,7 +298,7 @@ export class NbChatComponent implements OnChanges, AfterContentInit, AfterViewIn @ViewChild('scrollable') scrollable: ElementRef; @ContentChildren(NbChatMessageComponent) messages: QueryList; @ContentChild(NbChatFormComponent) chatForm: NbChatFormComponent; - @ContentChild(NbChatTitleDirective) templateTitle: NbChatTitleDirective; + @ContentChild(NbChatTitleDirective) titleTemplate: NbChatTitleDirective; constructor(protected statusService: NbStatusService) {} From 9d1cef2d2726c96f56e5e0538ee8ce164dc8b8e0 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Tue, 16 Nov 2021 18:07:38 +0300 Subject: [PATCH 4/5] test(chat title): refine tests --- .../chat/chat-title.directive.spec.ts | 103 ++++++++---------- 1 file changed, 48 insertions(+), 55 deletions(-) diff --git a/src/framework/theme/components/chat/chat-title.directive.spec.ts b/src/framework/theme/components/chat/chat-title.directive.spec.ts index 4dd642e901..ada10efcb8 100644 --- a/src/framework/theme/components/chat/chat-title.directive.spec.ts +++ b/src/framework/theme/components/chat/chat-title.directive.spec.ts @@ -1,18 +1,14 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { Component, ElementRef, ViewChild } from '@angular/core'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -import { NbThemeModule } from '../../theme.module'; -import { NbChatModule } from './chat.module'; +import { Component } from '@angular/core'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { By } from '@angular/platform-browser'; +import { NbThemeModule, NbChatModule, NbChatComponent } from '@nebular/theme'; @Component({ - selector: 'nb-chat-title-template-test', template: ` - - -
- Chat title content from template. Here is the text provided via context: "{{ data.text }}" -
+ + + {{ staticTemplateText }} {{ data.text }} { +describe('NbChatTitleDirective', () => { let fixture: ComponentFixture; - let component: NbChatTitleTemplateTestComponent; + let testComponent: NbChatTitleTemplateTestComponent; beforeEach(() => { TestBed.configureTestingModule({ - imports: [BrowserAnimationsModule, NbThemeModule.forRoot(), NbChatModule], + imports: [NoopAnimationsModule, NbThemeModule.forRoot(), NbChatModule], declarations: [NbChatTitleTemplateTestComponent], }); fixture = TestBed.createComponent(NbChatTitleTemplateTestComponent); - component = fixture.componentInstance; + testComponent = fixture.componentInstance; fixture.detectChanges(); }); it('should render title template if provided', () => { - const chatTitleTemplateElement = fixture.nativeElement.querySelector('.template-title'); - expect(chatTitleTemplateElement).toBeTruthy(); - expect(chatTitleTemplateElement).toEqual(component.templateTitle.nativeElement); + const chatHeaderElement: HTMLElement = fixture.debugElement + .query(By.directive(NbChatComponent)) + .query(By.css('.header')).nativeElement; + const expectedText = ` ${testComponent.staticTemplateText} ${testComponent.contextTemplateText} `; + + expect(chatHeaderElement.textContent).toEqual(expectedText); }); it('should not render text title if template title is provided', () => { - const titleText = 'Some title'; - component.title = titleText; - const chatHeaderElement: HTMLElement = fixture.nativeElement.querySelector('.header'); - const chatTitleTemplateElement = fixture.nativeElement.querySelector('.template-title'); + const chatHeaderElement: HTMLElement = fixture.debugElement + .query(By.directive(NbChatComponent)) + .query(By.css('.header')).nativeElement; - expect(chatHeaderElement.innerText).not.toEqual(titleText); - expect(chatTitleTemplateElement).toBeTruthy(); + expect(chatHeaderElement.textContent).not.toContain(testComponent.title); }); }); From 93a5e05a8bdf1bded27f2883dc5deb58c3695860 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Tue, 16 Nov 2021 18:10:49 +0300 Subject: [PATCH 5/5] docs(chat): update example name and phrasing --- src/framework/theme/components/chat/chat.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/framework/theme/components/chat/chat.component.ts b/src/framework/theme/components/chat/chat.component.ts index fa629035b1..5eff968a3a 100644 --- a/src/framework/theme/components/chat/chat.component.ts +++ b/src/framework/theme/components/chat/chat.component.ts @@ -102,8 +102,8 @@ import { NbChatTitleDirective } from './chat-title.directive'; * // chat message, available multiple types * ``` * - * You could provide a title template via the `nbChatTitle` directive. It overrides `title` input. - * @stacked-example(Custom message, chat/chat-template-title.component) + * You could provide a chat title as a template via the `nbChatTitle` directive. It overrides `title` input. + * @stacked-example(Custom title, chat/chat-template-title.component) * * Two users conversation showcase: * @stacked-example(Conversation, chat/chat-conversation-showcase.component)