Skip to content

Commit

Permalink
Chat - add content element for MessageBubble (#28358)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zedwag
Zedwag authored Nov 15, 2024
1 parent 1cf1b77 commit 7ab591b
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 19 deletions.
12 changes: 9 additions & 3 deletions packages/devextreme/js/__internal/ui/chat/messagebubble.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import type { OptionChanged } from '@ts/core/widget/types';
import Widget from '@ts/core/widget/widget';

export const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';

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

_initMarkup(): void {
$(this.element())
.addClass(CHAT_MESSAGEBUBBLE_CLASS);
const $element = $(this.element());

$element.addClass(CHAT_MESSAGEBUBBLE_CLASS);

$('<div>')
.addClass(CHAT_MESSAGEBUBBLE_CONTENT_CLASS)
.appendTo($element);

super._initMarkup();

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

$bubbleContainer.empty();

Expand Down
26 changes: 14 additions & 12 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const CHAT_MESSAGEGROUP_CLASS = 'dx-chat-messagegroup';
const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist';
const CHAT_ALERTLIST_CLASS = 'dx-chat-alertlist';
const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';
const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox';
const CHAT_MESSAGEBOX_BUTTON_CLASS = 'dx-chat-messagebox-button';
const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea';
Expand Down Expand Up @@ -84,6 +85,7 @@ const moduleConfig = {
this.getMessageGroups = () => this.$element.find(`.${CHAT_MESSAGEGROUP_CLASS}`);
this.getDayHeaders = () => this.$element.find(`.${CHAT_MESSAGELIST_DAY_HEADER_CLASS}`);
this.getBubbles = () => this.$element.find(`.${CHAT_MESSAGEBUBBLE_CLASS}`);
this.getBubblesContents = () => this.$element.find(`.${CHAT_MESSAGEBUBBLE_CONTENT_CLASS}`);

init();
}
Expand Down Expand Up @@ -255,9 +257,9 @@ QUnit.module('Chat', () => {
messageTemplate,
});

const $bubble = this.getBubbles();
const $bubbleContent = this.getBubblesContents();

assert.strictEqual($bubble.text(), 'text: CustomText');
assert.strictEqual($bubbleContent.text(), 'text: CustomText');
});

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

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

const $bubble = this.getBubbles();
const $bubbleContent = this.getBubbles();

assert.strictEqual($bubble.text(), 'text: CustomText');
assert.strictEqual($bubbleContent.text(), 'text: CustomText');
});

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

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

const $bubble = this.getBubbles();
const $bubbleContent = this.getBubblesContents();

assert.strictEqual($bubble.text(), 'text: new message');
assert.strictEqual($bubbleContent.text(), 'text: new message');
});

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

const $bubble = this.getBubbles();
const $bubbleContent = this.getBubblesContents();

assert.strictEqual($bubble.text(), 'hello');
assert.strictEqual($bubbleContent.text(), 'hello');
});

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

const $bubble = this.getBubbles();
const $bubbleContent = $bubble.children();
const $bubbleContent = this.getBubblesContents();
const $bubbleContentChild = $bubbleContent.children();

assert.strictEqual($bubbleContent.text(), 'p text', 'template text is correct');
assert.strictEqual($bubbleContent.prop('tagName'), 'P', 'templte tag element is correct');
assert.strictEqual($bubbleContentChild.text(), 'p text', 'template text is correct');
assert.strictEqual($bubbleContentChild.prop('tagName'), 'P', 'templte tag element is correct');
});
});

Expand Down
8 changes: 8 additions & 0 deletions ...es/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import $ from 'jquery';
import MessageBubble from '__internal/ui/chat/messagebubble';

const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';

const moduleConfig = {
beforeEach: function() {
Expand All @@ -26,5 +27,12 @@ QUnit.module('MessageBubble', moduleConfig, () => {
QUnit.test('root element should have correct class', function(assert) {
assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEBUBBLE_CLASS), true);
});

QUnit.test('root element should have a child content element with correct class', function(assert) {
const $content = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CONTENT_CLASS}`);

assert.strictEqual($content.length, 1, 'content element exist');
assert.strictEqual($content.parent().is(this.$element), true, 'content element is direct child of root element');
});
});
});
11 changes: 7 additions & 4 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,14 @@ import $ from 'jquery';

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

const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';

const moduleConfig = {
beforeEach: function() {
const init = (options = {}) => {
this.instance = new MessageBubble($('#component'), options);
this.$element = $(this.instance.$element());
this.$content = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CONTENT_CLASS}`);
};

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

assert.strictEqual(templateSpy.callCount, 1, 'template was rendered once');
assert.strictEqual(templateSpy.args[0][0], messageText, 'text argument is correct');
assert.strictEqual($(templateSpy.args[0][1]).get(0), this.$element.get(0), 'container element is correct');
assert.strictEqual($(templateSpy.args[0][1]).get(0), this.$content.get(0), 'container element is correct');
});

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

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

const $bubbleContent = $(this.$element.children());
const $bubbleContentChild = $(this.$content.children());

assert.strictEqual($bubbleContent.prop('tagName'), 'H1', 'content tag is correct');
assert.strictEqual($bubbleContent.text(), 'template text: text', 'content text is correct');
assert.strictEqual($bubbleContentChild.prop('tagName'), 'H1', 'content tag is correct');
assert.strictEqual($bubbleContentChild.text(), 'template text: text', 'content text is correct');
});
});
});
Expand Down

0 comments on commit 7ab591b

Please sign in to comment.