[FIX][REF] mail: several thread windows fixes

This commit fixes some bugs on thread windows, and make some
improvements on tests related to thread windows.

Fixes:

	1. Correctly position last visible thread window when there are more
	   open thread windows than available slots.
	2. Closing a thread window now marks it as read.
	3. Can now fold/unfold the blank thread window (aka 'New' thread window).

Tests cleaning:

	1. Removed unnecessary 'before assertions' in thread window tests.
	   > Solved with this: https://github.com/odoo/odoo/commit/9b1daa1218f7adf9d741afba607ef5b55b16e3e6
	1. Added basic rendering test for a (non-blank) thread window.
	2. Cleaned thread window tests
	   > Split in different files.
	   > Grouped in 'Thread Window' QUnit module.

9 files changed, 885 insertions, 484 deletions

diff --git a/addons/mail/static/src/js/services/mail_window_manager.js b/addons/mail/static/src/js/services/mail_window_manager.js
index 7b892fa8731..de614ba705f 100644
--- a/addons/mail/static/src/js/services/mail_window_manager.js
+++ b/addons/mail/static/src/js/services/mail_window_manager.js
@@ -11,8 +11,6 @@ var utils = require('web.utils');
 var QWeb = core.qweb;
 var _t = core._t;
 
-var THREAD_WINDOW_WIDTH = 325 + 5;  // 5 pixels between windows
-
 /**
  * Mail Window Manager
  *
@@ -24,8 +22,12 @@ MailManager.include({
         close_blank_thread_window: '_onCloseBlankThreadWindow',
     }),
 
-    // tell where to append thread window
+    // width of 'hidden thread window' dropdown button
+    HIDDEN_THREAD_WINDOW_DROPDOWN_BUTTON_WIDTH: 50,
+    // where thread windows are appended
     THREAD_WINDOW_APPENDTO: 'body',
+    // width of a thread window (+ 5 pixels between windows)
+    THREAD_WINDOW_WIDTH: 325 + 5,
 
     //--------------------------------------------------------------------------
     // Public
@@ -152,13 +154,28 @@ MailManager.include({
     //--------------------------------------------------------------------------
 
     /**
-     * Add the thread window such that it will be the left-most visible window
+     * Add the thread window such that it will be the left-most visible window.
+     * Note that adding a new thread window may decrement the amount of
+     * available slots for visible thread windows.
+     * For example:
+     *
+     * - global width of 800px
+     * - button width of 100px
+     * - thread width of 250px
+     *
+     * Without button: 3 thread windows (3*250px = 750px < 800px)
+     *    With button: 2 thread windows (2*250px + 100px = 600px < 800px)
+     *
+     * So in order for the thread window to be the left-most visible window,
+     * we should compute available slots after insertion of the thread window.
      *
      * @private
      * @param {mail.ThreadWindow} threadWindow
      */
     _addThreadWindow: function (threadWindow) {
-        this._computeAvailableSlotsForThreadWindows(this._threadWindows.length+1);
+        this._threadWindows.push(threadWindow);
+        this._computeAvailableSlotsForThreadWindows();
+        this._threadWindows.pop();
         this._threadWindows.splice(this._availableSlotsForThreadWindows-1, 0, threadWindow);
     },
     /**
@@ -206,22 +223,23 @@ MailManager.include({
      * method call.
      *
      * @private
-     * @param {integer} nbWindows
      */
