Skip to content

Commit 7ab591b

Browse files
ZedwagZedwag
authored
Chat - add content element for MessageBubble (#28358)
1 parent 1cf1b77 commit 7ab591b

File tree

4 files changed

+38
-19
lines changed

4 files changed

+38
-19
lines changed

‎packages/devextreme/js/__internal/ui/chat/messagebubble.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { OptionChanged } from '@ts/core/widget/types';
55
import Widget from '@ts/core/widget/widget';
66

77
export const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
8+
const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';
89

910
export interface Properties extends WidgetOptions<MessageBubble> {
1011
text?: string;
@@ -21,8 +22,13 @@ class MessageBubble extends Widget<Properties> {
2122
}
2223

2324
_initMarkup(): void {
24-
$(this.element())
25-
.addClass(CHAT_MESSAGEBUBBLE_CLASS);
25+
const $element = $(this.element());
26+
27+
$element.addClass(CHAT_MESSAGEBUBBLE_CLASS);
28+
29+
$('<div>')
30+
.addClass(CHAT_MESSAGEBUBBLE_CONTENT_CLASS)
31+
.appendTo($element);
2632

2733
super._initMarkup();
2834

@@ -34,7 +40,7 @@ class MessageBubble extends Widget<Properties> {
3440
text = '',
3541
template,
3642
} = this.option();
37-
const $bubbleContainer = $(this.element());
43+
const $bubbleContainer = $(this.element()).find(`.${CHAT_MESSAGEBUBBLE_CONTENT_CLASS}`);
3844

3945
$bubbleContainer.empty();
4046

‎packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const CHAT_MESSAGEGROUP_CLASS = 'dx-chat-messagegroup';
1818
const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist';
1919
const CHAT_ALERTLIST_CLASS = 'dx-chat-alertlist';
2020
const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
21+
const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';
2122
const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox';
2223
const CHAT_MESSAGEBOX_BUTTON_CLASS = 'dx-chat-messagebox-button';
2324
const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea';
@@ -84,6 +85,7 @@ const moduleConfig = {
8485
this.getMessageGroups = () => this.$element.find(`.${CHAT_MESSAGEGROUP_CLASS}`);
8586
this.getDayHeaders = () => this.$element.find(`.${CHAT_MESSAGELIST_DAY_HEADER_CLASS}`);
8687
this.getBubbles = () => this.$element.find(`.${CHAT_MESSAGEBUBBLE_CLASS}`);
88+
this.getBubblesContents = () => this.$element.find(`.${CHAT_MESSAGEBUBBLE_CONTENT_CLASS}`);
8789

8890
init();
8991
}
@@ -255,9 +257,9 @@ QUnit.module('Chat', () => {
255257
messageTemplate,
256258
});
257259

258-
const $bubble = this.getBubbles();
260+
const $bubbleContent = this.getBubblesContents();
259261

260-
assert.strictEqual($bubble.text(), 'text: CustomText');
262+
assert.strictEqual($bubbleContent.text(), 'text: CustomText');
261263
});
262264

263265
QUnit.test('messageTemplate should set bubble content at runtime', function(assert) {
@@ -271,9 +273,9 @@ QUnit.module('Chat', () => {
271273

272274
this.instance.option('messageTemplate', messageTemplate);
273275

274-
const $bubble = this.getBubbles();
276+
const $bubbleContent = this.getBubbles();
275277

276-
assert.strictEqual($bubble.text(), 'text: CustomText');
278+
assert.strictEqual($bubbleContent.text(), 'text: CustomText');
277279
});
278280

279281
QUnit.test('messageTemplate function should have correct parameters', function(assert) {
@@ -307,9 +309,9 @@ QUnit.module('Chat', () => {
307309

308310
this.instance.renderMessage({ text: 'new message' });
309311

310-
const $bubble = this.getBubbles();
312+
const $bubbleContent = this.getBubblesContents();
311313

312-
assert.strictEqual($bubble.text(), 'text: new message');
314+
assert.strictEqual($bubbleContent.text(), 'text: new message');
313315
});
314316

315317
QUnit.test('messageTemplate should not have excess call count', function(assert) {
@@ -336,9 +338,9 @@ QUnit.module('Chat', () => {
336338
messageTemplate: 'hello',
337339
});
338340

339-
const $bubble = this.getBubbles();
341+
const $bubbleContent = this.getBubblesContents();
340342

341-
assert.strictEqual($bubble.text(), 'hello');
343+
assert.strictEqual($bubbleContent.text(), 'hello');
342344
});
343345

344346
QUnit.test('messageTemplate specified as a string with a html element should set bubble content', function(assert) {
@@ -347,11 +349,11 @@ QUnit.module('Chat', () => {
347349
messageTemplate: '<p>p text</p>',
348350
});
349351

350-
const $bubble = this.getBubbles();
351-
const $bubbleContent = $bubble.children();
352+
const $bubbleContent = this.getBubblesContents();
353+
const $bubbleContentChild = $bubbleContent.children();
352354

353-
assert.strictEqual($bubbleContent.text(), 'p text', 'template text is correct');
354-
assert.strictEqual($bubbleContent.prop('tagName'), 'P', 'templte tag element is correct');
355+
assert.strictEqual($bubbleContentChild.text(), 'p text', 'template text is correct');
356+
assert.strictEqual($bubbleContentChild.prop('tagName'), 'P', 'templte tag element is correct');
355357
});
356358
});
357359

‎packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import $ from 'jquery';
33
import MessageBubble from '__internal/ui/chat/messagebubble';
44

55
const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
6+
const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';
67

78
const moduleConfig = {
89
beforeEach: function() {
@@ -26,5 +27,12 @@ QUnit.module('MessageBubble', moduleConfig, () => {
2627
QUnit.test('root element should have correct class', function(assert) {
2728
assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEBUBBLE_CLASS), true);
2829
});
30+
31+
QUnit.test('root element should have a child content element with correct class', function(assert) {
32+
const $content = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CONTENT_CLASS}`);
33+
34+
assert.strictEqual($content.length, 1, 'content element exist');
35+
assert.strictEqual($content.parent().is(this.$element), true, 'content element is direct child of root element');
36+
});
2937
});
3038
});

‎packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@ import $ from 'jquery';
22

33
import MessageBubble from '__internal/ui/chat/messagebubble';
44

5+
const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';
6+
57
const moduleConfig = {
68
beforeEach: function() {
79
const init = (options = {}) => {
810
this.instance = new MessageBubble($('#component'), options);
911
this.$element = $(this.instance.$element());
12+
this.$content = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CONTENT_CLASS}`);
1013
};
1114

1215
this.reinit = (options) => {
@@ -50,7 +53,7 @@ QUnit.module('MessageBubble', moduleConfig, () => {
5053

5154
assert.strictEqual(templateSpy.callCount, 1, 'template was rendered once');
5255
assert.strictEqual(templateSpy.args[0][0], messageText, 'text argument is correct');
53-
assert.strictEqual($(templateSpy.args[0][1]).get(0), this.$element.get(0), 'container element is correct');
56+
assert.strictEqual($(templateSpy.args[0][1]).get(0), this.$content.get(0), 'container element is correct');
5457
});
5558

5659
QUnit.test('default markup should be restored after reseting the template option at runtime', function(assert) {
@@ -80,10 +83,10 @@ QUnit.module('MessageBubble', moduleConfig, () => {
8083

8184
this.instance.option('template', template);
8285

83-
const $bubbleContent = $(this.$element.children());
86+
const $bubbleContentChild = $(this.$content.children());
8487

85-
assert.strictEqual($bubbleContent.prop('tagName'), 'H1', 'content tag is correct');
86-
assert.strictEqual($bubbleContent.text(), 'template text: text', 'content text is correct');
88+
assert.strictEqual($bubbleContentChild.prop('tagName'), 'H1', 'content tag is correct');
89+
assert.strictEqual($bubbleContentChild.text(), 'template text: text', 'content text is correct');
8790
});
8891
});
8992
});

0 commit comments

Comments
 (0)