Chat: move markup render to QUnit.testStart() hook and use sinon's fa…

…keTimers() for async loading (#28199)
DevExpress · Oct 18, 2024 · 068d740 · 068d740
1 parent e56a9d3
commit 068d740
Show file tree

Hide file tree

Showing 16 changed files with 66 additions and 101 deletions.
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.markup.tests.js
@@ -1,5 +1,12 @@
+import $ from 'jquery';
 import 'generic_light.css!';
 
+QUnit.testStart(() => {
+    const markup = '<div id="component"></div>';
+
+    $('#qunit-fixture').html(markup);
+});
+
 import './chatParts/header.markup.tests.js';
 import './chatParts/avatar.markup.tests.js';
 import './chatParts/messageBox.markup.tests.js';

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.tests.js
@@ -1,5 +1,12 @@
+import $ from 'jquery';
 import 'generic_light.css!';
 
+QUnit.testStart(() => {
+    const markup = '<div id="component"></div>';
+
+    $('#qunit-fixture').html(markup);
+});
+
 import './chatParts/header.tests.js';
 import './chatParts/avatar.tests.js';
 import './chatParts/messageBox.tests.js';

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/avatar.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/avatar.markup.tests.js
@@ -8,11 +8,8 @@ const AVATAR_INITIALS_CLASS = 'dx-avatar-initials';
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="avatar"></div>';
-        $('#qunit-fixture').html(markup);
-
         const init = (options = {}) => {
-            this.instance = new Avatar($('#avatar'), options);
+            this.instance = new Avatar($('#component'), options);
             this.$element = $(this.instance.$element());
         };
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/avatar.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/avatar.tests.js
@@ -7,11 +7,8 @@ const AVATAR_INITIALS_CLASS = 'dx-avatar-initials';
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="avatar"></div>';
-        $('#qunit-fixture').html(markup);
-
         const init = (options = {}) => {
-            this.instance = new ChatAvatar($('#avatar'), options);
+            this.instance = new ChatAvatar($('#component'), options);
             this.$element = $(this.instance.$element());
         };
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js
@@ -11,11 +11,8 @@ const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="chat"></div>';
-        $('#qunit-fixture').html(markup);
-
         const init = (options = {}) => {
-            this.instance = new Chat($('#chat'), options);
+            this.instance = new Chat($('#component'), options);
             this.$element = $(this.instance.$element());
         };
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js
@@ -58,11 +58,8 @@ export const generateMessages = (length) => {
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="chat"></div>';
-        $('#qunit-fixture').html(markup);
-
         const init = (options = {}) => {
-            this.instance = new Chat($('#chat'), options);
+            this.instance = new Chat($('#component'), options);
             this.$element = $(this.instance.$element());
 
             this.$textArea = this.$element.find(`.${CHAT_MESSAGEBOX_TEXTAREA_CLASS}`);
@@ -89,14 +86,14 @@ const moduleConfig = {
     }
 };
 
-QUnit.module('Chat', moduleConfig, () => {
-    QUnit.module('Render', () => {
+QUnit.module('Chat', () => {
+    QUnit.module('Render', moduleConfig, () => {
         QUnit.test('should be initialized with correct type', function(assert) {
             assert.ok(this.instance instanceof Chat);
         });
     });
 
-    QUnit.module('Default options', () => {
+    QUnit.module('Default options', moduleConfig, () => {
         QUnit.test('user should be set to an object with generated id if property is not passed', function(assert) {
             const { user } = this.instance.option();
 
@@ -109,7 +106,7 @@ QUnit.module('Chat', moduleConfig, () => {
         });
     });
 
-    QUnit.module('Header integration', () => {
+    QUnit.module('Header integration', moduleConfig, () => {
         QUnit.test('Header text element should have correct text', function(assert) {
             this.reinit({
                 title: MOCK_CHAT_HEADER_TEXT
@@ -129,7 +126,7 @@ QUnit.module('Chat', moduleConfig, () => {
         });
     });
 
-    QUnit.module('MessageList integration', {
+    QUnit.module('MessageList integration', moduleConfig, {
         beforeEach: function() {
             this.getMessageList = () => MessageList.getInstance(this.$element.find(`.${CHAT_MESSAGELIST_CLASS}`));
         }
@@ -392,7 +389,7 @@ QUnit.module('Chat', moduleConfig, () => {
         });
     });
 
-    QUnit.module('Proxy state options', () => {
+    QUnit.module('Proxy state options', moduleConfig, () => {
         [true, false].forEach(value => {
             QUnit.test('passed state enabled options should be equal chat state enabled options', function(assert) {
                 const options = {
@@ -428,7 +425,7 @@ QUnit.module('Chat', moduleConfig, () => {
         });
     });
 
-    QUnit.module('Methods', () => {
+    QUnit.module('Methods', moduleConfig, () => {
         QUnit.test('The textarea input element must be active after the focus() method is invoked', function(assert) {
             this.instance.focus();
 
@@ -455,21 +452,23 @@ QUnit.module('Chat', moduleConfig, () => {
         });
     });
 
-    QUnit.module('Data Layer Integration', moduleConfig, () => {
+    QUnit.module('Data Layer Integration', {
+        beforeEach: function() {
+            this.clock = sinon.useFakeTimers();
+            moduleConfig.beforeEach.apply(this, arguments);
+        },
+        afterEach: function() {
+            this.clock.restore();
+        }
+    }, () => {
         QUnit.test('Should render empty view container if dataSource is empty', function(assert) {
-            const done = assert.async();
-
             this.reinit({
                 dataSource: {
                     store: new ArrayStore([])
                 }
             });
 
-            setTimeout(() => {
-                assert.strictEqual(this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`).length, 1);
-
-                done();
-            }, RELEASE_TIMEOUT);
+            assert.strictEqual(this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`).length, 1);
         });
 
         QUnit.test('Should remove or render empty view container after dataSource is updated at runtime', function(assert) {
@@ -594,7 +593,6 @@ QUnit.module('Chat', moduleConfig, () => {
         });
 
         QUnit.test('should render all messages correctly when using an asynchronous data source', function(assert) {
-            const done = assert.async();
             const messages = [{ text: 'message_1' }, { text: 'message_2' }];
             const timeout = 1000;
 
@@ -618,23 +616,20 @@ QUnit.module('Chat', moduleConfig, () => {
             assert.strictEqual(this.getBubbles().length, 0, 'No message bubbles should be rendered initially');
             assert.strictEqual($indicator.is(':visible'), true, 'Loading indicator is visible');
 
-            setTimeout(() => {
-                assert.strictEqual(this.getEmptyView().length, 0, 'empty messagelist view should still be not rendered while data is loading');
-                assert.strictEqual(this.getBubbles().length, 0, 'should still be no message bubbles rendered while data is loading');
-                assert.strictEqual($indicator.is(':visible'), true, 'Loading indicator is visible');
+            this.clock.tick(timeout / 2);
 
-                setTimeout(() => {
-                    assert.strictEqual(this.getEmptyView().length, 0, 'empty messagelist view should not be rendered when data is loaded');
-                    assert.strictEqual(this.getBubbles().length, 2, 'Message bubbles rendered');
-                    assert.strictEqual($indicator.is(':visible'), false, 'Loading indicator is hidden');
+            assert.strictEqual(this.getEmptyView().length, 0, 'empty messagelist view should still be not rendered while data is loading');
+            assert.strictEqual(this.getBubbles().length, 0, 'should still be no message bubbles rendered while data is loading');
+            assert.strictEqual($indicator.is(':visible'), true, 'Loading indicator is visible');
+
+            this.clock.tick(timeout / 2);
 
-                    done();
-                }, timeout / 2);
-            }, timeout / 2);
+            assert.strictEqual(this.getEmptyView().length, 0, 'empty messagelist view should not be rendered when data is loaded');
+            assert.strictEqual(this.getBubbles().length, 2, 'Message bubbles rendered');
+            assert.strictEqual($indicator.is(':visible'), false, 'Loading indicator is hidden');
         });
 
         QUnit.test('new message should be rendered when using an asynchronous custom store', function(assert) {
-            const done = assert.async();
             const messages = [{ text: 'message_1' }, { text: 'message_2' }];
             const timeout = 1000;
 
@@ -662,21 +657,18 @@ QUnit.module('Chat', moduleConfig, () => {
                 dataSource: store,
             });
 
-            setTimeout(() => {
-                const newMessage = { text: 'message_3' };
-                this.instance.renderMessage(newMessage);
+            this.clock.tick(timeout);
+
+            const newMessage = { text: 'message_3' };
+            this.instance.renderMessage(newMessage);
 
-                setTimeout(() => {
-                    assert.deepEqual(this.instance.option('items'), messages, 'items option should contain all messages including the new one');
-                    assert.strictEqual(this.getBubbles().length, 3, 'new message should be rendered in list');
+            this.clock.tick(timeout);
 
-                    done();
-                }, timeout * 2);
-            }, timeout);
+            assert.deepEqual(this.instance.option('items'), messages, 'items option should contain all messages including the new one');
+            assert.strictEqual(this.getBubbles().length, 3, 'new message should be rendered in list');
         });
 
         QUnit.test('Loading and Empty view should not be shown at the same time when the dataSource option changes', function(assert) {
-            const done = assert.async();
             const messages = [{ text: 'message_1' }, { text: 'message_2' }];
             const timeout = 400;
 
@@ -696,13 +688,11 @@ QUnit.module('Chat', moduleConfig, () => {
             let $indicator = this.$element.find(`.${SCROLLVIEW_REACHBOTTOM_INDICATOR}`);
             assert.strictEqual($indicator.is(':visible'), true, 'loading indicator is visible');
 
-            setTimeout(() => {
-                $indicator = this.$element.find(`.${SCROLLVIEW_REACHBOTTOM_INDICATOR}`);
-                assert.strictEqual($indicator.is(':visible'), false, 'loading indicator is hidden');
-                assert.strictEqual(this.getEmptyView().length, 0, 'empty view was removed');
+            this.clock.tick(timeout);
 
-                done();
-            }, timeout * 2);
+            $indicator = this.$element.find(`.${SCROLLVIEW_REACHBOTTOM_INDICATOR}`);
+            assert.strictEqual($indicator.is(':visible'), false, 'loading indicator is hidden');
+            assert.strictEqual(this.getEmptyView().length, 0, 'empty view was removed');
         });
     });
 });
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/header.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/header.markup.tests.js
@@ -7,11 +7,8 @@ const CHAT_HEADER_TEXT_CLASS = 'dx-chat-header-text';
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="chatHeader"></div>';
-        $('#qunit-fixture').html(markup);
-
         const init = (options = {}) => {
-            this.instance = new ChatHeader($('#chatHeader'), options);
+            this.instance = new ChatHeader($('#component'), options);
             this.$element = $(this.instance.$element());
         };
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/header.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/header.tests.js
@@ -4,11 +4,8 @@ import ChatHeader from '__internal/ui/chat/header';
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="header"></div>';
-        $('#qunit-fixture').html(markup);
-
         const init = (options = {}) => {
-            this.instance = new ChatHeader($('#header'), options);
+            this.instance = new ChatHeader($('#component'), options);
             this.$element = $(this.instance.$element());
         };
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.markup.tests.js
@@ -11,11 +11,8 @@ const BUTTON_CLASS = 'dx-button';
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="messageBox"></div>';
-        $('#qunit-fixture').html(markup);
-
         const init = (options = {}) => {
-            this.instance = new MessageBox($('#messageBox'), options);
+            this.instance = new MessageBox($('#component'), options);
             this.$element = $(this.instance.$element());
         };
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js
@@ -14,11 +14,8 @@ const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="messageBox"></div>';
-        $('#qunit-fixture').html(markup);
-
         const init = (options = {}) => {
-            this.instance = new MessageBox($('#messageBox'), options);
+            this.instance = new MessageBox($('#component'), options);
             this.$element = $(this.instance.$element());
 
             this.$textArea = this.$element.find(`.${CHAT_MESSAGEBOX_TEXTAREA_CLASS}`);

diff --git a/...es/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js b/...es/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js
@@ -6,11 +6,8 @@ const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="messageBubble"></div>';
-        $('#qunit-fixture').html(markup);
-
         const init = (options = {}) => {
-            this.instance = new MessageBubble($('#messageBubble'), options);
+            this.instance = new MessageBubble($('#component'), options);
             this.$element = $(this.instance.$element());
         };
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js
@@ -4,11 +4,8 @@ import MessageBubble from '__internal/ui/chat/messagebubble';
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="messageBubble"></div>';
-        $('#qunit-fixture').html(markup);
-
         const init = (options = {}) => {
-            this.instance = new MessageBubble($('#messageBubble'), options);
+            this.instance = new MessageBubble($('#component'), options);
             this.$element = $(this.instance.$element());
         };
 

diff --git a/...ges/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.markup.tests.js b/...ges/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.markup.tests.js
@@ -14,11 +14,8 @@ const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="messageGroup"></div>';
-        $('#qunit-fixture').html(markup);
-
         const init = (options = {}) => {
-            this.instance = new MessageGroup($('#messageGroup'), options);
+            this.instance = new MessageGroup($('#component'), options);
             this.$element = $(this.instance.$element());
         };
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.tests.js
@@ -10,11 +10,8 @@ const CHAT_MESSAGEGROUP_AUTHOR_NAME_CLASS = 'dx-chat-messagegroup-author-name';
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="messageGroup"></div>';
-        $('#qunit-fixture').html(markup);
-
         const init = (options = {}) => {
-            this.instance = new MessageGroup($('#messageGroup'), options);
+            this.instance = new MessageGroup($('#component'), options);
             this.$element = $(this.instance.$element());
         };
 

diff --git a/...ages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.markup.tests.js b/...ages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.markup.tests.js
@@ -13,11 +13,8 @@ const CHAT_MESSAGELIST_EMPTY_PROMPT_CLASS = 'dx-chat-messagelist-empty-prompt';
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="messageList"></div>';
-        $('#qunit-fixture').html(markup);
-
         const init = (options = {}) => {
-            this.instance = new MessageList($('#messageList'), options);
+            this.instance = new MessageList($('#component'), options);
             this.$element = $(this.instance.$element());
         };
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js
@@ -34,10 +34,7 @@ const SCROLLVIEW_CLASS = 'dx-scrollview';
 
 const moduleConfig = {
     beforeEach: function() {
-        const markup = '<div id="messageList"></div>';
-        $('#qunit-fixture').html(markup);
-
-        const init = (options = {}, selector = '#messageList') => {
+        const init = (options = {}, selector = '#component') => {
             this.instance = new MessageList($(selector), options);
             this.$element = $(this.instance.$element());
 
@@ -1079,7 +1076,7 @@ QUnit.module('MessageList', moduleConfig, () => {
         });
     });
 
-    QUnit.module('localization', moduleConfig, () => {
+    QUnit.module('localization', () => {
         QUnit.test('message, prompt texts should be equal custom localized values from the dictionary', function(assert) {
             const defaultLocale = localization.locale();