-    _computeAvailableSlotsForThreadWindows: function (nbWindows) {
+    _computeAvailableSlotsForThreadWindows: function () {
         if (config.device.isMobile) {
             // one thread window full screen in mobile
             this._availableSlotsForThreadWindows = 1;
             return;
         }
-        var width = window.innerWidth;
-        var availableSlots = Math.floor(width/THREAD_WINDOW_WIDTH);
-        var spaceLeft = width - (Math.min(availableSlots, nbWindows)*THREAD_WINDOW_WIDTH);
-        if (availableSlots < nbWindows && spaceLeft < 50) {
-            // leave at least 50px for the hidden windows dropdown button
+        var GLOBAL_WIDTH = this._getGlobalWidth();
+        var THREAD_WINDOW_NUM = this._threadWindows.length;
+        var availableSlots = Math.floor(GLOBAL_WIDTH/this.THREAD_WINDOW_WIDTH);
+        var spaceLeft = GLOBAL_WIDTH - (Math.min(availableSlots, THREAD_WINDOW_NUM)*this.THREAD_WINDOW_WIDTH);
+        if (availableSlots < THREAD_WINDOW_NUM && spaceLeft < this.HIDDEN_THREAD_WINDOW_DROPDOWN_BUTTON_WIDTH) {
+            // leave at least space for the hidden windows dropdown button
             availableSlots--;
-            spaceLeft += THREAD_WINDOW_WIDTH;
+            spaceLeft += this.THREAD_WINDOW_WIDTH;
         }
+
         this._availableSlotsForThreadWindows = availableSlots;
         this._spaceLeftForThreadWindows = spaceLeft;
     },
@@ -242,6 +260,16 @@ MailManager.include({
         });
     },
     /**
+     * Get the width of the browser, which is useful to determine how many
+     * open thread windows are visible or hidden.
+     *
+     * @private
+     * @returns {integer}
+     */
+    _getGlobalWidth: function () {
+        return window.innerWidth;
+    },
+    /**
      * Get thread window in the hidden windows matching ID `threadID`.
      *
      * Note: hidden windows are open windows that cannot be displayed
@@ -320,7 +348,7 @@ MailManager.include({
         if (this._hiddenThreadWindows.length) {
             this._$hiddenThreadWindowsDropdown = this._renderHiddenThreadWindowsDropdown();
             var $hiddenWindowsDropdown = this._$hiddenThreadWindowsDropdown;
-            $hiddenWindowsDropdown.css({right: THREAD_WINDOW_WIDTH * this._availableSlotsForThreadWindows, bottom: 0 })
+            $hiddenWindowsDropdown.css({right: this.THREAD_WINDOW_WIDTH * this._availableSlotsForThreadWindows, bottom: 0 })
                                   .appendTo(this.THREAD_WINDOW_APPENDTO);
             this._repositionHiddenWindowsDropdown();
             this._keepHiddenThreadWindowsDropdownOpen = false;
@@ -469,15 +497,14 @@ MailManager.include({
      * attribute `threadWindows` should be hidden. Those thread windows are put
      * in the hidden thread window dropdown menu.
      *
+     * This function assumes that we have already computed the available slots.
+     *
      * @private
-     * @param {integer} startIndex the index of the first thread window to hide,
-     *   in increasing order of the thread windows in the `threadWindows`
-     *   attribute
      */
-    _repositionHiddenThreadWindows: function (startIndex) {
+    _repositionHiddenThreadWindows: function () {
         var hiddenWindows = [];
         var hiddenUnreadCounter = 0;
-        var index = startIndex;
+        var index = this._availableSlotsForThreadWindows;
         while (index < this._threadWindows.length) {
             var threadWindow = this._threadWindows[index];
             hiddenWindows.push(threadWindow);
@@ -508,27 +535,27 @@ MailManager.include({
         if (this._areAllThreadWindowsHidden()) {
             return;
         }
-        this._computeAvailableSlotsForThreadWindows(this._threadWindows.length);
-        var availableSlots = this._availableSlotsForThreadWindows;
+        this._computeAvailableSlotsForThreadWindows();
 
-        this._repositionVisibleThreadWindows(availableSlots-1);
-        this._repositionHiddenThreadWindows(availableSlots);
+        this._repositionVisibleThreadWindows();
+        this._repositionHiddenThreadWindows();
     },
     /**
      * Reposition the thread windows that should be visible on the screen.
      *
+     * This function assumes that we have already computed the available slots.
+     *
      * @private
-     * @param {integer} count how many thread windows can should be visible,
-     *   which are picked in the attribute `_threadWindows` in increasing index
-     *   order of appearance in the array. constraint:
-     *   0 <= count < this._threadWindows.length
      */
-    _repositionVisibleThreadWindows: function (count) {
+    _repositionVisibleThreadWindows: function () {
         var index = 0;
-        while (index < count && index < this._threadWindows.length) {
+        while (
+            index < this._availableSlotsForThreadWindows &&
+            index < this._threadWindows.length
+        ) {
             var threadWindow = this._threadWindows[index];
             var cssProps = {bottom: 0};
-            cssProps[_t.database.parameters.direction === 'rtl' ? 'left' : 'right'] = THREAD_WINDOW_WIDTH*index;
+            cssProps[_t.database.parameters.direction === 'rtl' ? 'left' : 'right'] = this.THREAD_WINDOW_WIDTH*index;
             threadWindow.$el.css(cssProps);
             threadWindow.do_show();
             index++;
diff --git a/addons/mail/static/src/js/thread_windows/abstract_thread_window.js b/addons/mail/static/src/js/thread_windows/abstract_thread_window.js
index 8d02db587a8..eb8a7da3634 100644
--- a/addons/mail/static/src/js/thread_windows/abstract_thread_window.js
+++ b/addons/mail/static/src/js/thread_windows/abstract_thread_window.js
@@ -10,9 +10,6 @@ var Widget = require('web.Widget');
 var QWeb = core.qweb;
 var _t = core._t;
 
-var HEIGHT_OPEN = '400px';
-var HEIGHT_FOLDED = '34px';
-
 /**
  * This is an abstract widget for rendering thread windows.
  *
@@ -38,6 +35,9 @@ var AbstractThreadWindow = Widget.extend({
         'keydown .o_composer_text_field': '_onKeydown',
         'keypress .o_composer_text_field': '_onKeypress',
     },
+    FOLD_ANIMATION_DURATION: 200, // duration in ms for (un)fold transition
+    HEIGHT_OPEN: '400px', // height in px of thread window when open
+    HEIGHT_FOLDED: '34px', // height, in px, of thread window when folded
     /**
      * Children of this class must make use of `thread`, which is an object that
      * represent the thread that is linked to this thread window.
@@ -85,7 +85,7 @@ var AbstractThreadWindow = Widget.extend({
         });
 
         if (this.isFolded()) {
-            this.$el.css('height', HEIGHT_FOLDED);
+            this.$el.css('height', this.HEIGHT_FOLDED);
         } else if (this.options.autofocus) {
             this._focusInput();
         }
@@ -301,8 +301,8 @@ var AbstractThreadWindow = Widget.extend({
      */
     _animateFold: function () {
         this.$el.animate({
-            height: this.isFolded() ? HEIGHT_FOLDED : HEIGHT_OPEN
-        }, 200);
+            height: this.isFolded() ? this.HEIGHT_FOLDED : this.HEIGHT_OPEN
+        }, this.FOLD_ANIMATION_DURATION);
     },
     /**
      * Set the focus on the composer of the thread window. This operation is
@@ -368,6 +368,7 @@ var AbstractThreadWindow = Widget.extend({
     },
     /**
      * Update the fold state of the thread.
+     *
      * This function is called when toggling the fold state of this window.
      * If there is no thread linked to this window, it means this is the
      * "blank" thread window, therefore we use the internal state 'folded'
@@ -380,6 +381,7 @@ var AbstractThreadWindow = Widget.extend({
             this._thread.fold(folded);
         } else {
             this._folded = folded;
+            this.updateVisualFoldState();
         }
     },
     /**
@@ -395,7 +397,8 @@ var AbstractThreadWindow = Widget.extend({
     //--------------------------------------------------------------------------
 
     /**
-     * Close the thread
+     * Close the thread window.
+     * Mark the thread as read if the thread window was open.
      *
      * @private
      * @param {MouseEvent} ev
@@ -403,10 +406,18 @@ var AbstractThreadWindow = Widget.extend({
     _onClickClose: function (ev) {
         ev.stopPropagation();
         ev.preventDefault();
+        if (
+            this.hasThread() &&
+            this._thread.getUnreadCounter() > 0 &&
+            !this.isFolded()
+        ) {
+            this._thread.markAsRead();
+        }
         this.close();
     },
     /**
-     * Fold/unfold the thread window
+     * Fold/unfold the thread window.
+     * Also mark the thread as read.
      *
      * @private
      */
diff --git a/addons/mail/static/src/xml/abstract_thread_window.xml b/addons/mail/static/src/xml/abstract_thread_window.xml
index af72d5dd36c..de0418af3df 100644
--- a/addons/mail/static/src/xml/abstract_thread_window.xml
+++ b/addons/mail/static/src/xml/abstract_thread_window.xml
@@ -5,7 +5,7 @@
         @param {mail.AbstractThreadWindow} widget
     -->
     <t t-name="mail.AbstractThreadWindow">
-        <div class="o_thread_window o_in_home_menu">
+        <div class="o_thread_window o_in_home_menu" t-att-data-thread-id="widget.getID()">
             <div class="o_thread_window_header">
                 <t t-call="mail.AbstractThreadWindow.HeaderContent">
                     <t t-set="status" t-value="widget.getThreadStatus()"/>
diff --git a/addons/mail/static/tests/document_thread_window_tests.js b/addons/mail/static/tests/document_thread_window_tests.js
index ec6f97f0b49..a14b2ebc159 100644
--- a/addons/mail/static/tests/document_thread_window_tests.js
+++ b/addons/mail/static/tests/document_thread_window_tests.js
@@ -1,4 +1,4 @@
-odoo.define('mail.document_thread_window_tests', function (require) {
+odoo.define('mail.documentThreadWindowTests', function (require) {
 "use strict";
 
 var mailTestUtils = require('mail.testUtils');
@@ -7,8 +7,8 @@ var MessagingMenu = require('mail.systray.MessagingMenu');
 var testUtils = require('web.test_utils');
 
 QUnit.module('mail', {}, function () {
-
-QUnit.module('ThreadWindow (Document Thread)', {
+QUnit.module('Thread Window', {}, function () {
+QUnit.module('Document Thread', {
     beforeEach: function () {
         var partnerID = 44;
         this.data = {
@@ -277,5 +277,5 @@ QUnit.test('open, fold, unfold and close a document thread window', function (as
 });
 
 });
-
+});
 });
diff --git a/addons/mail/static/tests/thread_window/basic_thread_window_tests.js b/addons/mail/static/tests/thread_window/basic_thread_window_tests.js
new file mode 100644
index 00000000000..ffda7d95700
--- /dev/null
+++ b/addons/mail/static/tests/thread_window/basic_thread_window_tests.js
@@ -0,0 +1,253 @@
+odoo.define('mail.basicThreadWindowTests', function (require) {
+"use strict";
+
+var mailTestUtils = require('mail.testUtils');
+
+var framework = require('web.framework');
+var testUtils = require('web.test_utils');
+var Widget = require('web.Widget');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('Thread Window', {}, function () {
+QUnit.module('Basic', {
+    beforeEach: function () {
+        var self = this;
+
+        // define channel to link to chat window
+        this.data = {
+            'mail.message': {
+                fields: {},
+                records: [],
+            },
+            initMessaging: {
+                channel_slots: {
+                    channel_channel: [{
+                        id: 1,
+                        channel_type: "channel",
+                        name: "general",
+                    }],
+                },
+            },
+        };
+        this.services = mailTestUtils.getMailServices();
+        this.ORIGINAL_THREAD_WINDOW_APPENDTO = this.services.mail_service.prototype.THREAD_WINDOW_APPENDTO;
+
+        this.createParent = function (params) {
+            var widget = new Widget();
+
+            // in non-debug mode, append thread windows in qunit-fixture
+            // note that it does not hide thread window because it uses fixed
+            // position, and qunit-fixture uses absolute...
+            if (params.debug) {
+                self.services.mail_service.prototype.THREAD_WINDOW_APPENDTO = 'body';
+            } else {
+                self.services.mail_service.prototype.THREAD_WINDOW_APPENDTO = '#qunit-fixture';
+            }
+
+            testUtils.addMockEnvironment(widget, params);
+            return widget;
+        };
+    },
+    afterEach: function () {
+        // reset thread window append to body
+        this.services.mail_service.prototype.THREAD_WINDOW_APPENDTO = 'body';
+    },
+});
+
+QUnit.test('basic rendering thread window', function (assert) {
+    assert.expect(10);
+
+    var parent = this.createParent({
+        data: this.data,
+        services: this.services,
+    });
+
+    // detach channel 1, so that it opens corresponding thread window.
+    parent.call('mail_service', 'getChannel', 1).detach();
+
+    var $threadWindow = $('.o_thread_window');
+    assert.strictEqual($threadWindow.length, 1,
+        "thread window should be open");
+    assert.strictEqual($threadWindow.data('thread-id'), 1,
+        "thread window should be related to thread ID 1");
+
+    var $header = $threadWindow.find('.o_thread_window_header');
+    assert.strictEqual($header.length, 1,
+        "thread window should have a header");
+
+    var $title = $header.find('.o_thread_window_title');
+    assert.strictEqual($title.length, 1,
+        "thread window should have a title in the header");
+    assert.strictEqual($title.text().trim(), "#general",
+        "should have the title of the general channel");
+
+    var $buttons = $header.find('.o_thread_window_buttons');
+    assert.strictEqual($buttons.length, 1,
+        "should have buttons in the header of the thread window");
+    assert.strictEqual($buttons.find('.o_thread_window_expand').length, 1,
+        "should have a button to expand the thread window");
+    assert.strictEqual($buttons.find('.o_thread_window_close').length, 1,
+        "should have a button to close the thread window");
+
+    assert.strictEqual($threadWindow.find('.o_mail_thread').length, 1,
+        "should display the content of the general channel in the thread window");
+    assert.strictEqual($threadWindow.find('.o_thread_composer').length, 1,
+        "should display a composer in the thread window");
+
+    parent.destroy();
+});
+
+QUnit.test('close thread window using ESCAPE key', function (assert) {
+    assert.expect(5);
+
+    var parent = this.createParent({
+        data: this.data,
+        services: this.services,
+        mockRPC: function (route, args) {
+            if (args.method === 'channel_fold') {
+                assert.ok(true, "should call channel_fold");
+                return $.when();
+            }
+            return this._super.apply(this, arguments);
+        },
+    });
+
+    // get channel instance to link to thread window
+    var channel = parent.call('mail_service', 'getChannel', 1);
+    assert.ok(channel, "there should exist a channel locally with ID 1");
+
+    channel.detach();
+    assert.strictEqual($('.o_thread_window').length, 1,
+        "there should be a thread window that is opened");
+
+    // focus on the thread window and press ESCAPE
+    $('.o_thread_window .o_composer_text_field').click();
+    assert.strictEqual(document.activeElement,
+        $('.o_thread_window .o_composer_text_field')[0],
+        "thread window's input should now be focused");
+
+    var upKeyEvent = $.Event( "keyup", { which: 27 });
+    $('.o_thread_window .o_composer_text_field').trigger(upKeyEvent);
+
+    assert.strictEqual($('.o_thread_window').length, 0,
+        "the thread window should be closed");
+
+    parent.destroy();
+});
+
+QUnit.test('thread window\'s input can still be focused when the UI is blocked', function (assert) {
+    assert.expect(2);
+
+    var parent = this.createParent({
+        data: this.data,
+        services: this.services,
+    });
+
+    var $dom = $('#qunit-fixture');
+
+    // get channel instance to link to thread window
+    var channel = parent.call('mail_service', 'getChannel', 1);
+    channel.detach();
+
+    var $input = $('<input/>', {type: 'text'}).appendTo($dom);
+    $input.focus().click();
+    assert.strictEqual(document.activeElement, $input[0],
+        "fake input should be focused");
+
+    framework.blockUI();
+    // cannot force focus here otherwise the test
+    // makes no sense, this test is just about
+    // making sure that the code which forces the
+    // focus on click is not removed
+    $('.o_thread_window .o_composer_text_field').click();
+    assert.strictEqual(document.activeElement,
+        $('.o_thread_window .o_composer_text_field')[0],
+        "thread window's input should now be focused");
+
+    framework.unblockUI();
+    parent.destroy();
+});
+
+QUnit.test('emoji popover should open correctly in thread windows', function (assert) {
+    assert.expect(1);
+
+    var parent = this.createParent({
+        data: this.data,
+        services: this.services,
+    });
+
+    // get channel instance to link to thread window
+    var channel = parent.call('mail_service', 'getChannel', 1);
+    channel.detach();
+
+    var $emojiButton = $('.o_composer_button_emoji');
+    $emojiButton.trigger('focusin').focus().click();
+    var $popover = $('.o_mail_emoji_container');
+
+    var done = assert.async();
+    // Async is needed as the popover focusout hiding is deferred
+    setTimeout(function () {
+        assert.ok($popover.is(':visible'), "emoji popover should have stayed opened");
+        parent.destroy();
+        done();
+    }, 0);
+});
+
+QUnit.test('do not increase unread counter when receiving message with myself as author', function (assert) {
+    assert.expect(4);
+
+    var generalChannelID = 1;
+    var myselfPartnerID = 44;
+
+    this.data.initMessaging = {
+        channel_slots: {
+            channel_channel: [{
+                id: generalChannelID,
+                channel_type: 'channel',
+                name: "general",
+            }],
+        },
+    };
+
+    var parent = this.createParent({
+        data: this.data,
+        services: this.services,
+        session: { partner_id: myselfPartnerID }
+    });
+
+    // get channel instance to link to thread window
+    var channel = parent.call('mail_service', 'getChannel', 1);
+    channel.detach();
+
+    var threadWindowHeaderText = $('.o_thread_window_header').text().replace(/\s/g, "");
+
+    assert.strictEqual(threadWindowHeaderText, "#general",
+        "thread window header text should not have any unread counter initially");
+    assert.strictEqual(channel.getUnreadCounter(), 0,
+        "thread should have unread counter to 0 initially");
+
+    // simulate receiving message from myself
+    var messageData = {
+        author_id: [myselfPartnerID, "Myself"],
+        body: "<p>Test message</p>",
+        id: 2,
+        model: 'mail.channel',
+        res_id: 1,
+        channel_ids: [1],
+    };
+    var notification = [[false, 'mail.channel', generalChannelID], messageData];
+    parent.call('bus_service', 'trigger', 'notification', [notification]);
+
+    threadWindowHeaderText = $('.o_thread_window_header').text().replace(/\s/g, "");
+
+    assert.strictEqual(threadWindowHeaderText, "#general",
+        "thread window header text should not have any unread counter after receiving my message");
+    assert.strictEqual(channel.getUnreadCounter(), 0,
+        "thread should not have incremented its unread counter after receiving my message");
+
+    parent.destroy();
+});
+
+});
+});
+});
diff --git a/addons/mail/static/tests/thread_window/blank_thread_window_tests.js b/addons/mail/static/tests/thread_window/blank_thread_window_tests.js
new file mode 100644
index 00000000000..883494a4ec6
--- /dev/null
+++ b/addons/mail/static/tests/thread_window/blank_thread_window_tests.js
@@ -0,0 +1,318 @@
+odoo.define('mail.blankThreadWindowTests', function (require) {
+"use strict";
+
+var AbstractThreadWindow = require('mail.AbstractThreadWindow');
+var mailTestUtils = require('mail.testUtils');
+
+var testUtils = require('web.test_utils');
+var Widget = require('web.Widget');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('Thread Window', {}, function () {
+QUnit.module('Blank', {
+    beforeEach: function () {
+        var self = this;
+
+        // define channel to link to chat window
+        this.data = {
+            'mail.message': {
+                fields: {},
+                records: [],
+            },
+            initMessaging: {
+                channel_slots: {
+                    channel_channel: [{
+                        id: 1,
+                        channel_type: "channel",
+                        name: "general",
+                    }],
+                },
+            },
+        };
+        this.services = mailTestUtils.getMailServices();
+        this.ORIGINAL_THREAD_WINDOW_APPENDTO = this.services.mail_service.prototype.THREAD_WINDOW_APPENDTO;
+
+        this.createParent = function (params) {
+            var widget = new Widget();
+
+            // in non-debug mode, append thread windows in qunit-fixture
+            // note that it does not hide thread window because it uses fixed
+            // position, and qunit-fixture uses absolute...
+            if (params.debug) {
+                self.services.mail_service.prototype.THREAD_WINDOW_APPENDTO = 'body';
+            } else {
+                self.services.mail_service.prototype.THREAD_WINDOW_APPENDTO = '#qunit-fixture';
+            }
+
+            testUtils.addMockEnvironment(widget, params);
+            return widget;
+        };
+
+        /**
+         * Patch autocomplete so that we can detect when 'source' or 'select'
+         * functions end.
+         *
+         * @param {Object} params
+         * @param {$.Deferred} params.selectDef
+         * @param {$.Deferred} params.sourceDef
+         */
+        this.patchAutocomplete = function (params) {
+            var selectDef = params.selectDef;
+            var sourceDef = params.sourceDef;
+            self.ORIGINAL_AUTOCOMPLETE = $.fn.autocomplete;
+            $.fn.autocomplete = function (params) {
+                var select = params.select;
+                var source = params.source;
+                params.select = function () {
+                    select.apply(this, arguments);
+                    selectDef.resolve();
+                };
+                params.source = function () {
+                    source.apply(this, arguments);
+                    sourceDef.resolve();
+                };
+                return self.ORIGINAL_AUTOCOMPLETE.apply(this, arguments);
+            };
+        };
+        /**
+         * Unpatch autocomplete
+         */
+        this.unpatchAutocomplete = function () {
+            $.fn.autocomplete = self.ORIGINAL_AUTOCOMPLETE;
+        };
+    },
+    afterEach: function () {
+        // reset thread window append to body
+        this.services.mail_service.prototype.THREAD_WINDOW_APPENDTO = 'body';
+    },
+});
+
+QUnit.test('basic rendering blank thread window', function (assert) {
+    assert.expect(5);
+
+    var parent = this.createParent({
+        data: this.data,
+        services: this.services,
+    });
+
+    // open blank thread window
+    parent.call('mail_service', 'openBlankThreadWindow');
+
+    assert.strictEqual($('.o_thread_window').length, 1,
+        "should have a thread window open");
+    assert.strictEqual($('.o_thread_window_title').text().trim(),
+        "New message",
+        "the blank window should have the correct title");
+    assert.strictEqual($('.o_composer_text_field').length, 0,
+        "should have no composer in the blank window");
+    assert.strictEqual($('.o_thread_search_input input').length, 1,
+        "the blank window should have an input");
+    assert.strictEqual($('.o_thread_search_input span').text().trim(),
+        "To:",
+        "the blank window should propose to type a partner next to the input");
+
+    parent.destroy();
+});
+
+QUnit.test('close blank thread window', function (assert) {
+    assert.expect(1);
+
+    var parent = this.createParent({
+        data: this.data,
+        services: this.services,
+    });
+
+    // open blank thread window
+    parent.call('mail_service', 'openBlankThreadWindow');
+
+    $('.o_thread_window_close').click();
+
+    assert.strictEqual($('.o_thread_window').length, 0,
+        "blank thread window should be closed");
+
+    parent.destroy();
+});
+
+QUnit.test('fold blank thread window', function (assert) {
+    // This test requires full height of thread windows when they are open.
+    // (e.g. 400px)
+    assert.expect(2);
+
+    var parent = this.createParent({
+        data: this.data,
+        services: this.services,
+    });
+
+    var HEIGHT_FOLDED = AbstractThreadWindow.prototype.HEIGHT_FOLDED;
+    var HEIGHT_OPEN = AbstractThreadWindow.prototype.HEIGHT_OPEN;
+
+    // Make fold animation instantaneous
+    testUtils.patch(AbstractThreadWindow, {
+        FOLD_ANIMATION_DURATION: 0,
+    });
+
+    // Open blank thread window
+    parent.call('mail_service', 'openBlankThreadWindow');
+    assert.strictEqual($('.o_thread_window').css('height'), HEIGHT_OPEN,
+        "blank thread window should be open");
+    if ($('.o_thread_window').css('height') !== HEIGHT_OPEN) {
+        console.warn('Assertion above may fail due to too narrow height of browser');
+    }
+
+    $('.o_thread_window_title').click();
+    assert.strictEqual($('.o_thread_window').css('height'), HEIGHT_FOLDED,
+        "blank thread window should be open");
+
+    parent.destroy();
+    testUtils.unpatch(AbstractThreadWindow);
+});
+
+QUnit.test('open new DM chat from blank thread window', function (assert) {
+    assert.expect(6);
+    var done = assert.async();
+
+    var self = this;
+    var selectDef = $.Deferred();
+    var sourceDef = $.Deferred();
+
+    this.patchAutocomplete({
+        selectDef: selectDef,
+        sourceDef: sourceDef,
+    });
+
+    var def = $.Deferred();
+
+    this.data['res.partner'] = {
+        fields: {},
+        records: [],
+    };
+
+    var parent = this.createParent({
+        data: this.data,
+        services: this.services,
+        mockRPC: function (route, args) {
+            if (args.method === 'im_search') {
+                def.resolve();
+                return $.when([
+                    { id: 1, name: 'DemoUser1' },
+                    { id: 2, name: 'DemoUser2', }
+                ]);
+            }
+            if (args.method === 'channel_get_and_minimize') {
+                return $.when({
+                    channel_type: 'chat',
+                    direct_partner: [{ id: args.args[0][0], name: 'DemoUser1', im_status: '' }],
+                    id: 50,
+                    is_minimized: true,
+                    name: 'DemoUser1',
+                });
+            }
+            return this._super.apply(this, arguments);
+        },
+    });
+
+    // open blank thread window
+    parent.call('mail_service', 'openBlankThreadWindow');
+
+    $('.o_thread_search_input input').val("D").trigger('keydown');
+
+    $.when(sourceDef, def).then(function () {
+        assert.strictEqual($('.ui-menu-item a').length, 2,
+            "should suggest 2 partners for DM");
+        assert.strictEqual($('.ui-menu-item a').eq(0).text(), "DemoUser1",
+            "first suggestion should be 'DemoUser1'");
+        assert.strictEqual($('.ui-menu-item a').eq(1).text(), "DemoUser2",
+            "second suggestion should be 'DemoUser2'");
+
+        $('.ui-menu-item a').eq(0).click();
+    });
+    selectDef.then(function () {
+        assert.strictEqual($('.o_thread_window').length, 1,
+            "should be a single window");
+        assert.strictEqual($('.o_thread_window_title').text().trim(), "#DemoUser1",
+            "should have thread window of the DM chat with 'DemoUser1'");
+        assert.strictEqual($('.o_composer_text_field').length, 1,
+            "should have a composer in the DM chat window");
+
+        self.unpatchAutocomplete();
+        parent.destroy();
+        done();
+    });
+});
+
+QUnit.test('open already detached DM chat from blank thread window', function (assert) {
+    // when opening an already detach DM chat from the blank thread window,
+    // the blank thread window should disappear
+    assert.expect(6);
+    var done = assert.async();
+
+    var self = this;
+    var selectDef = $.Deferred();
+    var sourceDef = $.Deferred();
+
+    this.patchAutocomplete({
+        selectDef: selectDef,
+        sourceDef: sourceDef,
+    });
+
+    var def = $.Deferred();
+
+    this.data['res.partner'] = {
+        fields: {},
+        records: [],
+    };
+    this.data.initMessaging.channel_slots.channel_dm = [{
+        channel_type: 'chat',
+        direct_partner: [{ id: 1, name: 'DemoUser1', im_status: '' }],
+        id: 50,
+        is_minimized: true,
+        name: 'DemoUser1',
+    }];
+
+    var parent = this.createParent({
+        data: this.data,
+        services: this.services,
+        mockRPC: function (route, args) {
+            if (args.method === 'im_search') {
+                def.resolve();
+                return $.when([
+                    { id: 1, name: 'DemoUser1' },
+                ]);
+            }
+            return this._super.apply(this, arguments);
+        },
+    });
+
+    assert.strictEqual($('.o_thread_window').length, 1,
+        "should be a single window");
+    assert.strictEqual($('.o_thread_window_title').text().trim(), "#DemoUser1",
+        "should have thread window of the DM chat with 'DemoUser1'");
+    assert.strictEqual($('.o_composer_text_field').length, 1,
+        "should have a composer in the DM chat window");
+
+    // open blank thread window
+    parent.call('mail_service', 'openBlankThreadWindow');
+
+    assert.strictEqual($('.o_thread_window').length, 2,
+        "should have two thread windows open");
+
+    $('.o_thread_search_input input').val("D").trigger('keydown');
+
+    $.when(sourceDef, def).then(function () {
+        $('.ui-menu-item a').eq(0).click();
+    });
+    selectDef.then(function () {
+        assert.strictEqual($('.o_thread_window').length, 1,
+            "should now have a single thread window open");
+        assert.strictEqual($('.o_thread_window_title').text().trim(), "#DemoUser1",
+            "the remaining thread window should be the DM chat with 'DemoUser1'");
+
+        self.unpatchAutocomplete();
+        parent.destroy();
+        done();
+    });
+});
+
+});
+});
+});
diff --git a/addons/mail/static/tests/thread_window/hidden_thread_window_tests.js b/addons/mail/static/tests/thread_window/hidden_thread_window_tests.js
new file mode 100644
index 00000000000..29e05c59da9
--- /dev/null
+++ b/addons/mail/static/tests/thread_window/hidden_thread_window_tests.js
@@ -0,0 +1,227 @@
+odoo.define('mail.hiddenThreadWindowTests', function (require) {
+"use strict";
+
+var mailTestUtils = require('mail.testUtils');
+
+var testUtils = require('web.test_utils');
+var Widget = require('web.Widget');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('Thread Window', {}, function () {
+QUnit.module('Hidden', {
+    beforeEach: function () {
+        var self = this;
+
+        // define channel to link to chat window
+        this.data = {
+            'mail.message': {
+                fields: {},
+                records: [],
+            },
+            initMessaging: {
+                channel_slots: {
+                    channel_channel: [{
+                        id: 1,
+                        channel_type: "channel",
+                        name: "general",
+                    }],
+                },
+            },
+        };
+        this.services = mailTestUtils.getMailServices();
+        this.ORIGINAL_THREAD_WINDOW_APPENDTO = this.services.mail_service.prototype.THREAD_WINDOW_APPENDTO;
+
+        this.createParent = function (params) {
+            var widget = new Widget();
+
+            // in non-debug mode, append thread windows in qunit-fixture
+            // note that it does not hide thread window because it uses fixed
+            // position, and qunit-fixture uses absolute...
+            if (params.debug) {
+                self.services.mail_service.prototype.THREAD_WINDOW_APPENDTO = 'body';
+            } else {
+                self.services.mail_service.prototype.THREAD_WINDOW_APPENDTO = '#qunit-fixture';
+            }
+
+            testUtils.addMockEnvironment(widget, params);
+            return widget;
+        };
+    },
+    afterEach: function () {
+        // reset thread window append to body
+        this.services.mail_service.prototype.THREAD_WINDOW_APPENDTO = 'body';
+    },
+});
+
+QUnit.test('hidden thread windows dropdown when not enough horizontal space (version 1)', function (assert) {
+    // This test has hard-set global width, so that it does not depend on
+    // the width of the screen: at most 2 thread windows visible at the
+    // same time, and additional thread windows are in hidden while and
+    // still showing 2 visible thread windows. It assumes that the width
+    // of the 'hidden thread window' button is less than the width of a
+    // single thread window.
+    assert.expect(13);
+
+    testUtils.patch(this.services.mail_service, {
+        HIDDEN_THREAD_WINDOW_DROPDOWN_BUTTON_WIDTH: 100,
+        THREAD_WINDOW_WIDTH: 300,
+        _getGlobalWidth: function () { return 800; },
+    });
+
+    var channels = [];
+    for (var i = 0; i < 3; i++) {
+        channels.push({
+            id: i,
+            channel_type: 'channel',
+            name: "channel" + i,
+        });
+    }
+
+    this.data.initMessaging = {
+        channel_slots: {
+            channel_channel: channels,
+        },
+    };
+
+    var parent = this.createParent({
+        data: this.data,
+        services: this.services,
+    });
+
+    parent.call('mail_service', 'getChannel', 0).detach();
+    parent.call('mail_service', 'getChannel', 1).detach();
+
+    var $visibleThreadWindows = $('.o_thread_window:not(.o_thread_window_dropdown, .o_hidden)');
+
+    assert.strictEqual($visibleThreadWindows.length, 2,
+        "should have 2 thread windows visible (as many as available slots)");
+    assert.strictEqual($visibleThreadWindows.filter('[data-thread-id="0"]').length, 1,
+        "the thread window with ID 0 should be visible");
+    assert.strictEqual($visibleThreadWindows.filter('[data-thread-id="1"]').length, 1,
+        "the thread window with ID 1 should be visible");
+    assert.strictEqual($('.o_thread_window.o_hidden').length, 0,
+        "there should be no hidden thread when less or exactly as many as available slots");
+    assert.strictEqual($('.o_thread_window_dropdown').length, 0,
+        "there should be no thread window dropdown when all thread windows are visible");
+
+    // detach a channel so that it exceeds available slots
+    parent.call('mail_service', 'getChannel', 2).detach();
+    // update list of visible thread windows
+    $visibleThreadWindows = $('.o_thread_window:not(.o_thread_window_dropdown, .o_hidden)');
+
+    assert.strictEqual($visibleThreadWindows.length, 2,
+        "should have as many thread window visible as available slots");
+    assert.strictEqual($visibleThreadWindows.filter('[data-thread-id="0"]').length, 1,
+        "the thread window with ID 0 should be visible");
+    assert.strictEqual($visibleThreadWindows.filter('[data-thread-id="2"]').length, 1,
+        "the thread window with ID 2 should be visible (swapped with ID 1)");
+    assert.strictEqual($('.o_thread_window.o_hidden').length, 1,
+        "there should be a hidden thread when more windows than available slots");
+    assert.strictEqual($('.o_thread_window.o_hidden').data('thread-id'), 1,
+        "hidden thread window should be thread window with ID 1 (swapped with ID 2)");
+    var $hiddenDropdown = $('.o_thread_window_dropdown');
+    assert.strictEqual($hiddenDropdown.length, 1,
+        "there should be a thread window dropdown");
+    assert.strictEqual($('.o_thread_window_dropdown_toggler').text().trim(), "1",
+        "should display that there is one hidden thread window");
+    assert.strictEqual($hiddenDropdown.find('.o_thread_window_header[data-thread-id="1"]').length,
+        1, "should contain thread window with ID 1 in hidden dropdown menu");
+
+    parent.destroy();
+    testUtils.unpatch(this.services.mail_service);
+});
+
+QUnit.test('hidden thread windows dropdown when not enough horizontal space (version 2)', function (assert) {
+    // This is almost the same test as the one before, except there are
+    // at most 3 thread windows visible, and 2 thread windows are visible
+    // when it shows the 'hidden thread window' button.
+    // This case occurs when the amount of available slots depends on
+    // whether the hidden button should be displayed or not
+    // Example:
+    //      - global width of 800px
+    //      - button width of 100px
+    //      - thread width of 250px
+    //
+    // Without button: 3 thread windows (3*250px = 750px < 800px)
+    //    With button: 2 thread windows (2*250px + 100px = 600px < 800px)
+    assert.expect(16);
+
+    testUtils.patch(this.services.mail_service, {
+        HIDDEN_THREAD_WINDOW_DROPDOWN_BUTTON_WIDTH: 100,
+        THREAD_WINDOW_WIDTH: 250,
+        _getGlobalWidth: function () { return 800; },
+    });
+
+    var channels = [];
+    for (var i = 0; i < 4; i++) {
+        channels.push({
+            id: i,
+            channel_type: 'channel',
+            name: "channel" + i,
+        });
+    }
+
+    this.data.initMessaging = {
+        channel_slots: {
+            channel_channel: channels,
+        },
+    };
+
+    var parent = this.createParent({
+        data: this.data,
+        services: this.services,
+    });
+
+    parent.call('mail_service', 'getChannel', 0).detach();
+    parent.call('mail_service', 'getChannel', 1).detach();
+    parent.call('mail_service', 'getChannel', 2).detach();
+
+    var $visibleThreadWindows = $('.o_thread_window:not(.o_thread_window_dropdown, .o_hidden)');
+
+    assert.strictEqual($visibleThreadWindows.length, 3,
+        "should have 3  thread windows visible (as many as available slots)");
+    assert.strictEqual($visibleThreadWindows.filter('[data-thread-id="0"]').length, 1,
+        "the thread window with ID 0 should be visible");
+    assert.strictEqual($visibleThreadWindows.filter('[data-thread-id="1"]').length, 1,
+        "the thread window with ID 1 should be visible");
+    assert.strictEqual($visibleThreadWindows.filter('[data-thread-id="2"]').length, 1,
+        "the thread window with ID 2 should be visible");
+    assert.strictEqual($('.o_thread_window.o_hidden').length, 0,
+        "there should be no hidden thread when exactly as many as available slots");
+    assert.strictEqual($('.o_thread_window_dropdown').length, 0,
+        "there should be no thread window dropdown when all thread windows are visible");
+
+    // detach a channel so that it exceeds available slots
+    parent.call('mail_service', 'getChannel', 3).detach();
+    // update list of visible thread windows
+    $visibleThreadWindows = $('.o_thread_window:not(.o_thread_window_dropdown, .o_hidden)');
+
+    assert.strictEqual($visibleThreadWindows.length, 2,
+        "should have 2 thread windows visible (as many as available slots)");
+    assert.strictEqual($visibleThreadWindows.filter('[data-thread-id="0"]').length, 1,
+        "the thread window with ID 0 should be visible");
+    assert.strictEqual($visibleThreadWindows.filter('[data-thread-id="3"]').length, 1,
+        "the thread window with ID 3 should be visible (swapped with IDs 1 and 2)");
+    assert.strictEqual($('.o_thread_window.o_hidden').length, 2,
+        "there should be two hidden thread when more windows than available slots");
+    assert.strictEqual($('.o_thread_window.o_hidden[data-thread-id="1"]').length, 1,
+        "thread window with ID 1 should be hidden");
+    assert.strictEqual($('.o_thread_window.o_hidden[data-thread-id="2"]').length, 1,
+        "thread window with ID 2 should be hidden");
+    var $hiddenDropdown = $('.o_thread_window_dropdown');
+    assert.strictEqual($hiddenDropdown.length, 1,
+        "there should be a thread window dropdown");
+    assert.strictEqual($('.o_thread_window_dropdown_toggler').text().trim(), "2",
+        "should display that there is 2 hidden thread windows");
+    assert.strictEqual($hiddenDropdown.find('.o_thread_window_header[data-thread-id="1"]').length,
+        1, "should contain thread window with ID 1 in hidden dropdown menu");
+    assert.strictEqual($hiddenDropdown.find('.o_thread_window_header[data-thread-id="2"]').length,
+        1, "should contain thread window with ID 2 in hidden dropdown menu");
+
+    parent.destroy();
+    testUtils.unpatch(this.services.mail_service);
+});
+
+});
+});
+});
diff --git a/addons/mail/static/tests/thread_window_tests.js b/addons/mail/static/tests/thread_window_tests.js
deleted file mode 100644
index 087b1185fcf..00000000000
--- a/addons/mail/static/tests/thread_window_tests.js
+++ /dev/null
@@ -1,439 +0,0 @@
-odoo.define('mail.thread_window_tests', function (require) {
-"use strict";
-
-var mailTestUtils = require('mail.testUtils');
-
-var framework = require('web.framework');
-var testUtils = require('web.test_utils');
-var Widget = require('web.Widget');
-
-QUnit.module('mail', {
-    beforeEach: function (assert) {
-        var self = this;
-
-        this.BEFORE_EACH_ASSERTIONS_NUM = 1;
-
-        assert.strictEqual($('.o_thread_window').length, 0,
-            "should have no thread windows open before the test");
-
-        // define channel to link to chat window
-        this.data = {
-            'mail.message': {
-                fields: {},
-                records: [],
-            },
-            initMessaging: {
-                channel_slots: {
-                    channel_channel: [{
-                        id: 1,
-                        channel_type: "channel",
-                        name: "general",
-                    }],
-                },
-            },
-        };
-        this.services = mailTestUtils.getMailServices();
-        this.ORIGINAL_THREAD_WINDOW_APPENDTO = this.services.mail_service.prototype.THREAD_WINDOW_APPENDTO;
-
-        this.createParent = function (params) {
-            var widget = new Widget();
-
-            // in non-debug mode, append thread windows in qunit-fixture
-            // note that it does not hide thread window because it uses fixed
-            // position, and qunit-fixture uses absolute...
-            if (params.debug) {
-                self.services.mail_service.prototype.THREAD_WINDOW_APPENDTO = 'body';
-            } else {
-                self.services.mail_service.prototype.THREAD_WINDOW_APPENDTO = '#qunit-fixture';
-            }
-
-            testUtils.addMockEnvironment(widget, params);
-            return widget;
-        };
-
-        /**
-         * Patch autocomplete so that we can detect when 'source' or 'select'
-         * functions end.
-         *
-         * @param {Object} params
-         * @param {$.Deferred} params.selectDef
-         * @param {$.Deferred} params.sourceDef
-         */
-        this.patchAutocomplete = function (params) {
-            var selectDef = params.selectDef;
-            var sourceDef = params.sourceDef;
-            self.ORIGINAL_AUTOCOMPLETE = $.fn.autocomplete;
-            $.fn.autocomplete = function (params) {
-                var select = params.select;
-                var source = params.source;
-                params.select = function () {
-                    select.apply(this, arguments);
-                    selectDef.resolve();
-                };
-                params.source = function () {
-                    source.apply(this, arguments);
-                    sourceDef.resolve();
-                };
-                return self.ORIGINAL_AUTOCOMPLETE.apply(this, arguments);
-            };
-        };
-        /**
-         * Unpatch autocomplete
-         */
-        this.unpatchAutocomplete = function () {
-            $.fn.autocomplete = self.ORIGINAL_AUTOCOMPLETE;
-        };
-    },
-    afterEach: function () {
-        // reset thread window append to body
-        this.services.mail_service.prototype.THREAD_WINDOW_APPENDTO = 'body';
-    },
-}, function () {
-
-    QUnit.module('ThreadWindow');
-    QUnit.test('close thread window using ESCAPE key', function (assert) {
-        assert.expect(5 + this.BEFORE_EACH_ASSERTIONS_NUM);
-
-        var parent = this.createParent({
-            data: this.data,
-            services: this.services,
-            mockRPC: function (route, args) {
-                if (args.method === 'channel_fold') {
-                    assert.ok(true, "should call channel_fold");
-                    return $.when();
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        // get channel instance to link to thread window
-        var channel = parent.call('mail_service', 'getChannel', 1);
-        assert.ok(channel, "there should exist a channel locally with ID 1");
-
-        channel.detach();
-        assert.strictEqual($('.o_thread_window').length, 1,
-            "there should be a thread window that is opened");
-
-        // focus on the thread window and press ESCAPE
-        $('.o_thread_window .o_composer_text_field').click();
-        assert.strictEqual(document.activeElement,
-            $('.o_thread_window .o_composer_text_field')[0],
-            "thread window's input should now be focused");
-
-        var upKeyEvent = $.Event( "keyup", { which: 27 });
-        $('.o_thread_window .o_composer_text_field').trigger(upKeyEvent);
-
-        assert.strictEqual($('.o_thread_window').length, 0,
-            "the thread window should be closed");
-
-        parent.destroy();
-    });
-
-    QUnit.test('thread window\'s input can still be focused when the UI is blocked', function (assert) {
-        assert.expect(2 + this.BEFORE_EACH_ASSERTIONS_NUM);
-
-        var parent = this.createParent({
-            data: this.data,
-            services: this.services,
-        });
-
-        var $dom = $('#qunit-fixture');
-
-        // get channel instance to link to thread window
-        var channel = parent.call('mail_service', 'getChannel', 1);
-        channel.detach();
-
-        var $input = $('<input/>', {type: 'text'}).appendTo($dom);
-        $input.focus().click();
-        assert.strictEqual(document.activeElement, $input[0],
-            "fake input should be focused");
-
-        framework.blockUI();
-        // cannot force focus here otherwise the test
-        // makes no sense, this test is just about
-        // making sure that the code which forces the
-        // focus on click is not removed
-        $('.o_thread_window .o_composer_text_field').click();
-        assert.strictEqual(document.activeElement,
-            $('.o_thread_window .o_composer_text_field')[0],
-            "thread window's input should now be focused");
-
-        framework.unblockUI();
-        parent.destroy();
-    });
-
-    QUnit.test('emoji popover should open correctly in thread windows', function (assert) {
-        assert.expect(1 + this.BEFORE_EACH_ASSERTIONS_NUM);
-
-        var parent = this.createParent({
-            data: this.data,
-            services: this.services,
-        });
-
-        // get channel instance to link to thread window
-        var channel = parent.call('mail_service', 'getChannel', 1);
-        channel.detach();
-
-        var $emojiButton = $('.o_composer_button_emoji');
-        $emojiButton.trigger('focusin').focus().click();
-        var $popover = $('.o_mail_emoji_container');
-
-        var done = assert.async();
-        // Async is needed as the popover focusout hiding is deferred
-        setTimeout(function () {
-            assert.ok($popover.is(':visible'), "emoji popover should have stayed opened");
-            parent.destroy();
-            done();
-        }, 0);
-    });
-
-    QUnit.test('do not increase unread counter when receiving message with myself as author', function (assert) {
-        assert.expect(4 + this.BEFORE_EACH_ASSERTIONS_NUM);
-
-        var generalChannelID = 1;
-        var myselfPartnerID = 44;
-
-        this.data.initMessaging = {
-            channel_slots: {
-                channel_channel: [{
-                    id: generalChannelID,
-                    channel_type: 'channel',
-                    name: "general",
-                }],
-            },
-        };
-
-        var parent = this.createParent({
-            data: this.data,
-            services: this.services,
-            session: { partner_id: myselfPartnerID }
-        });
-
-        // get channel instance to link to thread window
-        var channel = parent.call('mail_service', 'getChannel', 1);
-        channel.detach();
-
-        var threadWindowHeaderText = $('.o_thread_window_header').text().replace(/\s/g, "");
-
-        assert.strictEqual(threadWindowHeaderText, "#general",
-            "thread window header text should not have any unread counter initially");
-        assert.strictEqual(channel.getUnreadCounter(), 0,
-            "thread should have unread counter to 0 initially");
-
-        // simulate receiving message from myself
-        var messageData = {
-            author_id: [myselfPartnerID, "Myself"],
-            body: "<p>Test message</p>",
-            id: 2,
-            model: 'mail.channel',
-            res_id: 1,
-            channel_ids: [1],
-        };
-        var notification = [[false, 'mail.channel', generalChannelID], messageData];
-        parent.call('bus_service', 'trigger', 'notification', [notification]);
-
-        threadWindowHeaderText = $('.o_thread_window_header').text().replace(/\s/g, "");
-
-        assert.strictEqual(threadWindowHeaderText, "#general",
-            "thread window header text should not have any unread counter after receiving my message");
-        assert.strictEqual(channel.getUnreadCounter(), 0,
-            "thread should not have incremented its unread counter after receiving my message");
-
-        parent.destroy();
-    });
-
-    QUnit.module('Blank ThreadWindow');
-    QUnit.test('basic rendering blank thread window', function (assert) {
-        assert.expect(5 + this.BEFORE_EACH_ASSERTIONS_NUM);
-
-        var parent = this.createParent({
-            data: this.data,
-            services: this.services,
-        });
-
-        // open blank thread window
-        parent.call('mail_service', 'openBlankThreadWindow');
-
-        assert.strictEqual($('.o_thread_window').length, 1,
-            "should have a thread window open");
-        assert.strictEqual($('.o_thread_window_title').text().trim(),
-            "New message",
-            "the blank window should have the correct title");
-        assert.strictEqual($('.o_composer_text_field').length, 0,
-            "should have no composer in the blank window");
-        assert.strictEqual($('.o_thread_search_input input').length, 1,
-            "the blank window should have an input");
-        assert.strictEqual($('.o_thread_search_input span').text().trim(),
-            "To:",
-            "the blank window should propose to type a partner next to the input");
-
-        parent.destroy();
-    });
-
-    QUnit.test('close blank thread window', function (assert) {
-        assert.expect(1 + this.BEFORE_EACH_ASSERTIONS_NUM);
-
-        var parent = this.createParent({
-            data: this.data,
-            services: this.services,
-        });
-
-        // open blank thread window
-        parent.call('mail_service', 'openBlankThreadWindow');
-
-        $('.o_thread_window_close').click();
-
-        assert.strictEqual($('.o_thread_window').length, 0,
-            "blank thread window should be closed");
-
-        parent.destroy();
-    });
-
-    QUnit.test('open new DM chat from blank thread window', function (assert) {
-        assert.expect(6 + this.BEFORE_EACH_ASSERTIONS_NUM);
-        var done = assert.async();
-
-        var self = this;
-        var selectDef = $.Deferred();
-        var sourceDef = $.Deferred();
-
-        this.patchAutocomplete({
-            selectDef: selectDef,
-            sourceDef: sourceDef,
-        });
-
-        var def = $.Deferred();
-
-        this.data['res.partner'] = {
-            fields: {},
-            records: [],
-        };
-
-        var parent = this.createParent({
-            data: this.data,
-            services: this.services,
-            mockRPC: function (route, args) {
-                if (args.method === 'im_search') {
-                    def.resolve();
-                    return $.when([
-                        { id: 1, name: 'DemoUser1' },
-                        { id: 2, name: 'DemoUser2', }
-                    ]);
-                }
-                if (args.method === 'channel_get_and_minimize') {
-                    return $.when({
-                        channel_type: 'chat',
-                        direct_partner: [{ id: args.args[0][0], name: 'DemoUser1', im_status: '' }],
-                        id: 50,
-                        is_minimized: true,
-                        name: 'DemoUser1',
-                    });
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        // open blank thread window
-        parent.call('mail_service', 'openBlankThreadWindow');
-
-        $('.o_thread_search_input input').val("D").trigger('keydown');
-
-        $.when(sourceDef, def).then(function () {
-            assert.strictEqual($('.ui-menu-item a').length, 2,
-                "should suggest 2 partners for DM");
-            assert.strictEqual($('.ui-menu-item a').eq(0).text(), "DemoUser1",
-                "first suggestion should be 'DemoUser1'");
-            assert.strictEqual($('.ui-menu-item a').eq(1).text(), "DemoUser2",
-                "second suggestion should be 'DemoUser2'");
-
-            $('.ui-menu-item a').eq(0).click();
-        });
-        selectDef.then(function () {
-            assert.strictEqual($('.o_thread_window').length, 1,
-                "should be a single window");
-            assert.strictEqual($('.o_thread_window_title').text().trim(), "#DemoUser1",
-                "should have thread window of the DM chat with 'DemoUser1'");
-            assert.strictEqual($('.o_composer_text_field').length, 1,
-                "should have a composer in the DM chat window");
-
-            self.unpatchAutocomplete();
-            parent.destroy();
-            done();
-        });
-    });
-
-    QUnit.test('open already detached DM chat from blank thread window', function (assert) {
-        // when opening an already detach DM chat from the blank thread window,
-        // the blank thread window should disappear
-        assert.expect(6 + this.BEFORE_EACH_ASSERTIONS_NUM);
-        var done = assert.async();
-
-        var self = this;
-        var selectDef = $.Deferred();
-        var sourceDef = $.Deferred();
-
-        this.patchAutocomplete({
-            selectDef: selectDef,
-            sourceDef: sourceDef,
-        });
-
-        var def = $.Deferred();
-
-        this.data['res.partner'] = {
-            fields: {},
-            records: [],
-        };
-        this.data.initMessaging.channel_slots.channel_dm = [{
-            channel_type: 'chat',
-            direct_partner: [{ id: 1, name: 'DemoUser1', im_status: '' }],
-            id: 50,
-            is_minimized: true,
-            name: 'DemoUser1',
-        }];
-
-        var parent = this.createParent({
-            data: this.data,
-            services: this.services,
-            mockRPC: function (route, args) {
-                if (args.method === 'im_search') {
-                    def.resolve();
-                    return $.when([
-                        { id: 1, name: 'DemoUser1' },
-                    ]);
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        assert.strictEqual($('.o_thread_window').length, 1,
-            "should be a single window");
-        assert.strictEqual($('.o_thread_window_title').text().trim(), "#DemoUser1",
-            "should have thread window of the DM chat with 'DemoUser1'");
-        assert.strictEqual($('.o_composer_text_field').length, 1,
-            "should have a composer in the DM chat window");
-
-        // open blank thread window
-        parent.call('mail_service', 'openBlankThreadWindow');
-
-        assert.strictEqual($('.o_thread_window').length, 2,
-            "should have two thread windows open");
-
-        $('.o_thread_search_input input').val("D").trigger('keydown');
-
-        $.when(sourceDef, def).then(function () {
-            $('.ui-menu-item a').eq(0).click();
-        });
-        selectDef.then(function () {
-            assert.strictEqual($('.o_thread_window').length, 1,
-                "should now have a single thread window open");
-            assert.strictEqual($('.o_thread_window_title').text().trim(), "#DemoUser1",
-                "the remaining thread window should be the DM chat with 'DemoUser1'");
-
-            self.unpatchAutocomplete();
-            parent.destroy();
-            done();
-        });
-    });
-
-});
-});
diff --git a/addons/mail/views/mail_templates.xml b/addons/mail/views/mail_templates.xml
index fd3face4a83..134b554c4b9 100644
--- a/addons/mail/views/mail_templates.xml
+++ b/addons/mail/views/mail_templates.xml
@@ -64,7 +64,8 @@
                     <script type="text/javascript" src="/mail/static/src/js/systray/systray_activity_menu.js"></script>
                     <script type="text/javascript" src="/mail/static/src/js/systray/systray_messaging_menu.js"></script>
                 <script type="text/javascript" src="/mail/static/src/js/tour.js"></script>
-                <script type="text/javascript" src="/mail/static/src/js/utils.js"></script>
+                    <!-- utils -->
+                    <script type="text/javascript" src="/mail/static/src/js/utils.js"></script>
                 <script type="text/javascript" src="/mail/static/src/js/activity.js"></script>
                 <!-- Activity view type -->
                 <script type="text/javascript" src="/mail/static/src/js/views/activity/activity_view.js"></script>
@@ -98,7 +99,10 @@
 
         <template id="qunit_suite" name="mail_tests" inherit_id="web.qunit_suite">
             <xpath expr="//t[@t-set='head']" position="inside">
-                <script type="text/javascript" src="/mail/static/tests/thread_window_tests.js"></script>
+                <!-- thread window -->
+                    <script type="text/javascript" src="/mail/static/tests/thread_window/basic_thread_window_tests.js"></script>
+                    <script type="text/javascript" src="/mail/static/tests/thread_window/blank_thread_window_tests.js"></script>
+                    <script type="text/javascript" src="/mail/static/tests/thread_window/hidden_thread_window_tests.js"></script>
                 <script type="text/javascript" src="/mail/static/tests/document_thread_window_tests.js"></script>
                 <script type="text/javascript" src="/mail/static/tests/chatter_tests.js"></script>
                 <script type="text/javascript" src="/mail/static/tests/mail_utils_tests.js"></script>