From 6d13271aac9fae6fb7fa122c49aacebb49a82889 Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Wed, 2 Feb 2022 10:38:28 +0000
Subject: [PATCH] [REF] web: adapt code to owl 2
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Owl 2 changelog: https://github.com/odoo/owl/blob/a9f29c4caad4f32d06be1ec4780572825781cd9b/CHANGELOG.md

Part-of: odoo/odoo#80156
Co-authored-by: Aaron Bohy <aab@odoo.com>
Co-authored-by: Bruno Boi <boi@odoo.com>
Co-authored-by: Géry Debongnie <ged@odoo.com>
Co-authored-by: Samuel Degueldre <sad@odoo.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Simon Genin (ges) <ges@odoo.com>
Co-authored-by: Francois (fge) <fge@odoo.com>
Co-authored-by: Michael Mattiello (mcm) <mcm@odoo.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>
Co-authored-by: luvi <luvi@odoo.com>
Co-authored-by: Lucas Perais (lpe) <lpe@odoo.com>
Co-authored-by: Jorge Pinna Puissant <jpp@odoo.com>
---
 addons/web/__manifest__.py                    |   8 +-
 addons/web/static/src/core/assets.js          |   2 +-
 addons/web/static/src/core/browser/browser.js |  11 +-
 .../web/static/src/core/checkbox/checkbox.js  |   9 +-
 .../web/static/src/core/checkbox/checkbox.xml |   1 +
 .../static/src/core/commands/command_hook.js  |   4 +-
 .../src/core/commands/command_items.xml       |   2 +-
 .../src/core/commands/command_palette.xml     |  13 +-
 .../src/core/commands/command_service.js      |   2 +-
 .../confirmation_dialog.js                    |   3 +-
 .../static/src/core/datepicker/datepicker.js  |  31 +-
 .../static/src/core/datepicker/datepicker.xml |   1 -
 .../static/src/core/debug/debug_context.js    |   3 +-
 .../web/static/src/core/debug/debug_menu.js   |   3 +
 .../web/static/src/core/debug/debug_menu.xml  |  10 +-
 .../static/src/core/debug/debug_menu_basic.js |   6 +
 .../src/core/debug/debug_menu_items.xml       |   2 +-
 .../core/debug/profiling/profiling_item.js    |   2 +-
 .../core/debug/profiling/profiling_item.xml   |  12 +-
 .../core/debug/profiling/profiling_service.js |  12 +-
 addons/web/static/src/core/dialog/dialog.js   |   9 +-
 addons/web/static/src/core/dialog/dialog.xml  |   2 +-
 .../src/core/dialog/dialog_container.js       |  24 +-
 .../web/static/src/core/dropdown/dropdown.js  |  22 +-
 .../web/static/src/core/dropdown/dropdown.xml |  20 +-
 .../static/src/core/dropdown/dropdown_item.js |  25 +-
 .../src/core/dropdown/dropdown_item.xml       |   1 +
 .../core/dropdown/dropdown_navigation_hook.js |   4 +-
 .../src/core/effects/effect_container.js      |   9 +-
 .../static/src/core/effects/effect_service.js |   5 +-
 .../static/src/core/effects/rainbow_man.js    |   4 +-
 .../static/src/core/effects/rainbow_man.xml   |   5 +-
 .../static/src/core/errors/error_dialogs.xml  |   2 +-
 .../static/src/core/file_input/file_input.js  |   7 +-
 .../static/src/core/file_input/file_input.xml |   2 +-
 .../static/src/core/hotkeys/hotkey_hook.js    |   4 +-
 .../src/core/l10n/localization_service.js     |   6 -
 .../src/core/notifications/notification.js    |  17 +-
 .../src/core/notifications/notification.xml   |   9 +-
 .../notifications/notification_container.js   |  19 +-
 .../notifications/notification_service.js     |  27 +-
 addons/web/static/src/core/pager/pager.js     |   6 +-
 addons/web/static/src/core/pager/pager.xml    |   6 +-
 addons/web/static/src/core/popover/popover.js |   9 +
 .../web/static/src/core/popover/popover.xml   |   1 +
 .../src/core/popover/popover_container.js     |  20 +-
 .../static/src/core/popover/popover_hook.js   |   4 +-
 .../static/src/core/position/position_hook.js |   3 +-
 addons/web/static/src/core/registry.js        |   2 +-
 addons/web/static/src/core/transition.js      | 138 +++
 addons/web/static/src/core/ui/block_ui.js     |   4 +-
 addons/web/static/src/core/ui/ui_service.js   |  16 +-
 .../web/static/src/core/utils/components.js   |  15 +-
 addons/web/static/src/core/utils/hooks.js     | 109 +--
 addons/web/static/src/core/utils/render.js    |  23 +
 addons/web/static/src/core/utils/strings.js   |  20 +
 .../static/src/core/utils/transitions.scss    |   7 +-
 addons/web/static/src/env.js                  |   7 +-
 addons/web/static/src/fields/fields.js        |   8 +-
 .../web/static/src/legacy/action_adapters.js  |  72 +-
 addons/web/static/src/legacy/debug_manager.js |   5 +-
 .../src/legacy/js/_deprecated/basic_fields.js |   1 +
 addons/web/static/src/legacy/js/common_env.js |   2 -
 .../src/legacy/js/component_extension.js      |  10 +-
 .../src/legacy/js/components/action_menus.js  |  40 +-
 .../legacy/js/components/custom_checkbox.js   |  17 +-
 .../legacy/js/components/custom_file_input.js |  17 +-
 .../src/legacy/js/components/datepicker.js    |  93 +-
 .../src/legacy/js/components/dropdown_menu.js |   4 +-
 .../js/components/dropdown_menu_item.js       |   6 +-
 .../static/src/legacy/js/components/pager.js  |  21 +-
 .../js/control_panel/comparison_menu.js       |   6 +-
 .../legacy/js/control_panel/control_panel.js  |  74 +-
 .../js/control_panel/custom_favorite_item.js  |  21 +-
 .../js/control_panel/custom_filter_item.js    |   8 +-
 .../js/control_panel/custom_group_by_item.js  |  38 -
 .../legacy/js/control_panel/favorite_menu.js  |   7 +-
 .../legacy/js/control_panel/filter_menu.js    |  14 +-
 .../legacy/js/control_panel/groupby_menu.js   |  13 +-
 .../src/legacy/js/control_panel/search_bar.js |  32 +-
 .../static/src/legacy/js/core/custom_hooks.js | 116 ---
 .../static/src/legacy/js/core/error_utils.js  |   2 +-
 addons/web/static/src/legacy/js/core/misc.js  |   3 +-
 .../static/src/legacy/js/core/owl_dialog.js   | 111 ++-
 .../web/static/src/legacy/js/core/popover.js  |  67 +-
 .../src/legacy/js/core/service_mixins.js      |   1 -
 .../static/src/legacy/js/core/translation.js  |  15 +-
 addons/web/static/src/legacy/js/core/utils.js |  10 +-
 .../legacy/js/fields/abstract_field_owl.js    |  44 +-
 .../src/legacy/js/fields/basic_fields_owl.js  |  13 +-
 .../legacy/js/fields/field_registry_owl.js    |   7 +-
 .../src/legacy/js/fields/field_wrapper.js     |  32 +-
 .../src/legacy/js/fields/relational_fields.js |   9 +-
 addons/web/static/src/legacy/js/model.js      |  68 +-
 .../static/src/legacy/js/owl_compatibility.js | 670 ++++++++------
 .../src/legacy/js/public/public_root.js       |  29 +-
 .../legacy/js/views/abstract_controller.js    |   8 +-
 .../src/legacy/js/views/abstract_renderer.js  |  11 +-
 .../legacy/js/views/abstract_renderer_owl.js  |  18 +-
 .../src/legacy/js/views/abstract_view.js      |   7 +-
 .../legacy/js/views/basic/basic_controller.js |   6 +-
 .../legacy/js/views/basic/basic_renderer.js   |  23 +-
 .../src/legacy/js/views/form/form_renderer.js |  29 +-
 .../legacy/js/views/graph/graph_renderer.js   |  46 +-
 .../src/legacy/js/views/list/list_renderer.js |  13 +-
 .../legacy/js/views/pivot/pivot_renderer.js   |  55 +-
 .../src/legacy/js/views/pivot/pivot_view.js   |   2 +-
 .../src/legacy/js/views/search_panel.js       |  37 +-
 .../src/legacy/js/views/view_dialogs.js       |   4 +-
 .../static/src/legacy/js/widgets/week_days.js |  17 +-
 .../src/legacy/legacy_client_actions.js       |  21 +-
 addons/web/static/src/legacy/legacy_dialog.js |   3 +-
 addons/web/static/src/legacy/legacy_setup.js  |   5 +-
 addons/web/static/src/legacy/legacy_views.js  |  25 +-
 addons/web/static/src/legacy/root_widget.js   |  19 +-
 addons/web/static/src/legacy/utils.js         |  31 +-
 addons/web/static/src/legacy/xml/base.xml     | 128 ++-
 .../static/src/legacy/xml/control_panel.xml   |   6 +-
 addons/web/static/src/legacy/xml/fields.xml   |   2 +-
 addons/web/static/src/legacy/xml/pivot.xml    |  20 +-
 .../static/src/legacy/xml/search_panel.xml    |   8 +-
 .../web/static/src/legacy/xml/week_days.xml   |   4 +-
 .../web/static/src/owl2_compatibility/app.js  |  36 +
 .../src/owl2_compatibility/component.js       |  43 +
 .../src/owl2_compatibility/event_target.js    |  33 +
 addons/web/static/src/owl_next_adapter.js     |  34 -
 .../search/comparison_menu/comparison_menu.js |   3 +
 .../comparison_menu/comparison_menu.xml       |   8 +-
 .../src/search/control_panel/control_panel.js |  38 -
 .../search/control_panel/control_panel.xml    |   8 +-
 .../favorite_menu/custom_favorite_item.js     |  15 +-
 .../favorite_menu/custom_favorite_item.xml    |   7 +-
 .../src/search/favorite_menu/favorite_menu.js |   3 +
 .../search/favorite_menu/favorite_menu.xml    |   9 +-
 .../search/filter_menu/custom_filter_item.js  |   3 +-
 .../search/filter_menu/custom_filter_item.xml |  16 +-
 .../src/search/filter_menu/filter_menu.js     |   4 +-
 .../src/search/filter_menu/filter_menu.xml    |  10 +-
 .../group_by_menu/custom_group_by_item.js     |   7 +-
 .../group_by_menu/custom_group_by_item.xml    |   6 +-
 .../src/search/group_by_menu/group_by_menu.js |  10 +-
 .../search/group_by_menu/group_by_menu.xml    |  10 +-
 addons/web/static/src/search/pager_hook.js    |   4 +-
 .../src/search/search_bar/search_bar.js       |   7 +-
 .../src/search/search_bar/search_bar.xml      |  11 +-
 .../src/search/search_panel/search_panel.js   |  32 +-
 .../src/search/search_panel/search_panel.xml  |   6 +-
 .../src/search/with_search/with_search.js     |  50 +-
 addons/web/static/src/start.js                |  23 +-
 addons/web/static/src/views/debug_items.js    |   6 +-
 .../static/src/views/graph/graph_renderer.js  |  21 +-
 .../static/src/views/graph/graph_renderer.xml |   4 +-
 .../web/static/src/views/graph/graph_view.js  |   4 +-
 .../web/static/src/views/graph/graph_view.xml |  17 +-
 .../src/views/helpers/no_content_helpers.xml  |   2 +-
 .../src/views/helpers/standard_view_props.js  |   1 +
 addons/web/static/src/views/layout.js         |  18 +
 addons/web/static/src/views/layout.xml        |   4 +-
 .../web/static/src/views/onboarding_banner.js |  10 +-
 .../src/views/pivot/pivot_group_by_menu.js    |   9 +-
 .../static/src/views/pivot/pivot_renderer.js  |  18 +-
 .../static/src/views/pivot/pivot_renderer.xml |  11 +-
 .../web/static/src/views/pivot/pivot_view.js  |   4 +-
 .../web/static/src/views/pivot/pivot_view.xml |   2 +-
 addons/web/static/src/views/view.js           |  19 +-
 addons/web/static/src/views/view.xml          |  14 +-
 addons/web/static/src/views/view_service.js   |   2 +-
 .../src/webclient/actions/action_container.js |  13 +-
 .../src/webclient/actions/action_dialog.js    |  16 +-
 .../src/webclient/actions/action_hook.js      |   3 +-
 .../src/webclient/actions/action_service.js   |  38 +-
 .../src/webclient/actions/client_actions.js   |  10 +-
 .../src/webclient/burger_menu/burger_menu.js  |  17 +-
 .../webclient/burger_menu/burger_menu.scss    |   6 +-
 .../src/webclient/burger_menu/burger_menu.xml |  70 +-
 .../mobile_switch_company_menu.xml            |   6 +-
 .../burger_menu/user_menu/user_menu.xml       |   2 +-
 .../static/src/webclient/clickbot/clickbot.js |  25 +-
 .../src/webclient/clickbot/clickbot_loader.js |   5 +-
 .../web/static/src/webclient/debug_items.js   |   4 +-
 .../loading_indicator/loading_indicator.js    |  16 +-
 .../loading_indicator/loading_indicator.scss  |  17 +-
 .../loading_indicator/loading_indicator.xml   |   8 +-
 .../web/static/src/webclient/navbar/navbar.js |   8 +-
 .../static/src/webclient/navbar/navbar.scss   |   2 +-
 .../static/src/webclient/navbar/navbar.xml    |  19 +-
 .../switch_company_menu.js                    |   3 +
 .../switch_company_menu.xml                   |  10 +-
 .../src/webclient/user_menu/user_menu.js      |   5 +-
 .../src/webclient/user_menu/user_menu.xml     |   4 +-
 addons/web/static/src/webclient/webclient.js  |  41 +-
 addons/web/static/src/webclient/webclient.xml |  16 +-
 .../static/src/webclient/webclient_extra.scss |  10 -
 .../src/webclient/webclient_layout.scss       |  13 -
 .../web/static/tests/core/checkbox_tests.js   |  40 +-
 .../core/commands/command_palette_tests.js    |  52 +-
 .../core/commands/command_service_tests.js    |  61 +-
 .../core/commands/menu_provider_tests.js      |  51 +-
 .../web/static/tests/core/datepicker_tests.js |  43 +-
 .../tests/core/debug/debug_manager_tests.js   |  76 +-
 .../static/tests/core/dialog_service_tests.js |  37 +-
 addons/web/static/tests/core/dialog_tests.js  |  79 +-
 .../web/static/tests/core/dropdown_tests.js   | 216 +++--
 .../core/effects/effect_service_tests.js      |  22 +-
 .../tests/core/errors/error_dialogs_tests.js  | 137 ++-
 .../web/static/tests/core/file_input_tests.js |  11 +-
 .../core/hotkeys/hotkey_service_tests.js      |  63 +-
 .../tests/core/l10n/translation_tests.js      |  10 +-
 .../core/main_components_container_tests.js   |  18 +-
 .../tests/core/network/rpc_service_tests.js   |  27 +-
 .../core/notifications/notifications_tests.js |  39 +-
 .../static/tests/core/orm_service_tests.js    |   6 +-
 addons/web/static/tests/core/pager_tests.js   |  16 +-
 .../tests/core/popover/popover_hook_tests.js  |  46 +-
 .../core/popover/popover_service_tests.js     |  14 +-
 .../tests/core/popover/popover_tests.js       |  28 +-
 .../static/tests/core/position_hook_tests.js  |  45 +-
 .../tests/core/scroller_service_tests.js      |  19 +-
 .../core/tooltip/tooltip_service_tests.js     | 412 ++++-----
 .../web/static/tests/core/transition_test.js  |  79 ++
 .../web/static/tests/core/ui_service_tests.js |  23 +-
 .../tests/core/utils/component_tests.js       |  22 +-
 .../static/tests/core/utils/hooks_tests.js    | 279 +-----
 addons/web/static/tests/helpers/mock_env.js   |  30 +-
 .../web/static/tests/helpers/mock_services.js |  29 +-
 addons/web/static/tests/helpers/utils.js      |  72 ++
 .../tests/legacy/component_extension_tests.js |  89 +-
 .../legacy/components/action_menus_tests.js   |  14 -
 .../components/custom_checkbox_tests.js       |   4 -
 .../components/custom_file_input_tests.js     |   4 -
 .../legacy/components/datepicker_tests.js     |  18 -
 .../components/dropdown_menu_mobile_tests.js  |   1 -
 .../legacy/components/dropdown_menu_tests.js  |  56 +-
 .../tests/legacy/components/pager_tests.js    |  62 +-
 .../control_panel/comparison_menu_tests.js    |   4 -
 .../control_panel/control_panel_tests.js      |  14 -
 .../control_panel/custom_filter_item_tests.js |  25 -
 .../custom_group_by_item_tests.js             |  75 --
 .../control_panel/favorite_menu_tests.js      |  17 -
 .../legacy/control_panel/filter_menu_tests.js |  22 -
 .../control_panel/groupby_menu_tests.js       |  24 -
 .../legacy/control_panel/search_bar_tests.js  | 134 +--
 .../control_panel/search_utils_tests.js       |  15 +-
 .../static/tests/legacy/core/mixins_tests.js  |   7 +-
 .../tests/legacy/core/owl_dialog_tests.js     | 169 ++--
 .../static/tests/legacy/core/popover_tests.js | 164 ++--
 .../tests/legacy/fields/basic_fields_tests.js |  33 +-
 .../field_many2many_tests.js                  |   1 -
 .../relational_fields/field_many2one_tests.js |   1 -
 .../legacy/fields/relational_fields_tests.js  |  13 +-
 .../static/tests/legacy/helpers/test_env.js   |  17 +-
 .../tests/legacy/helpers/test_utils_create.js |  83 +-
 .../tests/legacy/helpers/test_utils_mock.js   |   3 +-
 .../tests/legacy/owl_compatibility_tests.js   | 696 ++++++++++-----
 .../legacy/views/abstract_controller_tests.js |  22 +-
 .../tests/legacy/views/calendar_tests.js      |   5 +-
 .../static/tests/legacy/views/form_tests.js   | 131 +--
 .../static/tests/legacy/views/graph_tests.js  |  24 +-
 .../static/tests/legacy/views/kanban_tests.js |  12 +-
 .../static/tests/legacy/views/list_tests.js   | 209 ++---
 .../static/tests/legacy/views/pivot_tests.js  |  58 +-
 .../static/tests/legacy/views/qweb_tests.js   |   6 +-
 .../tests/legacy/views/search_panel_tests.js  | 130 +--
 .../tests/legacy/views/state_mapping_tests.js |  92 +-
 .../static/tests/owl2_compatibility_app.js    |  83 ++
 .../tests/search/favorite_menu_tests.js       |  29 +-
 addons/web/static/tests/search/helpers.js     |  16 +-
 .../static/tests/search/search_bar_tests.js   |  18 +-
 .../static/tests/search/search_panel_tests.js | 212 ++---
 .../static/tests/search/with_search_tests.js  |  32 +-
 addons/web/static/tests/setup.js              |  41 +-
 .../static/tests/views/graph_view_tests.js    | 177 ++--
 addons/web/static/tests/views/helpers.js      |  18 +-
 addons/web/static/tests/views/layout_tests.js |  10 +-
 .../static/tests/views/pivot_view_tests.js    | 362 ++++----
 addons/web/static/tests/views/view_tests.js   |  45 +-
 .../webclient/actions/client_action_tests.js  |  70 +-
 .../webclient/actions/close_action_tests.js   |  65 +-
 .../webclient/actions/concurrency_tests.js    | 226 ++---
 .../tests/webclient/actions/effects_tests.js  |  42 +-
 .../webclient/actions/error_handling_tests.js |  16 +-
 .../tests/webclient/actions/legacy_tests.js   |  69 +-
 .../webclient/actions/load_state_tests.js     | 248 ++---
 .../tests/webclient/actions/misc_tests.js     |  86 +-
 .../webclient/actions/push_state_tests.js     |  57 +-
 .../webclient/actions/report_action_tests.js  |  26 +-
 .../webclient/actions/server_action_tests.js  |   7 +-
 .../tests/webclient/actions/target_tests.js   | 152 ++--
 .../webclient/actions/window_action_tests.js  | 845 +++++++++---------
 addons/web/static/tests/webclient/helpers.js  |  29 +-
 .../webclient/loading_indicator_tests.js      |  49 +-
 .../mobile_switch_company_menu_tests.js       |  13 +-
 .../static/tests/webclient/navbar_tests.js    |  45 +-
 .../webclient/switch_company_menu_tests.js    |   7 +-
 .../static/tests/webclient/user_menu_tests.js |  26 +-
 .../static/tests/webclient/webclient_tests.js |  51 +-
 addons/web/views/webclient_templates.xml      |   5 +-
 297 files changed, 6038 insertions(+), 5688 deletions(-)
 create mode 100644 addons/web/static/src/core/transition.js
 create mode 100644 addons/web/static/src/core/utils/render.js
 delete mode 100644 addons/web/static/src/legacy/js/control_panel/custom_group_by_item.js
 delete mode 100644 addons/web/static/src/legacy/js/core/custom_hooks.js
 create mode 100644 addons/web/static/src/owl2_compatibility/app.js
 create mode 100644 addons/web/static/src/owl2_compatibility/component.js
 create mode 100644 addons/web/static/src/owl2_compatibility/event_target.js
 delete mode 100644 addons/web/static/src/owl_next_adapter.js
 create mode 100644 addons/web/static/tests/core/transition_test.js
 delete mode 100644 addons/web/static/tests/legacy/control_panel/custom_group_by_item_tests.js
 create mode 100644 addons/web/static/tests/owl2_compatibility_app.js

diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index 5836ab6da8d..63f21936d24 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -359,7 +359,7 @@ This module provides the core of the Odoo Web Client.
             'web/static/lib/underscore.string/lib/underscore.string.js',
             'web/static/lib/moment/moment.js',
             'web/static/lib/owl/owl.js',
-            'web/static/src/owl_next_adapter.js',
+            'web/static/src/owl2_compatibility/*.js',
             'web/static/src/legacy/js/component_extension.js',
             'web/static/lib/jquery/jquery.js',
             'web/static/lib/jquery.ui/jquery-ui.js',
@@ -405,7 +405,6 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/js/core/ajax.js',
             'web/static/src/legacy/js/core/browser_detection.js',
             'web/static/src/legacy/js/core/bus.js',
-            'web/static/src/legacy/js/core/custom_hooks.js',
             'web/static/src/legacy/js/core/class.js',
             'web/static/src/legacy/js/core/collections.js',
             'web/static/src/legacy/js/core/concurrency.js',
@@ -453,6 +452,11 @@ This module provides the core of the Odoo Web Client.
             # first called in web.
             'web/static/tests/legacy/helpers/test_utils_file.js'
         ],
+        # remove this bundle alongside the owl2 compatibility layer
+        'web.tests_assets_common': [
+            ('include', 'web.assets_common'),
+            ('after', 'web/static/src/owl2_compatibility/app.js', 'web/static/tests/owl2_compatibility_app.js'),
+        ],
         'web.tests_assets': [
             'web/static/lib/qunit/qunit-2.9.1.css',
             'web/static/lib/qunit/qunit-2.9.1.js',
diff --git a/addons/web/static/src/core/assets.js b/addons/web/static/src/core/assets.js
index 78cddf884bb..f872aa0327b 100644
--- a/addons/web/static/src/core/assets.js
+++ b/addons/web/static/src/core/assets.js
@@ -55,7 +55,7 @@ class AssetsLoadingError extends Error {}
  * @param {string} url the url of the script
  * @returns {Promise<true>} resolved when the script has been loaded
  */
-const loadJS = memoize(function loadJS(url) {
+export const loadJS = memoize(function loadJS(url) {
     if (document.querySelector(`script[src="${url}"]`)) {
         // Already in the DOM and wasn't loaded through this function
         // Unfortunately there is no way to check whether a script has loaded
diff --git a/addons/web/static/src/core/browser/browser.js b/addons/web/static/src/core/browser/browser.js
index b67c32ff560..560f8ed41cd 100644
--- a/addons/web/static/src/core/browser/browser.js
+++ b/addons/web/static/src/core/browser/browser.js
@@ -10,7 +10,7 @@
  */
 
 let sessionStorage = window.sessionStorage;
-let localStorage = owl.browser.localStorage;
+let localStorage = window.localStorage;
 try {
     // Safari crashes in Private Browsing
     localStorage.setItem("__localStorage__", "true");
@@ -20,9 +20,13 @@ try {
     sessionStorage = makeRAMLocalStorage();
 }
 
-export const browser = Object.assign({}, owl.browser, {
+export const browser = {
     addEventListener: window.addEventListener.bind(window),
     removeEventListener: window.removeEventListener.bind(window),
+    setTimeout: window.setTimeout.bind(window),
+    clearTimeout: window.clearTimeout.bind(window),
+    setInterval: window.setInterval.bind(window),
+    clearInterval: window.clearInterval.bind(window),
     requestAnimationFrame: window.requestAnimationFrame.bind(window),
     cancelAnimationFrame: window.cancelAnimationFrame.bind(window),
     console: window.console,
@@ -32,7 +36,8 @@ export const browser = Object.assign({}, owl.browser, {
     XMLHttpRequest: window.XMLHttpRequest,
     localStorage,
     sessionStorage,
-});
+    fetch: window.fetch.bind(window),
+};
 
 Object.defineProperty(browser, "location", {
     set(val) {
diff --git a/addons/web/static/src/core/checkbox/checkbox.js b/addons/web/static/src/core/checkbox/checkbox.js
index 87e4a082ca7..58120cda060 100644
--- a/addons/web/static/src/core/checkbox/checkbox.js
+++ b/addons/web/static/src/core/checkbox/checkbox.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-const { Component, QWeb } = owl;
+const { Component } = owl;
 
 /**
  * Custom checkbox
@@ -8,7 +8,7 @@ const { Component, QWeb } = owl;
  * <CheckBox
  *    value="boolean"
  *    disabled="boolean"
- *    t-on-change="_onValueChange"
+ *    onChange="_onValueChange"
  *    >
  *    Change the label text
  *  </CheckBox>
@@ -24,5 +24,6 @@ export class CheckBox extends Component {
 
 CheckBox.template = "web.CheckBox";
 CheckBox.nextId = 1;
-
-QWeb.registerComponent("CheckBox", CheckBox);
+CheckBox.defaultProps = {
+    onChange: () => {},
+};
diff --git a/addons/web/static/src/core/checkbox/checkbox.xml b/addons/web/static/src/core/checkbox/checkbox.xml
index ba826343c57..c5d4833f71a 100644
--- a/addons/web/static/src/core/checkbox/checkbox.xml
+++ b/addons/web/static/src/core/checkbox/checkbox.xml
@@ -9,6 +9,7 @@
             class="custom-control-input"
             t-att-disabled="props.disabled"
             t-att-checked="props.value"
+            t-on-change="(ev) => props.onChange(ev.target.checked)"
             />
         <label t-att-for="props.id or id" class="custom-control-label">
             <t t-slot="default"/>
diff --git a/addons/web/static/src/core/commands/command_hook.js b/addons/web/static/src/core/commands/command_hook.js
index fd9f60b9b81..c28951c404e 100644
--- a/addons/web/static/src/core/commands/command_hook.js
+++ b/addons/web/static/src/core/commands/command_hook.js
@@ -1,6 +1,8 @@
 /** @odoo-module **/
 
-import { useEffect, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
+
+const { useEffect } = owl;
 
 /**
  * @typedef {import("./command_service").CommandOptions} CommandOptions
diff --git a/addons/web/static/src/core/commands/command_items.xml b/addons/web/static/src/core/commands/command_items.xml
index cf752265f2b..498dadd26df 100644
--- a/addons/web/static/src/core/commands/command_items.xml
+++ b/addons/web/static/src/core/commands/command_items.xml
@@ -11,7 +11,7 @@
     <div class="o_command_hotkey">
       <t t-slot="name"/>
       <span>
-        <t t-foreach="getKeysToPress(props)" t-as="key">
+        <t t-foreach="getKeysToPress(props)" t-as="key" t-key="key_index">
           <kbd t-esc="key" />
           <span t-if="!key_last"> + </span>
         </t>
diff --git a/addons/web/static/src/core/commands/command_palette.xml b/addons/web/static/src/core/commands/command_palette.xml
index c51e3de52d0..9c6eff8a6af 100644
--- a/addons/web/static/src/core/commands/command_palette.xml
+++ b/addons/web/static/src/core/commands/command_palette.xml
@@ -4,20 +4,19 @@
   <t t-name="web.CommandPalette" owl="1">
     <div>
       <div class="o_command_palette_search">
-        <input type="text" t-model="state.searchValue" t-on-input="onSearchInput" autofocus="" t-att-placeholder="state.placeholder"/>
+        <input type="text" t-model="state.searchValue" t-on-input="onSearchInput" t-ref="autofocus" t-att-placeholder="state.placeholder"/>
         <i  t-att-title="state.placeholder" role="img"  t-att-aria-label="state.placeholder" class="fa fa-search"></i>
       </div>
 
       <div t-ref="listbox" class="o_command_palette_listbox">
         <div t-if="!state.commands.length" class="o_command_palette_listbox_empty" t-esc="state.emptyMessage"/>
         <t t-if="!isFuzzySearch">
-          <t t-foreach="commandsByCategory" t-as="category">
-
-            <div class="o_command_category" t-key="category.keyId">
-              <t t-foreach="category.commands" t-as="command">
+          <t t-foreach="commandsByCategory" t-as="category" t-key="category.keyId">
+            <div class="o_command_category">
+              <t t-foreach="category.commands" t-as="command"  t-key="command.keyId">
                 <t t-set="commandIndex" t-value="state.commands.indexOf(command)" />
-                <div t-attf-id="o_command_{{commandIndex}}" class="o_command" t-att-class="{ focused: state.selectedCommand === command }" t-on-click="onCommandClicked(commandIndex)" t-on-mouseenter="onCommandMouseEnter(commandIndex)" t-key="command.keyId">
-                  <t t-component="command.Component || DefaultCommandItem" name="command.name" searchValue="clearSearchValue" t-props="command.props" t-on-close="props.closeMe()" t-on-execute-command="executeCommand(command)">
+                <div t-attf-id="o_command_{{commandIndex}}" class="o_command" t-att-class="{ focused: state.selectedCommand === command }" t-on-click="() => this.onCommandClicked(commandIndex)" t-on-mouseenter="() => this.onCommandMouseEnter(commandIndex)" t-on-close="() => this.props.closeMe()" t-on-execute-command="() => this.executeCommand(command)">
+                  <t t-component="command.Component || DefaultCommandItem" name="command.name" searchValue="clearSearchValue" t-props="command.props">
                     <t t-set-slot="name">
                         <span class="o_command_name">
                           <t t-foreach="command.splitName" t-as="name" t-key="name_index">
diff --git a/addons/web/static/src/core/commands/command_service.js b/addons/web/static/src/core/commands/command_service.js
index c3cc60d613f..f3068714936 100644
--- a/addons/web/static/src/core/commands/command_service.js
+++ b/addons/web/static/src/core/commands/command_service.js
@@ -47,7 +47,7 @@ class DefaultFooter extends Component {
 DefaultFooter.template = xml`
 <span>
     <span class='o_promote'>TIP</span> — search for
-    <t t-foreach="elements" t-as="element">
+    <t t-foreach="elements" t-as="element" t-key="element.namespace">
         <t t-if="!(element_first || element_last)">, </t>
         <t t-if="element_last and !element_first"> and </t>
         <span t-esc="element.namespace" class='o_promote'/><t t-esc="element.name"/>
diff --git a/addons/web/static/src/core/confirmation_dialog/confirmation_dialog.js b/addons/web/static/src/core/confirmation_dialog/confirmation_dialog.js
index 978b2ecbf20..ebfabe424fb 100644
--- a/addons/web/static/src/core/confirmation_dialog/confirmation_dialog.js
+++ b/addons/web/static/src/core/confirmation_dialog/confirmation_dialog.js
@@ -23,17 +23,18 @@ export class ConfirmationDialog extends Dialog {
     }
 }
 ConfirmationDialog.props = {
+    ...Dialog.props,
     title: {
         validate: (m) => {
             return (
                 typeof m === "string" || (typeof m === "object" && typeof m.toString === "function")
             );
         },
+        optional: true,
     },
     body: String,
     confirm: { type: Function, optional: true },
     cancel: { type: Function, optional: true },
-    close: Function,
 };
 ConfirmationDialog.defaultProps = {
     title: _lt("Confirmation"),
diff --git a/addons/web/static/src/core/datepicker/datepicker.js b/addons/web/static/src/core/datepicker/datepicker.js
index b063722ce1e..7ca09fd6655 100644
--- a/addons/web/static/src/core/datepicker/datepicker.js
+++ b/addons/web/static/src/core/datepicker/datepicker.js
@@ -4,7 +4,15 @@ import { localization } from "@web/core/l10n/localization";
 import { registry } from "@web/core/registry";
 import { useAutofocus } from "@web/core/utils/hooks";
 
-const { Component, useExternalListener, useRef, useState } = owl;
+const {
+    Component,
+    onMounted,
+    onWillUpdateProps,
+    onWillUnmount,
+    useExternalListener,
+    useRef,
+    useState,
+} = owl;
 const { DateTime } = luxon;
 
 const formatters = registry.category("formatters");
@@ -53,9 +61,13 @@ export class DatePicker extends Component {
 
         useAutofocus();
         useExternalListener(window, "scroll", this.onWindowScroll);
+
+        onMounted(this.onMounted);
+        onWillUpdateProps(this.onWillUpdateProps);
+        onWillUnmount(this.onWillUnmount);
     }
 
-    mounted() {
+    onMounted() {
         window.$(this.el).on("show.datetimepicker", () => this.inputRef.el.select());
         window.$(this.el).on("hide.datetimepicker", () => this.onDateChange());
         window.$(this.el).on("error.datetimepicker", () => false); // Ignores datepicker errors
@@ -64,7 +76,7 @@ export class DatePicker extends Component {
         this.updateInput();
     }
 
-    willUpdateProps(nextProps) {
+    onWillUpdateProps(nextProps) {
         const pickerParams = {};
         for (const prop in nextProps) {
             if (this.props[prop] !== nextProps[prop]) {
@@ -78,7 +90,7 @@ export class DatePicker extends Component {
         this.bootstrapDateTimePicker(pickerParams);
     }
 
-    willUnmount() {
+    onWillUnmount() {
         window.$(this.el).off(); // Removes all jQuery events
 
         this.bootstrapDateTimePicker("destroy");
@@ -229,7 +241,7 @@ DatePicker.props = {
         },
         optional: true,
     },
-    calendarWeeks: Boolean,
+    calendarWeeks: { type: Boolean, optional: true },
     format: { type: String, optional: true },
     icons: {
         type: Object,
@@ -244,14 +256,15 @@ DatePicker.props = {
             today: String,
             up: String,
         },
+        optional: true,
     },
     keyBinds: { validate: (kb) => typeof kb === "object" || kb === null, optional: true },
     locale: { type: String, optional: true },
-    maxDate: DateTime,
-    minDate: DateTime,
+    maxDate: { type: DateTime, optional: true },
+    minDate: { type: DateTime, optional: true },
     readonly: { type: Boolean, optional: true },
-    useCurrent: Boolean,
-    widgetParent: String,
+    useCurrent: { type: Boolean, optional: true },
+    widgetParent: { type: String, optional: true },
 };
 DatePicker.template = "web.DatePicker";
 
diff --git a/addons/web/static/src/core/datepicker/datepicker.xml b/addons/web/static/src/core/datepicker/datepicker.xml
index b72e3a216b0..c600a1c78a2 100644
--- a/addons/web/static/src/core/datepicker/datepicker.xml
+++ b/addons/web/static/src/core/datepicker/datepicker.xml
@@ -6,7 +6,6 @@
         <div class="o_datepicker" aria-atomic="true" t-att-id="datePickerId" data-target-input="nearest">
             <input type="text"
                 class="o_datepicker_input o_input datetimepicker-input"
-                autofocus=""
                 t-att-name="props.name"
                 t-att-placeholder="props.placeholder"
                 t-attf-data-target="#{{ datePickerId }}"
diff --git a/addons/web/static/src/core/debug/debug_context.js b/addons/web/static/src/core/debug/debug_context.js
index 626037c4fd2..4966cc64bbd 100644
--- a/addons/web/static/src/core/debug/debug_context.js
+++ b/addons/web/static/src/core/debug/debug_context.js
@@ -2,9 +2,8 @@
 
 import { registry } from "../registry";
 import { memoize } from "../utils/functions";
-import { useEffect } from "@web/core/utils/hooks";
 
-const { useEnv, useSubEnv } = owl;
+const { useEffect, useEnv, useSubEnv } = owl;
 const debugRegistry = registry.category("debug");
 
 const getAccessRights = memoize(async function getAccessRights(orm) {
diff --git a/addons/web/static/src/core/debug/debug_menu.js b/addons/web/static/src/core/debug/debug_menu.js
index 78f526336c0..b9812afabaa 100644
--- a/addons/web/static/src/core/debug/debug_menu.js
+++ b/addons/web/static/src/core/debug/debug_menu.js
@@ -1,5 +1,7 @@
 /** @odoo-module **/
 
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { DebugMenuBasic } from "@web/core/debug/debug_menu_basic";
 import { useCommand } from "@web/core/commands/command_hook";
 import { useService } from "@web/core/utils/hooks";
@@ -53,3 +55,4 @@ export class DebugMenu extends DebugMenuBasic {
         );
     }
 }
+DebugMenu.components = { Dropdown, DropdownItem };
diff --git a/addons/web/static/src/core/debug/debug_menu.xml b/addons/web/static/src/core/debug/debug_menu.xml
index 104ead6fcbc..341ab46a46a 100644
--- a/addons/web/static/src/core/debug/debug_menu.xml
+++ b/addons/web/static/src/core/debug/debug_menu.xml
@@ -2,10 +2,11 @@
 <templates xml:space="preserve">
 
     <t t-name="web.DebugMenu" owl="1">
-        <Dropdown class="o_debug_manager"
+        <Dropdown class="'o_debug_manager'"
           beforeOpen="getElements"
           position="'bottom-end'"
-          togglerClass="`o-dropdown--narrow ${env.inDialog?'btn btn-link':''}`">
+          togglerClass="`o-dropdown--narrow ${env.inDialog?'btn btn-link':''}`"
+        >
             <t t-set-slot="toggler">
                 <i class="oi oi-large oi-debug"/>
             </t>
@@ -14,8 +15,9 @@
                     t-if="element.type == 'item'"
                     onSelected="element.callback"
                     href="element.href"
-                    t-esc="element.description"
-                />
+                >
+                    <t t-esc="element.description"/>
+                </DropdownItem>
                 <div t-if="element.type == 'separator'" role="separator" class="dropdown-divider"/>
                 <t t-if="element.type == 'component'" t-component="element.Component" t-props="element.props"/>
             </t>
diff --git a/addons/web/static/src/core/debug/debug_menu_basic.js b/addons/web/static/src/core/debug/debug_menu_basic.js
index b81a6f3bdce..f610c3f798f 100644
--- a/addons/web/static/src/core/debug/debug_menu_basic.js
+++ b/addons/web/static/src/core/debug/debug_menu_basic.js
@@ -1,6 +1,8 @@
 /** @odoo-module **/
 
 import { useEnvDebugContext } from "./debug_context";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 
 const { Component } = owl;
 
@@ -13,4 +15,8 @@ export class DebugMenuBasic extends Component {
         };
     }
 }
+DebugMenuBasic.components = {
+    Dropdown,
+    DropdownItem,
+};
 DebugMenuBasic.template = "web.DebugMenu";
diff --git a/addons/web/static/src/core/debug/debug_menu_items.xml b/addons/web/static/src/core/debug/debug_menu_items.xml
index 058135e2483..29f5294cb82 100644
--- a/addons/web/static/src/core/debug/debug_menu_items.xml
+++ b/addons/web/static/src/core/debug/debug_menu_items.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.DebugMenu.SetDefaultFooter" owl="1">
-        <button class="btn btn-secondary" t-on-click="trigger('dialog-closed')">Close</button>
+        <button class="btn btn-secondary" t-on-click="() => this.trigger('dialog-closed')">Close</button>
         <button class="btn btn-secondary" t-on-click="saveDefault">Save default</button>
     </t>
 
diff --git a/addons/web/static/src/core/debug/profiling/profiling_item.js b/addons/web/static/src/core/debug/profiling/profiling_item.js
index a6a1cae7968..20a85f79d6e 100644
--- a/addons/web/static/src/core/debug/profiling/profiling_item.js
+++ b/addons/web/static/src/core/debug/profiling/profiling_item.js
@@ -14,7 +14,7 @@ export class ProfilingItem extends Component {
     changeParam(param, ev) {
         this.profiling.setParam(param, ev.target.value);
     }
-    toggleParam(param, ev) {
+    toggleParam(param) {
         const value = this.profiling.state.params.execution_context_qweb;
         this.profiling.setParam(param, !value);
     }
diff --git a/addons/web/static/src/core/debug/profiling/profiling_item.xml b/addons/web/static/src/core/debug/profiling/profiling_item.xml
index 3ff67c61101..fbc2bb00a5a 100644
--- a/addons/web/static/src/core/debug/profiling/profiling_item.xml
+++ b/addons/web/static/src/core/debug/profiling/profiling_item.xml
@@ -7,18 +7,18 @@
                 <div class="align-self-center">
                     <div t-if="profiling.state.isEnabled" class="alert alert-info py-2 mr-3">Recording...</div>
                     <span class="o_profiling_switch">
-                        <span class="custom-control custom-switch" t-on-click.stop.prevent="profiling.toggleProfiling()">
+                        <span class="custom-control custom-switch" t-on-click.stop.prevent="() => this.profiling.toggleProfiling()">
                             <input type="checkbox" class="custom-control-input" id="enable_profiling" t-att-checked="profiling.state.isEnabled"/>
                             <label class="custom-control-label">Enable profiling</label>
                         </span>
                     </span>
                     <t t-if="profiling.state.isEnabled">
-                        <span class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="profiling.toggleCollector('sql')">
+                        <span class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="() => this.profiling.toggleCollector('sql')">
                             <input type="checkbox" class="custom-control-input" id="profile_sql"
                                 t-att-checked="profiling.isCollectorEnabled('sql')"/>
                             <label class="custom-control-label" for="profile_sql">Record sql</label>
                         </span>
-                        <span class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="profiling.toggleCollector('traces_async')">
+                        <span class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="() => this.profiling.toggleCollector('traces_async')">
                             <input type="checkbox" class="custom-control-input" id="profile_traces_async"
                                 t-att-checked="profiling.isCollectorEnabled('traces_async')"/>
                             <label class="custom-control-label" for="profile_traces_async">Record traces</label>
@@ -27,7 +27,7 @@
                             <div class="input-group-prepend">
                                 <div class="input-group-text">Interval</div>
                             </div>
-                            <select class="profile_param form-control" t-on-change="changeParam('traces_async_interval')">
+                            <select class="profile_param form-control" t-on-change="(ev) => this.changeParam('traces_async_interval', ev)">
                                 <t t-set="interval" t-value="profiling.state.params.traces_async_interval"/>
                                 <option value="">Default</option>
                                 <option value="0.001" t-att-selected="interval === '0.001'">0.001</option>
@@ -36,12 +36,12 @@
                                 <option value="1" t-att-selected="interval === '1'">1</option>
                             </select>
                         </div>
-                        <span t-if="profiling.isCollectorEnabled('sql') || profiling.isCollectorEnabled('traces_async')" class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="toggleParam('execution_context_qweb')">
+                        <span t-if="profiling.isCollectorEnabled('sql') || profiling.isCollectorEnabled('traces_async')" class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="(ev) => this.toggleParam('execution_context_qweb', ev)">
                             <input type="checkbox" class="custom-control-input" id="profile_execution_context_qweb"
                                 t-att-checked="!!profiling.state.params.execution_context_qweb"/>
                             <label class="custom-control-label" for="profile_execution_context_qweb">Add qweb directive context</label>
                         </span>
-                        <span class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="profiling.toggleCollector('qweb')">
+                        <span class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="() => this.profiling.toggleCollector('qweb')">
                             <input type="checkbox" class="custom-control-input" id="profile_qweb"
                                 t-att-checked="profiling.isCollectorEnabled('qweb')"/>
                             <label class="custom-control-label" for="profile_qweb">Record qweb</label>
diff --git a/addons/web/static/src/core/debug/profiling/profiling_service.js b/addons/web/static/src/core/debug/profiling/profiling_service.js
index 2298e6cd469..ab4a5c7c8c5 100644
--- a/addons/web/static/src/core/debug/profiling/profiling_service.js
+++ b/addons/web/static/src/core/debug/profiling/profiling_service.js
@@ -24,7 +24,15 @@ const profilingService = {
             const debugItem = document.querySelector(".o_debug_manager .dropdown-toggle");
             if (state.isEnabled) {
                 recordingIcon = document.createElement("i");
-                recordingIcon.classList.add("o_recording", "badge", "badge-pill", "d-inline", "p-2", "bg-danger", "border");
+                recordingIcon.classList.add(
+                    "o_recording",
+                    "badge",
+                    "badge-pill",
+                    "d-inline",
+                    "p-2",
+                    "bg-danger",
+                    "border"
+                );
                 debugItem.appendChild(recordingIcon);
             } else if (recordingIcon) {
                 debugItem.removeChild(recordingIcon);
@@ -33,7 +41,7 @@ const profilingService = {
         }
 
         if (env.debug) {
-            env.bus.on("WEB_CLIENT_READY", null, updateDebugIcon);
+            env.bus.addEventListener("WEB_CLIENT_READY", updateDebugIcon);
         }
 
         async function setProfiling(params) {
diff --git a/addons/web/static/src/core/dialog/dialog.js b/addons/web/static/src/core/dialog/dialog.js
index 84a06818497..0b595e8660d 100644
--- a/addons/web/static/src/core/dialog/dialog.js
+++ b/addons/web/static/src/core/dialog/dialog.js
@@ -3,7 +3,7 @@
 import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
 import { useActiveElement } from "../ui/ui_service";
 
-const { Component, useRef, useSubEnv, xml } = owl;
+const { Component, useRef, useChildSubEnv, xml } = owl;
 
 export class Dialog extends Component {
     setup() {
@@ -17,7 +17,7 @@ export class Dialog extends Component {
         useHotkey("escape", () => {
             this.close();
         });
-        useSubEnv({ inDialog: true });
+        useChildSubEnv({ inDialog: true });
         this.close = this.close.bind(this);
         this.contentClass = this.constructor.contentClass;
         this.fullscreen = this.constructor.fullscreen;
@@ -47,3 +47,8 @@ Dialog.technical = true;
 Dialog.title = "Odoo";
 Dialog.bodyTemplate = xml`<div/>`;
 Dialog.footerTemplate = "web.DialogFooterDefault";
+Dialog.props = {
+    close: Function,
+    isActive: { optional: true },
+    "*": true,
+};
diff --git a/addons/web/static/src/core/dialog/dialog.xml b/addons/web/static/src/core/dialog/dialog.xml
index 61a3ce9fd4c..82a58ca57ec 100644
--- a/addons/web/static/src/core/dialog/dialog.xml
+++ b/addons/web/static/src/core/dialog/dialog.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.Dialog" owl="1">
-        <div class="o_dialog">
+        <div class="o_dialog" t-att-class="{ o_inactive_modal: !props.isActive }" t-on-dialog-closed="close">
             <div role="dialog" class="modal"
                 tabindex="-1"
                 t-att-class="{ o_technical_modal: technical, o_modal_full: fullscreen }"
diff --git a/addons/web/static/src/core/dialog/dialog_container.js b/addons/web/static/src/core/dialog/dialog_container.js
index 745bbcc771e..19571f5abbf 100644
--- a/addons/web/static/src/core/dialog/dialog_container.js
+++ b/addons/web/static/src/core/dialog/dialog_container.js
@@ -6,7 +6,7 @@ const { Component, xml } = owl;
 
 export class DialogContainer extends Component {
     setup() {
-        this.props.bus.on("UPDATE", this, this.render);
+        this.props.bus.addEventListener("UPDATE", this.render.bind(this));
     }
 
     close(id) {
@@ -23,16 +23,18 @@ export class DialogContainer extends Component {
     }
 }
 DialogContainer.components = { ErrorHandler, NotUpdatable };
+//Legacy : The div wrapping the t-foreach, is placed to avoid owl to delete non-owl dialogs.
+//This div can be removed after removing all legacy dialogs.
 DialogContainer.template = xml`
     <div class="o_dialog_container" t-att-class="{'modal-open': Object.keys(props.dialogs).length > 0}">
-      <t t-foreach="Object.values(props.dialogs)" t-as="dialog" t-key="dialog.id">
-        <NotUpdatable>
-            <ErrorHandler onError="(error) => this.handleError(error, dialog.id)">
-                <t t-component="dialog.class" t-props="dialog.props"
-                    t-on-dialog-closed="dialog.props.close()" 
-                    t-att-class="{o_inactive_modal: !dialog_last}"/>
-            </ErrorHandler>
-        </NotUpdatable>
-      </t>
+        <div>
+            <t t-foreach="Object.values(props.dialogs)" t-as="dialog" t-key="dialog.id">
+                <NotUpdatable>
+                    <ErrorHandler onError="(error) => this.handleError(error, dialog.id)">
+                        <t t-component="dialog.class" t-props="dialog.props" isActive="dialog_last"/>
+                    </ErrorHandler>
+                </NotUpdatable>
+            </t>
+        </div>
     </div>
-    `;
+`;
diff --git a/addons/web/static/src/core/dropdown/dropdown.js b/addons/web/static/src/core/dropdown/dropdown.js
index a5a65f0972c..b9fd9724d67 100644
--- a/addons/web/static/src/core/dropdown/dropdown.js
+++ b/addons/web/static/src/core/dropdown/dropdown.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { useBus, useEffect, useService } from "@web/core/utils/hooks";
+import { useBus, useService } from "@web/core/utils/hooks";
 import { usePosition } from "../position/position_hook";
 import { useDropdownNavigation } from "./dropdown_navigation_hook";
 import { localization } from "../l10n/localization";
@@ -8,12 +8,12 @@ import { localization } from "../l10n/localization";
 const {
     Component,
     EventBus,
-    QWeb,
     onWillStart,
+    useEffect,
     useExternalListener,
     useRef,
     useState,
-    useSubEnv,
+    useChildSubEnv,
 } = owl;
 
 const DIRECTION_CARET_CLASS = {
@@ -59,7 +59,9 @@ export class Dropdown extends Component {
             // Close on outside click listener
             useExternalListener(window, "click", this.onWindowClicked);
             // Listen to all dropdowns state changes
-            useBus(Dropdown.bus, "state-changed", this.onDropdownStateChanged);
+            useBus(Dropdown.bus, "state-changed", ({ detail }) =>
+                this.onDropdownStateChanged(detail)
+            );
         }
 
         // Set up UI active element related behavior ---------------------------
@@ -75,7 +77,7 @@ export class Dropdown extends Component {
 
         // Set up nested dropdowns ---------------------------------------------
         this.parentDropdown = this.env[DROPDOWN];
-        useSubEnv({
+        useChildSubEnv({
             [DROPDOWN]: {
                 close: this.close.bind(this),
                 closeAllParents: () => {
@@ -273,6 +275,10 @@ export class Dropdown extends Component {
 }
 Dropdown.bus = new EventBus();
 Dropdown.props = {
+    class: {
+        type: String,
+        optional: true,
+    },
     toggler: {
         type: String,
         optional: true,
@@ -314,7 +320,9 @@ Dropdown.props = {
         type: String,
         optional: true,
     },
+    slots: {
+        type: Object,
+        optional: true,
+    },
 };
 Dropdown.template = "web.Dropdown";
-
-QWeb.registerComponent("Dropdown", Dropdown);
diff --git a/addons/web/static/src/core/dropdown/dropdown.xml b/addons/web/static/src/core/dropdown/dropdown.xml
index d0a98d9d2ec..611852f3f0a 100644
--- a/addons/web/static/src/core/dropdown/dropdown.xml
+++ b/addons/web/static/src/core/dropdown/dropdown.xml
@@ -4,13 +4,20 @@
   <t t-name="web.Dropdown" owl="1">
     <div
       class="o-dropdown dropdown"
-      t-att-class="{ show: state.open, 'o-dropdown--no-caret': !parentDropdown }"
-      t-attf-class="{{ directionCaretClass || '' }}"
+      t-att-class="props.class"
+      t-attf-class="
+        {{ directionCaretClass || ''}}
+        {{ state.open ? 'show' : ''}}
+        {{ !parentDropdown ? 'o-dropdown--no-caret' : '' }}
+      "
     >
       <button
         t-if="props.toggler !== 'parent'"
         class="dropdown-toggle"
-        t-attf-class="{{props.togglerClass || ''}} {{parentDropdown ? 'dropdown-item' : ''}}"
+        t-attf-class="
+          {{props.togglerClass || ''}}
+          {{parentDropdown ? 'dropdown-item' : ''}}
+        "
         t-on-click="onTogglerClick"
         t-on-mouseenter="onTogglerMouseEnter"
         t-att-title="props.title"
@@ -20,7 +27,12 @@
       >
         <t t-slot="toggler" />
       </button>
-      <div t-if="state.open" class="o-dropdown--menu dropdown-menu d-block" t-att-class="props.menuClass" t-ref="menuRef">
+      <div
+        t-if="state.open"
+        class="o-dropdown--menu dropdown-menu d-block"
+        t-att-class="props.menuClass"
+        t-ref="menuRef"
+      >
         <t t-slot="default" />
       </div>
     </div>
diff --git a/addons/web/static/src/core/dropdown/dropdown_item.js b/addons/web/static/src/core/dropdown/dropdown_item.js
index c7521b740b9..d904df432b0 100644
--- a/addons/web/static/src/core/dropdown/dropdown_item.js
+++ b/addons/web/static/src/core/dropdown/dropdown_item.js
@@ -1,7 +1,7 @@
 /** @odoo-module **/
 import { DROPDOWN } from "./dropdown";
 
-const { Component, QWeb } = owl;
+const { Component } = owl;
 
 /**
  * @enum {string}
@@ -12,19 +12,6 @@ const ParentClosingMode = {
     AllParents: "all",
 };
 
-/**
- * @typedef DropdownItemSelectedEventDetail
- * @property {*} payload
- * @property {Object} dropdownClosingRequest
- * @property {boolean} dropdownClosingRequest.isFresh
- * @property {ParentClosingMode} dropdownClosingRequest.mode
- *
- * @typedef {CustomEvent<DropdownItemSelectedEventDetail>} DropdownItemSelectedEvent
- */
-
-/**
- * @extends Component
- */
 export class DropdownItem extends Component {
     /**
      * Tells the parent dropdown that an item was selected and closes the
@@ -71,6 +58,10 @@ DropdownItem.props = {
         type: Function,
         optional: true,
     },
+    class: {
+        type: [String, Object],
+        optional: true,
+    },
     parentClosingMode: {
         type: ParentClosingMode,
         optional: true,
@@ -83,6 +74,10 @@ DropdownItem.props = {
         type: String,
         optional: true,
     },
+    slots: {
+        type: Object,
+        optional: true,
+    },
     title: {
         type: String,
         optional: true,
@@ -95,5 +90,3 @@ DropdownItem.props = {
 DropdownItem.defaultProps = {
     parentClosingMode: ParentClosingMode.AllParents,
 };
-
-QWeb.registerComponent("DropdownItem", DropdownItem);
diff --git a/addons/web/static/src/core/dropdown/dropdown_item.xml b/addons/web/static/src/core/dropdown/dropdown_item.xml
index c25ecec73e1..6dc718b8e0c 100644
--- a/addons/web/static/src/core/dropdown/dropdown_item.xml
+++ b/addons/web/static/src/core/dropdown/dropdown_item.xml
@@ -6,6 +6,7 @@
       t-tag="props.href ? 'a' : 'span'"
       t-att-href="props.href"
       class="dropdown-item"
+      t-att-class="props.class"
       t-on-click="onClick"
       t-att-title="props.title"
       t-att-data-hotkey="props.hotkey"
diff --git a/addons/web/static/src/core/dropdown/dropdown_navigation_hook.js b/addons/web/static/src/core/dropdown/dropdown_navigation_hook.js
index db2571ba7c8..29eebd7b343 100644
--- a/addons/web/static/src/core/dropdown/dropdown_navigation_hook.js
+++ b/addons/web/static/src/core/dropdown/dropdown_navigation_hook.js
@@ -1,11 +1,11 @@
 /** @odoo-module */
 
-import { useEffect, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { browser } from "../browser/browser";
 import { localization } from "@web/core/l10n/localization";
 import { scrollTo } from "../utils/scrolling";
 
-const { useComponent, useRef } = owl;
+const { useComponent, useEffect, useRef } = owl;
 
 /**
  * @typedef {{
diff --git a/addons/web/static/src/core/effects/effect_container.js b/addons/web/static/src/core/effects/effect_container.js
index 5fa9c83d0d3..61a663e015e 100644
--- a/addons/web/static/src/core/effects/effect_container.js
+++ b/addons/web/static/src/core/effects/effect_container.js
@@ -1,14 +1,17 @@
 /** @odoo-module **/
 
-const { Component, xml } = owl;
+const { Component, xml, onWillDestroy } = owl;
 
 export class EffectContainer extends Component {
     setup() {
         this.effect = null;
-        this.props.bus.on("UPDATE", this, (effect) => {
-            this.effect = effect;
+        const listenerRef = this.props.bus.addEventListener("UPDATE", (ev) => {
+            this.effect = ev.detail;
             this.render();
         });
+        onWillDestroy(() => {
+            this.props.bus.removeEventListener("UPDATE", listenerRef);
+        });
     }
     removeEffect() {
         this.effect = null;
diff --git a/addons/web/static/src/core/effects/effect_service.js b/addons/web/static/src/core/effects/effect_service.js
index aa8f46801e5..a18e55530f7 100644
--- a/addons/web/static/src/core/effects/effect_service.js
+++ b/addons/web/static/src/core/effects/effect_service.js
@@ -4,7 +4,7 @@ import { registry } from "../registry";
 import { EffectContainer } from "./effect_container";
 import { RainbowMan } from "./rainbow_man";
 
-const { Component, EventBus } = owl;
+const { EventBus } = owl;
 
 const effectRegistry = registry.category("effects");
 
@@ -25,8 +25,6 @@ const effectRegistry = registry.category("effects");
  *    Can be a string representation of html (prefer component if you want interactions in the DOM)
  * @param {string} [params.img_url="/web/static/img/smile.svg"]
  *    The url of the image to display inside the rainbow
- * @param {boolean} [params.messageIsHtml=false]
- *    Set to true if the message encodes html, s.t. it will be correctly inserted into the DOM.
  * @param {"slow"|"medium"|"fast"|"no"} [params.fadeout="medium"]
  *    Delay for rainbowman to disappear
  *    'fast' will make rainbowman dissapear quickly
@@ -58,7 +56,6 @@ function rainbowMan(env, params = {}) {
             imgUrl: params.img_url || "/web/static/img/smile.svg",
             fadeout: params.fadeout || "medium",
             message,
-            messageIsHtml: params.messageIsHtml || false,
             Component: params.Component,
             props: params.props,
         };
diff --git a/addons/web/static/src/core/effects/rainbow_man.js b/addons/web/static/src/core/effects/rainbow_man.js
index 6cb0ad20825..2ab24e12695 100644
--- a/addons/web/static/src/core/effects/rainbow_man.js
+++ b/addons/web/static/src/core/effects/rainbow_man.js
@@ -1,9 +1,8 @@
 /** @odoo-module **/
 
 import { browser } from "@web/core/browser/browser";
-import { useEffect } from "@web/core/utils/hooks";
 
-const { Component, useExternalListener } = owl;
+const { Component, useEffect, useExternalListener } = owl;
 
 /**
  * @typedef Common
@@ -16,7 +15,6 @@ const { Component, useExternalListener } = owl;
  *
  * @typedef Simple
  * @property {string} message Message to be displayed on rainbowman card
- * @property {boolean} [messageIsHtml=false]
  *
  * @typedef Custom
  * @property {Component} Component
diff --git a/addons/web/static/src/core/effects/rainbow_man.xml b/addons/web/static/src/core/effects/rainbow_man.xml
index cf38ce7df0a..5011597a305 100644
--- a/addons/web/static/src/core/effects/rainbow_man.xml
+++ b/addons/web/static/src/core/effects/rainbow_man.xml
@@ -9,7 +9,7 @@
                 <path d="M310,170a140,140,0,0,0-280,0" style="stroke:#80D8FF;"/>
                 <path d="M330,170a160,160,0,0,0-320,0" style="stroke:#c794ba;"/>
             </svg>
-            <div class="o_reward_stars" t-foreach="[1, 2, 3, 4]" t-as="star">
+            <div class="o_reward_stars" t-foreach="[1, 2, 3, 4]" t-as="star" t-key="star_index">
                 <t t-call="web.RainbowMan.Star">
                     <t t-set="class" t-value="star"/>
                 </t>
@@ -36,8 +36,7 @@
                         <div class="o_reward_msg_card">
                             <div class="o_reward_msg_content">
                                 <t t-if="!props.Component">
-                                    <t t-if="props.messageIsHtml" t-raw="props.message" />
-                                    <t t-else="" t-esc="props.message" />
+                                    <t t-out="props.message"/>
                                 </t>
                                 <t t-else="" t-component="props.Component" t-props="props.props"/>
                             </div>
diff --git a/addons/web/static/src/core/errors/error_dialogs.xml b/addons/web/static/src/core/errors/error_dialogs.xml
index 0d2c6e6c7b3..fdef9962057 100644
--- a/addons/web/static/src/core/errors/error_dialogs.xml
+++ b/addons/web/static/src/core/errors/error_dialogs.xml
@@ -50,7 +50,7 @@
       </div>
 
 
-      <button class="btn btn-link" t-on-click="state.showTraceback = !state.showTraceback">See details</button>
+      <button class="btn btn-link" t-on-click="() => { state.showTraceback = !state.showTraceback }">See details</button>
       <div t-if="state.showTraceback and (props.name or props.message)" class="alert clearfix" style="background-color:#ececec;" role="alert">
         <code t-if="props.name" t-esc="props.name"></code>
         <p t-if="props.message" t-esc="props.message"></p>
diff --git a/addons/web/static/src/core/file_input/file_input.js b/addons/web/static/src/core/file_input/file_input.js
index 93a79490732..5a05618d98d 100644
--- a/addons/web/static/src/core/file_input/file_input.js
+++ b/addons/web/static/src/core/file_input/file_input.js
@@ -2,7 +2,7 @@
 
 import { useService } from "@web/core/utils/hooks";
 
-const { Component, QWeb, useRef } = owl;
+const { Component, useRef } = owl;
 
 /**
  * Custom file input
@@ -73,6 +73,7 @@ FileInput.defaultProps = {
     accepted_file_extensions: "*",
     action: "/web/binary/upload",
     multi_upload: false,
+    onUpload: () => {},
 };
 FileInput.props = {
     accepted_file_extensions: { type: String, optional: 1 },
@@ -80,7 +81,7 @@ FileInput.props = {
     id: { type: Number, optional: 1 },
     model: { type: String, optional: 1 },
     multi_upload: { type: Boolean, optional: 1 },
+    onUpload: { type: Function, optional: 1 },
+    slots: { type: Object, optional: 1 },
 };
 FileInput.template = "web.FileInput";
-
-QWeb.registerComponent("FileInput", FileInput);
diff --git a/addons/web/static/src/core/file_input/file_input.xml b/addons/web/static/src/core/file_input/file_input.xml
index aec7608927d..63618f016c1 100644
--- a/addons/web/static/src/core/file_input/file_input.xml
+++ b/addons/web/static/src/core/file_input/file_input.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.FileInput" owl="1">
-        <span class="o_file_input" aria-atomic="true">
+        <span class="o_file_input" aria-atomic="true" t-on-uploaded="(ev) => props.onUpload(ev.detail.files)">
             <span class="o_file_input_trigger" t-on-click.prevent="onTriggerClicked">
                 <t t-slot="default">
                     <button class="btn btn-primary">Choose File</button>
diff --git a/addons/web/static/src/core/hotkeys/hotkey_hook.js b/addons/web/static/src/core/hotkeys/hotkey_hook.js
index 96eca0ef296..ced0a7dee92 100644
--- a/addons/web/static/src/core/hotkeys/hotkey_hook.js
+++ b/addons/web/static/src/core/hotkeys/hotkey_hook.js
@@ -1,6 +1,8 @@
 /** @odoo-module **/
 
-import { useEffect, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
+
+const { useEffect } = owl;
 
 /**
  * This hook will register/unregister the given registration
diff --git a/addons/web/static/src/core/l10n/localization_service.js b/addons/web/static/src/core/l10n/localization_service.js
index 994ef5b5a44..15c04bb904d 100644
--- a/addons/web/static/src/core/l10n/localization_service.js
+++ b/addons/web/static/src/core/l10n/localization_service.js
@@ -7,14 +7,9 @@ import { localization } from "./localization";
 import { translatedTerms, _t } from "./translation";
 import { session } from "@web/session";
 
-const { config } = owl;
-
 export const localizationService = {
     dependencies: ["user"],
     start: async (env, { user }) => {
-        // add "data-toolip" to the list of translatable attributes in owl templates
-        config.translatableAttributes.push("data-tooltip");
-
         const cacheHashes = session.cache_hashes || {};
         const translationsHash = cacheHashes.translations || new Date().getTime().toString();
         const lang = user.lang || null;
@@ -42,7 +37,6 @@ export const localizationService = {
 
         Object.setPrototypeOf(translatedTerms, terms);
         env._t = _t;
-        env.qweb.translateFn = _t;
 
         // Setup lang inside luxon. The locale codes received from the server contain "_", whereas
         // the Intl codes use "-" (Unicode BCP 47). There's only one exception, which is locale
diff --git a/addons/web/static/src/core/notifications/notification.js b/addons/web/static/src/core/notifications/notification.js
index a9609be4cf1..3567f653725 100644
--- a/addons/web/static/src/core/notifications/notification.js
+++ b/addons/web/static/src/core/notifications/notification.js
@@ -1,18 +1,8 @@
 /** @odoo-module **/
 
-const { Component, onWillUnmount } = owl;
+const { Component } = owl;
 
 export class Notification extends Component {
-    setup() {
-        if (this.props.onClose) {
-            onWillUnmount(() => this.props.onClose());
-        }
-    }
-
-    shouldUpdate() {
-        return false;
-    }
-
     get className() {
         let className;
         switch (this.props.type) {
@@ -48,7 +38,6 @@ Notification.props = {
         optional: true,
         validate: (t) => ["warning", "danger", "success", "info"].includes(t),
     },
-    messageIsHtml: { type: Boolean, optional: true },
     className: { type: String, optional: true },
     buttons: {
         type: Array,
@@ -61,12 +50,12 @@ Notification.props = {
                 onClick: Function,
             },
         },
+        optional: true,
     },
-    onClose: { type: Function, optional: true },
+    close: { type: Function },
 };
 Notification.defaultProps = {
     buttons: [],
     className: "",
-    messageIsHtml: false,
     type: "warning",
 };
diff --git a/addons/web/static/src/core/notifications/notification.xml b/addons/web/static/src/core/notifications/notification.xml
index 577ab48ad3b..aa45770f6b0 100644
--- a/addons/web/static/src/core/notifications/notification.xml
+++ b/addons/web/static/src/core/notifications/notification.xml
@@ -6,17 +6,16 @@
         role="alert" aria-live="assertive" aria-atomic="true">
             <div class="o_notification_body">
                 <button type="button" class="close o_notification_close"
-                aria-label="Close" t-on-click="trigger('close')">
+                aria-label="Close" t-on-click="props.close">
                     <span class="d-inline" aria-hidden="true">×</span>
                 </button>
                 <div t-if="props.title" class="font-weight-bold o_notification_title mb-1" t-esc="props.title"/>
                 <div t-if="props.message" class="mr-auto o_notification_content">
-                    <t t-if="props.messageIsHtml" t-raw="props.message"/>
-                    <t t-else="" t-esc="props.message"/>
+                    <t t-out="props.message"/>
                 </div>
                 <div t-if="props.buttons.length" class="mt-2 o_notification_buttons">
-                    <button t-foreach="props.buttons" t-as="button" type="button"
-                    t-attf-class="btn {{button.primary ? 'btn-primary' : 'btn-link'}}" t-on-click="button.onClick()">
+                    <button t-foreach="props.buttons" t-as="button" type="button" t-key="button_index"
+                    t-attf-class="btn {{button.primary ? 'btn-primary' : 'btn-link'}}" t-on-click="button.onClick">
                     <t t-if="button.icon">
                         <i t-if="button.icon.indexOf('fa-') === 0" role="img"
                         t-att-aria-label="button.name" t-att-title="button.name"
diff --git a/addons/web/static/src/core/notifications/notification_container.js b/addons/web/static/src/core/notifications/notification_container.js
index 6f79b272fa1..03ee640d5f2 100644
--- a/addons/web/static/src/core/notifications/notification_container.js
+++ b/addons/web/static/src/core/notifications/notification_container.js
@@ -1,25 +1,22 @@
 /** @odoo-module **/
 
 import { Notification } from "./notification";
+import { Transition } from "@web/core/transition";
 
-const { Component, xml } = owl;
+const { Component, xml, useState } = owl;
 
 export class NotificationContainer extends Component {
     setup() {
-        // this works, but then this component cannot be unmounted, then
-        // remounted. would need a destroyed hook different from willunmount
-        this.props.bus.on("UPDATE", this, this.render);
+        this.notifications = useState(this.props.notifications);
     }
 }
 
 NotificationContainer.template = xml`
     <div class="o_notification_manager">
-        <t t-foreach="props.notifications" t-as="notification" t-key="notification.id">
-            <Notification
-                t-props="notification.props"
-                t-transition="o_notification_fade"
-                t-on-close="notification.close()"
-            />
+        <t t-foreach="notifications" t-as="notification" t-key="notification">
+            <Transition leaveDuration="0" name="'o_notification_fade'" t-slot-scope="transition">
+                <Notification t-props="notification_value.props" className="transition.className"/>
+            </Transition>
         </t>
     </div>`;
-NotificationContainer.components = { Notification };
+NotificationContainer.components = { Notification, Transition };
diff --git a/addons/web/static/src/core/notifications/notification_service.js b/addons/web/static/src/core/notifications/notification_service.js
index 8d42bd26ff3..0bd8154113a 100644
--- a/addons/web/static/src/core/notifications/notification_service.js
+++ b/addons/web/static/src/core/notifications/notification_service.js
@@ -4,7 +4,7 @@ import { browser } from "../browser/browser";
 import { registry } from "../registry";
 import { NotificationContainer } from "./notification_container";
 
-const { EventBus } = owl;
+const { reactive } = owl;
 
 const AUTOCLOSE_DELAY = 4000;
 
@@ -27,12 +27,11 @@ const AUTOCLOSE_DELAY = 4000;
 export const notificationService = {
     start() {
         let notifId = 0;
-        let notifications = [];
-        const bus = new EventBus();
+        const notifications = reactive({});
 
         registry.category("main_components").add("NotificationContainer", {
             Component: NotificationContainer,
-            props: { bus, notifications },
+            props: { notifications },
         });
 
         /**
@@ -41,17 +40,17 @@ export const notificationService = {
          */
         function add(message, options = {}) {
             const id = ++notifId;
-            const props = Object.assign({}, options, { message });
+            const closeFn = () => close(id);
+            const props = Object.assign({}, options, { message, close: closeFn });
             const sticky = props.sticky;
             delete props.sticky;
-            const closeFn = () => close(id);
+            delete props.onClose;
             const notification = {
                 id,
                 props,
-                close: closeFn,
+                onClose: options.onClose,
             };
-            notifications.push(notification);
-            bus.trigger("UPDATE");
+            notifications[id] = notification;
             if (!sticky) {
                 browser.setTimeout(closeFn, AUTOCLOSE_DELAY);
             }
@@ -59,10 +58,12 @@ export const notificationService = {
         }
 
         function close(id) {
-            const index = notifications.findIndex((n) => n.id === id);
-            if (index > -1) {
-                notifications.splice(index, 1);
-                bus.trigger("UPDATE");
+            if (notifications[id]) {
+                const notification = notifications[id];
+                if (notification.onClose) {
+                    notification.onClose();
+                }
+                delete notifications[id];
             }
         }
 
diff --git a/addons/web/static/src/core/pager/pager.js b/addons/web/static/src/core/pager/pager.js
index 90d1857ef07..d562af39d64 100644
--- a/addons/web/static/src/core/pager/pager.js
+++ b/addons/web/static/src/core/pager/pager.js
@@ -27,7 +27,7 @@ export class Pager extends Component {
         this.inputRef = useRef("input");
         useExternalListener(document, "mousedown", this.onClickAway, { capture: true });
 
-        this.forceFocus = useAutofocus();
+        this.forceFocus = useAutofocus("input");
     }
 
     /**
@@ -162,6 +162,6 @@ Pager.props = {
     limit: Number,
     total: Number,
     onUpdate: Function,
-    isEditable: Boolean,
-    withAccessKey: Boolean,
+    isEditable: { type: Boolean, optional: true },
+    withAccessKey: { type: Boolean, optional: true },
 };
diff --git a/addons/web/static/src/core/pager/pager.xml b/addons/web/static/src/core/pager/pager.xml
index b8233fe2386..9745a3d04bd 100644
--- a/addons/web/static/src/core/pager/pager.xml
+++ b/addons/web/static/src/core/pager/pager.xml
@@ -5,7 +5,7 @@
         <nav class="o_pager" aria-label="Pager">
             <span class="o_pager_counter mr-2" t-on-click.stop="">
                 <t t-if="state.isEditing">
-                    <input type="text" class="o_pager_value o_input" t-ref="input" autofocus="" t-att-value="value" t-on-blur="onInputBlur" t-on-change="onInputChange" t-on-keydown.stop="onInputKeydown" />
+                    <input type="text" class="o_pager_value o_input" t-ref="input" t-att-value="value" t-on-blur="onInputBlur" t-on-change="onInputChange" t-on-keydown.stop="onInputKeydown" />
                 </t>
                 <t t-else="">
                     <span class="o_pager_value" t-esc="value" t-on-click="onValueClick" />
@@ -15,8 +15,8 @@
             </span>
             <span class="btn-group" aria-atomic="true">
                 <!-- accesskeys not wanted in X2Many widgets -->
-                <button type="button" class="fa fa-chevron-left btn btn-secondary o_pager_previous px-2 rounded-left" aria-label="Previous" data-tooltip="Previous" tabindex="-1" t-att-data-hotkey="props.withAccessKey ? 'p' : false" t-att-disabled="state.isDisabled or isSinglePage" t-on-click.stop="navigate(-1)" />
-                <button type="button" class="fa fa-chevron-right btn btn-secondary o_pager_next px-2 rounded-right" aria-label="Next" data-tooltip="Next" tabindex="-1" t-att-data-hotkey="props.withAccessKey ? 'n' : false" t-att-disabled="state.isDisabled or isSinglePage" t-on-click.stop="navigate(1)" />
+                <button type="button" class="fa fa-chevron-left btn btn-secondary o_pager_previous px-2 rounded-left" aria-label="Previous" data-tooltip="Previous" tabindex="-1" t-att-data-hotkey="props.withAccessKey ? 'p' : false" t-att-disabled="state.isDisabled or isSinglePage" t-on-click.stop="() => this.navigate(-1)" />
+                <button type="button" class="fa fa-chevron-right btn btn-secondary o_pager_next px-2 rounded-right" aria-label="Next" data-tooltip="Next" tabindex="-1" t-att-data-hotkey="props.withAccessKey ? 'n' : false" t-att-disabled="state.isDisabled or isSinglePage" t-on-click.stop="() => this.navigate(1)" />
             </span>
         </nav>
     </t>
diff --git a/addons/web/static/src/core/popover/popover.js b/addons/web/static/src/core/popover/popover.js
index 2104b612dd6..e6bda39908f 100644
--- a/addons/web/static/src/core/popover/popover.js
+++ b/addons/web/static/src/core/popover/popover.js
@@ -18,6 +18,7 @@ Popover.defaultProps = {
     position: "bottom",
 };
 Popover.props = {
+    close: { type: Function },
     popoverClass: {
         optional: true,
         type: String,
@@ -25,6 +26,14 @@ Popover.props = {
     position: {
         type: String,
         validate: (p) => ["top", "bottom", "left", "right"].includes(p),
+        optional: true,
     },
     target: HTMLElement,
+    slots: {
+        type: Object,
+        optional: true,
+        shape: {
+            default: { optional: true },
+        },
+    },
 };
diff --git a/addons/web/static/src/core/popover/popover.xml b/addons/web/static/src/core/popover/popover.xml
index d734e1279e9..2e37c585027 100644
--- a/addons/web/static/src/core/popover/popover.xml
+++ b/addons/web/static/src/core/popover/popover.xml
@@ -5,6 +5,7 @@
         <div role="tooltip" class="o_popover"
             t-att-class="props.popoverClass"
             t-on-popover-compute="compute"
+            t-on-popover-closed="props.close"
         >
             <t t-slot="default" />
         </div>
diff --git a/addons/web/static/src/core/popover/popover_container.js b/addons/web/static/src/core/popover/popover_container.js
index 041e007452d..38a2a10f5c1 100644
--- a/addons/web/static/src/core/popover/popover_container.js
+++ b/addons/web/static/src/core/popover/popover_container.js
@@ -2,28 +2,26 @@
 
 import { Popover } from "./popover";
 
-const { Component, useExternalListener, useState, xml } = owl;
+const { Component, onMounted, onWillUnmount, useExternalListener, useState, xml } = owl;
 
 class PopoverController extends Component {
     setup() {
         this.state = useState({ displayed: false });
         this.targetObserver = new MutationObserver(this.onTargetMutate.bind(this));
-
         useExternalListener(window, "click", this.onClickAway, { capture: true });
+        onMounted(this.onMounted);
+        onWillUnmount(this.onWillUnmount);
     }
-    mounted() {
+    onMounted() {
         this.targetObserver.observe(this.target.parentElement, { childList: true });
     }
-    willUnmount() {
+    onWillUnmount() {
         this.targetObserver.disconnect();
     }
 
-    shouldUpdate() {
-        return false;
-    }
-
     get popoverProps() {
         return {
+            close: this.props.close,
             target: this.target,
             position: this.props.position,
             popoverClass: this.props.popoverClass,
@@ -57,14 +55,14 @@ PopoverController.defaultProps = {
     closeOnClickAway: true,
 };
 PopoverController.template = xml/*xml*/ `
-    <Popover t-props="popoverProps" t-on-popover-closed="props.close()">
-        <t t-component="props.Component" t-props="props.props" />
+    <Popover t-props="popoverProps">
+        <t t-component="props.Component" t-props="props.props"/>
     </Popover>
 `;
 
 export class PopoverContainer extends Component {
     setup() {
-        this.props.bus.on("UPDATE", this, this.render);
+        this.props.bus.addEventListener("UPDATE", this.render.bind(this));
     }
 }
 PopoverContainer.components = { PopoverController };
diff --git a/addons/web/static/src/core/popover/popover_hook.js b/addons/web/static/src/core/popover/popover_hook.js
index 244201bfefd..2b0dcdb6474 100644
--- a/addons/web/static/src/core/popover/popover_hook.js
+++ b/addons/web/static/src/core/popover/popover_hook.js
@@ -2,7 +2,7 @@
 
 import { useService } from "@web/core/utils/hooks";
 
-const { onWillUnmount, useComponent } = owl;
+const { onWillUnmount, status, useComponent } = owl;
 
 export function usePopover() {
     const removeFns = new Set();
@@ -33,7 +33,7 @@ export function usePopover() {
             const newOptions = Object.create(options);
             newOptions.onClose = function () {
                 removeFns.delete(removeFn);
-                if (options.onClose && component.__owl__.status !== 5 /* DESTROYED */) {
+                if (options.onClose && status(component) !== "destroyed") {
                     options.onClose();
                 }
             };
diff --git a/addons/web/static/src/core/position/position_hook.js b/addons/web/static/src/core/position/position_hook.js
index b5e687f2589..9a0bad10b37 100644
--- a/addons/web/static/src/core/position/position_hook.js
+++ b/addons/web/static/src/core/position/position_hook.js
@@ -1,9 +1,8 @@
 /** @odoo-module */
 
-import { useEffect } from "@web/core/utils/hooks";
 import { throttleForAnimation } from "../utils/timing";
 
-const { onWillUnmount, useComponent, useExternalListener, useRef } = owl;
+const { onWillUnmount, useComponent, useEffect, useExternalListener, useRef } = owl;
 
 /**
  * @typedef {{
diff --git a/addons/web/static/src/core/registry.js b/addons/web/static/src/core/registry.js
index 3798b2b4e32..646ccf4a179 100644
--- a/addons/web/static/src/core/registry.js
+++ b/addons/web/static/src/core/registry.js
@@ -29,7 +29,7 @@ export class Registry extends EventBus {
         this.elements = null;
         this.entries = null;
 
-        this.on("UPDATE", this, () => {
+        this.addEventListener("UPDATE", () => {
             this.elements = null;
             this.entries = null;
         });
diff --git a/addons/web/static/src/core/transition.js b/addons/web/static/src/core/transition.js
new file mode 100644
index 00000000000..d8b4040fb6f
--- /dev/null
+++ b/addons/web/static/src/core/transition.js
@@ -0,0 +1,138 @@
+/** @odoo-module */
+import { browser } from "./browser/browser";
+
+const { Component, useState, useEffect, xml, onWillUpdateProps, useComponent } = owl;
+
+// Allows to disable transitions globally, useful for testing (and maybe for
+// a reduced motion setting in the future?)
+export const config = {
+    disabled: false,
+};
+/**
+ * Creates a transition to be used within the current component. Usage:
+ *  --- in JS:
+ *  this.transition = useTransition({ name: "myClass" });
+ *  --- in XML:
+ *  <div t-if="transition.shouldMount" t-att-class="transition.class"/>
+ *
+ * @param {Object} options
+ * @param {string} options.name the prefix to use for the transition classes
+ * @param {boolean} [options.onOff] whether to start the transition in the on or
+ *  off state
+ * @param {number} [options.leaveDuration] the leaveDuration of the transition
+ * @param {Function} [options.onLeave] a function that will be called when the
+ *  element will be removed in the next render cycle
+ * @returns {{ shouldMount, class }} an object containing two fields that
+ *  indicate whether an element on which the transition is applied should be
+ *  mounted and the class string that should be put on it
+ */
+export function useTransition({
+    name,
+    initialVisibility = true,
+    leaveDuration = 500,
+    onLeave = () => {},
+}) {
+    const component = useComponent();
+    const state = useState({
+        shouldMount: initialVisibility,
+        stage: initialVisibility ? "enter" : "leave",
+    });
+
+    if (config.disabled) {
+        return {
+            get shouldMount() {
+                return state.shouldMount;
+            },
+            set shouldMount(val) {
+                state.shouldMount = val;
+            },
+            get className() {
+                return `${name} ${name}-enter-active`;
+            },
+            get stage() {
+                return "enter-active";
+            },
+        };
+    }
+    // We need to allow the element to be mounted in the enter state so that it
+    // will get the transition when we activate the enter-active class. This
+    // onNextPatch allows us to activate the class that we want the next time
+    // the component is patched.
+    let onNextPatch = null;
+    useEffect(() => {
+        if (onNextPatch) {
+            onNextPatch();
+            onNextPatch = null;
+        }
+    });
+
+    let prevState, timer;
+    const transition = {
+        get shouldMount() {
+            return state.shouldMount;
+        },
+        set shouldMount(newState) {
+            if (newState === prevState) {
+                return;
+            }
+            browser.clearTimeout(timer);
+            prevState = newState;
+            // when true - transition from enter to enter-active
+            // when false - transition from enter-active to leave, unmount after leaveDuration
+            if (newState) {
+                state.stage = "enter";
+                state.shouldMount = true;
+                // force a render here so that we get a patch even if the state didn't change
+                component.render();
+                onNextPatch = () => {
+                    state.stage = "enter-active";
+                };
+            } else {
+                state.stage = "leave";
+                timer = browser.setTimeout(() => {
+                    state.shouldMount = false;
+                    onLeave();
+                }, leaveDuration);
+            }
+        },
+        get className() {
+            return `${name} ${name}-${state.stage}`;
+        },
+        get stage() {
+            return state.stage;
+        },
+    };
+    transition.shouldMount = initialVisibility;
+    return transition;
+}
+
+/**
+ * A higher order component that handles a transition to be used within its
+ * default slot. Generally, the useTransition hook is simpler to use, but the
+ * HOC has the advantage that it can be spawned as needed during the render (eg:
+ * in a t-foreach loop) without knowing at setup-time how many transitions need
+ * to be created. @see useTransition
+ */
+export class Transition extends Component {
+    setup() {
+        const { visible, leaveDuration, name, onLeave } = this.props;
+        this.transition = useTransition({
+            initialVisibility: visible,
+            leaveDuration,
+            name,
+            onLeave,
+        });
+        onWillUpdateProps(({ visible = true }) => {
+            this.transition.shouldMount = visible;
+        });
+    }
+}
+
+Transition.template = xml`<t t-slot="default" t-if="transition.shouldMount" className="transition.className"/>`;
+Transition.props = {
+    name: String,
+    visible: { type: Boolean, optional: true },
+    leaveDuration: { type: Number, optional: true },
+    onLeave: { type: Function, optional: true },
+    slots: Object,
+};
diff --git a/addons/web/static/src/core/ui/block_ui.js b/addons/web/static/src/core/ui/block_ui.js
index 43de212d6cf..20aec7d7694 100644
--- a/addons/web/static/src/core/ui/block_ui.js
+++ b/addons/web/static/src/core/ui/block_ui.js
@@ -42,8 +42,8 @@ export class BlockUI extends Component {
             line2: "",
         });
 
-        this.props.bus.on("BLOCK", this, this.block);
-        this.props.bus.on("UNBLOCK", this, this.unblock);
+        this.props.bus.addEventListener("BLOCK", this.block.bind(this));
+        this.props.bus.addEventListener("UNBLOCK", this.unblock.bind(this));
     }
 
     replaceMessage(index) {
diff --git a/addons/web/static/src/core/ui/ui_service.js b/addons/web/static/src/core/ui/ui_service.js
index d50e6bdd938..11cbe1ea8bc 100644
--- a/addons/web/static/src/core/ui/ui_service.js
+++ b/addons/web/static/src/core/ui/ui_service.js
@@ -1,12 +1,12 @@
 /** @odoo-module **/
 
-import { useEffect, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { registry } from "@web/core/registry";
 import { debounce } from "@web/core/utils/timing";
 import { BlockUI } from "./block_ui";
 import { browser } from "@web/core/browser/browser";
 
-const { Component, EventBus, useRef } = owl;
+const { EventBus, useComponent, useEffect, useRef } = owl;
 
 export const SIZES = { XS: 0, VSM: 1, SM: 2, MD: 3, LG: 4, XL: 5, XXL: 6 };
 
@@ -23,13 +23,15 @@ export const SIZES = { XS: 0, VSM: 1, SM: 2, MD: 3, LG: 4, XL: 5, XXL: 6 };
  */
 export function useActiveElement(refName = null) {
     const uiService = useService("ui");
-    const owner = refName ? useRef(refName) : Component.current;
+    const owner = refName ? useRef(refName) : useComponent();
     useEffect(
-        () => {
-            uiService.activateElement(owner.el);
-            return () => uiService.deactivateElement(owner.el);
+        (el) => {
+            if (el) {
+                uiService.activateElement(el);
+                return () => uiService.deactivateElement(el);
+            }
         },
-        () => []
+        () => [owner.el]
     );
 }
 
diff --git a/addons/web/static/src/core/utils/components.js b/addons/web/static/src/core/utils/components.js
index 33ef2610dde..9d9915bfb99 100644
--- a/addons/web/static/src/core/utils/components.js
+++ b/addons/web/static/src/core/utils/components.js
@@ -1,19 +1,22 @@
 /** @odoo-module **/
 
-const { Component, xml } = owl;
+const { Component, onError, useComponent, xml } = owl;
 
 export class NotUpdatable extends Component {
-    shouldUpdate() {
-        return false;
+    setup() {
+        const node = useComponent().__owl__;
+        node.patch = () => {};
+        node.updateAndRender = () => Promise.resolve();
     }
 }
 NotUpdatable.template = xml`<t t-slot="default" />`;
 
 export class ErrorHandler extends Component {
-    catchError(error) {
-        if (this.props.onError) {
+    setup() {
+        onError((error) => {
             this.props.onError(error);
-        }
+        });
     }
 }
 ErrorHandler.template = xml`<t t-slot="default" />`;
+ErrorEvent.props = ["onError"];
diff --git a/addons/web/static/src/core/utils/hooks.js b/addons/web/static/src/core/utils/hooks.js
index d983ff8c0f5..2e51adb1f14 100644
--- a/addons/web/static/src/core/utils/hooks.js
+++ b/addons/web/static/src/core/utils/hooks.js
@@ -2,7 +2,7 @@
 
 import { SERVICES_METADATA } from "@web/env";
 
-const { onMounted, onPatched, onWillPatch, onWillUnmount, useComponent } = owl;
+const { status, useComponent, useEffect, useRef } = owl;
 
 /**
  * This file contains various custom hooks.
@@ -24,37 +24,36 @@ const { onMounted, onPatched, onWillPatch, onWillUnmount, useComponent } = owl;
 // -----------------------------------------------------------------------------
 
 /**
- * Focus a given selector as soon as it appears in the DOM and if it was not
- * displayed before. If the selected target is an input|textarea, set the selection
+ * Focus a dom element with provided ref as soon as it appears in the DOM and if it was not
+ * displayed before. If it is an input|textarea, set the selection
  * at the end.
- *
- * @param {Object} [params]
- * @param {string} [params.selector='autofocus'] default: select the first element
- *                 with an `autofocus` attribute.
+ * @param {string} [refName="autofocus"]
  * @returns {Function} function that forces the focus on the next update if visible.
  */
-export function useAutofocus(params = {}) {
+export function useAutofocus(refName = "autofocus") {
     const comp = useComponent();
     // Prevent autofocus in mobile
     if (comp.env.isSmall) {
         return () => {};
     }
-    const selector = params.selector || "[autofocus]";
+    // LEGACY
+    if (comp.env.device && comp.env.device.isMobileDevice) {
+        return () => {};
+    }
+    // LEGACY
+    let ref = useRef(refName);
     let forceFocusCount = 0;
     useEffect(
-        function autofocus() {
-            const target = comp.el.querySelector(selector);
-            if (target) {
-                target.focus();
-                if (["INPUT", "TEXTAREA"].includes(target.tagName)) {
-                    const inputEl = target;
-                    inputEl.selectionStart = inputEl.selectionEnd = inputEl.value.length;
+        (el) => {
+            if (el) {
+                el.focus();
+                if (["INPUT", "TEXTAREA"].includes(el.tagName)) {
+                    el.selectionStart = el.selectionEnd = el.value.length;
                 }
             }
         },
-        () => [forceFocusCount]
+        () => [ref.el, forceFocusCount]
     );
-
     return function focusOnUpdate() {
         forceFocusCount++; // force the effect to rerun on next patch
     };
@@ -75,62 +74,14 @@ export function useBus(bus, eventName, callback) {
     const component = useComponent();
     useEffect(
         () => {
-            bus.on(eventName, component, callback);
-            return () => bus.off(eventName, component);
+            const listener = callback.bind(component);
+            bus.addEventListener(eventName, listener);
+            return () => bus.removeEventListener(eventName, listener);
         },
         () => []
     );
 }
 
-// -----------------------------------------------------------------------------
-// useEffect
-// -----------------------------------------------------------------------------
-
-const NO_OP = () => {};
-/**
- * @callback Effect
- * @param {...any} dependencies the dependencies computed by computeDependencies
- * @returns {void|(()=>void)} a cleanup function that reverses the side
- *      effects of the effect callback.
- */
-
-/**
- * This hook will run a callback when a component is mounted and patched, and
- * will run a cleanup function before patching and before unmounting the
- * the component.
- *
- * @param {Effect} effect the effect to run on component mount and/or patch
- * @param {()=>any[]} [computeDependencies=()=>[NaN]] a callback to compute
- *      dependencies that will decide if the effect needs to be cleaned up and
- *      run again. If the dependencies did not change, the effect will not run
- *      again. The default value returns an array containing only NaN because
- *      NaN !== NaN, which will cause the effect to rerun on every patch.
- */
-export function useEffect(effect, computeDependencies = () => [NaN]) {
-    let cleanup, dependencies;
-    onMounted(() => {
-        dependencies = computeDependencies();
-        cleanup = effect(...dependencies) || NO_OP;
-    });
-
-    let shouldReapplyOnPatch = false;
-    onWillPatch(() => {
-        const newDeps = computeDependencies();
-        shouldReapplyOnPatch = newDeps.some((val, i) => val !== dependencies[i]);
-        if (shouldReapplyOnPatch) {
-            cleanup();
-            dependencies = newDeps;
-        }
-    });
-    onPatched(() => {
-        if (shouldReapplyOnPatch) {
-            cleanup = effect(...dependencies) || NO_OP;
-        }
-    });
-
-    onWillUnmount(() => cleanup());
-}
-
 // -----------------------------------------------------------------------------
 // useListener
 // -----------------------------------------------------------------------------
@@ -157,7 +108,7 @@ export function useEffect(effect, computeDependencies = () => [NaN]) {
  *
  *   useListener('click', 'button', () => { console.log('clicked'); });
  *
- * Note: components that alter the event's target (e.g. Portal) are not
+ * Note: components that alter the event's target and the t-portal directive are not
  * expected to behave as expected with event delegation.
  *
  * @param {string} eventName the name of the event
@@ -215,11 +166,11 @@ export function useListener(eventName, querySelector, handler, options = {}) {
 
 function _protectMethod(component, caller, fn) {
     return async (...args) => {
-        if (component.__owl__.status === 5 /* DESTROYED */) {
+        if (status(component) === "destroyed") {
             throw new Error("Component is destroyed");
         }
         const result = await fn.call(caller, ...args);
-        return component.__owl__.status === 5 ? new Promise(() => {}) : result;
+        return status(component) === "destroyed" ? new Promise(() => {}) : result;
     };
 }
 
@@ -250,17 +201,3 @@ export function useService(serviceName) {
     }
     return service;
 }
-
-/**
- * Executes "callback" when the component is being destroyed
- * @param  {Function} callback
- */
-export function onDestroyed(callback) {
-    const component = useComponent();
-    const _destroy = component.__destroy;
-    component.__destroy = (...args) => {
-        _destroy.call(component, ...args);
-        // callback is called after super to guarantee the component is actually destroyed
-        callback();
-    };
-}
diff --git a/addons/web/static/src/core/utils/render.js b/addons/web/static/src/core/utils/render.js
new file mode 100644
index 00000000000..42820e40b24
--- /dev/null
+++ b/addons/web/static/src/core/utils/render.js
@@ -0,0 +1,23 @@
+/** @odoo-module **/
+
+const { blockDom } = owl;
+
+/**
+ * loads a template using getTemplate, and render the template immediately;
+ *
+ * @param {string} template
+ * @param {Object} context
+ * @returns string: the html of the template
+ */
+
+export function renderToString(template, context = {}) {
+    const app = renderToString.app;
+    if (!app) {
+        throw new Error("an app must be configured before using renderToString");
+    }
+    const templateFn = app.getTemplate(template);
+    const bdom = templateFn(context, {});
+    const div = document.createElement("div");
+    blockDom.mount(bdom, div);
+    return div.innerHTML;
+}
diff --git a/addons/web/static/src/core/utils/strings.js b/addons/web/static/src/core/utils/strings.js
index 3d6caa563a6..879355ccebc 100644
--- a/addons/web/static/src/core/utils/strings.js
+++ b/addons/web/static/src/core/utils/strings.js
@@ -1,5 +1,24 @@
 /** @odoo-module **/
 
+/**
+ * Escapes a string for HTML.
+ * Note that it doesn't work for escaping node attributes.
+ *
+ * @param {string | number} [str] the string to escape
+ * @returns an escaped string
+ */
+export function escape(str) {
+    if (str === undefined) {
+        return "";
+    }
+    if (typeof str === "number") {
+        return String(str);
+    }
+    const p = document.createElement("p");
+    p.textContent = str;
+    return p.innerHTML;
+}
+
 /**
  * Escapes a string to use as a RegExp.
  * @url https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping
@@ -89,6 +108,7 @@ export function capitalize(s) {
     return s ? s[0].toUpperCase() + s.slice(1) : "";
 }
 
+// prettier-ignore
 const diacriticsMap = {
 '\u0041': 'A','\u24B6': 'A','\uFF21': 'A','\u00C0': 'A','\u00C1': 'A','\u00C2': 'A','\u1EA6': 'A','\u1EA4': 'A','\u1EAA': 'A','\u1EA8': 'A',
 '\u00C3': 'A','\u0100': 'A','\u0102': 'A','\u1EB0': 'A','\u1EAE': 'A','\u1EB4': 'A','\u1EB2': 'A','\u0226': 'A','\u01E0': 'A','\u00C4': 'A',
diff --git a/addons/web/static/src/core/utils/transitions.scss b/addons/web/static/src/core/utils/transitions.scss
index 2ef7a8a451e..9d2cc3e74e1 100644
--- a/addons/web/static/src/core/utils/transitions.scss
+++ b/addons/web/static/src/core/utils/transitions.scss
@@ -9,16 +9,11 @@
     xml: <tag t-transition="o_notification_fade" />
  */
 @mixin owl-fade($time, $name) {
-  .#{$name}_fade-enter-active,
-  .#{$name}_fade-active {
+  .#{$name}_fade {
     transition: all $time;
   }
 
   .#{$name}_fade-enter {
     opacity: 0;
   }
-
-  .#{$name}_fade-leave-to {
-    opacity: 0;
-  }
 }
diff --git a/addons/web/static/src/env.js b/addons/web/static/src/env.js
index 5326de00c75..bfb034a0d9e 100644
--- a/addons/web/static/src/env.js
+++ b/addons/web/static/src/env.js
@@ -2,7 +2,7 @@
 
 import { registry } from "./core/registry";
 
-const { EventBus, QWeb } = owl;
+const { EventBus } = owl;
 
 // -----------------------------------------------------------------------------
 // Types
@@ -29,7 +29,6 @@ const { EventBus, QWeb } = owl;
  */
 export function makeEnv() {
     return {
-        qweb: new QWeb(),
         bus: new EventBus(),
         services: {},
         debug: odoo.debug,
@@ -59,12 +58,12 @@ export const SERVICES_METADATA = {};
  */
 export async function startServices(env) {
     const toStart = new Set();
-    serviceRegistry.on("UPDATE", null, async (payload) => {
+    serviceRegistry.addEventListener("UPDATE", async (ev) => {
         // Wait for all synchronous code so that if new services that depend on
         // one another are added to the registry, they're all present before we
         // start them regardless of the order they're added to the registry.
         await Promise.resolve();
-        const { operation, key: name, value: service } = payload;
+        const { operation, key: name, value: service } = ev.detail;
         if (operation === "delete") {
             // We hardly see why it would be usefull to remove a service.
             // Furthermore we could encounter problems with dependencies.
diff --git a/addons/web/static/src/fields/fields.js b/addons/web/static/src/fields/fields.js
index 161a39862c7..c046f062537 100644
--- a/addons/web/static/src/fields/fields.js
+++ b/addons/web/static/src/fields/fields.js
@@ -3,9 +3,8 @@ import { registry } from "@web/core/registry";
 import legacyFieldRegistry from "web.field_registry";
 import owlFieldRegistry from "web.field_registry_owl";
 import { ComponentAdapter } from "web.OwlCompatibility";
-import { useEffect } from "@web/core/utils/hooks";
 
-const { Component, useRef, xml } = owl;
+const { Component, useEffect, xml } = owl;
 
 const fieldRegistry = registry.category("fields");
 
@@ -36,13 +35,12 @@ class Field extends Component {
 
     setup() {
         const { record, type, name } = this.props;
-        this.fieldRef = useRef("fieldRef");
         this.FieldComponent = Field.getTangibleField({ record, type, name }).FieldClass;
     }
 }
 
 Field.template = xml/* xml */ `
-    <t t-component="FieldComponent" t-props="props" class="o-field" t-key="props.record.id" t-ref="fieldRef"/>
+    <t t-component="FieldComponent" t-props="props" class="o-field" t-key="props.record.id"/>
 `;
 
 class FieldSupportsLegacy extends Field {
@@ -107,7 +105,7 @@ class FieldSupportsLegacy extends Field {
 FieldSupportsLegacy.template = xml/* xml */ `<t>
     <t t-if="!isOwlLegacy and !isLegacy" t-call="${Field.template}" />
     <t t-elif="isOwlLegacy" t-component="FieldComponent" t-props="legacyProps" />
-    <t t-elif="isLegacy" t-component="ComponentAdapter" widgetArgs="widgetArgs" Component="FieldComponent" t-key="renderId" />
+    <ComponentAdapter t-elif="isLegacy" widgetArgs="widgetArgs" Component="FieldComponent" t-key="renderId" />
 </t>
 `;
 FieldSupportsLegacy.components = { ComponentAdapter };
diff --git a/addons/web/static/src/legacy/action_adapters.js b/addons/web/static/src/legacy/action_adapters.js
index a1cd4bf400c..bf1c5e3fc5c 100644
--- a/addons/web/static/src/legacy/action_adapters.js
+++ b/addons/web/static/src/legacy/action_adapters.js
@@ -6,12 +6,23 @@ import { ComponentAdapter } from "web.OwlCompatibility";
 import { objectToQuery } from "../core/browser/router_service";
 import { useDebugCategory } from "../core/debug/debug_context";
 import { Dialog } from "../core/dialog/dialog";
-import { useEffect, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { ViewNotFoundError } from "../webclient/actions/action_service";
-import { cleanDomFromBootstrap, wrapSuccessOrFail } from "./utils";
+import { cleanDomFromBootstrap, wrapSuccessOrFail, useLegacyRefs } from "./utils";
 import { mapDoActionOptionAPI } from "./backend_utils";
+import { setScrollPosition } from "@web/core/utils/scrolling";
 
-const { Component, onMounted, useExternalListener, xml } = owl;
+const {
+    Component,
+    onMounted,
+    onWillUnmount,
+    onWillUpdateProps,
+    status,
+    useEffect,
+    useExternalListener,
+    useComponent,
+    xml,
+} = owl;
 
 const warningDialogBodyTemplate = xml`<t t-esc="props.message"/>`;
 
@@ -24,6 +35,8 @@ class ActionAdapter extends ComponentAdapter {
         this.notifications = useService("notification");
         this.dialogs = useService("dialog");
         this.wowlEnv = this.env;
+        const legacyRefs = useLegacyRefs();
+        legacyRefs.component = this;
         // a legacy widget widget can push_state anytime including during its async rendering
         // In Wowl, we want to have all states pushed during the same setTimeout.
         // This is protected in legacy (backward compatibility) but should not e supported in Wowl
@@ -31,9 +44,7 @@ class ActionAdapter extends ComponentAdapter {
         let originalUpdateControlPanel;
         useEffect(
             () => {
-                if (this.wowlEnv.setLegacyControllerWidget) {
-                    this.wowlEnv.setLegacyControllerWidget(this.widget);
-                }
+                legacyRefs.widget = this.widget;
                 const query = this.widget.getState();
                 Object.assign(query, this.tempQuery);
                 this.tempQuery = null;
@@ -41,10 +52,11 @@ class ActionAdapter extends ComponentAdapter {
                 if (!this.wowlEnv.inDialog) {
                     this.pushState(query);
                 }
-                this.wowlEnv.bus.on("ACTION_MANAGER:UPDATE", this, () => {
+                const onActionManagerUpdate = () => {
                     this.env.bus.trigger("close_dialogs");
                     cleanDomFromBootstrap();
-                });
+                };
+                this.wowlEnv.bus.addEventListener("ACTION_MANAGER:UPDATE", onActionManagerUpdate);
                 originalUpdateControlPanel = this.__widget.updateControlPanel.bind(this.__widget);
                 this.__widget.updateControlPanel = (newProps) => {
                     this.wowlEnv.config.setDisplayName(this.__widget.getTitle());
@@ -54,7 +66,10 @@ class ActionAdapter extends ComponentAdapter {
 
                 return () => {
                     this.__widget.updateControlPanel = originalUpdateControlPanel;
-                    this.wowlEnv.bus.off("ACTION_MANAGER:UPDATE", this);
+                    this.wowlEnv.bus.removeEventListener(
+                        "ACTION_MANAGER:UPDATE",
+                        onActionManagerUpdate
+                    );
                 };
             },
             () => []
@@ -62,6 +77,21 @@ class ActionAdapter extends ComponentAdapter {
         useExternalListener(window, "click", () => {
             cleanDomFromBootstrap();
         });
+
+        onWillUpdateProps(() => {
+            if (this.widget === null) {
+                this.widget = this.__widget;
+            }
+        });
+        onWillUnmount(() => {
+            if (this.__widget && this.__widget.on_detach_callback) {
+                this.__widget.on_detach_callback();
+            }
+        });
+
+        this.onScrollTo = (payload) => {
+            setScrollPosition(this, { left: payload.left, top: payload.top });
+        };
     }
 
     get actionId() {
@@ -125,6 +155,8 @@ class ActionAdapter extends ComponentAdapter {
             }
         } else if (ev.name === "history_back") {
             this.wowlEnv.config.historyBack();
+        } else if (ev.name === "scrollTo") {
+            this.onScrollTo(payload);
         } else {
             super._trigger_up(ev);
         }
@@ -152,21 +184,15 @@ class ActionAdapter extends ComponentAdapter {
         return this.__widget.canBeRemoved();
     }
 
-    /**
-     * @override
-     */
-    willUnmount() {
-        if (this.__widget && this.__widget.on_detach_callback) {
-            this.__widget.on_detach_callback();
-        }
-        super.willUnmount();
-    }
     __destroy() {
         if (this.actionService.__legacy__isActionInStack(this.actionId)) {
             this.widget = null;
         }
         super.__destroy(...arguments);
     }
+    get el() {
+        return (this.widget || this.__widget).el;
+    }
 }
 
 export class ClientActionAdapter extends ActionAdapter {
@@ -192,7 +218,7 @@ export class ClientActionAdapter extends ActionAdapter {
         return this.props.widgetArgs[0].jsId;
     }
 
-    async willStart() {
+    async onWillStart() {
         if (this.props.widget) {
             this.widget = this.props.widget;
             this.widget.setParent(this);
@@ -201,7 +227,7 @@ export class ClientActionAdapter extends ActionAdapter {
             }
             return this.updateWidget();
         }
-        return super.willStart();
+        return super.onWillStart();
     }
 
     /**
@@ -219,7 +245,7 @@ export class ClientActionAdapter extends ActionAdapter {
 const magicReloadSymbol = Symbol("magicReload");
 
 function useMagicLegacyReload() {
-    const comp = Component.current;
+    const comp = useComponent();
     if (comp.props.widget && comp.props.widget[magicReloadSymbol]) {
         return comp.props.widget[magicReloadSymbol];
     }
@@ -283,7 +309,7 @@ export class ViewAdapter extends ActionAdapter {
         return this.props.viewParams.action.jsId;
     }
 
-    async willStart() {
+    async onWillStart() {
         if (this.props.widget) {
             this.widget = this.props.widget;
             this.widget.setParent(this);
@@ -294,7 +320,7 @@ export class ViewAdapter extends ActionAdapter {
         } else {
             const view = new this.props.View(this.props.viewInfo, this.props.viewParams);
             this.widget = await view.getController(this);
-            if (this.__owl__.status === 5 /* DESTROYED */) {
+            if (status(this) === "destroyed") {
                 // the component might have been destroyed meanwhile, but if so, `this.widget` wasn't
                 // destroyed by OwlCompatibility layer as it wasn't set yet, so destroy it now
                 if (!this.actionService.__legacy__isActionInStack(this.actionId)) {
diff --git a/addons/web/static/src/legacy/debug_manager.js b/addons/web/static/src/legacy/debug_manager.js
index 6b6708063d2..4112f06730c 100644
--- a/addons/web/static/src/legacy/debug_manager.js
+++ b/addons/web/static/src/legacy/debug_manager.js
@@ -6,7 +6,7 @@ import { formatDateTime, parseDateTime } from "@web/core/l10n/dates";
 import { formatMany2one } from "@web/fields/formatters";
 import { registry } from "@web/core/registry";
 
-const { useState } = owl;
+const { onWillStart, useState } = owl;
 
 const debugRegistry = registry.category("debug");
 
@@ -14,9 +14,10 @@ class GetMetadataDialog extends Dialog {
     setup() {
         super.setup();
         this.state = useState({});
+        onWillStart(this.onWillStart);
     }
 
-    async willStart() {
+    async onWillStart() {
         await this.getMetadata();
     }
 
diff --git a/addons/web/static/src/legacy/js/_deprecated/basic_fields.js b/addons/web/static/src/legacy/js/_deprecated/basic_fields.js
index 7920edbb47d..f924babd8a2 100644
--- a/addons/web/static/src/legacy/js/_deprecated/basic_fields.js
+++ b/addons/web/static/src/legacy/js/_deprecated/basic_fields.js
@@ -26,6 +26,7 @@ var FieldBoolean = AbstractField.extend({
         change: '_onChange',
     }),
     supportedFieldTypes: ['boolean'],
+    isQuickEditable: true,
 
     //--------------------------------------------------------------------------
     // Public
diff --git a/addons/web/static/src/legacy/js/common_env.js b/addons/web/static/src/legacy/js/common_env.js
index 79069d04765..16c9e262837 100644
--- a/addons/web/static/src/legacy/js/common_env.js
+++ b/addons/web/static/src/legacy/js/common_env.js
@@ -25,7 +25,6 @@ odoo.define("web.commonEnv", function (require) {
     const { _t } = require("web.translation");
     const utils = require("web.utils");
 
-    const { QWeb } = owl;
     const browser = {
         clearInterval: window.clearInterval.bind(window),
         clearTimeout: window.clearTimeout.bind(window),
@@ -50,7 +49,6 @@ odoo.define("web.commonEnv", function (require) {
         bus,
         device,
         isDebug,
-        qweb: new QWeb({ translateFn: _t }),
         services: {
             ajaxJsonRPC() {
                 return jsonRpc(...arguments);
diff --git a/addons/web/static/src/legacy/js/component_extension.js b/addons/web/static/src/legacy/js/component_extension.js
index 5fa743b120d..b1b18863e27 100644
--- a/addons/web/static/src/legacy/js/component_extension.js
+++ b/addons/web/static/src/legacy/js/component_extension.js
@@ -16,12 +16,12 @@
         return new Promise((resolve, reject) => {
             return this.env.services.rpc(...arguments)
                 .then(result => {
-                    if (this.__owl__.status !== 5 /* not destroyed */) {
+                    if (owl.status(this) !== "destroyed") {
                         resolve(result);
                     }
                 })
                 .catch(reason => {
-                    if (this.__owl__.status !== 5) /* not destroyed */ {
+                    if (owl.status(this) !== "destroyed") {
                         reject(reason);
                     }
                 });
@@ -35,11 +35,11 @@
      * a widgetSymbol key in the environment, corresponding to the hook to call
      * (see ComponentWrapper).
      */
-    const originalTrigger = Component.prototype.__trigger;
-    Component.prototype.__trigger = function (component, evType, payload) {
+    const originalTrigger = owl.Component.prototype.__trigger;
+    Component.prototype.__trigger = function (evType, payload) {
         if (this.env[odoo.widgetSymbol]) {
             this.env[odoo.widgetSymbol](evType);
         }
-        originalTrigger.call(this, component, evType, payload);
+        originalTrigger.call(this, evType, payload);
     };
 })();
diff --git a/addons/web/static/src/legacy/js/components/action_menus.js b/addons/web/static/src/legacy/js/components/action_menus.js
index 06bf3be3207..5951b3eafe1 100644
--- a/addons/web/static/src/legacy/js/components/action_menus.js
+++ b/addons/web/static/src/legacy/js/components/action_menus.js
@@ -5,7 +5,13 @@ odoo.define('web.ActionMenus', function (require) {
     const DropdownMenu = require('web.DropdownMenu');
     const Registry = require('web.Registry');
 
-    const { Component } = owl;
+    const {
+        Component,
+        onMounted,
+        onPatched,
+        onWillStart,
+        onWillUpdateProps,
+    } = owl;
 
     let registryActionId = 1;
 
@@ -22,23 +28,21 @@ odoo.define('web.ActionMenus', function (require) {
      * @extends Component
      */
     class ActionMenus extends Component {
-
-        async willStart() {
-            this.actionItems = await this._setActionItems(this.props);
-            this.printItems = await this._setPrintItems(this.props);
-        }
-
-        async willUpdateProps(nextProps) {
-            this.actionItems = await this._setActionItems(nextProps);
-            this.printItems = await this._setPrintItems(nextProps);
-        }
-
-        mounted() {
-            this._addTooltips();
-        }
-
-        patched() {
-            this._addTooltips();
+        setup() {
+            onWillStart(async () => {
+                this.actionItems = await this._setActionItems(this.props);
+                this.printItems = await this._setPrintItems(this.props);
+            });
+            onWillUpdateProps(async (nextProps) => {
+                this.actionItems = await this._setActionItems(nextProps);
+                this.printItems = await this._setPrintItems(nextProps);
+            });
+            onMounted(() => {
+                this._addTooltips();
+            });
+            onPatched(() => {
+                this._addTooltips();
+            });
         }
 
         //---------------------------------------------------------------------
diff --git a/addons/web/static/src/legacy/js/components/custom_checkbox.js b/addons/web/static/src/legacy/js/components/custom_checkbox.js
index bc98dd7bab2..ddb8636b00b 100644
--- a/addons/web/static/src/legacy/js/components/custom_checkbox.js
+++ b/addons/web/static/src/legacy/js/components/custom_checkbox.js
@@ -14,7 +14,7 @@ odoo.define('web.CustomCheckbox', function (require) {
      *     value="boolean"
      *     disabled="boolean"
      *     text="'Change the label text'"
-     *     t-on-change="_onValueChange"
+     *     onChange="_onValueChange"
      *     />
      * 
      * @extends Component
@@ -27,21 +27,30 @@ odoo.define('web.CustomCheckbox', function (require) {
          * @param {boolean} [props.disabled=false]
          * @param {string} [props.text]
          */
-        constructor() {
-            super(...arguments);
+        setup() {
             this._id = `checkbox-comp-${utils.generateID()}`;
         }
     }
-
+    CustomCheckbox.defaultProps = {
+        onChange: () => {},
+    };
     CustomCheckbox.props = {
         id: {
             type: [String, Number],
             optional: 1,
         },
+        class: {
+            type: String,
+            optional: 1,
+        },
         disabled: {
             type: Boolean,
             optional: 1,
         },
+        onChange: {
+            type: Function,
+            optional: 1,
+        },
         value: {
             type: Boolean,
             optional: 1,
diff --git a/addons/web/static/src/legacy/js/components/custom_file_input.js b/addons/web/static/src/legacy/js/components/custom_file_input.js
index 018d47785bd..fc7a04fda02 100644
--- a/addons/web/static/src/legacy/js/components/custom_file_input.js
+++ b/addons/web/static/src/legacy/js/components/custom_file_input.js
@@ -23,9 +23,7 @@ odoo.define('web.CustomFileInput', function (require) {
          * @param {string} [props.multi_upload=false] Whether the input should allow
          *      to upload multiple files at once.
          */
-        constructor() {
-            super(...arguments);
-
+        setup() {
             this.fileInputRef = useRef('file-input');
         }
 
@@ -73,13 +71,16 @@ odoo.define('web.CustomFileInput', function (require) {
         accepted_file_extensions: '*',
         action: '/web/binary/upload',
         multi_upload: false,
+        onUpload: () => {},
     };
     CustomFileInput.props = {
-        accepted_file_extensions: { type: String, optional: 1 },
-        action: { type: String, optional: 1 },
-        id: { type: Number, optional: 1 },
-        model: { type: String, optional: 1 },
-        multi_upload: { type: Boolean, optional: 1 },
+        accepted_file_extensions: { type: String, optional: true },
+        action: { type: String, optional: true },
+        id: { type: Number, optional: true },
+        model: { type: String, optional: true },
+        multi_upload: { type: Boolean, optional: true },
+        onUpload: { type: Function, optional: true },
+        slots: { type: Object, optional: true },
     };
     CustomFileInput.template = 'web.CustomFileInput';
 
diff --git a/addons/web/static/src/legacy/js/components/datepicker.js b/addons/web/static/src/legacy/js/components/datepicker.js
index 55bbfb3033e..cbb63db8098 100644
--- a/addons/web/static/src/legacy/js/components/datepicker.js
+++ b/addons/web/static/src/legacy/js/components/datepicker.js
@@ -3,9 +3,18 @@ odoo.define('web.DatePickerOwl', function (require) {
 
     const field_utils = require('web.field_utils');
     const time = require('web.time');
-    const { useAutofocus } = require('web.custom_hooks');
+    const { useAutofocus } = require("@web/core/utils/hooks");
 
-    const { Component, useExternalListener, useRef, useState } = owl;
+    const {
+        Component,
+        onMounted,
+        onPatched,
+        onWillUnmount,
+        onWillUpdateProps,
+        useExternalListener,
+        useRef,
+        useState,
+    } = owl;
 
     let datePickerId = 0;
 
@@ -23,44 +32,52 @@ odoo.define('web.DatePickerOwl', function (require) {
      * @extends Component
      */
     class DatePicker extends Component {
-        constructor() {
-            super(...arguments);
-
-            this.inputRef = useRef('input');
+        setup() {
             this.state = useState({ warning: false });
 
             this.datePickerId = `o_datepicker_${datePickerId++}`;
             this.typeOfDate = 'date';
 
-            useAutofocus();
+            useAutofocus("input");
             useExternalListener(window, 'scroll', this._onWindowScroll);
-        }
 
-        mounted() {
-            $(this.el).on('show.datetimepicker', this._onDateTimePickerShow.bind(this));
-            $(this.el).on('hide.datetimepicker', this._onDateTimePickerHide.bind(this));
-            $(this.el).on('error.datetimepicker', () => false);
+            this.inputRef = useRef('input');
 
-            const pickerOptions = Object.assign({ format: this.defaultFormat }, this.props);
-            this._datetimepicker(pickerOptions);
-            this.inputRef.el.value = this._formatDate(this.props.date);
-        }
+            onMounted(() => {
+                $(this.el).on('show.datetimepicker', this._onDateTimePickerShow.bind(this));
+                $(this.el).on('hide.datetimepicker', this._onDateTimePickerHide.bind(this));
+                $(this.el).on('error.datetimepicker', () => false);
 
-        willUnmount() {
-            $(this.el).off('show.datetimepicker hide.datetimepicker error.datetimepicker');
-            this._datetimepicker('destroy');
-        }
+                const pickerOptions = Object.assign({ format: this.defaultFormat }, this.props);
+                this._datetimepicker(pickerOptions);
+                this.inputRef.el.value = this._formatDate(this.props.date);
+            });
 
-        willUpdateProps(nextProps) {
-            for (const prop in nextProps) {
-                if (prop == "onDateTimeChanged") {
-                    continue;
+            onWillUnmount(() => {
+                $(this.el).off('show.datetimepicker hide.datetimepicker error.datetimepicker');
+                this._datetimepicker('destroy');
+            });
+
+            let newDateReceived = false;
+
+            onWillUpdateProps((nextProps) => {
+                for (const prop in nextProps) {
+                    if (prop == "onDateTimeChanged") {
+                        continue;
+                    }
+                    this._datetimepicker(prop, nextProps[prop]);
                 }
-                this._datetimepicker(prop, nextProps[prop]);
-            }
-            if (nextProps.date) {
-                this.inputRef.el.value = this._formatDate(nextProps.date);
-            }
+                if (nextProps.date) {
+                    newDateReceived = true;
+                }
+            });
+
+            onPatched(() => {
+                if (newDateReceived) {
+                    newDateReceived = false;
+                    this.inputRef.el.value = this._formatDate(this.props.date);
+                }
+            });
         }
 
         //---------------------------------------------------------------------
@@ -210,7 +227,7 @@ odoo.define('web.DatePickerOwl', function (require) {
             },
             optional: 1,
         },
-        calendarWeeks: Boolean,
+        calendarWeeks: { type: Boolean, optional: true },
         format: { type: String, optional: 1 },
         icons: {
             type: Object,
@@ -225,14 +242,15 @@ odoo.define('web.DatePickerOwl', function (require) {
                 today: String,
                 up: String,
             },
+            optional: true,
         },
         keyBinds: { validate: kb => typeof kb === 'object' || kb === null, optional: 1 },
-        locale: String,
-        maxDate: moment,
-        minDate: moment,
+        locale: { type: String, optional: true },
+        maxDate: { type: moment, optional: true },
+        minDate: { type: moment, optional: true },
         readonly: { type: Boolean, optional: 1 },
-        useCurrent: Boolean,
-        widgetParent: String,
+        useCurrent: { type: Boolean, optional: true },
+        widgetParent: { type: String, optional: true },
     };
     DatePicker.template = "web.Legacy.DatePicker";
 
@@ -247,9 +265,8 @@ odoo.define('web.DatePickerOwl', function (require) {
      * @extends DatePicker
      */
     class DateTimePicker extends DatePicker {
-        constructor() {
-            super(...arguments);
-
+        setup() {
+            super.setup();
             this.typeOfDate = 'datetime';
         }
 
diff --git a/addons/web/static/src/legacy/js/components/dropdown_menu.js b/addons/web/static/src/legacy/js/components/dropdown_menu.js
index 3896c39f1bc..3698c98c0b6 100644
--- a/addons/web/static/src/legacy/js/components/dropdown_menu.js
+++ b/addons/web/static/src/legacy/js/components/dropdown_menu.js
@@ -28,9 +28,7 @@ odoo.define('web.DropdownMenu', function (require) {
      * @extends Component
      */
     class DropdownMenu extends Component {
-        constructor() {
-            super(...arguments);
-
+        setup() {
             this.dropdownMenu = useRef('dropdown');
             this.state = useState({ open: false });
 
diff --git a/addons/web/static/src/legacy/js/components/dropdown_menu_item.js b/addons/web/static/src/legacy/js/components/dropdown_menu_item.js
index 21f8ffa20db..92b3e4444b2 100644
--- a/addons/web/static/src/legacy/js/components/dropdown_menu_item.js
+++ b/addons/web/static/src/legacy/js/components/dropdown_menu_item.js
@@ -1,7 +1,7 @@
 odoo.define('web.DropdownMenuItem', function (require) {
     "use strict";
 
-    const { useListener } = require('web.custom_hooks');
+    const { useListener } = require("@web/core/utils/hooks");
 
     const { Component, useExternalListener, useRef, useState } = owl;
 
@@ -27,9 +27,7 @@ odoo.define('web.DropdownMenuItem', function (require) {
      * @extends Component
      */
     class DropdownMenuItem extends Component {
-        constructor() {
-            super(...arguments);
-
+        setup() {
             this.canBeOpened = Boolean(this.props.options && this.props.options.length);
 
             this.fallbackFocusRef = useRef('fallback-focus');
diff --git a/addons/web/static/src/legacy/js/components/pager.js b/addons/web/static/src/legacy/js/components/pager.js
index 5ef2b48a340..364b835b478 100644
--- a/addons/web/static/src/legacy/js/components/pager.js
+++ b/addons/web/static/src/legacy/js/components/pager.js
@@ -1,9 +1,9 @@
 odoo.define('web.Pager', function (require) {
     "use strict";
 
-    const { useAutofocus } = require('web.custom_hooks');
+    const { useAutofocus } = require("@web/core/utils/hooks");
 
-    const { Component, useState } = owl;
+    const { Component, onWillUpdateProps, useState } = owl;
 
     /**
      * Pager
@@ -30,18 +30,18 @@ odoo.define('web.Pager', function (require) {
          * @param {boolean} [props.withAccessKey] can be disabled, for example,
          *   for x2m widgets
          */
-        constructor() {
-            super(...arguments);
-
+        setup() {
             this.state = useState({
                 disabled: false,
                 editing: false,
             });
 
             useAutofocus();
+
+            onWillUpdateProps(this.onWillUpdateProps);
         }
 
-        async willUpdateProps() {
+        async onWillUpdateProps() {
             this.state.editing = false;
             this.state.disabled = false;
         }
@@ -154,7 +154,7 @@ odoo.define('web.Pager', function (require) {
                 // have to disable the edition manually here.
                 this.state.editing = false;
             }
-            this.trigger('pager-changed', { currentMinimum, limit });
+            this.props.onPagerChanged({ currentMinimum, limit });
         }
 
         //---------------------------------------------------------------------
@@ -212,11 +212,12 @@ odoo.define('web.Pager', function (require) {
     };
     Pager.props = {
         currentMinimum: { type: Number, optional: 1 },
-        editable: Boolean,
+        editable: { type: Boolean, optional: true },
         limit: { validate: l => !isNaN(l), optional: 1 },
         size: { type: Number, optional: 1 },
-        validate: Function,
-        withAccessKey: Boolean,
+        validate: { type: Function, optional: true },
+        withAccessKey: { type: Boolean, optional: true },
+        onPagerChanged: Function,
     };
     Pager.template = 'web.legacy.Pager';
 
diff --git a/addons/web/static/src/legacy/js/control_panel/comparison_menu.js b/addons/web/static/src/legacy/js/control_panel/comparison_menu.js
index d26fa2a3ada..902bad84993 100644
--- a/addons/web/static/src/legacy/js/control_panel/comparison_menu.js
+++ b/addons/web/static/src/legacy/js/control_panel/comparison_menu.js
@@ -1,14 +1,15 @@
 odoo.define("web.ComparisonMenu", function (require) {
     "use strict";
 
+    const { Dropdown } = require("@web/core/dropdown/dropdown");
+    const { DropdownItem } = require("@web/core/dropdown/dropdown_item");
     const { FACET_ICONS } = require("web.searchUtils");
     const { useModel } = require("web.Model");
 
     const { Component } = owl;
 
     class ComparisonMenu extends Component {
-        constructor() {
-            super(...arguments);
+        setup() {
             this.icon = FACET_ICONS.comparison;
             this.model = useModel('searchModel');
         }
@@ -29,6 +30,7 @@ odoo.define("web.ComparisonMenu", function (require) {
         }
     }
     ComparisonMenu.template = "web.ComparisonMenu";
+    ComparisonMenu.components = { Dropdown, DropdownItem };
 
     return ComparisonMenu;
 });
diff --git a/addons/web/static/src/legacy/js/control_panel/control_panel.js b/addons/web/static/src/legacy/js/control_panel/control_panel.js
index f4b659bb0d5..5b66c659d18 100644
--- a/addons/web/static/src/legacy/js/control_panel/control_panel.js
+++ b/addons/web/static/src/legacy/js/control_panel/control_panel.js
@@ -11,7 +11,7 @@ odoo.define('web.ControlPanel', function (require) {
     const SearchBar = require('web.SearchBar');
     const { useModel } = require('web.Model');
 
-    const { Component, useRef, useSubEnv } = owl;
+    const { Component, onMounted, onPatched, onWillDestroy, onWillUpdateProps, useRef, useSubEnv } = owl;
 
     /**
      * TODO: remove this whole mechanism as soon as `cp_content` is completely removed.
@@ -96,15 +96,16 @@ odoo.define('web.ControlPanel', function (require) {
      * @extends Component
      */
     class ControlPanel extends Component {
-        constructor() {
-            super(...arguments);
-
+        setup() {
             this.additionalContent = getAdditionalContent(this.props);
 
+            let subEnvView = this.props.view;
             useSubEnv({
                 action: this.props.action,
                 searchModel: this.props.searchModel,
-                view: this.props.view,
+                get view() {
+                    return subEnvView;
+                },
             });
 
             // Connect to the model
@@ -124,27 +125,40 @@ odoo.define('web.ControlPanel', function (require) {
             this.fields = this._formatFields(this.props.fields);
 
             this.sprintf = _.str.sprintf;
-        }
 
-        mounted() {
-            this._attachAdditionalContent();
-        }
+            onWillDestroy(() => {
+                const content = this.props.cp_content;
+                if (content) {
+                    if (content.$buttons) {
+                        content.$buttons.remove();
+                    }
+                    if (content.$searchview) {
+                        content.$searchview.remove();
+                    }
+                    if (content.$pager) {
+                        content.$pager.remove();
+                    }
+                    if (content.$searchview_buttons) {
+                        content.$searchview_buttons.remove();
+                    }
+                }
+            });
 
-        patched() {
-            this._attachAdditionalContent();
-        }
-
-        async willUpdateProps(nextProps) {
-            // Note: action and searchModel are not likely to change during
-            // the lifespan of a ControlPanel instance, so we only need to update
-            // the view information.
-            if ('view' in nextProps) {
-                this.env.view = nextProps.view;
-            }
-            if ('fields' in nextProps) {
-                this.fields = this._formatFields(nextProps.fields);
-            }
-            this.additionalContent = getAdditionalContent(nextProps);
+            // Cannot use useEffect. See prepareForFinish in owl_compatibility.js
+            onMounted(() => this._attachAdditionalContent());
+            onPatched(() => this._attachAdditionalContent());
+            onWillUpdateProps((nextProps) => {
+                // Note: action and searchModel are not likely to change during
+                // the lifespan of a ControlPanel instance, so we only need to update
+                // the view information.
+                if ("view" in nextProps) {
+                    subEnvView = nextProps.view;
+                }
+                if ("fields" in nextProps) {
+                    this.fields = this._formatFields(nextProps.fields);
+                }
+                this.additionalContent = getAdditionalContent(nextProps);
+            });
         }
 
         //---------------------------------------------------------------------
@@ -202,18 +216,18 @@ odoo.define('web.ControlPanel', function (require) {
     };
     ControlPanel.props = {
         action: Object,
-        breadcrumbs: Array,
+        breadcrumbs: { type: Array, optional: true },
         searchModel: ActionModel,
         cp_content: { type: Object, optional: 1 },
-        fields: Object,
+        fields: { type: Object, optional: true },
         pager: { validate: p => typeof p === 'object' || p === null, optional: 1 },
-        searchMenuTypes: Array,
+        searchMenuTypes: { type: Array, optional: true },
         actionMenus: { validate: s => typeof s === 'object' || s === null, optional: 1 },
         title: { type: String, optional: 1 },
         view: { type: Object, optional: 1 },
-        views: Array,
-        withBreadcrumbs: Boolean,
-        withSearchBar: Boolean,
+        views: { type: Array, optional: true },
+        withBreadcrumbs: { type: Boolean, optional: true },
+        withSearchBar: { type: Boolean, optional: true },
     };
     ControlPanel.template = 'web.Legacy.ControlPanel';
 
diff --git a/addons/web/static/src/legacy/js/control_panel/custom_favorite_item.js b/addons/web/static/src/legacy/js/control_panel/custom_favorite_item.js
index a1dce2a3175..42ecc52bd1b 100644
--- a/addons/web/static/src/legacy/js/control_panel/custom_favorite_item.js
+++ b/addons/web/static/src/legacy/js/control_panel/custom_favorite_item.js
@@ -1,8 +1,10 @@
 odoo.define('web.CustomFavoriteItem', function (require) {
     "use strict";
 
+    const { CheckBox } = require("@web/core/checkbox/checkbox");
+    const { Dropdown } = require("@web/core/dropdown/dropdown");
     const FavoriteMenu = require('web.FavoriteMenu');
-    const { useAutofocus } = require('web.custom_hooks');
+    const { useAutofocus } = require("@web/core/utils/hooks");
     const { useModel } = require('web.Model');
 
     const { Component, useRef, useState } = owl;
@@ -29,9 +31,7 @@ odoo.define('web.CustomFavoriteItem', function (require) {
      * and save the context to a new filter.
      */
     class CustomFavoriteItem extends Component {
-        constructor() {
-            super(...arguments);
-
+        setup() {
             const favId = favoriteId++;
             this.useByDefaultId = `o_favorite_use_by_default_${favId}`;
             this.shareAllUsersId = `o_favorite_share_all_users_${favId}`;
@@ -45,7 +45,7 @@ odoo.define('web.CustomFavoriteItem', function (require) {
                 isShared: false,
             });
 
-            useAutofocus();
+            useAutofocus("description");
         }
 
         //---------------------------------------------------------------------
@@ -92,10 +92,9 @@ odoo.define('web.CustomFavoriteItem', function (require) {
 
         /**
          * @private
-         * @param {Event} ev change Event
+         * @param {boolean} checked
          */
-        onDefaultCheckboxChange(ev) {
-            const { checked } = ev.target;
+        onDefaultCheckboxChange(checked) {
             this.state.isDefault = checked;
             if (checked) {
                 this.state.isShared = false;
@@ -104,10 +103,9 @@ odoo.define('web.CustomFavoriteItem', function (require) {
 
         /**
          * @private
-         * @param {Event} ev change Event
+         * @param {boolean} checked
          */
-        onShareCheckboxChange(ev) {
-            const { checked } = ev.target;
+        onShareCheckboxChange(checked) {
             this.state.isShared = checked;
             if (checked) {
                 this.state.isDefault = false;
@@ -147,6 +145,7 @@ odoo.define('web.CustomFavoriteItem', function (require) {
 
     CustomFavoriteItem.props = {};
     CustomFavoriteItem.template = "web.CustomFavoriteItem";
+    CustomFavoriteItem.components = { CheckBox, Dropdown };
     CustomFavoriteItem.groupNumber = 3; // have 'Save Current Search' in its own group
 
     FavoriteMenu.registry.add('favorite-generator-menu', CustomFavoriteItem, 0);
diff --git a/addons/web/static/src/legacy/js/control_panel/custom_filter_item.js b/addons/web/static/src/legacy/js/control_panel/custom_filter_item.js
index 3e086bd773e..f813c2a1652 100644
--- a/addons/web/static/src/legacy/js/control_panel/custom_filter_item.js
+++ b/addons/web/static/src/legacy/js/control_panel/custom_filter_item.js
@@ -1,6 +1,8 @@
 odoo.define('web.CustomFilterItem', function (require) {
     "use strict";
 
+    const { Dropdown } = require("@web/core/dropdown/dropdown");
+    const { DropdownItem } = require("@web/core/dropdown/dropdown_item");
     const { DatePicker, DateTimePicker } = require('web.DatePickerOwl');
     const Domain = require('web.Domain');
     const { FIELD_OPERATORS, FIELD_TYPES } = require('web.searchUtils');
@@ -42,9 +44,7 @@ odoo.define('web.CustomFilterItem', function (require) {
      *                     ]
      */
     class CustomFilterItem extends Component {
-        constructor() {
-            super(...arguments);
-
+        setup() {
             this.model = useModel('searchModel');
 
             this.conditions = useState([]);
@@ -270,7 +270,7 @@ odoo.define('web.CustomFilterItem', function (require) {
         }
     }
 
-    CustomFilterItem.components = { DatePicker, DateTimePicker };
+    CustomFilterItem.components = { DatePicker, DateTimePicker, Dropdown };
     CustomFilterItem.props = { fields: Object };
     CustomFilterItem.template = "web.CustomFilterItem";
 
diff --git a/addons/web/static/src/legacy/js/control_panel/custom_group_by_item.js b/addons/web/static/src/legacy/js/control_panel/custom_group_by_item.js
deleted file mode 100644
index 3b4fee10ef8..00000000000
--- a/addons/web/static/src/legacy/js/control_panel/custom_group_by_item.js
+++ /dev/null
@@ -1,38 +0,0 @@
-odoo.define('web.CustomGroupByItem', function (require) {
-    "use strict";
-
-    const { useModel } = require('web.Model');
-
-    const { Component, useState } = owl;
-
-    class CustomGroupByItem extends Component {
-        constructor() {
-            super(...arguments);
-
-            this.state = useState({
-                fieldName: this.props.fields[0].name,
-            });
-
-            this.model = useModel('searchModel');
-        }
-
-        //---------------------------------------------------------------------
-        // Handlers
-        //---------------------------------------------------------------------
-
-        /**
-         * @private
-         */
-        onApply() {
-            const field = this.props.fields.find(f => f.name === this.state.fieldName);
-            this.model.dispatch('createNewGroupBy', field);
-        }
-    }
-
-    CustomGroupByItem.template = "web.CustomGroupByItem";
-    CustomGroupByItem.props = {
-        fields: Array,
-    };
-
-    return CustomGroupByItem;
-});
diff --git a/addons/web/static/src/legacy/js/control_panel/favorite_menu.js b/addons/web/static/src/legacy/js/control_panel/favorite_menu.js
index fd3d0d31e0a..9c70ed614fb 100644
--- a/addons/web/static/src/legacy/js/control_panel/favorite_menu.js
+++ b/addons/web/static/src/legacy/js/control_panel/favorite_menu.js
@@ -1,6 +1,8 @@
 odoo.define('web.FavoriteMenu', function (require) {
     "use strict";
 
+    const { Dropdown } = require("@web/core/dropdown/dropdown");
+    const { DropdownItem } = require("@web/core/dropdown/dropdown_item");
     const Dialog = require('web.OwlDialog');
     const { FACET_ICONS } = require("web.searchUtils");
     const Registry = require('web.Registry');
@@ -18,8 +20,7 @@ odoo.define('web.FavoriteMenu', function (require) {
      * the `web` module.
      */
     class FavoriteMenu extends Component {
-        constructor() {
-            super(...arguments);
+        setup() {
             this.icon = FACET_ICONS.favorite;
             this.model = useModel('searchModel');
             this.state = useState({ deletedFavorite: false });
@@ -81,7 +82,7 @@ odoo.define('web.FavoriteMenu', function (require) {
     }
 
     FavoriteMenu.registry = new Registry();
-    FavoriteMenu.components = { Dialog };
+    FavoriteMenu.components = { Dialog, Dropdown, DropdownItem };
     FavoriteMenu.template = 'web.Legacy.FavoriteMenu';
 
     return FavoriteMenu;
diff --git a/addons/web/static/src/legacy/js/control_panel/filter_menu.js b/addons/web/static/src/legacy/js/control_panel/filter_menu.js
index 329271cffa0..35247e05d53 100644
--- a/addons/web/static/src/legacy/js/control_panel/filter_menu.js
+++ b/addons/web/static/src/legacy/js/control_panel/filter_menu.js
@@ -1,6 +1,8 @@
 odoo.define('web.FilterMenu', function (require) {
     "use strict";
 
+    const { Dropdown } = require("@web/core/dropdown/dropdown");
+    const { DropdownItem } = require("@web/core/dropdown/dropdown_item");
     const CustomFilterItem = require('web.CustomFilterItem');
     const { FACET_ICONS } = require("web.searchUtils");
     const { useModel } = require('web.Model');
@@ -16,8 +18,7 @@ odoo.define('web.FilterMenu', function (require) {
      */
     class FilterMenu extends Component {
 
-        constructor() {
-            super(...arguments);
+        setup() {
             this.icon = FACET_ICONS.filter;
             this.model = useModel('searchModel');
         }
@@ -53,8 +54,15 @@ odoo.define('web.FilterMenu', function (require) {
     }
 
     FilterMenu.components = { CustomFilterItem };
-    FilterMenu.props = { fields: Object };
+    FilterMenu.defaultProps = {
+        class: "",
+    };
+    FilterMenu.props = {
+        fields: Object,
+        class: { String, optional: true },
+    };
     FilterMenu.template = "web.legacy.FilterMenu";
+    FilterMenu.components = { CustomFilterItem, Dropdown, DropdownItem };
 
     return FilterMenu;
 });
diff --git a/addons/web/static/src/legacy/js/control_panel/groupby_menu.js b/addons/web/static/src/legacy/js/control_panel/groupby_menu.js
index 307a6d2cd9f..dee0fae06cb 100644
--- a/addons/web/static/src/legacy/js/control_panel/groupby_menu.js
+++ b/addons/web/static/src/legacy/js/control_panel/groupby_menu.js
@@ -1,7 +1,9 @@
 odoo.define('web.GroupByMenu', function (require) {
     "use strict";
 
-    const CustomGroupByItem = require('web.CustomGroupByItem');
+    const { Dropdown } = require("@web/core/dropdown/dropdown");
+    const { DropdownItem } = require("@web/core/dropdown/dropdown_item");
+    const { CustomGroupByItem } = require('@web/search/group_by_menu/custom_group_by_item');
     const { FACET_ICONS, GROUPABLE_TYPES } = require('web.searchUtils');
     const { useModel } = require('web.Model');
 
@@ -9,8 +11,7 @@ odoo.define('web.GroupByMenu', function (require) {
 
     class GroupByMenu extends Component {
 
-        constructor() {
-            super(...arguments);
+        setup() {
             this.icon = FACET_ICONS.groupBy;
 
             this.fields = Object.values(this.props.fields)
@@ -64,9 +65,13 @@ odoo.define('web.GroupByMenu', function (require) {
                 this.model.dispatch('toggleFilter', itemId);
             }
         }
+        onAddCustomGroup(fieldName) {
+            const field = this.props.fields[fieldName];
+            this.model.dispatch("createNewGroupBy", field);
+        }
     }
 
-    GroupByMenu.components = { CustomGroupByItem };
+    GroupByMenu.components = { CustomGroupByItem, Dropdown, DropdownItem };
     GroupByMenu.props = { fields: Object };
     GroupByMenu.template = "web.GroupByMenu";
 
diff --git a/addons/web/static/src/legacy/js/control_panel/search_bar.js b/addons/web/static/src/legacy/js/control_panel/search_bar.js
index b6f01047170..baf851d85a7 100644
--- a/addons/web/static/src/legacy/js/control_panel/search_bar.js
+++ b/addons/web/static/src/legacy/js/control_panel/search_bar.js
@@ -3,11 +3,11 @@ odoo.define('web.SearchBar', function (require) {
 
     const Domain = require('web.Domain');
     const field_utils = require('web.field_utils');
-    const { useAutofocus } = require('web.custom_hooks');
+    const { useAutofocus } = require("@web/core/utils/hooks");
     const { useModel } = require('web.Model');
     const { fuzzyTest } = require('@web/core/utils/search');
 
-    const { Component, useExternalListener, useRef, useState } = owl;
+    const { Component, onMounted, onWillUnmount, useExternalListener, useRef, useState } = owl;
     const CHAR_FIELDS = ['char', 'html', 'many2many', 'many2one', 'one2many', 'text'];
 
     let sourceId = 0;
@@ -37,10 +37,8 @@ odoo.define('web.SearchBar', function (require) {
      * @extends Component
      */
     class SearchBar extends Component {
-        constructor() {
-            super(...arguments);
-
-            this.focusOnUpdate = useAutofocus();
+        setup() {
+            this.focusOnUpdate = useAutofocus('search-input');
             this.inputRef = useRef('search-input');
             this.model = useModel('searchModel');
             this.state = useState({
@@ -56,19 +54,19 @@ odoo.define('web.SearchBar', function (require) {
 
             useExternalListener(window, 'click', this._onWindowClick);
             useExternalListener(window, 'keydown', this._onWindowKeydown);
-        }
 
-        mounted() {
-            // 'search' will always patch the search bar, 'focus' will never.
-            this.env.searchModel.on('search', this, this.focusOnUpdate);
-            this.env.searchModel.on('focus-control-panel', this, () => {
-                this.inputRef.el.focus();
+            onMounted(() => {
+                // 'search' will always patch the search bar, 'focus' will never.
+                this.model.on('search', this, this.focusOnUpdate);
+                this.model.on('focus-control-panel', this, () => {
+                    this.inputRef.el.focus();
+                });
             });
-        }
 
-        willUnmount() {
-            this.env.searchModel.off('search', this);
-            this.env.searchModel.off('focus-control-panel', this);
+            onWillUnmount(() => {
+                this.model.off('search', this);
+                this.model.off('focus-control-panel', this);
+            });
         }
 
         //---------------------------------------------------------------------
@@ -485,7 +483,7 @@ odoo.define('web.SearchBar', function (require) {
         fields: {},
     };
     SearchBar.props = {
-        fields: Object,
+        fields: { type: Object, optional: true },
     };
     SearchBar.template = 'web.Legacy.SearchBar';
 
diff --git a/addons/web/static/src/legacy/js/core/custom_hooks.js b/addons/web/static/src/legacy/js/core/custom_hooks.js
deleted file mode 100644
index 818b1a9aa0d..00000000000
--- a/addons/web/static/src/legacy/js/core/custom_hooks.js
+++ /dev/null
@@ -1,116 +0,0 @@
-odoo.define('web.custom_hooks', function (require) {
-    "use strict";
-
-    const { useEffect } = require("@web/core/utils/hooks");
-
-    const { Component } = owl;
-
-    /**
-     * Focus a given selector as soon as it appears in the DOM and if it was not
-     * displayed before. If the selected target is an input|textarea, set the selection
-     * at the end.
-     * @param {Object} [params]
-     * @param {string} [params.selector='autofocus'] default: select the first element
-     *                 with an `autofocus` attribute.
-     * @returns {Function} function that forces the focus on the next update if visible.
-     */
-    function useAutofocus(params = {}) {
-        const comp = Component.current;
-        // Prevent autofocus in mobile
-        if (comp.env.device.isMobileDevice) {
-            return () => {};
-        }
-        const selector = params.selector || '[autofocus]';
-        let forceFocusCount = 0;
-        useEffect(function autofocus(target) {
-            if (target) {
-                target.focus();
-                if (["INPUT", "TEXTAREA"].includes(target.tagName)) {
-                    const inputEl = target;
-                    inputEl.selectionStart = inputEl.selectionEnd = inputEl.value.length;
-                }
-            }
-        }, () => [comp.el.querySelector(selector), forceFocusCount]);
-
-        return function focusOnUpdate() {
-            forceFocusCount++; // force the effect to rerun on next patch
-        };
-    }
-
-    /**
-     * The useListener hook offers an alternative to Owl's classical event
-     * registration mechanism (with attribute 't-on-eventName' in xml). It is
-     * especially useful for abstract components, meant to be extended by
-     * specific ones. If those abstract components need to define event handlers,
-     * but don't have any template (because the template completely depends on
-     * specific cases), then using the 't-on' mechanism isn't adequate, as the
-     * handlers would be lost by the template override. In this case, using this
-     * hook instead is more convenient.
-     *
-     * Example: navigation event handling in AbstractField
-     *
-     * Usage: like all Owl hooks, this function has to be called in the
-     * constructor of an Owl component:
-     *
-     *   useListener('click', () => { console.log('clicked'); });
-     *
-     * An optional native query selector can be specified as second argument for
-     * event delegation. In this case, the handler is only called if the event
-     * is triggered on an element matching the given selector.
-     *
-     *   useListener('click', 'button', () => { console.log('clicked'); });
-     *
-     * Note: components that alter the event's target (e.g. Portal) are not
-     * expected to behave as expected with event delegation.
-     *
-     * @param {string} eventName the name of the event
-     * @param {string} [querySelector] a JS native selector for event delegation
-     * @param {function} handler the event handler (will be bound to the component)
-     * @param {Object} [addEventListenerOptions] to be passed to addEventListener as options.
-     *    Useful for listening in the capture phase
-     */
-    function useListener(eventName, querySelector, handler, addEventListenerOptions) {
-        if (typeof arguments[1] !== 'string') {
-            querySelector = null;
-            handler = arguments[1];
-            addEventListenerOptions = arguments[2];
-        }
-        if (typeof handler !== 'function') {
-            throw new Error('The handler must be a function');
-        }
-
-        const comp = Component.current;
-        let boundHandler;
-        if (querySelector) {
-            boundHandler = function (ev) {
-                let el = ev.target;
-                let target;
-                while (el && !target) {
-                    if (el.matches(querySelector)) {
-                        target = el;
-                    } else if (el === comp.el) {
-                        el = null;
-                    } else {
-                        el = el.parentElement;
-                    }
-                }
-                if (el) {
-                    handler.call(comp, ev);
-                }
-            };
-        } else {
-            boundHandler = handler.bind(comp);
-        }
-        useEffect(() => {
-            comp.el.addEventListener(eventName, boundHandler, addEventListenerOptions);
-            return () => {
-                comp.el.removeEventListener(eventName, boundHandler, addEventListenerOptions);
-            };
-        }, () => []);
-    }
-
-    return {
-        useAutofocus,
-        useListener,
-    };
-});
diff --git a/addons/web/static/src/legacy/js/core/error_utils.js b/addons/web/static/src/legacy/js/core/error_utils.js
index 34ee4a0cb8b..83ec86626c9 100644
--- a/addons/web/static/src/legacy/js/core/error_utils.js
+++ b/addons/web/static/src/legacy/js/core/error_utils.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { loadJS } from "web.ajax";
+import { loadJS } from "@web/core/assets";
 import BrowserDetection from "web.BrowserDetection";
 import { _t } from "web.core";
 /**
diff --git a/addons/web/static/src/legacy/js/core/misc.js b/addons/web/static/src/legacy/js/core/misc.js
index 8dea787c391..a457f61984e 100644
--- a/addons/web/static/src/legacy/js/core/misc.js
+++ b/addons/web/static/src/legacy/js/core/misc.js
@@ -183,10 +183,9 @@ function displayNotification(parent, action) {
     links = links.map(({url, label}) => `<a href="${_.escape(url)}" target="_blank">${_.escape(label)}</a>`)
     parent.displayNotification({
         title, // no escape for the title because it is done in the template
-        message: sprintf(_.escape(message), ...links),
+        message: owl.markup(sprintf(_.escape(message), ...links)),
         type,
         sticky,
-        messageIsHtml: true, // dynamic parts of the message are escaped above
     });
     return next;
 }
diff --git a/addons/web/static/src/legacy/js/core/owl_dialog.js b/addons/web/static/src/legacy/js/core/owl_dialog.js
index 0a6c7534458..ae67b71a8da 100644
--- a/addons/web/static/src/legacy/js/core/owl_dialog.js
+++ b/addons/web/static/src/legacy/js/core/owl_dialog.js
@@ -1,12 +1,13 @@
 odoo.define('web.OwlDialog', function (require) {
     "use strict";
 
-    const { Component, Portal, useRef } = owl;
+    const { Component, useRef, onMounted, onWillUnmount } = owl;
     const SIZE_CLASSES = {
         'extra-large': 'modal-xl',
         'large': 'modal-lg',
         'small': 'modal-sm',
     };
+    const { renderToString } = require('@web/core/utils/render');
 
     /**
      * Dialog (owl version)
@@ -36,51 +37,53 @@ odoo.define('web.OwlDialog', function (require) {
          * @param {boolean} [props.technical=true] If set to false, the modal will have
          *      the standard frontend style (use this for non-editor frontend features).
          */
-        constructor() {
-            super(...arguments);
-
+        setup() {
             this.modalRef = useRef('modal');
+            this.dialogRef = useRef('dialog');
             this.footerRef = useRef('modal-footer');
-        }
-
-        mounted() {
-            this.constructor.display(this);
-
-            this.env.bus.on('close_dialogs', this, this._close);
-
-            if (this.props.renderFooter) {
-                // Set up main button : will first look for an element with the
-                // 'btn-primary' class, then a 'btn' class, then the first button
-                // element.
-                let mainButton = this.footerRef.el.querySelector('.btn.btn-primary');
-                if (!mainButton) {
-                    mainButton = this.footerRef.el.querySelector('.btn');
-                }
-                if (!mainButton) {
-                    mainButton = this.footerRef.el.querySelector('button');
-                }
-                if (mainButton) {
-                    this.mainButton = mainButton;
-                    this.mainButton.addEventListener('keydown', this._onMainButtonKeydown.bind(this));
-                    this.mainButton.focus();
-                }
+            if (this.props.dialogAPI) {
+                this.props.dialogAPI.close = this._close.bind(this);
             }
 
-            this._removeTooltips();
+            onMounted(() => {
+                this.constructor.display(this);
 
-            // Notifies new webclient to adjust UI active element
-            this.env.bus.trigger("owl_dialog_mounted", this);
-        }
+                this.env.bus.on('close_dialogs', this, this._close);
 
-        willUnmount() {
-            // Notifies new webclient to adjust UI active element
-            this.env.bus.trigger("owl_dialog_willunmount", this);
+                if (this.props.renderFooter) {
+                    // Set up main button : will first look for an element with the
+                    // 'btn-primary' class, then a 'btn' class, then the first button
+                    // element.
+                    let mainButton = this.footerRef.el.querySelector('.btn.btn-primary');
+                    if (!mainButton) {
+                        mainButton = this.footerRef.el.querySelector('.btn');
+                    }
+                    if (!mainButton) {
+                        mainButton = this.footerRef.el.querySelector('button');
+                    }
+                    if (mainButton) {
+                        this.mainButton = mainButton;
+                        this.mainButton.addEventListener('keydown', this._onMainButtonKeydown.bind(this));
+                        this.mainButton.focus();
+                    }
+                }
 
-            this.env.bus.off('close_dialogs', this, this._close);
+                this._removeTooltips();
 
-            this._removeTooltips();
+                // Notifies new webclient to adjust UI active element
+                this.env.bus.trigger("owl_dialog_mounted", this);
+            });
 
-            this.constructor.hide(this);
+            onWillUnmount(() => {
+                // Notifies new webclient to adjust UI active element
+                this.env.bus.trigger("owl_dialog_willunmount", this);
+
+                this.env.bus.off('close_dialogs', this, this._close);
+
+                this._removeTooltips();
+
+                this.constructor.hide(this);
+            });
         }
 
         //--------------------------------------------------------------------------
@@ -178,7 +181,7 @@ odoo.define('web.OwlDialog', function (require) {
                 $(this.mainButton)
                     .tooltip({
                         delay: { show: 200, hide: 0 },
-                        title: () => this.env.qweb.renderToString('web.DialogButton.tooltip', {
+                        title: () => renderToString('web.DialogButton.tooltip', {
                             title: this.mainButton.innerText.toUpperCase(),
                         }),
                         trigger: 'manual',
@@ -225,7 +228,13 @@ odoo.define('web.OwlDialog', function (require) {
             // Activate last dialog and update body class
             const lastDialog = this.displayed[this.displayed.length - 1];
             if (lastDialog) {
-                lastDialog.el.focus();
+                if (lastDialog.el) {
+                    // legacy dialog
+                    lastDialog.el.focus();
+                } else {
+                    // Owl dialog | LegacyAdaptedDialog
+                    lastDialog.dialogRef.el.focus();
+                }
                 const modalEl = lastDialog.modalRef ?
                     // Owl dialog | LegacyAdaptedDialog
                     lastDialog.modalRef.el :
@@ -241,7 +250,6 @@ odoo.define('web.OwlDialog', function (require) {
 
     Dialog.displayed = [];
 
-    Dialog.components = { Portal };
     Dialog.defaultProps = {
         backdrop: 'static',
         renderFooter: true,
@@ -252,17 +260,26 @@ odoo.define('web.OwlDialog', function (require) {
         title: "Odoo",
     };
     Dialog.props = {
-        backdrop: { validate: b => ['static', true, false].includes(b) },
+        backdrop: { validate: b => ['static', true, false].includes(b), optional: true },
         contentClass: { type: String, optional: 1 },
         fullscreen: { type: Boolean, optional: 1 },
         onClosed: { type: Function, optional: 1 },
-        renderFooter: Boolean,
-        renderHeader: Boolean,
-        size: { validate: s => ['extra-large', 'large', 'medium', 'small'].includes(s) },
-        stopClicks: Boolean,
+        renderFooter: { type: Boolean, optional: true },
+        renderHeader: { type: Boolean, optional: true },
+        size: { validate: s => ['extra-large', 'large', 'medium', 'small'].includes(s), optional: true },
+        stopClicks: { type: Boolean, optional: true },
         subtitle: { type: String, optional: 1 },
-        technical: Boolean,
-        title: String,
+        technical: { type: Boolean, optional: true },
+        title: { type: String, optional: true },
+        dialogAPI: { type: Object, optional: 1 },
+        slots: {
+            type: Object,
+            optional: 1,
+            shape: {
+                default: { optional: 1 },
+                buttons: { optional: 1 },
+            },
+        },
     };
     Dialog.template = 'web.OwlDialog';
 
diff --git a/addons/web/static/src/legacy/js/core/popover.js b/addons/web/static/src/legacy/js/core/popover.js
index 03a25951dec..1e4e03b1921 100644
--- a/addons/web/static/src/legacy/js/core/popover.js
+++ b/addons/web/static/src/legacy/js/core/popover.js
@@ -1,7 +1,7 @@
 odoo.define('web.Popover', function (require) {
     'use strict';
 
-    const { Component, Portal, QWeb, useRef, useState } = owl;
+    const { Component, status, onWillUnmount, useEffect, useRef, useState } = owl;
 
     /**
      * Popover
@@ -17,8 +17,7 @@ odoo.define('web.Popover', function (require) {
          * @param {String} [props.position='bottom']
          * @param {String} [props.title]
          */
-        constructor() {
-            super(...arguments);
+        setup() {
             this.popoverRef = useRef('popover');
             this.orderedPositions = ['top', 'bottom', 'left', 'right'];
             this.state = useState({
@@ -39,20 +38,13 @@ odoo.define('web.Popover', function (require) {
              * keeping the count of global handlers low.
              */
             this._hasGlobalEventListeners = false;
-        }
 
-        mounted() {
-            this._compute();
-        }
-
-        patched() {
-            this._compute();
-        }
-
-        willUnmount() {
-            if (this._hasGlobalEventListeners) {
-                this._removeGlobalEventListeners();
-            }
+            useEffect(() => this._compute());
+            onWillUnmount(() => {
+                if (this._hasGlobalEventListeners) {
+                    this._removeGlobalEventListeners();
+                }
+            });
         }
 
         //----------------------------------------------------------------------
@@ -82,7 +74,6 @@ odoo.define('web.Popover', function (require) {
             if (this.props.onClosed) {
                 this.props.onClosed();
             }
-            this.trigger('o-popover-closed');
         }
 
         /**
@@ -172,17 +163,19 @@ odoo.define('web.Popover', function (require) {
          * @param {MouseEvent} ev
          */
         _onClick(ev) {
+            const props = this.props;
             this.state.displayed = !this.state.displayed;
             if (this.state.displayed) {
-                if (this.props.onOpened) {
-                    this.props.onOpened();
+                if (props.onOpened) {
+                    props.onOpened();
                 }
-                this.trigger('o-popover-opened');
             } else {
-                if (this.props.onClosed) {
-                    this.props.onClosed();
+                if (props.onClosed) {
+                    props.onClosed();
                 }
-                this.trigger('o-popover-closed');
+            }
+            if (!props.propagateClick) {
+                ev.stopPropagation();
             }
         }
 
@@ -206,9 +199,8 @@ odoo.define('web.Popover', function (require) {
 
         /**
          * @private
-         * @param {Event} ev
          */
-        _onPopoverClose(ev) {
+        _onPopoverClose() {
             this._close();
         }
 
@@ -230,7 +222,7 @@ odoo.define('web.Popover', function (require) {
          * @param {Event} ev
          */
         _onResizeWindow(ev) {
-            if (this.__owl__.status === 5 /* destroyed */) {
+            if (status(this) === "destroyed") {
                 return;
             }
             this._compute();
@@ -244,7 +236,7 @@ odoo.define('web.Popover', function (require) {
          * @param {Event} ev
          */
         _onScrollDocument(ev) {
-            if (this.__owl__.status === 5 /* destroyed */) {
+            if (status(this) === "destroyed") {
                 return;
             }
             this._compute();
@@ -320,12 +312,20 @@ odoo.define('web.Popover', function (require) {
 
     }
 
-    Popover.components = { Portal };
     Popover.template = 'Popover';
     Popover.defaultProps = {
         position: 'bottom',
+        propagateClick: true,
     };
     Popover.props = {
+        propagateClick: {
+            type: Boolean,
+            optional: true,
+        },
+        class: {
+            type: String,
+            optional: true,
+        },
         onClosed: {
             type: Function,
             optional: true,
@@ -341,12 +341,19 @@ odoo.define('web.Popover', function (require) {
         position: {
             type: String,
             validate: (p) => ['top', 'bottom', 'left', 'right'].includes(p),
+            optional: true,
         },
         title: { type: String, optional: true },
         titleAttribute: { type: String, optional: true },
+        slots: {
+            type: Object,
+            optional: true,
+            shape: {
+                default: { optional: true },
+                opened: { optional: true },
+            },
+        },
     };
 
-    QWeb.registerComponent('Popover', Popover);
-
     return Popover;
 });
diff --git a/addons/web/static/src/legacy/js/core/service_mixins.js b/addons/web/static/src/legacy/js/core/service_mixins.js
index e35f0695ff0..0d969a83fef 100644
--- a/addons/web/static/src/legacy/js/core/service_mixins.js
+++ b/addons/web/static/src/legacy/js/core/service_mixins.js
@@ -247,7 +247,6 @@ var ServicesMixin = {
      * @param {string} [options.type='warning'] 'info', 'success', 'warning', 'danger' or ''
      * @param {boolean} [options.sticky=false]
      * @param {string} [options.className]
-     * @param {boolean} [options.messageIsHtml=false]
      */
     displayNotification: function (options) {
         return this.call('notification', 'notify', options);
diff --git a/addons/web/static/src/legacy/js/core/translation.js b/addons/web/static/src/legacy/js/core/translation.js
index 169cf9422e8..f0aa3bcc789 100644
--- a/addons/web/static/src/legacy/js/core/translation.js
+++ b/addons/web/static/src/legacy/js/core/translation.js
@@ -3,6 +3,7 @@ odoo.define('web.translation', function (require) {
 "use strict";
 
 var Class = require('web.Class');
+const { _lt } = require("@web/core/l10n/translation");
 
 var TranslationDataBase = Class.extend(/** @lends instance.TranslationDataBase# */{
     init: function() {
@@ -90,20 +91,6 @@ var TranslationDataBase = Class.extend(/** @lends instance.TranslationDataBase#
  * @returns {String} source translated into the current locale
  */
 var _t = new TranslationDataBase().build_translation_function();
-/**
- * Lazy translation function, only performs the translation when actually
- * printed (e.g. inserted into a template)
- *
- * Useful when defining translatable strings in code evaluated before the
- * translation database is loaded, as class attributes or at the top-level of
- * an OpenERP Web module
- *
- * @param {String} s string to translate
- * @returns {Object} lazy translation object
- */
-var _lt = function (s) {
-    return {toString: function () { return _t(s); }};
-};
 
 /** Setup jQuery timeago */
 /*
diff --git a/addons/web/static/src/legacy/js/core/utils.js b/addons/web/static/src/legacy/js/core/utils.js
index 84e91c71395..45fe3e48c1f 100644
--- a/addons/web/static/src/legacy/js/core/utils.js
+++ b/addons/web/static/src/legacy/js/core/utils.js
@@ -255,11 +255,13 @@ _.escape = function escape(s) {
 // TODO (?)
 // * Markup.join / Markup#join => escapes items and returns a Markup
 // * Markup#replace => automatically escapes the replacements (difficult impl)
-class _Markup extends String {
-    [_.escapeMethod]() {
-        return this;
-    }
+
+// get a reference to the internalMarkup class from owl
+const _Markup = owl.markup('').constructor; 
+_Markup.prototype[_.escapeMethod] = function () {
+    return this;
 }
+
 // exposed for qweb2.js
 window._Markup = _Markup;
 
diff --git a/addons/web/static/src/legacy/js/fields/abstract_field_owl.js b/addons/web/static/src/legacy/js/fields/abstract_field_owl.js
index eddb8db02f9..e75586fb58f 100644
--- a/addons/web/static/src/legacy/js/fields/abstract_field_owl.js
+++ b/addons/web/static/src/legacy/js/fields/abstract_field_owl.js
@@ -2,10 +2,9 @@ odoo.define('web.AbstractFieldOwl', function (require) {
     "use strict";
 
     const field_utils = require('web.field_utils');
-    const { useListener } = require('web.custom_hooks');
-    const { useEffect } = require("@web/core/utils/hooks");
+    const { useListener } = require("@web/core/utils/hooks");
 
-    const { Component } = owl;
+    const { Component, onWillUpdateProps, useEffect } = owl;
 
     /**
      * This file defines the Owl version of the AbstractField. Specific fields
@@ -60,9 +59,7 @@ odoo.define('web.AbstractFieldOwl', function (require) {
          * @param {string} [props.options.mode=readonly] should be 'readonly' or 'edit'
          * @param {string} [props.options.viewType=default]
          */
-        constructor() {
-            super(...arguments);
-
+        setup() {
             this._canQuickEdit = this.constructor.isQuickEditable;
             this._isValid = true;
             // this is the last value that was set by the user, unparsed. This is
@@ -73,33 +70,14 @@ odoo.define('web.AbstractFieldOwl', function (require) {
             useListener('keydown', this._onKeydown);
             useListener('navigation-move', this._onNavigationMove);
             useEffect(() => this._applyDecorations());
-        }
-        /**
-         * Hack: studio tries to find the field with a selector base on its
-         * name, before it is mounted into the DOM. Ideally, this should be
-         * done in the onMounted hook, but in this case we are too late, and
-         * Studio finds nothing. As a consequence, the field can't be edited
-         * by clicking on its label (or on the row formed by the pair label-field).
-         *
-         * TODO: move this to mounted at some point?
-         *
-         * @override
-         */
-        __patch() {
-            const res = super.__patch(...arguments);
-            this.el.setAttribute('name', this.name);
-            this.el.classList.add('o_field_widget');
-            this.el.classList.toggle('o_quick_editable', this._canQuickEdit);
-            return res;
-        }
-        /**
-         * @async
-         * @param {Object} [nextProps]
-         * @returns {Promise}
-         */
-        async willUpdateProps(nextProps) {
-            this._lastSetValue = undefined;
-            return super.willUpdateProps(nextProps);
+            useEffect(() => {
+                this.el.setAttribute('name', this.name);
+                this.el.classList.add('o_field_widget');
+                this.el.classList.toggle('o_quick_editable', this._canQuickEdit);
+            });
+            onWillUpdateProps(() => {
+                this._lastSetValue = undefined;
+            });
         }
 
         //----------------------------------------------------------------------
diff --git a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
index 86da1feccb9..c57b68d3a18 100644
--- a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
+++ b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
@@ -5,6 +5,7 @@ odoo.define('web.basic_fields_owl', function (require) {
     const CustomCheckbox = require('web.CustomCheckbox');
     const { _lt } = require('web.translation');
 
+    const { onPatched } = owl;
 
     /**
      * FieldBadge displays the field's value inside a bootstrap pill badge.
@@ -27,11 +28,13 @@ odoo.define('web.basic_fields_owl', function (require) {
 
 
     class FieldBoolean extends AbstractField {
-        patched() {
-            super.patched();
-            if (this.props.event && this.props.event.target === this) {
-                this.activate();
-            }
+        setup() {
+            super.setup();
+            onPatched(() => {
+                if (this.props.event && this.props.event.target === this) {
+                    this.activate();
+                }
+            });
         }
 
         //----------------------------------------------------------------------
diff --git a/addons/web/static/src/legacy/js/fields/field_registry_owl.js b/addons/web/static/src/legacy/js/fields/field_registry_owl.js
index 1af67046021..22aa61369f2 100644
--- a/addons/web/static/src/legacy/js/fields/field_registry_owl.js
+++ b/addons/web/static/src/legacy/js/fields/field_registry_owl.js
@@ -23,6 +23,9 @@ odoo.define('web._field_registry_owl', function (require) {
 
     // Basic fields
     registry
-        .add('badge', basicFields.FieldBadge)
-        .add('boolean', basicFields.FieldBoolean);
+        .add('badge', basicFields.FieldBadge);
+        // deactivate the owl FieldBoolean as it causes issues in the Settings form view
+        // if it is in an invisible block. This was a legacy implementation of the owl FieldBoolean
+        // anyway, and we're currently rewritting the basic views in owl.
+        // .add('boolean', basicFields.FieldBoolean);
 });
diff --git a/addons/web/static/src/legacy/js/fields/field_wrapper.js b/addons/web/static/src/legacy/js/fields/field_wrapper.js
index 64b44c98be4..4f750ac516f 100644
--- a/addons/web/static/src/legacy/js/fields/field_wrapper.js
+++ b/addons/web/static/src/legacy/js/fields/field_wrapper.js
@@ -4,6 +4,8 @@ odoo.define('web.FieldWrapper', function (require) {
     const { ComponentWrapper } = require('web.OwlCompatibility');
     const field_utils = require('web.field_utils');
 
+    const { App } = owl;
+
     /**
      * This file defines the FieldWrapper component, an extension of ComponentWrapper,
      * needed to instanciate Owl fields inside legacy widgets. This component
@@ -66,8 +68,8 @@ odoo.define('web.FieldWrapper', function (require) {
          * not the real field Component, which triggers the 'field-changed'
          * event. This function writes the attribute on that field Component.
          */
-        mounted() {
-            super.mounted(...arguments);
+        on_attach_callback() {
+            super.on_attach_callback();
             this.componentRef.comp.__node = this.__node;
         }
 
@@ -124,9 +126,16 @@ odoo.define('web.FieldWrapper', function (require) {
             // instantiated yet when the renderer first asks if it is set
             // (only the wrapper is instantiated), so we instantiate one
             // with the same props, get its 'isSet' status, and destroy it.
-            const c = new this.Component(null, this.props);
-            const isSet = c.isSet;
-            c.destroy();
+            const app = new App(null, {
+                templates: window.__OWL_TEMPLATES__,
+                env: this.env,
+                dev: this.env.isDebug(),
+                translateFn: owl.Component.env._t,
+                translatableAttributes: ["data-tooltip"],
+            });
+            const node = app.makeNode(this.Component, this.props);
+            const isSet = node.component.isSet;
+            app.destroy();
             return isSet;
         }
         isValid() {
@@ -137,9 +146,16 @@ odoo.define('web.FieldWrapper', function (require) {
             // instantiated yet when the renderer first asks if it is set
             // (only the wrapper is instantiated), so we instantiate one
             // with the same props, get its 'isValid' status, and destroy it.
-            const c = new this.Component(null, this.props);
-            const isValid = c.isValid;
-            c.destroy();
+            const app = new App(null, {
+                templates: window.__OWL_TEMPLATES__,
+                env: this.env,
+                dev: this.env.isDebug(),
+                translateFn: owl.Component.env._t,
+                translatableAttributes: ["data-tooltip"],
+            });
+            const node = app.makeNode(this.Component, this.props);
+            const isValid = node.component.isValid;
+            app.destroy();
             return isValid;
         }
         removeInvalidClass() {
diff --git a/addons/web/static/src/legacy/js/fields/relational_fields.js b/addons/web/static/src/legacy/js/fields/relational_fields.js
index f06e2addb84..acbead18f05 100644
--- a/addons/web/static/src/legacy/js/fields/relational_fields.js
+++ b/addons/web/static/src/legacy/js/fields/relational_fields.js
@@ -28,8 +28,7 @@ var KanbanRenderer = require('web.KanbanRenderer');
 var ListRenderer = require('web.ListRenderer');
 const { ComponentWrapper, WidgetAdapterMixin } = require('web.OwlCompatibility');
 const { sprintf, toBoolElse } = require("web.utils");
-
-const { escape } = owl;
+const { escape } = require("@web/core/utils/strings");
 
 var _t = core._t;
 var _lt = core._lt;
@@ -1100,7 +1099,6 @@ var FieldX2Many = AbstractField.extend(WidgetAdapterMixin, {
         navigation_move: '_onNavigationMove',
         save_optional_fields: '_onSaveOrLoadOptionalFields',
         load_optional_fields: '_onSaveOrLoadOptionalFields',
-        pager_changed: '_onPagerChanged',
     }),
 
     // We need to trigger the reset on every changes to be aware of the parent changes
@@ -1145,6 +1143,7 @@ var FieldX2Many = AbstractField.extend(WidgetAdapterMixin, {
                     Promise.resolve();
             },
             withAccessKey: false,
+            onPagerChanged: this._onPagerChanged.bind(this),
         };
         var arch = this.view && this.view.arch;
         if (arch) {
@@ -1776,9 +1775,7 @@ var FieldX2Many = AbstractField.extend(WidgetAdapterMixin, {
      * @private
      * @param {OdooEvent} ev
      */
-    _onPagerChanged: function (ev) {
-        ev.stopPropagation();
-        const { currentMinimum, limit } = ev.data;
+    _onPagerChanged: function ({ currentMinimum, limit }) {
         this._updateControlPanel({ currentMinimum, limit });
         this.trigger_up('load', {
             id: this.value.id,
diff --git a/addons/web/static/src/legacy/js/model.js b/addons/web/static/src/legacy/js/model.js
index 733a8319d6d..7f5a2ce3e61 100644
--- a/addons/web/static/src/legacy/js/model.js
+++ b/addons/web/static/src/legacy/js/model.js
@@ -1,10 +1,11 @@
 odoo.define("web.Model", function (require) {
     "use strict";
 
-    const { groupBy, partitionBy } = require("web.utils");
+    const { groupBy  } = require("web.utils");
     const Registry = require("web.Registry");
+    const { useBus } = require("@web/core/utils/hooks");
 
-    const { Component, EventBus, Observer } = owl;
+    const { EventBus, onWillRender, useComponent } = owl;
     const isNotNull = (val) => val !== null && val !== undefined;
 
     /**
@@ -232,7 +233,7 @@ odoo.define("web.Model", function (require) {
             this.dispatching = false;
             this.extensions = [];
             this.externalState = {};
-            this.mapping = {};
+            this.mapping = new WeakMap();
             this.rev = 1;
 
             const { name, registry } = this.constructor;
@@ -426,19 +427,9 @@ odoo.define("web.Model", function (require) {
          * @see Context.__notifyComponents() in owl.js for explanation
          * @private
          */
-        async _notifyComponents() {
+        _notifyComponents() {
             const rev = ++this.rev;
-            const subscriptions = this.subscriptions.update || [];
-            const groups = partitionBy(subscriptions, (s) =>
-                s.owner ? s.owner.__owl__.depth : -1
-            );
-            for (let group of groups) {
-                const proms = group.map((sub) =>
-                    sub.callback.call(sub.owner, rev)
-                );
-                Component.scheduler.flush();
-                await Promise.all(proms);
-            }
+            this.trigger("update", { rev });
         }
     }
 
@@ -452,47 +443,32 @@ odoo.define("web.Model", function (require) {
      * @returns {model}
      */
     function useModel(modelName) {
-        const component = Component.current;
+        const component = useComponent();
         const model = component.env[modelName];
         if (!(model instanceof Model)) {
-            throw new Error(`No Model found when connecting '${
-                component.name
-                }'`);
+            throw new Error(`No Model found when connecting '${component.constructor.name}'`);
         }
 
-        const mapping = model.mapping;
-        const __owl__ = component.__owl__;
-        const componentId = __owl__.id;
-        if (!__owl__.observer) {
-            __owl__.observer = new Observer();
-            __owl__.observer.notifyCB = component.render.bind(component);
-        }
-        const currentCB = __owl__.observer.notifyCB;
-        __owl__.observer.notifyCB = function () {
-            if (model.rev > mapping[componentId]) {
+        model.mapping.set(component, 0);
+        const __render = component.render.bind(component);
+        component.render = function () {
+            if (model.rev > model.mapping.get(component)) {
                 return;
             }
-            currentCB();
-        };
-        mapping[componentId] = 0;
-        const renderFn = __owl__.renderFn;
-        __owl__.renderFn = function (comp, params) {
-            mapping[componentId] = model.rev;
-            return renderFn(comp, params);
+            __render();
         };
 
-        model.on("update", component, async (modelRev) => {
-            if (mapping[componentId] < modelRev) {
-                mapping[componentId] = modelRev;
-                await component.render();
-            }
+        onWillRender(() => {
+            model.mapping.set(component, model.rev);
         });
 
-        const __destroy = component.__destroy;
-        component.__destroy = (parent) => {
-            model.off("update", component);
-            __destroy.call(component, parent);
-        };
+        useBus(model, "update", (ev) => {
+            const { rev } = ev.detail;
+            if (model.mapping.get(component) < rev) {
+                model.mapping.set(component, rev);
+                component.render();
+            }
+        });
 
         return model;
     }
diff --git a/addons/web/static/src/legacy/js/owl_compatibility.js b/addons/web/static/src/legacy/js/owl_compatibility.js
index 0f5f8df301b..4e4cefb411e 100644
--- a/addons/web/static/src/legacy/js/owl_compatibility.js
+++ b/addons/web/static/src/legacy/js/owl_compatibility.js
@@ -1,8 +1,6 @@
-odoo.define('web.OwlCompatibility', function () {
+odoo.define('web.OwlCompatibility', function (require) {
     "use strict";
 
-    const { Component, useRef, useSubEnv, xml } = owl;
-
     /**
      * This file defines the necessary tools for the transition phase where Odoo
      * legacy widgets and Owl components will coexist. There are two possible
@@ -11,11 +9,24 @@ odoo.define('web.OwlCompatibility', function () {
      *  2) A legacy widget has to instantiate Owl components
      */
 
+    const {
+        App,
+        Component,
+        onMounted,
+        onWillStart,
+        onWillUnmount,
+        onPatched,
+        onWillUpdateProps,
+        onWillDestroy,
+        useSubEnv,
+        xml,
+        status,
+    } = owl;
 
     const widgetSymbol = odoo.widgetSymbol;
     const children = new WeakMap(); // associates legacy widgets with their Owl children
 
-    const templateForLegacy = xml`<div/>`;
+    const templateForLegacy = xml`<t/>`;
     const templateForOwl = xml`<t t-component="props.Component" t-props="childProps" />`;
     /**
      * Case 1) An Owl component has to instantiate legacy widgets
@@ -80,7 +91,7 @@ odoo.define('web.OwlCompatibility', function () {
          *
          * @override
          */
-        constructor(parent, props) {
+        constructor(props) {
             if (!props.Component) {
                 throw Error(`ComponentAdapter: 'Component' prop is missing.`);
             }
@@ -93,11 +104,78 @@ odoo.define('web.OwlCompatibility', function () {
             ComponentAdapter.template = template;
             super(...arguments);
             this.template = template;
-            ComponentAdapter.template = null;
 
             this.widget = null; // widget instance, if Component is a legacy widget
         }
 
+        setup() {
+            onWillUpdateProps((nextProps) => {
+                if (this.widget) {
+                    return this.updateWidget(nextProps);
+                }
+            });
+
+            let widgetIsAttached = false;
+            const insertWidget = () => {
+                this.removeEl();
+                if (!this.widget || !this.widget.el) {
+                    return;
+                }
+                const node = this.__owl__.firstNode();
+                node.parentNode.insertBefore(this.widget.el, node);
+                this.widgetEl = this.widget.el;
+                widgetIsAttached = true;
+            };
+
+            onMounted(() => {
+                insertWidget();
+                if (this.widget && this.widget.on_attach_callback) {
+                    this.widget.on_attach_callback();
+                }
+            });
+
+            onPatched(() => {
+                if (widgetIsAttached) {
+                    this.renderWidget();
+                } else {
+                    insertWidget();
+                }
+            });
+
+            onWillDestroy(() => this.__destroy(this.__owl__.parent.component));
+
+            onWillStart(this.onWillStart);
+            onWillUnmount(this.onWillUnmount);
+        }
+
+        onWillStart() {
+            if (!(this.props.Component.prototype instanceof Component)) {
+                this.widget = new this.props.Component(this, ...this.widgetArgs);
+                return this.widget._widgetRenderAndInsert(() => {});
+            }
+        }
+
+        onWillUnmount() {
+            this.removeEl();
+            if (this.widget && this.widget.on_detach_callback) {
+                this.widget.on_detach_callback();
+            }
+        }
+
+        removeEl() {
+            if (this.widgetEl) {
+                this.widgetEl.remove();
+                this.widgetEl = null;
+            }
+        }
+
+        __destroy() {
+            this.removeEl();
+            if (this.widget) {
+                this.widget.destroy();
+            }
+        }
+
         get childProps() {
             if (!this._childProps) {
                 this._childProps = Object.assign({}, this.props);
@@ -106,80 +184,6 @@ odoo.define('web.OwlCompatibility', function () {
             return this._childProps;
         }
 
-        /**
-         * Starts the legacy widget (not in the DOM yet)
-         *
-         * @override
-         */
-        willStart() {
-            if (!(this.props.Component.prototype instanceof Component)) {
-                this.widget = new this.props.Component(this, ...this.widgetArgs);
-                return this.widget._widgetRenderAndInsert(() => {});
-            }
-        }
-
-        /**
-         * Updates the internal state of the legacy widget (but doesn't re-render
-         * it yet).
-         *
-         * @override
-         */
-        willUpdateProps(nextProps) {
-            if (this.widget) {
-                return this.updateWidget(nextProps);
-            }
-        }
-
-        /**
-         * Hooks just before the actual patch to replace the fake div in the
-         * vnode by the actual node of the legacy widget. If the widget has to
-         * be re-render (because it has previously been updated), re-render it.
-         * This must be synchronous.
-         *
-         * @override
-         */
-        __patch(target, vnode) {
-            if (this.widget) {
-                if (this.__owl__.vnode) { // not at first rendering
-                    this.renderWidget();
-                }
-                vnode.elm = this.widget.el;
-            }
-            const result = super.__patch(...arguments);
-            if (this.widget && this.el !== this.widget.el) {
-                this.__owl__.vnode.elm = this.widget.el;
-            }
-            return result;
-        }
-
-        /**
-         * @override
-         */
-        mounted() {
-            if (this.widget && this.widget.on_attach_callback) {
-                this.widget.on_attach_callback();
-            }
-        }
-
-        /**
-         * @override
-         */
-        willUnmount() {
-            if (this.widget && this.widget.on_detach_callback) {
-                this.widget.on_detach_callback();
-            }
-        }
-
-        /**
-         * @override
-         */
-        __destroy() {
-            super.__destroy(...arguments);
-            if (this.widget) {
-                this.widget.destroy();
-            }
-        }
-
         /**
          * Getter that translates the props (except 'Component') into the array
          * of arguments used to initialize the legacy widget.
@@ -274,8 +278,27 @@ odoo.define('web.OwlCompatibility', function () {
                 this.trigger(evType.replace(/_/g, '-'), payload);
             }
         }
+
+        get el() {
+            if (this.widget) {
+                return this.widget.el;
+            }
+            return super.el;
+        }
     }
 
+    function standaloneAdapter(props) {
+        const env = owl.Component.env;
+        const app = new App(null, {
+            templates: window.__OWL_TEMPLATES__,
+            env,
+            dev: env.isDebug(),
+            translatableAttributes: ["data-tooltip"],
+            translateFn: env._t,
+        });
+        const node = app.makeNode(ComponentAdapter, props);
+        return node.component;
+    }
 
     /**
      * Case 2) A legacy widget has to instantiate Owl components
@@ -341,154 +364,139 @@ odoo.define('web.OwlCompatibility', function () {
          * the DOM (will be removed alongside this widget).
          */
         destroy() {
-            for (const component of children.get(this) || []) {
-                component.env.qweb.off("update", component);
-                component.__destroy();
+            for (const wrapper of children.get(this) || []) {
+                wrapper.destroy();
             }
             children.delete(this);
         },
     };
-    class ComponentWrapper extends Component {
-        /**
-         * Stores the reference of the instance in the parent (in __components).
-         * Also creates a sub environment with a function that will be called
-         * just before events are triggered (see component_extension.js). This
-         * allows to add DOM event listeners on-the-fly, to redirect those Owl
-         * custom (yet DOM) events to legacy custom events (trigger_up).
-         *
-         * @override
-         * @param {Widget|null} parent
-         * @param {Component} Component this is a Class, not an instance
-         * @param {Object} props
-         */
-        constructor(parent, Component, props) {
-            if (parent instanceof Component) {
-                throw new Error('ComponentWrapper must be used with a legacy Widget as parent');
+
+    //----------------------------------//
+    // Low-level coordination functions //
+    //----------------------------------//
+
+    /**
+     * Calls "callback" recursively on a ComponentNode's hierarchy
+     *
+     * @param  {ComponentNode}
+     * @param  {Boolean}  childrenFirst whether to execute on the bottom-most child first
+     * @param  {Function} callback
+     */
+    function recursiveCall(node, childrenFirst = false, callback) {
+        if (!childrenFirst) {
+            callback(node);
+        }
+        for (const child of Object.values(node.children)) {
+            recursiveCall(child, childrenFirst, callback);
+        }
+        if (childrenFirst) {
+            callback(node);
+        }
+    }
+
+    /**
+     * Make the node able to distinguish between
+     * mounting in the DOM and mounting outside of if.
+     * @param  {ComponentNode} node
+     */
+    function prepareForFinish(node) {
+        const fiber = node.fiber;
+        const complete = fiber.complete;
+        fiber.complete = function() {
+            // if target is not in dom
+            // just trigger mounted hooks on the Proxy, not on any other node
+            if (!document.contains(this.target)) {
+                this.mounted = [this];
+                // We skipped a bunch of mounted calls.
+                // Following calls to patched may crash because of this.
+                // (e.g. useEffect dependencies set in mounted and used in patched)
             }
-            super(null, props);
-            if (parent) {
-                this._register(parent);
+            complete.call(this);
+        };
+    }
+
+    const nodesToRemount = new WeakMap();
+    /**
+     * Pushed a node into the nodesToRemount WeakMap.
+     * The value is a callback that sets the node for remounting
+     * @param {ComponentNode} node
+     * @param {function} updateAndRender The original node's prototype's
+     */
+    function setToRemount(node, updateAndRender) {
+        let toRemount = true;
+
+        node.mounted.push(() => {
+            toRemount = false;
+        });
+        node.updateAndRender = function (props, parentFiber) {
+            const res = updateAndRender.call(this, ...arguments);
+            const rootMounted = parentFiber.root.mounted;
+            if (toRemount && !rootMounted.includes(this.fiber)) {
+                rootMounted.push(this.fiber);
             }
+            return res;
+        };
+
+        return () => toRemount = true;
+    }
+    /**
+     * Make the node able to remount its children nodes correctly
+     * Typically, in that case we don't call willPatch and patched hooks,
+     * rather, we want to call the mounted hooks
+     * @param  {ComponentNode} mainNode
+     */
+    function prepareForRemount(mainNode) {
+        const updateAndRender = mainNode.updateAndRender;
+        recursiveCall(mainNode, false, (node) => {
+            if (mainNode === node) {
+                return;
+            }
+            if (nodesToRemount.has(node)) {
+                nodesToRemount.get(node)();
+                return;
+            } else {
+                nodesToRemount.set(node, setToRemount(node, updateAndRender));
+            }
+        });
+    }
+
+    /**
+     * Registers a wrapper instance as a child of the given parent in the
+     * 'children' weakMap.
+     *
+     * @private
+     * @param {Widget} parent
+     */
+    function registerWrapper(parent, wrapper) {
+        let parentChildren = children.get(parent);
+        if (!parentChildren) {
+            parentChildren = [];
+            children.set(parent, parentChildren);
+        }
+        parentChildren.push(wrapper);
+    }
+
+    /**
+     * The component class that will be instanciated between a legacy and an OWL 2 layer.
+     */
+    class ProxyComponent extends Component {
+        setup() {
+            onMounted(() => {
+                this.props.mounted();
+            });
+            onPatched(() => {
+                this.props.patched();
+            });
+            onWillUnmount(() => {
+                // The current el will be change if we remount after unmounting
+                this._handledEvents = new Set();
+            });
+            this.parentWidget = this.props.parentWidget;
+            this._handledEvents = new Set();
             useSubEnv({
                 [widgetSymbol]: this._addListener.bind(this)
             });
-
-            this.parentWidget = parent;
-            this.Component = Component;
-            this.props = props || {};
-            this._handledEvents = new Set(); // Owl events we are redirecting
-
-            this.componentRef = useRef("component");
         }
-
-        /**
-         * Calls __callMounted on itself and on each sub component (as this
-         * function isn't recursive) when the component is appended into the DOM.
-         */
-        on_attach_callback() {
-            function recursiveCallMounted(component) {
-                const { status, currentFiber } = component.__owl__;
-
-                if (status === 2 && currentFiber && !currentFiber.isCompleted) {
-                    // the component is rendered but another rendering is being done
-                    // it would be foolish to declare the component and children as mounted
-                    return;
-                }
-                if (
-                   status !== 2 /* RENDERED */ &&
-                   status !== 3 /* MOUNTED */ &&
-                   status !== 4 /* UNMOUNTED */
-                ) {
-                    // Avoid calling mounted on a component that is not even
-                    // rendered. Doing otherwise will lead to a crash if a
-                    // specific mounted callback is legitimately relying on the
-                    // component being mounted.
-                    return;
-                }
-                for (const key in component.__owl__.children) {
-                    recursiveCallMounted(component.__owl__.children[key]);
-                }
-                component.__callMounted();
-            }
-            recursiveCallMounted(this);
-        }
-        /**
-         * Calls __callWillUnmount to notify the component it will be unmounted.
-         */
-        on_detach_callback() {
-            this.__callWillUnmount();
-        }
-
-        /**
-         * Overrides to remove the reference to this component in the parent.
-         *
-         * @override
-         */
-        destroy() {
-            if (this.parentWidget) {
-                const parentChildren = children.get(this.parentWidget);
-                if (parentChildren) {
-                    const index = parentChildren.indexOf(this);
-                    children.get(this.parentWidget).splice(index, 1);
-                }
-            }
-            super.destroy();
-        }
-
-        /**
-         * Changes the parent of the wrapper component. This is a function of the
-         * legacy widgets (ParentedMixin), so we have to handle it someway.
-         * It simply removes the reference of this component in the current
-         * parent (if there was one), and adds the reference to the new one.
-         *
-         * We have at least one usecase for this: in views, the renderer is
-         * instantiated without parent, then a controller is instantiated with
-         * the renderer as argument, and finally, setParent is called to set the
-         * controller as parent of the renderer. This implies that Owl renderers
-         * can't trigger events in their constructor.
-         *
-         * @param {Widget} parent
-         */
-        setParent(parent) {
-            if (parent instanceof Component) {
-                throw new Error('ComponentWrapper must be used with a legacy Widget as parent');
-            }
-            this._register(parent);
-            if (this.parentWidget) {
-                const parentChildren = children.get(this.parentWidget);
-                parentChildren.splice(parentChildren.indexOf(this), 1);
-            }
-            this.parentWidget = parent;
-        }
-
-        /**
-         * Updates the props and re-render the component.
-         *
-         * @async
-         * @param {Object} props
-         * @return {Promise}
-         */
-        async update(props = {}) {
-            if (this.__owl__.status === 5 /* destroyed */) {
-                return new Promise(() => {});
-            }
-
-            Object.assign(this.props, props);
-
-            let prom;
-            if (this.__owl__.status === 3 /* mounted */) {
-                prom = this.render();
-            } else {
-                // we may not be in the DOM, but actually want to be redrawn
-                // (e.g. we were detached from the DOM, and now we're going to
-                // be re-attached, but we need to be reloaded first). In this
-                // case, we have to call 'mount' as Owl would skip the rendering
-                // if we simply call render.
-                prom = this.mount(...this._mountArgs);
-            }
-            return prom;
-        }
-
         /**
          * Adds an event handler that will redirect the given Owl event to an
          * Odoo legacy event. This function is called just before the event is
@@ -498,7 +506,7 @@ odoo.define('web.OwlCompatibility', function () {
          * @param {string} evType
          */
         _addListener(evType) {
-            if (this.parentWidget && !this._handledEvents.has(evType)) {
+            if (this.parentWidget && !this._handledEvents.has(evType) && status(this) === "mounted") {
                 this._handledEvents.add(evType);
                 this.el.addEventListener(evType, ev => {
                     // as the WrappeComponent has the same root node as the
@@ -516,52 +524,216 @@ odoo.define('web.OwlCompatibility', function () {
                 });
             }
         }
+    }
+    ProxyComponent.template = xml`<t t-component="props.Component" t-props="props.props"/>`;
 
-        /**
-         * Registers this instance as a child of the given parent in the
-         * 'children' weakMap.
-         *
-         * @private
-         * @param {Widget} parent
-         */
-        _register(parent) {
-            let parentChildren = children.get(parent);
-            if (!parentChildren) {
-                parentChildren = [];
-                children.set(parent, parentChildren);
+    class ComponentWrapper {
+        constructor(parent, Component, props) {
+            if (parent instanceof Component) {
+                throw new Error("ComponentWrapper must be used with a legacy Widget as parent");
             }
-            parentChildren.push(this);
+            this.setParent(parent);
+            this.props = props;
+
+            this.Component = Component;
+
+            const env = owl.Component.env;
+            const appConfig = {
+                env,
+                templates: window.__OWL_TEMPLATES__,
+                dev: env.isDebug(),
+                translatableAttributes: ["data-tooltip"],
+                translateFn: env._t,
+            };
+            const app = new App(null, appConfig);
+            this.app = app;
+            this.node = this._makeOwlNode();
+            this.env = this.node.component.env;
+            app.root = this.node;
+            this.__owl__ = Object.create(this.node);
+            this.componentRef = { comp: null };
+            this.status = "new";
+            this.setup();
         }
-        /**
-         * Stores mount target and position at first mount. That way, when updating
-         * while out of DOM, we know where and how to remount.
-         * @see update()
-         * @override
-         */
+
+        _makeOwlNode() {
+            const onPatched = () => {
+                this.componentRef.comp = Object.values(this.node.children)[0].component;
+                if (this.renderResolve) {
+                    this.renderResolve();
+                }
+            };
+
+            const props = {
+                props: this.props,
+                mounted: onPatched,
+                patched: onPatched,
+                Component: this.Component,
+                parentWidget: this.parentWidget,
+            };
+            return this.app.makeNode(ProxyComponent, props);
+        }
+
+        setup() {}
+
+        get el() {
+            return this.node.component.el;
+        }
+
+        //------------------//
+        // OWL 1 - like API //
+        //------------------//
+
         async mount(target, options) {
-            if (options && options.position === 'self') {
-                throw new Error(
-                    'Unsupported position: "self" is not allowed for wrapper components. ' +
-                    'Contact the JS Framework team or open an issue if your use case is relevant.'
-                );
+            if (this.status === "mounted" || this.status === "willMount") {
+                return this.render();
+            } else if (this.status === "destroyed") {
+                return;
             }
-            this._mountArgs = arguments;
-            return super.mount(...arguments);
+            if (target) {
+                this.target = target;
+            }
+            if (options) {
+                this.mountOptions = options;
+            }
+            if (this.status === "unmounted") {
+                prepareForRemount(this.node);
+            }
+            this.status = "willMount";
+            const prom = this.app.mountNode(this.node, this.target, this.mountOptions);
+            prepareForFinish(this.node);
+            await prom;
+            if (document.contains(this.target)) {
+                this.status = "mounted";
+            }
+            this.node.willStart = [];
+            // remove the promise.resolve from mounted callbacks
+            const mounted = this.node.mounted;
+            this.node.mounted = mounted.slice(0, mounted.length - 1);
+            return this;
         }
 
-        //----------------------------------------------------------------------
-        // Getters
-        //----------------------------------------------------------------------
+        unmount() {
+            this.on_detach_callback();
+            this.el.remove();
+            this.node.bdom = null;
+        }
+
+        render() {
+            if (this.renderProm) {
+                this.node.render();
+                return this.renderProm;
+            }
+            this.renderProm = new Promise((resolve, reject) => {
+                this.renderResolve = resolve;
+                this.renderReject = reject;
+            }).then(() => {
+                this.renderProm = null;
+                this.renderResolve = null;
+                this.renderReject = null;
+            });
+            this.node.render();
+            return this.renderProm;
+        }
+
+        trigger() {
+            return this.node.component.trigger(...arguments);
+        }
+
+        destroy() {
+            if (["willMount", "unmounted"].includes(this.status)) {
+                recursiveCall(this.node, false, (node) => {
+                    node.willUnmount = [];
+                });
+            }
+            this.app.destroy();
+            this.status = "destroyed";
+        }
+
+        //---------------------//
+        // API from legacy POV //
+        //---------------------//
 
         get $el() {
             return $(this.el);
         }
+
+        on_attach_callback() {
+            if (!document.contains(this.el)) {
+                return;
+            }
+            if (this.status === "mounted") {
+                return;
+            }
+            recursiveCall(this.node, true, (node) => {
+               for (const cb of node.mounted) {
+                    cb();
+                }
+            });
+            this.status = "mounted";
+        }
+
+        /**
+         * Calls willUnmount to notify the component it will be unmounted.
+         */
+        on_detach_callback() {
+            if (this.status === "unmounted") {
+                return;
+            }
+            recursiveCall(this.node, false, (node) => {
+                // node.status might be "new" (0) here, if the component is
+                // currently being re-rendered, and a new component has just
+                // been instantiated, but as the rendering isn't completed, it
+                // isn't mounted yet
+                if (node.status === 1) {
+                    const component = node.component;
+                    for (const cb of node.willUnmount) {
+                        cb.call(component);
+                    }
+                }
+            });
+            this.node.status = 0;
+            this.status = "unmounted";
+        }
+
+        async update(nextProps) {
+            if (this.status === "destroyed") {
+                return;
+            }
+            const props = this.node.component.props.props;
+            const nextComponentProps = Object.assign({}, props, nextProps);
+            this.node.component.props.props = nextComponentProps;
+            this.props = nextComponentProps;
+            if (this.status === "unmounted") {
+                return this.mount(this.target);
+            } else {
+                return this.render();
+            }
+        }
+
+        setParent(parent) {
+            if (parent instanceof Component) {
+                throw new Error('ComponentWrapper must be used with a legacy Widget as parent');
+            }
+            if (parent) {
+                registerWrapper(parent, this);
+            }
+            if (this.parentWidget) {
+                const parentChildren = children.get(this.parentWidget);
+                parentChildren.splice(parentChildren.indexOf(this), 1);
+            }
+
+            this.parentWidget = parent;
+            if (this.node) {
+                this.node.component.parentWidget = parent;
+            }
+        }
     }
-    ComponentWrapper.template = xml`<t t-component="Component" t-props="props" t-ref="component"/>`;
 
     return {
         ComponentAdapter,
         ComponentWrapper,
         WidgetAdapterMixin,
+        standaloneAdapter,
     };
 });
diff --git a/addons/web/static/src/legacy/js/public/public_root.js b/addons/web/static/src/legacy/js/public/public_root.js
index 71ec448bc81..8dfd32f3d20 100644
--- a/addons/web/static/src/legacy/js/public/public_root.js
+++ b/addons/web/static/src/legacy/js/public/public_root.js
@@ -20,15 +20,18 @@ import {
     mapLegacyEnvToWowlEnv,
     makeLegacyRainbowManService,
 } from "../../utils";
-import { ComponentAdapter } from "web.OwlCompatibility";
+import { standaloneAdapter } from "web.OwlCompatibility";
 
 import { loadBundleTemplates } from "@web/core/assets";
 import { makeEnv, startServices } from "@web/env";
 import { MainComponentsContainer } from "@web/core/main_components_container";
 import { browser } from '@web/core/browser/browser';
 import { jsonrpc } from '@web/core/network/rpc_service';
+import { _t } from "@web/core/l10n/translation";
+
+
 const serviceRegistry = registry.category("services");
-const { Component, config, mount, whenReady } = owl;
+const { Component, App, whenReady } = owl;
 
 // Load localizations outside the PublicRoot to not wait for DOM ready (but
 // wait for them in PublicRoot)
@@ -355,12 +358,10 @@ export const PublicRoot = publicWidget.RootWidget.extend({
     },
 });
 
-
 /**
  * Configure Owl with the public env
  */
-config.mode = legacyEnv.isDebug() ? "dev" : "prod";
-Component.env = legacyEnv;
+owl.Component.env = legacyEnv;
 
 /**
  * This widget is important, because the tour manager needs a root widget in
@@ -404,17 +405,21 @@ export async function createPublicRoot(RootWidget) {
     }, { force: true });
 
     const wowlEnv = makeEnv();
-    wowlEnv.qweb.addTemplates(await loadBundleTemplates("web.assets_frontend"));
+
+    const templates = await loadBundleTemplates("web.assets_frontend");
+    window.__OWL_TEMPLATES__ = templates;
     await startServices(wowlEnv);
     mapLegacyEnvToWowlEnv(legacyEnv, wowlEnv);
-
-    const adapter = new ComponentAdapter(null, { Component }); // Used for _trigger_up compat layer
-    const publicRoot = new RootWidget(adapter);
+    // The root widget's parent is a standalone adapter so that it has _trigger_up
+    const publicRoot = new RootWidget(standaloneAdapter({ Component }));
     await Promise.all([
-        mount(MainComponentsContainer, {
-            target: document.body,
+        new App(MainComponentsContainer, {
             env: wowlEnv,
-        }),
+            dev: wowlEnv.debug,
+            templates: window.__OWL_TEMPLATES__,
+            translateFn: _t,
+            translatableAttributes: ["data-tooltip"],
+        }).mount(document.body),
         publicRoot.attachTo(document.body),
     ]);
     return publicRoot;
diff --git a/addons/web/static/src/legacy/js/views/abstract_controller.js b/addons/web/static/src/legacy/js/views/abstract_controller.js
index 9d60a409852..87f37912029 100644
--- a/addons/web/static/src/legacy/js/views/abstract_controller.js
+++ b/addons/web/static/src/legacy/js/views/abstract_controller.js
@@ -122,7 +122,7 @@ var AbstractController = mvc.Controller.extend(ActionMixin, {
         if (this.withControlPanel) {
             this.searchModel.on('get-controller-query-params', this, this._onGetOwnedQueryParams);
         }
-        if (!(this.renderer instanceof Component)) {
+        if (!(this.renderer instanceof ComponentWrapper)) {
             this.renderer.on_attach_callback();
         }
     },
@@ -135,7 +135,7 @@ var AbstractController = mvc.Controller.extend(ActionMixin, {
         if (this.withControlPanel) {
             this.searchModel.off('get-controller-query-params', this);
         }
-        if (!(this.renderer instanceof Component)) {
+        if (!(this.renderer instanceof ComponentWrapper)) {
             this.renderer.on_detach_callback();
         }
     },
@@ -362,7 +362,7 @@ var AbstractController = mvc.Controller.extend(ActionMixin, {
      * @private
      */
     _startRenderer: function () {
-        if (this.renderer instanceof Component) {
+        if (this.renderer instanceof ComponentWrapper) {
             return this.renderer.mount(this.$('.o_content')[0]);
         }
         return this.renderer.appendTo(this.$('.o_content'));
@@ -449,7 +449,7 @@ var AbstractController = mvc.Controller.extend(ActionMixin, {
      * @return {Promise}
      */
     _updateRendererState(state, params = {}) {
-        if (this.renderer instanceof Component) {
+        if (this.renderer instanceof ComponentWrapper) {
             return this.renderer.update(state);
         }
         return this.renderer.updateState(state, params);
diff --git a/addons/web/static/src/legacy/js/views/abstract_renderer.js b/addons/web/static/src/legacy/js/views/abstract_renderer.js
index bd0e1612c8a..e8a1a030839 100644
--- a/addons/web/static/src/legacy/js/views/abstract_renderer.js
+++ b/addons/web/static/src/legacy/js/views/abstract_renderer.js
@@ -6,10 +6,9 @@
  *
  */
 
+import { renderToString } from '@web/core/utils/render';
 import * as mvc from 'web.mvc';
 
-const { Component } = owl;
-
 // Renderers may display sample data when there is no real data to display. In
 // this case the data is displayed with opacity and can't be clicked. Moreover,
 // we also want to prevent the user from accessing DOM elements with TAB
@@ -154,12 +153,8 @@ export default mvc.Renderer.extend({
         } else {
             templateName = "web.NoContentHelper";
         }
-        const template = document.createElement('template');
-        // FIXME: retrieve owl qweb instance via the env set on Component s.t.
-        // it also works in the tests (importing 'web.env' wouldn't). This
-        // won't be necessary as soon as this will be written in 
-        const owlQWeb = Component.env.qweb;
-        template.innerHTML = owlQWeb.renderToString(templateName, context);
+        const innerHTML = renderToString(templateName, context);
+        const template = Object.assign(document.createElement("template"), { innerHTML });
         this.el.append(template.content.firstChild);
     },
     /**
diff --git a/addons/web/static/src/legacy/js/views/abstract_renderer_owl.js b/addons/web/static/src/legacy/js/views/abstract_renderer_owl.js
index 488deae80ce..53332e33032 100644
--- a/addons/web/static/src/legacy/js/views/abstract_renderer_owl.js
+++ b/addons/web/static/src/legacy/js/views/abstract_renderer_owl.js
@@ -1,6 +1,6 @@
 /** @odoo-module alias=web.AbstractRendererOwl **/
 
-const { Component } = owl;
+const { Component, onMounted, onPatched } = owl;
 
 // Renderers may display sample data when there is no real data to display. In
 // this case the data is displayed with opacity and can't be clicked. Moreover,
@@ -15,22 +15,20 @@ const FOCUSABLE_ELEMENTS = [
 
 class AbstractRenderer extends Component {
 
-    constructor() {
-        super(...arguments);
+    setup() {
         // Defines the elements suppressed when in demo data. This must be a list
         // of DOM selectors matching view elements that will:
         // 1. receive the 'o_sample_data_disabled' class (greyd out & no user events)
         // 2. have themselves and any of their focusable children removed from the
         //    tab navigation
         this.sampleDataTargets = [];
-    }
 
-    mounted() {
-        this._suppressFocusableElements();
-    }
-
-    patched() {
-        this._suppressFocusableElements();
+        onMounted(() => {
+            this._suppressFocusableElements();
+        });
+        onPatched(() => {
+            this._suppressFocusableElements();
+        });
     }
 
     /**
diff --git a/addons/web/static/src/legacy/js/views/abstract_view.js b/addons/web/static/src/legacy/js/views/abstract_view.js
index fba546b0c08..4c56f0c4993 100644
--- a/addons/web/static/src/legacy/js/views/abstract_view.js
+++ b/addons/web/static/src/legacy/js/views/abstract_view.js
@@ -126,15 +126,10 @@ var AbstractView = Factory.extend({
         // button when the graph view is embedded.
         var isEmbedded = params.isEmbedded || false;
 
-        // The noContentHelper's message can be empty, i.e. either a real empty string
-        // or an empty html tag. In both cases, we consider the helper empty.
-        var help = params.noContentHelp || "";
-        var htmlHelp = document.createElement("div");
-        htmlHelp.innerHTML = help;
         this.rendererParams = {
             arch: this.arch,
             isEmbedded: isEmbedded,
-            noContentHelp: htmlHelp.innerText.trim() ? help : "",
+            noContentHelp: params.noContentHelp,
         };
 
         this.controllerParams = {
diff --git a/addons/web/static/src/legacy/js/views/basic/basic_controller.js b/addons/web/static/src/legacy/js/views/basic/basic_controller.js
index 356717500f3..14f7b41f90e 100644
--- a/addons/web/static/src/legacy/js/views/basic/basic_controller.js
+++ b/addons/web/static/src/legacy/js/views/basic/basic_controller.js
@@ -22,7 +22,6 @@ var BasicController = AbstractController.extend(FieldManagerMixin, {
     }),
     custom_events: _.extend({}, AbstractController.prototype.custom_events, FieldManagerMixin.custom_events, {
         discard_changes: '_onDiscardChanges',
-        pager_changed: '_onPagerChanged',
         reload: '_onReload',
         resequence_records: '_onResequenceRecords',
         set_dirty: '_onSetDirty',
@@ -551,6 +550,7 @@ var BasicController = AbstractController.extend(FieldManagerMixin, {
             currentMinimum: (isGrouped ? state.groupsOffset : state.offset) + 1,
             limit: isGrouped ? state.groupsLimit : state.limit,
             size: isGrouped ? state.groupsCount : state.count,
+            onPagerChanged: this._onPagerChanged.bind(this),
         };
     },
     /**
@@ -801,9 +801,7 @@ var BasicController = AbstractController.extend(FieldManagerMixin, {
      * @private
      * @param {OdooEvent} ev
      */
-    _onPagerChanged: async function (ev) {
-        ev.stopPropagation();
-        const { currentMinimum, limit } = ev.data;
+    _onPagerChanged: async function ({ currentMinimum, limit }) {
         const state = this.model.get(this.handle, { raw: true });
         const reloadParams = state.groupedBy && state.groupedBy.length ? {
                 groupsLimit: limit,
diff --git a/addons/web/static/src/legacy/js/views/basic/basic_renderer.js b/addons/web/static/src/legacy/js/views/basic/basic_renderer.js
index 7f1c86ebfdb..9ef280205bc 100644
--- a/addons/web/static/src/legacy/js/views/basic/basic_renderer.js
+++ b/addons/web/static/src/legacy/js/views/basic/basic_renderer.js
@@ -25,6 +25,8 @@ const { Component } = owl;
 var qweb = core.qweb;
 const _t = core._t;
 
+const { status } = owl;
+
 var BasicRenderer = AbstractRenderer.extend(WidgetAdapterMixin, {
     custom_events: {
         navigation_move: '_onNavigationMove',
@@ -160,7 +162,7 @@ var BasicRenderer = AbstractRenderer.extend(WidgetAdapterMixin, {
      * @returns {Promise<AbstractField[]>} resolved with the list of widgets
      *                                      that have been reset
      */
-    confirmChange: function (state, id, fields, ev) {
+    confirmChange: async function (state, id, fields, ev) {
         var self = this;
         this._setState(state);
         var record = this._getRecord(id);
@@ -171,21 +173,30 @@ var BasicRenderer = AbstractRenderer.extend(WidgetAdapterMixin, {
         // reset all widgets (from the <widget> tag) if any:
         _.invoke(this.widgets, 'updateState', state);
 
-        var defs = [];
-
+        const fieldWidgets = (this.allFieldWidgets[id] || []).slice();
         // Reset all the field widgets that are marked as changed and the ones
         // which are configured to always be reset on any change
-        _.each(this.allFieldWidgets[id], function (widget) {
+        let defs = fieldWidgets.map(async (widget) => {
             var fieldChanged = _.contains(fields, widget.name);
             if (fieldChanged || widget.resetOnAnyFieldChange) {
-                defs.push(widget.reset(record, ev, fieldChanged));
+                return widget.reset(record, ev, fieldChanged);
             }
         });
 
         // The modifiers update is done after widget resets as modifiers
         // associated callbacks need to have all the widgets with the proper
         // state before evaluation
-        defs.push(this._updateAllModifiers(record));
+        await this._updateAllModifiers(record);
+
+        // Remove defs of destroyed widget (by the call to updateAllModifiers), as
+        // those defs will never resolve
+        defs = defs.filter((def, index) => {
+            if (fieldWidgets[index] instanceof FieldWrapper) {
+                return status(fieldWidgets[index]) !== "destroyed";
+            } else {
+                return !fieldWidgets[index].isDestroyed();
+            }
+        });
 
         return Promise.all(defs).then(function () {
             return _.filter(self.allFieldWidgets[id], function (widget) {
diff --git a/addons/web/static/src/legacy/js/views/form/form_renderer.js b/addons/web/static/src/legacy/js/views/form/form_renderer.js
index 3edc28e95c7..3a006c075aa 100644
--- a/addons/web/static/src/legacy/js/views/form/form_renderer.js
+++ b/addons/web/static/src/legacy/js/views/form/form_renderer.js
@@ -1305,17 +1305,24 @@ var FormRenderer = BasicRenderer.extend({
             ev.data.originalEvent.preventDefault();
             ev.data.originalEvent.stopPropagation();
         }
-        var index;
-        let target = ev.data.target || ev.target;
-        if (target.__owl__) {
-            target = target.__owl__.parent; // Owl fields are wrapped by the FieldWrapper
-        }
-        if (ev.data.direction === "next") {
-            index = this.allFieldWidgets[this.state.id].indexOf(target);
-            this._activateNextFieldWidget(this.state, index);
-        } else if (ev.data.direction === "previous") {
-            index = this.allFieldWidgets[this.state.id].indexOf(target);
-            this._activatePreviousFieldWidget(this.state, index);
+        if (["next", "previous"].includes(ev.data.direction)) {
+            const fieldWidgets = this.allFieldWidgets[this.state.id];
+            let target = ev.data.target || ev.target;
+            let index;
+            if (target.__owl__) {
+                // the fieldWidget is an owl component, so we need to find the
+                // FieldWrapper that wraps the owl component that triggered the event
+                index = fieldWidgets.findIndex((widget) => {
+                    return widget.componentRef && widget.componentRef.comp === target;
+                });
+            } else {
+                index = fieldWidgets.indexOf(target);
+            }
+            if (ev.data.direction === "next") {
+                this._activateNextFieldWidget(this.state, index);
+            } else if (ev.data.direction === "previous") {
+                this._activatePreviousFieldWidget(this.state, index);
+            }
         }
     },
     /**
diff --git a/addons/web/static/src/legacy/js/views/graph/graph_renderer.js b/addons/web/static/src/legacy/js/views/graph/graph_renderer.js
index 143c13d3457..f2660b57f0c 100644
--- a/addons/web/static/src/legacy/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/legacy/js/views/graph/graph_renderer.js
@@ -16,11 +16,12 @@ odoo.define("web/static/src/js/views/graph/graph_renderer", function (require) {
         shortenLabel,
     } = require("web/static/src/js/views/graph/graph_utils");
 
-    const { useRef } = owl;
+    const { onWillDestroy, onWillUpdateProps, useEffect, useRef } = owl;
+    const { renderToString } = require('@web/core/utils/render');
 
     class GraphRenderer extends AbstractRenderer {
-        constructor() {
-            super(...arguments);
+        setup() {
+            super.setup();
 
             this.noDataLabel = [this.env._t("No data")];
             this.fakeDataLabel = [""];
@@ -29,21 +30,20 @@ odoo.define("web/static/src/js/views/graph/graph_renderer", function (require) {
 
             this.canvasRef = useRef("canvas");
             this.containerRef = useRef("container");
-        }
 
-        async willUpdateProps(nextProps) {
-            await super.willUpdateProps(...arguments);
-            this._processProps(nextProps);
-        }
+            useEffect(() => {
+                this._renderChart();
+            });
 
-        mounted() {
-            super.mounted();
-            this._renderChart();
-        }
+            onWillUpdateProps((nextProps) => {
+                this._processProps(nextProps);
+            });
 
-        patched() {
-            super.patched();
-            this._renderChart();
+            onWillDestroy(() => {
+                if (this.chart) {
+                    this.chart.destroy();
+                }
+            });
         }
 
         //---------------------------------------------------------------------
@@ -81,7 +81,7 @@ odoo.define("web/static/src/js/views/graph/graph_renderer", function (require) {
                 const tr = document.createElement("tr");
                 const td = document.createElement("td");
                 tr.classList.add("o_show_more");
-                td.innerHTML = this.env._t("...");
+                td.innerText = this.env._t("...");
                 tr.appendChild(td);
                 this.tooltip.querySelector("tbody").appendChild(tr);
             }
@@ -261,7 +261,7 @@ odoo.define("web/static/src/js/views/graph/graph_renderer", function (require) {
             const chartAreaTop = this.chart.chartArea.top;
             const rendererTop = this.el.getBoundingClientRect().top;
 
-            const innerHTML = this.env.qweb.renderToString("web.GraphRenderer.CustomTooltip", {
+            const innerHTML = renderToString("web.GraphRenderer.CustomTooltip", {
                 maxWidth: getMaxWidth(this.chart.chartArea),
                 measure: this.measureDescription,
                 mode: this.props.mode,
@@ -614,8 +614,8 @@ odoo.define("web/static/src/js/views/graph/graph_renderer", function (require) {
         _getTooltipItemContent(item, data) {
             const { comparisonFieldIndex } = this.props;
             const dataset = data.datasets[item.datasetIndex];
-            const id = item.index;
-            let label = data.labels[item.index];
+            const index = item.index;
+            let label = data.labels[index];
             let value;
             let boxColor;
             let percentage;
@@ -623,15 +623,15 @@ odoo.define("web/static/src/js/views/graph/graph_renderer", function (require) {
                 if (label === this.noDataLabel) {
                     value = this._formatValue(0);
                 } else {
-                    value = this._formatValue(dataset.data[item.index]);
+                    value = this._formatValue(dataset.data[index]);
                     const totalData = dataset.data.reduce((a, b) => a + b, 0);
-                    percentage = totalData && ((dataset.data[item.index] * 100) / totalData).toFixed(2);
+                    percentage = totalData && ((dataset.data[index] * 100) / totalData).toFixed(2);
                 }
                 label = this._relabelling(label, comparisonFieldIndex, dataset.originIndex);
                 if (this.props.origins.length > 1) {
                     label = `${dataset.label}/${label}`;
                 }
-                boxColor = dataset.backgroundColor[item.index];
+                boxColor = dataset.backgroundColor[index];
             } else {
                 label = this._relabelling(label, comparisonFieldIndex, dataset.originIndex);
                 if (
@@ -645,7 +645,7 @@ odoo.define("web/static/src/js/views/graph/graph_renderer", function (require) {
                     dataset.backgroundColor :
                     dataset.borderColor;
             }
-            return { id, label, value, boxColor, percentage };
+            return { label, value, boxColor, percentage };
         }
 
         /**
diff --git a/addons/web/static/src/legacy/js/views/list/list_renderer.js b/addons/web/static/src/legacy/js/views/list/list_renderer.js
index ba5584e8664..c11598228f0 100644
--- a/addons/web/static/src/legacy/js/views/list/list_renderer.js
+++ b/addons/web/static/src/legacy/js/views/list/list_renderer.js
@@ -830,10 +830,13 @@ var ListRenderer = BasicRenderer.extend({
         if (!this._shouldRenderPager(currentMinimum, limit, size)) {
             return;
         }
-        const pager = new ComponentWrapper(this, Pager, { currentMinimum, limit, size });
+        const pager = new ComponentWrapper(this, Pager, {
+            currentMinimum,
+            limit,
+            size,
+            onPagerChanged: this._onPagerChanged.bind(this, group),
+        });
         const pagerMounting = pager.mount(target).then(() => {
-            // Event binding is done here to get the related group and wrapper.
-            pager.el.addEventListener('pager-changed', ev => this._onPagerChanged(ev, group));
             // Prevent pager clicks to toggle the group.
             pager.el.addEventListener('click', ev => ev.stopPropagation());
         });
@@ -1409,9 +1412,7 @@ var ListRenderer = BasicRenderer.extend({
      * @param {OwlEvent} ev
      * @param {Object} group
      */
-    _onPagerChanged: async function (ev, group) {
-        ev.stopPropagation();
-        const { currentMinimum, limit } = ev.detail;
+    _onPagerChanged: async function (group, { currentMinimum, limit }) {
         this.trigger_up('load', {
             id: group.id,
             limit: limit,
diff --git a/addons/web/static/src/legacy/js/views/pivot/pivot_renderer.js b/addons/web/static/src/legacy/js/views/pivot/pivot_renderer.js
index e7c50352d59..931781cf53f 100644
--- a/addons/web/static/src/legacy/js/views/pivot/pivot_renderer.js
+++ b/addons/web/static/src/legacy/js/views/pivot/pivot_renderer.js
@@ -1,40 +1,13 @@
 /** @odoo-module alias=web.PivotRenderer **/
 
-    import { useEffect } from "@web/core/utils/hooks";
+    import { Dropdown } from "@web/core/dropdown/dropdown";
+    import { DropdownItem } from "@web/core/dropdown/dropdown_item";
     import OwlAbstractRenderer from '../abstract_renderer_owl';
     import field_utils from 'web.field_utils';
-    import { DEFAULT_INTERVAL, INTERVAL_OPTIONS, getIntervalOptions } from 'web.searchUtils';
+    import { INTERVAL_OPTIONS, getIntervalOptions } from 'web.searchUtils';
+    import { CustomGroupByItem } from "@web/search/group_by_menu/custom_group_by_item";
 
-    const { Component, useExternalListener, useState } = owl;
-
-    class PivotCustomGroupByItem extends Component {
-        constructor() {
-            super(...arguments);
-            this.canBeOpened = true;
-            this.state = useState({ fieldName: this.props.fields[0].name });
-        }
-
-        //---------------------------------------------------------------------
-        // Handlers
-        //---------------------------------------------------------------------
-
-        /**
-         * @private
-         */
-        onApply() {
-            const { fieldName } = this.state;
-            const { type } = this.props.fields.find(f => f.name === fieldName);
-            let interval = null;
-            if (['date', 'datetime'].includes(type)) {
-                interval = DEFAULT_INTERVAL;
-            }
-            this.trigger('groupby-menu-selection', { fieldName, interval, custom: true });
-            this.state.open = false;
-        }
-    }
-
-    PivotCustomGroupByItem.template = "web.CustomGroupByItem";
-    PivotCustomGroupByItem.props = { fields: Array };
+    const { Component, useEffect, useExternalListener, useState } = owl;
 
     export class PivotGroupByMenu extends Component {
 
@@ -78,6 +51,16 @@
         // Handlers
         //---------------------------------------------------------------------
 
+        /**
+         * @override
+         * @param {CustomEvent} ev
+         */
+        onAddCustomGroup(fieldName) {
+            const { type } = this.props.fields.find(f => f.fieldName === fieldName);
+            const interval = ["date","datetime"].includes(type) ? "month" : null;
+            this.trigger('groupby-menu-selection', { fieldName, interval  });
+        }
+
         /**
          * @param {string} fieldName
          * @param {string|null} interval
@@ -93,12 +76,14 @@
     }
 
     PivotGroupByMenu.template = "web.legacy.PivotGroupByMenu";
-    PivotGroupByMenu.components = { PivotCustomGroupByItem };
+    PivotGroupByMenu.components = { CustomGroupByItem, Dropdown, DropdownItem };
+
     PivotGroupByMenu.props = {
         customGroupBys: Map,
         fields: Object,
         hasSearchArchGroupBys: Boolean,
         searchModel: true,
+        onGroupbyMenuSelection: Function,
     };
 
     /**
@@ -126,8 +111,8 @@
          * @param {boolean} props.disableLinking Disallow opening records by clicking on a cell
          * @param {Object} props.widgets Widgets defined in the arch
          */
-        constructor() {
-            super(...arguments);
+        setup() {
+            super.setup();
             this.sampleDataTargets = ['table'];
             this.state = useState({
                 activeNodeHeader: {
diff --git a/addons/web/static/src/legacy/js/views/pivot/pivot_view.js b/addons/web/static/src/legacy/js/views/pivot/pivot_view.js
index 3f410338ac2..863912598c2 100644
--- a/addons/web/static/src/legacy/js/views/pivot/pivot_view.js
+++ b/addons/web/static/src/legacy/js/views/pivot/pivot_view.js
@@ -157,7 +157,7 @@
          */
         getRenderer(parent, state) {
             state = Object.assign(state || {}, this.rendererParams);
-            return new RendererWrapper(parent, this.config.Renderer, state);
+            return new RendererWrapper(null, this.config.Renderer, state);
         },
     });
     viewRegistry.add("pivot", PivotView);
diff --git a/addons/web/static/src/legacy/js/views/search_panel.js b/addons/web/static/src/legacy/js/views/search_panel.js
index a81e460c862..47b3f1f0ae8 100644
--- a/addons/web/static/src/legacy/js/views/search_panel.js
+++ b/addons/web/static/src/legacy/js/views/search_panel.js
@@ -2,7 +2,7 @@
 
     import { Model, useModel } from "web.Model";
 
-    const { Component, useState, useSubEnv } = owl;
+    const { Component, onMounted, onWillStart, onWillUpdateProps, useRef, useState, useSubEnv } = owl;
 
     /**
      * Search panel
@@ -27,22 +27,24 @@
             this.hasImportedState = false;
 
             this.importState(this.props.importedState);
-        }
 
-        async willStart() {
-            this._expandDefaultValue();
-            this._updateActiveValues();
-        }
+            this.legacySearchPanelRef = useRef("legacySearchPanel");
 
-        mounted() {
-            this._updateGroupHeadersChecked();
-            if (this.hasImportedState) {
-                this.el.scroll({ top: this.scrollTop });
-            }
-        }
+            onWillStart(async () => {
+                this._expandDefaultValue();
+                this._updateActiveValues();
+            });
 
-        async willUpdateProps() {
-            this._updateActiveValues();
+            onMounted(() => {
+                this._updateGroupHeadersChecked();
+                if (this.hasImportedState && this.legacySearchPanelRef.el) {
+                    this.legacySearchPanelRef.el.scroll({ top: this.scrollTop });
+                }
+            });
+
+            onWillUpdateProps(async () => {
+                this._updateActiveValues();
+            });
         }
 
         //---------------------------------------------------------------------
@@ -60,7 +62,7 @@
         exportState() {
             const exported = {
                 expanded: this.state.expanded,
-                scrollTop: this.el.scrollTop,
+                scrollTop: this.legacySearchPanelRef.el ? this.legacySearchPanelRef.el.scrollTop : 0,
             };
             return JSON.stringify(exported);
         }
@@ -190,7 +192,10 @@
          * @private
          */
         _updateGroupHeadersChecked() {
-            const groups = this.el.querySelectorAll(":scope .o_search_panel_filter_group");
+            if (!this.legacySearchPanelRef.el) {
+                return;
+            }
+            const groups = this.legacySearchPanelRef.el.querySelectorAll(":scope .o_search_panel_filter_group");
             for (const group of groups) {
                 const header = group.querySelector(":scope .o_search_panel_group_header input");
                 const vals = [...group.querySelectorAll(":scope .o_search_panel_filter_value input")];
diff --git a/addons/web/static/src/legacy/js/views/view_dialogs.js b/addons/web/static/src/legacy/js/views/view_dialogs.js
index 7cc9168f529..7cff8201ced 100644
--- a/addons/web/static/src/legacy/js/views/view_dialogs.js
+++ b/addons/web/static/src/legacy/js/views/view_dialogs.js
@@ -9,6 +9,8 @@ import select_create_controllers_registry from 'web.select_create_controllers_re
 
 var _t = core._t;
 
+const { markup } = owl;
+
 /**
  * Class with everything which is common between FormViewDialog and
  * SelectCreateDialog.
@@ -396,7 +398,7 @@ var SelectCreateDialog = ViewDialog.extend({
         var view = new ViewClass(fieldsViews[this.viewType], _.extend(viewOptions, {
             action: {
                 controlPanelFieldsView: fieldsViews.search,
-                help: _.str.sprintf("<p>%s</p>", _t("No records found!")),
+                help: markup(_.str.sprintf("<p>%s</p>", _t("No records found!"))),
             },
             action_buttons: false,
             dynamicFilters: this.options.dynamicFilters,
diff --git a/addons/web/static/src/legacy/js/widgets/week_days.js b/addons/web/static/src/legacy/js/widgets/week_days.js
index f4bfc5a66c2..1517e0384f7 100644
--- a/addons/web/static/src/legacy/js/widgets/week_days.js
+++ b/addons/web/static/src/legacy/js/widgets/week_days.js
@@ -5,25 +5,23 @@ odoo.define('web.WeekDays', function (require) {
     const Registry = require('web.widgetRegistry');
     const utils = require('web.utils');
 
-    const { Component, useState } = owl;
-
+    const { Component, onWillUpdateProps, useState } = owl;
 
     class WeekDays extends Component {
-        constructor(parent) {
-            super(...arguments);
-            this.parent = parent;
+        setup() {
             this.weekdaysShort = [];
             this._sortWeekdays();
             this.state = useState({ days: this._prepareData(this.props.record.data) });
             this.mode = this.props.options.mode;
+
+            onWillUpdateProps(this.onWillUpdateProps);
         }
 
         /**
-         * @override
          * @param {Object} nextProps
          * @param {Object} nextProps.record
          */
-        async willUpdateProps(nextProps) {
+        async onWillUpdateProps(nextProps) {
             this.state.days = this._prepareData(nextProps.record.data);
             this.mode = nextProps.options.mode;
         }
@@ -67,11 +65,10 @@ odoo.define('web.WeekDays', function (require) {
          * @private
          * @param {MouseEvent} ev
          */
-        _onChange(ev) {
-            const field = ev.target.id.split("-")[0];
+        _onChange(checked, field) {
             this.trigger('field-changed', {
                 dataPointID: this.props.record.id,
-                changes: { [field]: ev.target.checked },
+                changes: { [field.split("-")[0]]: checked },
             });
         }
     }
diff --git a/addons/web/static/src/legacy/legacy_client_actions.js b/addons/web/static/src/legacy/legacy_client_actions.js
index 734453d6b6d..bc85a3b30b5 100644
--- a/addons/web/static/src/legacy/legacy_client_actions.js
+++ b/addons/web/static/src/legacy/legacy_client_actions.js
@@ -4,18 +4,17 @@ import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
 import { action_registry as legacyActionRegistry } from "web.core";
 import Widget from "web.Widget";
-import { setScrollPosition } from "../core/utils/scrolling";
 import { useSetupAction } from "../webclient/actions/action_hook";
 import { ClientActionAdapter } from "./action_adapters";
 import { breadcrumbsToLegacy } from "./backend_utils";
+import { useLegacyRefs } from "./utils";
 
-const { Component, useRef, xml } = owl;
+const { Component, xml } = owl;
 const actionRegistry = registry.category("actions");
 
 const legacyClientActionTemplate = xml`
     <ClientActionAdapter Component="Widget" widgetArgs="widgetArgs" widget="widget"
-                         onReverseBreadcrumb="onReverseBreadcrumb" t-ref="controller"
-                         t-on-scrollTo.stop="onScrollTo"/>`;
+                         onReverseBreadcrumb="onReverseBreadcrumb"/>`;
 
 // registers an action from the legacy action registry to the wowl one, ensuring
 // that widget actions are actually Components
@@ -23,9 +22,7 @@ function registerClientAction(name, action) {
     if (action.prototype instanceof Widget) {
         // the action is a widget, wrap it into a Component and register that component
         class Action extends Component {
-            constructor() {
-                super(...arguments);
-                this.controllerRef = useRef("controller");
+            setup() {
                 this.Widget = action;
                 const options = {};
                 for (const key in this.props) {
@@ -35,6 +32,9 @@ function registerClientAction(name, action) {
                         options[key] = this.props[key];
                     }
                 }
+
+                const legacyRefs = useLegacyRefs();
+
                 if (this.env.config.breadcrumbs) {
                     options.breadcrumbs = breadcrumbsToLegacy(this.env.config.breadcrumbs);
                 }
@@ -50,12 +50,9 @@ function registerClientAction(name, action) {
                 this.onReverseBreadcrumb =
                     this.props.state && this.props.state.__on_reverse_breadcrumb__;
                 useSetupAction({
-                    beforeLeave: () => this.controllerRef.comp.__widget.canBeRemoved(),
-                    getLocalState: () => this.controllerRef.comp.exportState(),
+                    beforeLeave: () => legacyRefs.widget.canBeRemoved(),
+                    getLocalState: () => legacyRefs.component.exportState(),
                 });
-                this.onScrollTo = (ev) => {
-                    setScrollPosition(this, { left: ev.detail.left, top: ev.detail.top });
-                };
             }
         }
         Action.template = legacyClientActionTemplate;
diff --git a/addons/web/static/src/legacy/legacy_dialog.js b/addons/web/static/src/legacy/legacy_dialog.js
index ffa7c9283b7..f4e3c3ca5f7 100644
--- a/addons/web/static/src/legacy/legacy_dialog.js
+++ b/addons/web/static/src/legacy/legacy_dialog.js
@@ -2,9 +2,10 @@
 
 import { Dialog } from "../core/dialog/dialog";
 import { patch } from "@web/core/utils/patch";
-import { useEffect } from "@web/core/utils/hooks";
 import OwlDialog from "web.OwlDialog";
 
+const { useEffect } = owl;
+
 /**
  * This is a patch of the new Dialog class.
  * Its purpose is to inform the old "active/inactive" mechanism.
diff --git a/addons/web/static/src/legacy/legacy_setup.js b/addons/web/static/src/legacy/legacy_setup.js
index b34a458616d..74db828eb04 100644
--- a/addons/web/static/src/legacy/legacy_setup.js
+++ b/addons/web/static/src/legacy/legacy_setup.js
@@ -16,7 +16,7 @@ import * as legacyEnv from "web.env";
 import * as session from "web.session";
 import * as makeLegacyWebClientService from "web.pseudo_web_client";
 
-const { Component, config, whenReady } = owl;
+const { Component, whenReady } = owl;
 
 let legacySetupResolver;
 export const legacySetupProm = new Promise((resolve) => {
@@ -26,7 +26,6 @@ export const legacySetupProm = new Promise((resolve) => {
 // build the legacy env and set it on Component (this was done in main.js,
 // with the starting of the webclient)
 (async () => {
-    config.mode = legacyEnv.isDebug() ? "dev" : "prod";
     AbstractService.prototype.deployServices(legacyEnv);
     Component.env = legacyEnv;
     const legacyActionManagerService = makeLegacyActionManagerService(legacyEnv);
@@ -48,6 +47,6 @@ export const legacySetupProm = new Promise((resolve) => {
     serviceRegistry.add("legacy_command", legacyCommandService);
     serviceRegistry.add("legacy_dropdown", makeLegacyDropdownService(legacyEnv));
     await Promise.all([whenReady(), session.is_bound]);
-    legacyEnv.qweb.addTemplates(session.owlTemplates);
+    legacyEnv.templates = session.owlTemplates;
     legacySetupResolver(legacyEnv);
 })();
diff --git a/addons/web/static/src/legacy/legacy_views.js b/addons/web/static/src/legacy/legacy_views.js
index fefd60880bf..9c249294605 100644
--- a/addons/web/static/src/legacy/legacy_views.js
+++ b/addons/web/static/src/legacy/legacy_views.js
@@ -2,6 +2,7 @@
 
 import { useService } from "@web/core/utils/hooks";
 import { useSetupAction } from "../webclient/actions/action_hook";
+import { useLegacyRefs } from "./utils";
 import legacyViewRegistry from "web.view_registry";
 import { ViewAdapter } from "./action_adapters";
 import Widget from "web.Widget";
@@ -11,11 +12,10 @@ import {
     getLocalState,
     searchModelStateToLegacy,
 } from "./backend_utils";
-import { setScrollPosition } from "../core/utils/scrolling";
 import { registry } from "@web/core/registry";
 import { loadPublicAsset } from "@web/core/assets";
 
-const { Component, useRef, xml } = owl;
+const { Component, xml, onWillStart } = owl;
 const viewRegistry = registry.category("views");
 
 function getJsClassWidget(fieldsInfo) {
@@ -26,17 +26,14 @@ function getJsClassWidget(fieldsInfo) {
 
 const legacyViewTemplate = xml`
     <ViewAdapter Component="Widget" View="View" viewInfo="viewInfo" viewParams="viewParams"
-                 widget="widget" onReverseBreadcrumb="onReverseBreadcrumb" t-ref="controller"
-                 t-on-scrollTo.stop="onScrollTo"/>`;
+                 widget="widget" onReverseBreadcrumb="onReverseBreadcrumb" />`;
 
 // registers a view from the legacy view registry to the wowl one, but wrapped
 // into an Owl Component
 function registerView(name, LegacyView) {
     class Controller extends Component {
-        constructor() {
-            super(...arguments);
+        setup() {
             this.vm = useService("view");
-            this.controllerRef = useRef("controller");
             this.Widget = Widget; // fool the ComponentAdapter with a simple Widget
             this.View = LegacyView;
             this.viewInfo = {};
@@ -86,20 +83,20 @@ function registerView(name, LegacyView) {
             if (this.props.mode) {
                 this.viewParams.mode = this.props.mode;
             }
+            const legacyRefs = useLegacyRefs();
             this.widget = this.props.state && this.props.state.__legacy_widget__;
+            legacyRefs.widget = this.widget;
             this.onReverseBreadcrumb =
                 this.props.state && this.props.state.__on_reverse_breadcrumb__;
             useSetupAction({
-                beforeLeave: () => this.controllerRef.comp.__widget.canBeRemoved(),
-                getGlobalState: () => getGlobalState(this.controllerRef.comp.exportState()),
-                getLocalState: () => getLocalState(this.controllerRef.comp.exportState()),
+                beforeLeave: () => legacyRefs.widget.canBeRemoved(),
+                getGlobalState: () => getGlobalState(legacyRefs.component.exportState()),
+                getLocalState: () => getLocalState(legacyRefs.component.exportState()),
             });
-            this.onScrollTo = (ev) => {
-                setScrollPosition(this, { left: ev.detail.left, top: ev.detail.top });
-            };
+            onWillStart(this.onWillStart);
         }
 
-        async willStart() {
+        async onWillStart() {
             const params = {
                 resModel: this.props.resModel,
                 views: this.props.views,
diff --git a/addons/web/static/src/legacy/root_widget.js b/addons/web/static/src/legacy/root_widget.js
index 9363255044e..68b45b222d2 100644
--- a/addons/web/static/src/legacy/root_widget.js
+++ b/addons/web/static/src/legacy/root_widget.js
@@ -1,8 +1,19 @@
+/**
+ * This module exists so that web_tour can use it as the parent of the
+ * TourManager so it can get access to _trigger_up.
+ */
 odoo.define("root.widget", function (require) {
+    // need to wait for owl.Component.env to be set by web.legacySetup
     require("web.legacySetup");
     const { ComponentAdapter } = require("web.OwlCompatibility");
-
-    const { Component } = owl;
-
-    return new ComponentAdapter(null, { Component }); // for its method _trigger_up
+    // Here we simply Object.create() the ComponentAdapter class
+    // It is sufficient to do so as all is needed is the _trigger_up method.
+    // This method uses "this.env" and if it is not set there is a fallback to
+    // the owl.Component prototype env.
+    //
+    // NB: standaloneAdapter directly instantiate a new App accessing some env
+    //     properties doing so. In the qunit test suite, web.legacySetup does not
+    //     set owl.Component.env directly as a fresh new env is needed for each test.
+    //     Hence using standaloneAdapter would crash.
+    return Object.create(ComponentAdapter); // for its method _trigger_up
 });
diff --git a/addons/web/static/src/legacy/utils.js b/addons/web/static/src/legacy/utils.js
index 10ff9d15530..b2074208f33 100644
--- a/addons/web/static/src/legacy/utils.js
+++ b/addons/web/static/src/legacy/utils.js
@@ -179,12 +179,12 @@ export function mapLegacyEnvToWowlEnv(legacyEnv, wowlEnv) {
     legacyEnv.services.local_storage = mapStorage(browser.localStorage);
     legacyEnv.services.session_storage = mapStorage(browser.sessionStorage);
     // map WebClientReady
-    wowlEnv.bus.on("WEB_CLIENT_READY", null, () => {
+    wowlEnv.bus.addEventListener("WEB_CLIENT_READY", () => {
         legacyEnv.bus.trigger("web_client_ready");
     });
 
-    wowlEnv.bus.on("SCROLLER:ANCHOR_LINK_CLICKED", null, (payload) => {
-        legacyEnv.bus.trigger("SCROLLER:ANCHOR_LINK_CLICKED", payload);
+    wowlEnv.bus.addEventListener("SCROLLER:ANCHOR_LINK_CLICKED", (ev) => {
+        legacyEnv.bus.trigger("SCROLLER:ANCHOR_LINK_CLICKED", ev.detail);
     });
 
     legacyEnv.bus.on("clear_cache", null, () => {
@@ -209,7 +209,7 @@ export function cleanDomFromBootstrap() {
 export function makeLegacyNotificationService(legacyEnv) {
     return {
         dependencies: ["notification"],
-        start(env) {
+        start(env, { notification }) {
             let notifId = 0;
             const idsToRemoveFn = {};
 
@@ -240,14 +240,13 @@ export function makeLegacyNotificationService(legacyEnv) {
                     };
                 });
 
-                const removeFn = env.services.notification.add(_.escape(message), {
+                const removeFn = notification.add(message, {
                     sticky,
                     title,
                     type,
                     className,
                     onClose,
                     buttons,
-                    messageIsHtml: true,
                 });
                 const id = ++notifId;
                 idsToRemoveFn[id] = removeFn;
@@ -312,3 +311,23 @@ export function makeLegacyRainbowManService(legacyEnv) {
         },
     };
 }
+
+export function useLegacyRefs() {
+    const env = owl.useEnv();
+
+    let legacyRefs;
+    if (env.legacyRefs) {
+        legacyRefs = env.legacyRefs;
+    } else {
+        legacyRefs = {
+            component: null,
+            widget: null,
+        };
+    }
+
+    owl.useChildSubEnv({
+        legacyRefs,
+    });
+
+    return legacyRefs;
+}
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index 090f4d13ea8..7ecc5595305 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -12,7 +12,7 @@
                         class="breadcrumb-item"
                         t-att-class="{ o_back_button: bc_index === props.breadcrumbs.length - 1 }"
                         t-att-accesskey="bc_last and 'b'"
-                        t-on-click.prevent="trigger('breadcrumb-clicked', { controllerID: bc.controllerID })"
+                        t-on-click.prevent="()=>this.trigger('breadcrumb-clicked', { controllerID: bc.controllerID })"
                         title="Previous menu"
                         >
                         <a href="#">
@@ -58,19 +58,13 @@
                     >
                     <t t-if="props.withSearchBar">
                         <FilterMenu t-if="props.searchMenuTypes.includes('filter')"
-                            class="o_filter_menu"
                             fields="fields"
                         />
                         <GroupByMenu t-if="props.searchMenuTypes.includes('groupBy')"
-                            class="o_group_by_menu"
                             fields="fields"
                         />
-                        <ComparisonMenu t-if="props.searchMenuTypes.includes('comparison') and model.get('filters', f => f.type === 'comparison').length"
-                            class="o_comparison_menu"
-                        />
-                        <FavoriteMenu t-if="props.searchMenuTypes.includes('favorite')"
-                            class="o_favorite_menu"
-                        />
+                        <ComparisonMenu t-if="props.searchMenuTypes.includes('comparison') and model.get('filters', f => f.type === 'comparison').length"/>
+                        <FavoriteMenu t-if="props.searchMenuTypes.includes('favorite')"/>
                     </t>
                 </div>
                 <div class="o_cp_pager" role="search" t-ref="pager">
@@ -87,7 +81,7 @@
 </t>
 
 <t t-name="web.Legacy.ControlPanelX2Many" owl="1">
-    <div class="o_x2m_control_panel">
+    <div class="o_x2m_control_panel" t-ref="controlPanel">
         <div class="o_cp_buttons" role="toolbar" aria-label="Control panel buttons" t-ref="buttons">
             <t t-slot="buttons"/>
         </div>
@@ -98,13 +92,14 @@
 </t>
 
 <t t-name="web.CustomCheckbox" owl="1">
-    <div class="custom-control custom-checkbox">
+    <div class="custom-control custom-checkbox" t-att-class="props.class">
         <input
             t-att-id="props.id or _id"
             type="checkbox"
             class="custom-control-input"
             t-att-disabled="props.disabled"
             t-att-checked="props.value"
+            t-on-change="(ev) => props.onChange(ev.target.checked)"
             />
         <label t-att-for="props.id or _id" class="custom-control-label">
             <t t-esc="props.text or '&#8203;'"/>
@@ -113,8 +108,8 @@
 </t>
 
 <t t-name="web.CustomFileInput" owl="1">
-    <span class="o_file_input" aria-atomic="true">
-        <span class="o_file_input_trigger" t-on-click.prevent="_onTriggerClicked">
+    <span class="o_file_input" aria-atomic="true" t-on-uploaded="(ev) => props.onUpload(ev.detail.files)">
+        <span class="o_file_input_trigger" t-on-click.prevent="() => this._onTriggerClicked()">
             <t t-slot="default">
                 <button class="btn btn-primary">Choose File</button>
             </t>
@@ -122,14 +117,14 @@
         <input type="file" name="ufile" class="o_input_file d-none"
             t-att="{multiple: props.multi_upload, accept: props.accepted_file_extensions}"
             t-ref="file-input"
-            t-on-change="_onFileInputChange"
+            t-on-change="() => this._onFileInputChange()"
         />
     </span>
 </t>
 
 <t t-name="web.Legacy.DatePicker" owl="1">
     <div class="o_datepicker" aria-atomic="true" t-att-id="datePickerId" data-target-input="nearest">
-        <input type="text" class="o_datepicker_input o_input datetimepicker-input" autofocus=""
+        <input type="text" class="o_datepicker_input o_input datetimepicker-input"
             t-att-name="props.name"
             t-att-placeholder="props.placeholder"
             t-attf-data-target="#{{ datePickerId }}"
@@ -160,7 +155,7 @@
             t-attf-class="{{ icon || displayCaret || displayChevron ? 'd-flex align-items-center ' : ''}} {{ displayCaret || displayChevron ? 'pr-1 ' : ''}}"
             t-att-aria-expanded="state.open ? 'true' : 'false'"
             tabindex="-1"
-            t-on-click="state.open = !state.open"
+            t-on-click="() => { state.open = !state.open }"
             t-on-keydown="_onButtonKeydown"
             t-att-title="props.hotkeyTitle"
             t-att-data-hotkey="props.hotkey"
@@ -193,7 +188,7 @@
                 role="menuitemcheckbox"
                 href="#"
                 t-ref="fallback-focus"
-                t-on-click.prevent="state.open = !state.open"
+                t-on-click.prevent="() => { state.open = !state.open }"
                 >
                 <t t-esc="props.description"/>
                 <i t-attf-class="o_icon_right fa fa-fw mr-n4 fa-caret-{{ state.open ? 'down' : 'right' }}"/>
@@ -212,7 +207,7 @@
                             role="menuitemcheckbox"
                             t-att-href="option.url or '#'"
                             t-esc="option.description"
-                            t-on-click.prevent="trigger('item-selected', { item: props, option: option })"
+                            t-on-click.prevent="() => this.trigger('item-selected', { item: props, option: option })"
                         />
                     </li>
                     <t t-set="currentGroup" t-value="option.groupNumber"/>
@@ -230,21 +225,21 @@
             t-att-aria-checked="props.isActive ? 'true' : 'false'"
             role="menuitemcheckbox"
             t-att-href="props.url or '#'"
-            t-on-click.prevent="trigger('item-selected', { item: props })"
+            t-on-click.prevent="() => this.trigger('item-selected', { item: props })"
             >
             <t t-esc="props.description"/>
             <i t-if="props.removable"
                 class="o_icon_right fa fa-trash btn btn-link text-danger p-0 mr-n3"
                 title="Delete item"
-                t-on-click.stop.prevent="trigger('remove-item', { item: props })"
+                t-on-click.stop.prevent="() => this.trigger('remove-item', { item: props })"
             />
         </a>
     </li>
 </t>
 
 <t t-name="web.OwlDialog" owl="1">
-    <Portal target="'body'">
-        <div class="o_dialog" t-on-focus="_onFocus" t-on-click="_onClick" t-on-dialog-closed="_onDialogClosed">
+    <t t-portal="'body'">
+        <div class="o_dialog" t-on-focus="_onFocus" t-on-click="_onClick" t-on-dialog-closed="_onDialogClosed" t-ref="dialog">
             <div role="dialog" class="modal"
                 tabindex="-1"
                 t-att-class="{ o_technical_modal: props.technical, o_modal_full: props.fullscreen }"
@@ -266,7 +261,7 @@
                             <t t-slot="default"/>
                         </main>
                         <footer t-if="props.renderFooter" class="modal-footer" t-ref="modal-footer">
-                            <t t-slot="buttons">
+                            <t t-slot="buttons" close="_close" >
                                 <button class="btn btn-primary" t-on-click.prevent="_close">
                                     <t>Ok</t>
                                 </button>
@@ -276,21 +271,21 @@
                 </div>
             </div>
         </div>
-    </Portal>
+    </t>
 </t>
 
 <t t-name="Popover" owl="1">
-    <div t-att-class="{ 'o_is_open': state.displayed }" t-att-title="props.titleAttribute" t-on-click="_onClick" t-on-o-popover-compute="_onPopoverCompute" t-on-o-popover-close="_onPopoverClose">
+    <div t-att-class="{ 'o_is_open': state.displayed }" t-attf-class="{{ props.class }}" t-att-title="props.titleAttribute" t-on-click="_onClick" t-on-o-popover-compute="_onPopoverCompute" t-on-o-popover-close="_onPopoverClose">
         <t t-slot="default"/>
-        <Portal t-if="state.displayed" target="'body'">
+        <t t-portal="'body'" t-if="state.displayed">
             <div role="tooltip" class="o_popover" t-att-class="props.popoverClass" t-ref="popover">
                 <div class="arrow"/>
                 <h3 t-if="props.title" class="o_popover_header"><t t-esc="props.title"/></h3>
-                <div class="popover-body">
+                <div class="popover-body" t-on-o-popover-close="_onPopoverClose">
                     <t t-slot="opened"/>
                 </div>
             </div>
-        </Portal>
+        </t>
     </div>
 </t>
 
@@ -299,9 +294,9 @@
         <span class="o_pager_counter mr-2" t-on-click.stop="">
             <input t-if="state.editing" type="text"
                 class="o_pager_value o_input"
-                autofocus=""
+                t-ref="autofocus"
                 t-att-value="value"
-                t-on-blur="state.editing = false"
+                t-on-blur="() => { this.state.editing = false }"
                 t-on-change="_onValueChange"
                 t-on-keydown.stop="_onValueKeydown"
             />
@@ -322,7 +317,7 @@
                 aria-label="Previous page"
                 title="Previous page"
                 tabindex="-1"
-                t-on-click="_changeSelection(-1)"
+                t-on-click="ev => this._changeSelection(-1, ev)"
             />
             <button type="button"
                 class="fa fa-chevron-right btn btn-secondary o_pager_next rounded-right"
@@ -331,7 +326,7 @@
                 aria-label="Next page"
                 title="Next page"
                 tabindex="-1"
-                t-on-click="_changeSelection(1)"
+                t-on-click="ev => this._changeSelection(1, ev)"
             />
         </span>
     </nav>
@@ -344,8 +339,7 @@
             class="o_searchview_facet"
             role="img"
             aria-label="search"
-            t-on-keydown="_onFacetKeydown(facet, facet_index)"
-            >
+            t-on-keydown="(ev) => this._onFacetKeydown(facet, facet_index, ev)">
             <span t-if="facet.icon" t-attf-class="o_searchview_facet_label {{ facet.icon }}"/>
             <span t-else="" class="o_searchview_facet_label" t-esc="facet.title"/>
             <div class="o_facet_values">
@@ -358,7 +352,7 @@
                 role="img"
                 aria-label="Remove"
                 title="Remove"
-                t-on-click="_onFacetRemove(facet)"
+                t-on-click="()=>this._onFacetRemove(facet)"
             />
         </div>
         <input type="text"
@@ -377,13 +371,13 @@
                 t-att-id="src.id"
                 class="o_menu_item"
                 t-att-class="{ o_indent: src.parent and !src.parent.selection, o_selection_focus: src_index === state.focusedItem }"
-                t-on-click="_selectSource(src)"
-                t-on-mousemove="_onSourceMousemove(src_index)"
+                t-on-click="()=>this._selectSource(src)"
+                t-on-mousemove="()=>this._onSourceMousemove(src_index)"
                 >
                 <a t-if="src.expand"
                     href="#"
                     class="o_expand"
-                    t-on-click.stop.prevent="_expandSource(src, !src.expanded)"
+                    t-on-click.stop.prevent="()=>this._expandSource(src, !src.expanded)"
                     >
                     <i t-attf-class="fa fa-caret-{{ src.expanded ? 'down' : 'right' }}"/>
                 </a>
@@ -430,7 +424,7 @@
         t-att-aria-label="sprintf(buttonLabel.toString(), view.type)"
         t-att-data-tooltip="view.name"
         tabindex="-1"
-        t-on-click="trigger('switch-view', { view_type: view.type })"
+        t-on-click="() => this.trigger('switch-view', { view_type: view.type })"
     />
 </t>
 
@@ -438,8 +432,6 @@
 
 <div t-name="EmptyComponent"/>
 
-<div t-name="Loading" class="o_loading"/>
-
 <t t-name="WidgetLabel.tooltip">
     <div class="oe_tooltip_string" t-if="widget.string" role="tooltip">
         <t t-esc="widget.string"/> <t t-if="debug and widget.nolabel">(nolabel)</t>
@@ -501,7 +493,7 @@
         <li t-if="widget.field and widget.field.selection" data-item="selection">
             <span class="oe_tooltip_technical_title">Selection:</span>
             <ul class="oe_tooltip_technical">
-                <li t-foreach="widget.field.selection" t-as="option">
+                <li t-foreach="widget.field.selection" t-as="option" t-key="option_index">
                     [<t t-esc="option[0]"/>]
                     <t t-if="option[1]"> - </t>
                     <t t-esc="option[1]"/>
@@ -624,7 +616,7 @@
         <div class="table-responsive">
             <table class="o_modal_changes">
                 <tbody>
-                    <t t-foreach="fields" t-as="field">
+                    <t t-foreach="fields" t-as="field" t-key="field_index">
                         <tr>
                             <td>Field:</td>
                             <td><t t-esc="field.label"/></td>
@@ -701,7 +693,7 @@
             <td class="oe_form_required">
                 <select id="formview_default_fields" class="o_input">
                     <option value=""/>
-                    <option t-foreach="args.fields" t-as="field"
+                    <option t-foreach="args.fields" t-as="field" t-key="field_index"
                             t-att-value="field.name">
                         <t t-esc="field.string"/> = <t t-esc="field.displayed"/>
                     </option>
@@ -718,7 +710,7 @@
             <td>
                 <select id="formview_default_conditions" class="o_input">
                     <option value=""/>
-                    <option t-foreach="args.conditions" t-as="cond"
+                    <option t-foreach="args.conditions" t-as="cond" t-key="cond_index"
                             t-att-value="cond.name + '=' + cond.value">
                         <t t-esc="cond.string"/>=<t t-esc="cond.displayed"/>
                     </option>
@@ -766,7 +758,7 @@
             Measures <i class="fa fa-caret-down ml-1"/>
         </button>
         <div class="dropdown-menu o_pivot_measures_list" role="menu">
-            <t t-foreach="measures" t-as="measure">
+            <t t-foreach="measures" t-as="measure" t-key="measure_index">
                 <a role="menuitem" href="#" class="dropdown-item" t-att-data-field="measure[0]"><t t-esc="measure[1].string"/><t t-if="measure[1].type === 'many2one'"> (count)</t></a>
             </t>
             <div role="separator" class="dropdown-divider"/>
@@ -789,7 +781,7 @@
     </div>
 </t>
 <t t-name="FormSelection.items">
-    <t t-foreach="states" t-as="rec">
+    <t t-foreach="states" t-as="rec" t-key="rec_index">
         <a role="menuitem" href="#" class="dropdown-item pl-4" t-att-data-value="rec.name">
             <span t-att-class="'o_status rounded-circle d-inline-block align-middle ' + (rec.state_class &amp;&amp; rec.state_class || '')"/>
             <t t-out="rec.state_name"/>
@@ -878,7 +870,7 @@
         <!-- field selector will be instantiated here -->
         <div> <!-- used for flex stretching -->
             <select class="o_domain_leaf_operator_select o_input">
-                <option t-foreach="widget.operators" t-as="key"
+                <option t-foreach="widget.operators" t-as="key" t-key="key_index"
                         t-att-value="key"
                         t-att-selected="widget.displayOperator === key ? 'selected' : None">
                     <t t-esc="key_value"/>
@@ -888,7 +880,7 @@
         <div t-attf-class="o_ds_value_cell#{_.contains(['set', 'not set'], widget.displayOperator) ? ' d-none' : ''}">
             <t t-if="widget.selectionChoices !== null">
                 <select class="o_domain_leaf_value_input o_input">
-                    <option t-foreach="widget.selectionChoices" t-as="val"
+                    <option t-foreach="widget.selectionChoices" t-as="val" t-key="val_index"
                             t-att-value="val[0]"
                             t-att-selected="_.contains(val, widget.displayValue) ? 'selected' : None">
                         <t t-esc="val[1]"/>
@@ -898,7 +890,7 @@
             <t t-else="">
                 <t t-if="_.contains(['in', 'not in'], widget.operator)">
                     <div class="o_domain_leaf_value_input">
-                        <span class="badge badge-pill" t-foreach="widget.displayValue" t-as="val">
+                        <span class="badge badge-pill" t-foreach="widget.displayValue" t-as="val" t-key="val_index">
                             <t t-esc="val"/> <i class="o_domain_leaf_value_remove_tag_button fa fa-times" t-att-data-value="val" role="img" aria-label="Remove tag" title="Remove tag"/>
                         </span>
                     </div>
@@ -921,7 +913,7 @@
         </t>
         <t t-if="_.isArray(widget.value)">
             <span class="o_domain_leaf_operator"><t t-esc="widget.operator_mapping[widget.operator]"/></span>
-            <t t-foreach="widget.value" t-as="v">
+            <t t-foreach="widget.value" t-as="v" t-key="v_index">
                 <span class="o_domain_leaf_value text-primary">"<t t-esc="v"/>"</span>
                 <t t-if="!v_last"> or </t>
             </t>
@@ -960,7 +952,7 @@
     </div>
 </div>
 <t t-name="ModelFieldSelector.value">
-    <t t-foreach="chain" t-as="fieldName">
+    <t t-foreach="chain" t-as="fieldName" t-key="fieldName_index">
         <t t-if="fieldName_index > 0">
             <i class="fa fa-chevron-right" role="img" aria-label="Followed by" title="Followed by"/>
         </t>
@@ -979,7 +971,7 @@
     </t>
 </t>
 <ul t-name="ModelFieldSelector.page" class="o_field_selector_page">
-    <t t-foreach="lines" t-as="line">
+    <t t-foreach="lines" t-as="line" t-key="line_index">
         <t t-set="relationToFollow" t-value="followRelations(line) &amp;&amp; line.relation"/>
         <li t-attf-class="o_field_selector_item #{relationToFollow and 'o_field_selector_next_page' or 'o_field_selector_select_button'}#{line_index == 0 and ' active' or ''}"
             t-att-data-name="line.name">
@@ -1022,7 +1014,7 @@
 </t>
 
 <t t-name="FieldSelectionBadge">
-    <span t-foreach="values" t-as="value" t-attf-class="o_selection_badge #{value[0] == current_value ? 'active' : ''}" t-att-data-index="value_index">
+    <span t-foreach="values" t-as="value" t-key="value_index" t-attf-class="o_selection_badge #{value[0] == current_value ? 'active' : ''}" t-att-data-index="value_index">
         <t t-esc="value[1]"/>
     </span>
 </t>
@@ -1062,13 +1054,13 @@
         <t t-if="!widget.nodeOptions.model_field">
             <select t-att-class="'o_input o_field_widget' + (widget.nodeOptions.hide_model and ' d-none' or '')">
                 <option/>
-                <option t-foreach="widget.field.selection" t-as="model" t-att-value="model[0]"><t t-esc="model[1]"/></option>
+                <option t-foreach="widget.field.selection" t-as="model" t-key="model_index" t-att-value="model[0]"><t t-esc="model[1]"/></option>
             </select>
         </t>
     </t>
 </t>
 <t t-name="FieldMany2ManyTag">
-    <t t-foreach="elements" t-as="el">
+    <t t-foreach="elements" t-as="el" t-key="el_index">
         <t t-set="color" t-value="el[colorField] || 0"/>
         <t t-set="colornames" t-value="['No color', 'Red', 'Orange', 'Yellow', 'Light blue', 'Dark purple', 'Salmon pink', 'Medium blue', 'Dark blue', 'Fushia', 'Green', 'Purple']"/>
         <div t-attf-class="badge badge-pill #{hasDropdown ? 'dropdown' : ''} o_tag_color_#{color}" t-att-data-color="color" t-att-data-index="el_index" t-att-data-id="el.id" t-attf-title="Tag color: #{colornames[color]}">
@@ -1094,7 +1086,7 @@
 </t>
 <t t-name="KanbanMany2ManyTagAvatar">
     <t t-set="visibleElements" t-value="elements.length === widget.visibleAvatarCount ? elements : elements.slice(0, widget.visibleAvatarCount - 1)"/>
-    <t t-foreach="visibleElements" t-as="el">
+    <t t-foreach="visibleElements" t-as="el" t-key="el_index">
         <span><img t-attf-src="/web/image/#{avatarModel}/#{el.id}/#{avatarField}" t-att-title="el.display_name" t-att-data-id="el.id" class="rounded-circle o_m2m_avatar"/></span>
     </t>
     <t t-if="elements.length > widget.visibleAvatarCount">
@@ -1117,7 +1109,7 @@
         </t>
         <t t-else="">
             <t t-set="visibleElements" t-value="elements.length === widget.visibleAvatarCount ? elements : elements.slice(0, widget.visibleAvatarCount - 1)"/>
-            <t t-foreach="visibleElements" t-as="el">
+            <t t-foreach="visibleElements" t-as="el" t-key="el_index">
                 <span><img t-attf-src="/web/image/#{avatarModel}/#{el.id}/#{avatarField}" t-att-title="el.display_name" t-att-data-id="el.id" class="rounded-circle o_m2m_avatar"/></span>
             </t>
             <t t-if="elements.length > widget.visibleAvatarCount">
@@ -1130,7 +1122,7 @@
     </t>
 </t>
 <t t-name="Many2ManyTagAvatarPopover">
-    <t t-foreach="elements" t-as="el">
+    <t t-foreach="elements" t-as="el" t-key="el_index">
         <div><t t-esc="el.display_name"/></div>
     </t>
 </t>
@@ -1182,14 +1174,14 @@
     <t t-if="selection_folded.length">
         <button type="button" class="btn o_arrow_button btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">More</button>
         <div class="dropdown-menu" role="menu">
-            <t t-foreach="selection_folded" t-as="i">
+            <t t-foreach="selection_folded" t-as="i" t-key="i_index">
                 <t t-call="FieldStatus.content.button">
                     <t t-set="is_dropdown" t-value="true"/>
                 </t>
             </t>
         </div>
     </t>
-    <t t-foreach="selection_unfolded.reverse()" t-as="i">
+    <t t-foreach="selection_unfolded.reverse()" t-as="i" t-key="i_index">
         <t t-call="FieldStatus.content.button"/>
     </t>
 </t>
@@ -1385,11 +1377,11 @@
 
 <div t-name="FieldBinaryFileUploader.files" class="o_attachments" aria-atomic="true">
     <!-- uploaded files -->
-    <t t-foreach="widget.value.data" t-as="file">
+    <t t-foreach="widget.value.data" t-as="file" t-key="file_index">
         <t t-if="!file.data.upload" t-call="FieldBinaryFileUploader.attachment_preview"/>
     </t>
     <!-- uploading files -->
-    <t t-foreach="widget.uploadingFiles" t-as="file">
+    <t t-foreach="widget.uploadingFiles" t-as="file" t-key="file_index">
         <t t-set="upload" t-value="true"/>
         <t t-call="FieldBinaryFileUploader.attachment_preview"/>
     </t>
@@ -1430,7 +1422,7 @@
     </div>
 </div>
 <t t-name="Export.TreeItems">
-    <t t-foreach="fields" t-as="field">
+    <t t-foreach="fields" t-as="field" t-key="field_index">
         <t t-set="has_child" t-value="field.children &amp;&amp; (field.id).split('/').length != 3" />
         <div t-att-data-id="field.id" t-attf-class="o_export_tree_item #{has_child ? 'haschild o_expand' : ''}" tabindex="-1" role="treeitem"> <!-- tabindex make the div focusable -->
             <span t-if="has_child" class="o_expand_parent fa fa-chevron-right" role="img" aria-label="Show sub-fields" title="Show sub-fields"/>
@@ -1459,7 +1451,7 @@
         <select class="form-control ml-4 o_exported_lists_select">
             <option></option>
             <option class="font-italic" value="new_template">New template</option>
-            <t t-foreach="existing_exports" t-as="export">
+            <t t-foreach="existing_exports" t-as="export" t-key="export_index">
                 <option t-att-value="export.id">
                     <t t-esc="export.name"/>
                 </option>
@@ -1490,7 +1482,7 @@
 </t>
 <t t-name="FieldMany2ManyCheckBoxes">
     <div aria-atomic="true">
-        <div t-foreach="widget.m2mValues" t-as="m2m_value">
+        <div t-foreach="widget.m2mValues" t-as="m2m_value" t-key="m2m_value_index">
             <t t-set="id_for_label" t-value="'o_many2many_checkbox_' + _.uniqueId()"/>
             <div class="custom-control custom-checkbox">
                 <input type="checkbox" t-att-id="id_for_label" class="custom-control-input" t-att-data-record-id="JSON.stringify(m2m_value[0])"/>
@@ -1526,7 +1518,7 @@
 <t t-name="translation-alert">
     <div role="alertdialog">
         Please update translations of :
-        <t t-foreach="fields" t-as="field">
+        <t t-foreach="fields" t-as="field" t-key="field_index">
             <strong><a class="oe_field_translate" t-att-name="field" href="#"><t t-esc="field_value.string"/><t t-if="field_index &lt; _.size(fields)-1">, </t></a></strong>
         </t>
     </div>
@@ -1552,7 +1544,7 @@
 </t>
 
 <t t-name="BaseSetting.Tabs">
-    <t t-foreach="tabItems" t-as="tab">
+    <t t-foreach="tabItems" t-as="tab" t-key="tab_index">
         <div class="tab" t-attf-data-key="#{tab.key}" role="tab">
             <div class="icon d-none d-md-block" t-attf-style="background : url('#{imgurl}') no-repeat center;background-size:contain;"/> <span class="app_name"><t t-esc="tab.string"/></span>
         </div>
diff --git a/addons/web/static/src/legacy/xml/control_panel.xml b/addons/web/static/src/legacy/xml/control_panel.xml
index 10b78ee2846..fb1f76f223b 100644
--- a/addons/web/static/src/legacy/xml/control_panel.xml
+++ b/addons/web/static/src/legacy/xml/control_panel.xml
@@ -6,15 +6,15 @@
         <Dialog t-if="state.deletedFavorite"
             title="'Warning'"
             size="'medium'"
-            t-on-dialog-closed="state.deletedFavorite = false"
+            onClosed="() => { state.deletedFavorite = false }"
             >
             <t t-if="state.deletedFavorite.userId">Are you sure that you want to remove this filter?</t>
             <t t-else="">This filter is global and will be removed for everybody if you continue.</t>
-            <t t-set="buttons">
+            <t t-set-slot="buttons">
                 <button type="button" class="btn btn-primary" t-on-click="_onRemoveFavorite">
                     <t>Ok</t>
                 </button>
-                <button type="button" class="btn btn-secondary" t-on-click.stop="state.deletedFavorite = false">
+                <button type="button" class="btn btn-secondary" t-on-click.stop="() => { state.deletedFavorite = false }">
                     <t>Cancel</t>
                 </button>
             </t>
diff --git a/addons/web/static/src/legacy/xml/fields.xml b/addons/web/static/src/legacy/xml/fields.xml
index ee2e4f1fdae..01a6c54927e 100644
--- a/addons/web/static/src/legacy/xml/fields.xml
+++ b/addons/web/static/src/legacy/xml/fields.xml
@@ -3,7 +3,7 @@
 
     <t t-name="web.FieldBoolean" owl="1">
         <CustomCheckbox disabled="hasReadonlyModifier"
-            value="value" class="o_field_boolean" t-on-change="_onChange"/>
+            value="value" class="'o_field_boolean'" onChange.bind="_onChange"/>
     </t>
 
     <t t-name="web.FieldBadge" owl="1">
diff --git a/addons/web/static/src/legacy/xml/pivot.xml b/addons/web/static/src/legacy/xml/pivot.xml
index b499d0c597a..f409549d82a 100644
--- a/addons/web/static/src/legacy/xml/pivot.xml
+++ b/addons/web/static/src/legacy/xml/pivot.xml
@@ -31,7 +31,7 @@
                         <td class="o_pivot_cell_value text-right" t-att-class="{
                                 o_empty: cell.value === undefined,
                                 'font-weight-bold': cell.isBold,
-                            }" t-on-click="trigger('open_view', cell)"
+                            }" t-on-click="() => this.trigger('open_view', cell)"
                                t-on-mouseover="_onMouseEnter" t-on-mouseout="_onMouseLeave">
                             <t t-if="cell.value !== undefined">
                                 <div t-if="cell.originIndexes.length > 1" class="o_variation" t-att-class="{
@@ -58,8 +58,8 @@
         <th t-att-colspan="isXAxis ? cell.width : undefined" t-att-rowspan="isXAxis ? cell.height : undefined" t-att-class="{
                 o_pivot_header_cell_closed: cell.isLeaf,
                 o_pivot_header_cell_opened: !cell.isLeaf,
-            }" t-attf-style="{{ isXAxis ? undefined : 'padding-left: ' + _getPadding(cell) + 'px;' }}" t-att-title="cell.label" t-on-click.self.prevent="_onHeaderClick(cell, isXAxis ? 'col' : 'row')">
-            <span t-on-click.self.prevent="_onHeaderClick(cell, isXAxis ? 'col' : 'row')" t-esc="cell.title"/>
+            }" t-attf-style="{{ isXAxis ? undefined : 'padding-left: ' + _getPadding(cell) + 'px;' }}" t-att-title="cell.label" t-on-click.self.prevent="() => this._onHeaderClick(cell, isXAxis ? 'col' : 'row')">
+            <span t-on-click.self.prevent="() => this._onHeaderClick(cell, isXAxis ? 'col' : 'row')" t-esc="cell.title"/>
             <t t-if="cell.isLeaf and !cell.isFolded" t-call="web.legacy.PivotGroupBySelection"/>
         </th>
     </t>
@@ -70,23 +70,23 @@
                 o_pivot_measure_row: !cell.originIndexes,
                 o_pivot_sort_order_asc: cell.order === 'asc',
                 o_pivot_sort_order_desc: cell.order === 'desc',
-            }" t-on-click.prevent="trigger('sort_rows',cell)" t-on-mouseover="_onMouseEnter" t-on-mouseout="_onMouseLeave">
+            }" t-on-click.prevent="() => this.trigger('sort_rows',cell)" t-on-mouseover="_onMouseEnter" t-on-mouseout="_onMouseLeave">
             <t t-esc="cell.title"/>
         </th>
     </t>
 
     <t t-name="web.legacy.PivotGroupBySelection" owl="1">
-        <PivotGroupByMenu 
+        <PivotGroupByMenu
             customGroupBys="customGroupBys"
             fields="props.groupableFields"
             hasSearchArchGroupBys="hasSearchArchGroupBys"
             searchModel="props.searchModel"
-            t-on-groupby-menu-selection="_onGroupByMenuSelection"
+            onGroupbyMenuSelection.bind="_onGroupByMenuSelection"
         />
     </t>
 
     <t t-name="web.legacy.PivotGroupByMenu" owl="1">
-        <Dropdown class="o_pivot_field_menu" toggler="'parent'">
+        <Dropdown class="'o_pivot_field_menu'" toggler="'parent'">
             <t t-set="currentGroup" t-value="null"/>
             <t t-foreach="items" t-as="item" t-key="item.id">
                 <t t-if="item.groupNumber and currentGroup !== null and currentGroup !== item.groupNumber">
@@ -98,14 +98,14 @@
                             <t t-esc="item.description"/>
                         </t>
                         <t t-foreach="Object.values(intervalOptions)" t-as="option" t-key="option.id">
-                            <DropdownItem class="o_item_option dropdown-item" onSelected="() => this._onClickMenuGroupBy(item.fieldName, option.id)">
+                            <DropdownItem class="'o_item_option'" onSelected="() => this._onClickMenuGroupBy(item.fieldName, option.id)">
                                 <t t-esc="option.description"/>
                             </DropdownItem>
                         </t>
                     </Dropdown>
                 </t>
                 <t t-else="">
-                    <DropdownItem class="o_menu_item dropdown-item" onSelected="() => this._onClickMenuGroupBy(item.fieldName, null)">
+                    <DropdownItem class="'o_menu_item'" onSelected="() => this._onClickMenuGroupBy(item.fieldName, null)">
                         <t t-esc="item.description"/>
                     </DropdownItem>
                 </t>
@@ -113,7 +113,7 @@
             </t>
             <t t-if="props.fields.length and props.hasSearchArchGroupBys">
                 <li t-if="items.length" class="dropdown-divider" role="separator"/>
-                <PivotCustomGroupByItem fields="props.fields"/>
+                <CustomGroupByItem fields="props.fields" onAddCustomGroup.bind="onAddCustomGroup"/>
             </t>
         </Dropdown>
     </t>
diff --git a/addons/web/static/src/legacy/xml/search_panel.xml b/addons/web/static/src/legacy/xml/search_panel.xml
index 6397e5ae807..2d95a9d9db3 100644
--- a/addons/web/static/src/legacy/xml/search_panel.xml
+++ b/addons/web/static/src/legacy/xml/search_panel.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
 <t t-name="web.Legacy.SearchPanel" owl="1">
-    <div class="o_search_panel" t-att-class="props.className">
+    <div class="o_search_panel" t-att-class="props.className" t-ref="legacySearchPanel">
         <section t-foreach="model.get('sections', s => !s.empty)" t-as="section" t-key="section.id"
             t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
             >
@@ -34,7 +34,7 @@
                                 <input type="checkbox"
                                     class="custom-control-input"
                                     t-attf-id="{{ section.id }}_input_{{ groupId }})"
-                                    t-on-click="_toggleFilterGroup(section.id, group)"
+                                    t-on-click="() => this._toggleFilterGroup(section.id, group)"
                                 />
                                 <label t-attf-for="{{ section.id }}_input_{{ groupId }})"
                                     class="o_search_panel_label custom-control-label"
@@ -79,7 +79,7 @@
         <li class="o_search_panel_category_value list-group-item border-0">
             <header class="list-group-item-action"
                 t-att-class="{ active: state.active[section.id] === valueId }"
-                t-on-click="_toggleCategory(section, value)"
+                t-on-click="() => this._toggleCategory(section, value)"
                 >
                 <label class="o_search_panel_label mb0" t-att-class="{ o_with_counters: section.enableCounters }">
                     <div class="o_toggle_fold">
@@ -114,7 +114,7 @@
                 t-attf-id="{{ section.id }}_input_{{ valueId }}"
                 t-att-checked="state.active[section.id][valueId]"
                 class="custom-control-input"
-                t-on-click="_toggleFilterValue(section.id, valueId)"
+                t-on-click="ev => this._toggleFilterValue(section.id, valueId, ev)"
             />
             <label class="o_search_panel_label custom-control-label"
                 t-attf-for="{{ section.id }}_input_{{ valueId }}"
diff --git a/addons/web/static/src/legacy/xml/week_days.xml b/addons/web/static/src/legacy/xml/week_days.xml
index 91d6922a6a5..b4c882173cd 100644
--- a/addons/web/static/src/legacy/xml/week_days.xml
+++ b/addons/web/static/src/legacy/xml/week_days.xml
@@ -15,8 +15,8 @@
                         <CustomCheckbox disabled="mode === 'readonly'"
                             value="state.days[day].value"
                             id="state.days[day].id"
-                            class="o_recurrent_weekday_checkbox text-center"
-                            t-on-change="_onChange"/>
+                            class="'o_recurrent_weekday_checkbox text-center'"
+                            onChange="(checked) => this._onChange(checked, state.days[day].id)"/>
                     </td>
                 </tr>
             </table>
diff --git a/addons/web/static/src/owl2_compatibility/app.js b/addons/web/static/src/owl2_compatibility/app.js
new file mode 100644
index 00000000000..ebf044f1828
--- /dev/null
+++ b/addons/web/static/src/owl2_compatibility/app.js
@@ -0,0 +1,36 @@
+(function () {
+    const App = owl.App;
+
+    // templates' code is shared between multiple instances of Apps
+    // This is useful primarly for the OWL2 to Legacy compatibility layer
+    // It is also useful for tests.
+    // The downside of this is that the compilation is done once with the compiling app's
+    // translate function and attributes.
+    const sharedTemplates = {};
+
+    owl.App = class extends App {
+        constructor(_, config) {
+            if (!config.test) {
+                const missingKeys = ["dev", "translateFn", "translatableAttributes"].filter(
+                    (key) => !(key in config)
+                );
+                if (missingKeys.length) {
+                    throw new Error(
+                        `Attempted to create an App without some required key(s) (${missingKeys.join(
+                            ", "
+                        )})`
+                    );
+                }
+            }
+            super(...arguments);
+        }
+        _compileTemplate(name) {
+            if (!(name in sharedTemplates)) {
+                sharedTemplates[name] = super._compileTemplate(...arguments);
+            }
+            return sharedTemplates[name];
+        }
+    };
+    owl.App.sharedTemplates = sharedTemplates;
+    owl.App.validateTarget = () => {};
+})();
diff --git a/addons/web/static/src/owl2_compatibility/component.js b/addons/web/static/src/owl2_compatibility/component.js
new file mode 100644
index 00000000000..259922aad9d
--- /dev/null
+++ b/addons/web/static/src/owl2_compatibility/component.js
@@ -0,0 +1,43 @@
+(function () {
+    const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+    owl.Component = class extends owl.Component {
+        get el() {
+            const bdom = this.__owl__.bdom;
+            if (!bdom) {
+                return null;
+            }
+
+            if (hasOwnProperty.call(bdom, "component")) {
+                return bdom.component.el;
+            } else {
+                return bdom.firstNode();
+            }
+        }
+
+        /**
+         * Emit a custom event of type 'eventType' with the given 'payload' on the
+         * component's el, if it exists. However, note that the event will only bubble
+         * up to the parent DOM nodes. Thus, it must be called between mounted() and
+         * willUnmount().
+         */
+        trigger(eventType, payload) {
+            this.__trigger(eventType, payload);
+        }
+        /**
+         * Private trigger method, allows to choose the component which triggered
+         * the event in the first place
+         */
+        __trigger(eventType, payload) {
+            if (this.el) {
+                const ev = new CustomEvent(eventType, {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: payload,
+                });
+                this.el.dispatchEvent(ev);
+            }
+        }
+    };
+    owl.Component.env = {};
+})();
diff --git a/addons/web/static/src/owl2_compatibility/event_target.js b/addons/web/static/src/owl2_compatibility/event_target.js
new file mode 100644
index 00000000000..8ef1c23ef29
--- /dev/null
+++ b/addons/web/static/src/owl2_compatibility/event_target.js
@@ -0,0 +1,33 @@
+(function () {
+    const { EventBus } = owl;
+
+    function wrapCallback(owner, callback) {
+        return (ev) => {
+            callback.call(owner, ev.detail);
+        };
+    }
+
+    owl.EventBus = class extends EventBus {
+        constructor(...args) {
+            super(...args);
+            this.targetsCallbacks = new Map();
+        }
+        on(type, target, callback) {
+            if (!this.targetsCallbacks.has(target)) {
+                this.targetsCallbacks.set(target, []);
+            }
+            callback = wrapCallback(target, callback);
+            this.targetsCallbacks.get(target).push(callback);
+            return this.addEventListener(type, callback);
+        }
+        off(type, target) {
+            const cbs = this.targetsCallbacks.get(target);
+            if (!cbs) {
+                return;
+            }
+            for (const callback of cbs) {
+                this.removeEventListener(type, callback);
+            }
+        }
+    };
+})();
diff --git a/addons/web/static/src/owl_next_adapter.js b/addons/web/static/src/owl_next_adapter.js
deleted file mode 100644
index 0860596fe50..00000000000
--- a/addons/web/static/src/owl_next_adapter.js
+++ /dev/null
@@ -1,34 +0,0 @@
-(() => {
-    /**
-     * This file converts the imports of Owl variables from v1 to v2
-     *
-     * In the previous version: imports were grouped in subkeys under the
-     * global `owl` object. In the newer, all imports are top-level.
-     *
-     * Any call to the previous subkeys will throw an error to help
-     * devs adapt to the new system.
-     */
-
-    // These are the old subkeys used to group exports
-    const ROOT_KEYS = ["core", "router", "utils", "tags", "misc", "hooks"];
-
-    for (const key of ROOT_KEYS) {
-        if (!Object.getOwnPropertyDescriptor(owl, key).value) {
-            // This means that the key has already been transformed
-            continue;
-        }
-        for (const subKey in owl[key]) {
-            owl[subKey] = owl[key][subKey];
-        }
-        // TODO: uncomment the code below as soon as o_spreadsheet ugprades to Owl v2
-        // delete owl[key];
-        // Object.defineProperty(owl, key, {
-        //     get() {
-        //         throw new Error(
-        //             `Deprecated Owl import: ${key}. All properties under this key are now directly available from the global 'owl' object.`
-        //         );
-        //     },
-        //     set() {},
-        // });
-    }
-})();
diff --git a/addons/web/static/src/search/comparison_menu/comparison_menu.js b/addons/web/static/src/search/comparison_menu/comparison_menu.js
index 0667d4379a1..297ca6d605f 100644
--- a/addons/web/static/src/search/comparison_menu/comparison_menu.js
+++ b/addons/web/static/src/search/comparison_menu/comparison_menu.js
@@ -1,5 +1,7 @@
 /** @odoo-module **/
 
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { FACET_ICONS } from "../utils/misc";
 import { useBus } from "@web/core/utils/hooks";
 
@@ -30,3 +32,4 @@ export class ComparisonMenu extends Component {
 }
 
 ComparisonMenu.template = "web.ComparisonMenu";
+ComparisonMenu.components = { Dropdown, DropdownItem };
diff --git a/addons/web/static/src/search/comparison_menu/comparison_menu.xml b/addons/web/static/src/search/comparison_menu/comparison_menu.xml
index 0ecf335b65c..b3b8bf29b64 100644
--- a/addons/web/static/src/search/comparison_menu/comparison_menu.xml
+++ b/addons/web/static/src/search/comparison_menu/comparison_menu.xml
@@ -2,18 +2,16 @@
 <templates xml:space="preserve">
 
     <t t-name="web.ComparisonMenu" owl="1">
-        <Dropdown class="o_comparison_menu btn-group" togglerClass="'btn btn-light'">
+        <Dropdown class="'o_comparison_menu btn-group'" togglerClass="'btn btn-light'">
             <t t-set-slot="toggler">
                 <i class="mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Comparison</span>
             </t>
             <t t-foreach="items" t-as="item" t-key="item.id">
-                <DropdownItem
-                    class="o_menu_item"
-                    t-att-class="{ selected: item.isActive }"
-                    onSelected="() => this.onComparisonSelected(item.id)"
+                <DropdownItem class="{ o_menu_item: true, selected: item.isActive }"
                     parentClosingMode="'none'"
                     t-esc="item.description"
+                    onSelected="() => this.onComparisonSelected(item.id)"
                 />
             </t>
         </Dropdown>
diff --git a/addons/web/static/src/search/control_panel/control_panel.js b/addons/web/static/src/search/control_panel/control_panel.js
index d676481c862..552146c5ba3 100644
--- a/addons/web/static/src/search/control_panel/control_panel.js
+++ b/addons/web/static/src/search/control_panel/control_panel.js
@@ -22,44 +22,6 @@ export class ControlPanel extends Component {
         this.actionService = useService("action");
     }
 
-    /**
-     * !!! What follows is a hack, do not copy it !!!
-     *
-     * Duplicates the slots defined for the parent s.t. they are also available
-     * for the current control panel.
-     *
-     * This hack is necessary since Owl does not support manual slots
-     * assignment/transfer yet. This must be removed as soon as Owl implements
-     * such a system.
-     *
-     * @strongly_discouraged_override
-     */
-    __render() {
-        const { slots } = this.env.qweb.constructor;
-        const { __owl__ } = this;
-        const originalSlots = {};
-        const transferredSlotNames = [
-            "control-panel-top-left",
-            "control-panel-top-right",
-            "control-panel-bottom-left",
-            "control-panel-bottom-right",
-        ];
-        for (const slotName of transferredSlotNames) {
-            const parentSlotkey = `${__owl__.parent.__owl__.slotId}_${slotName}`;
-            if (parentSlotkey in slots) {
-                const cpSlotKey = `${__owl__.slotId}_${slotName}`;
-                originalSlots[cpSlotKey] = slots[cpSlotKey];
-                slots[cpSlotKey] = function (scope, extra) {
-                    slots[parentSlotkey].call(this, __owl__.parent.__owl__.scope, extra);
-                };
-            }
-        }
-        const res = super.__render(...arguments);
-        // Clean up
-        Object.assign(slots, originalSlots);
-        return res;
-    }
-
     /**
      * @returns {Object}
      */
diff --git a/addons/web/static/src/search/control_panel/control_panel.xml b/addons/web/static/src/search/control_panel/control_panel.xml
index 6423d5dbdd9..ac8b1382c45 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -41,7 +41,7 @@
                                 <button class="btn btn-light oi o_switch_view "
                                     t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
                                     t-att-data-tooltip="view.name"
-                                    t-on-click="onViewClicked(view.type)"
+                                    t-on-click="() => this.onViewClicked(view.type)"
                                     />
                             </t>
                         </nav>
@@ -55,7 +55,11 @@
         <ol class="breadcrumb">
             <t t-foreach="env.config.breadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
                 <t t-set="isPenultimate" t-value="breadcrumb_index === env.config.breadcrumbs.length - 2"/>
-                <li t-if="!breadcrumb_last" class="breadcrumb-item" t-att-class="{ o_back_button: isPenultimate}" t-on-click.prevent="onBreadcrumbClicked(breadcrumb.jsId)">
+                <li t-if="!breadcrumb_last"
+                    class="breadcrumb-item"
+                    t-att-class="{ o_back_button: isPenultimate}"
+                    t-on-click.prevent="() => this.onBreadcrumbClicked(breadcrumb.jsId)"
+                    >
                     <a href="#">
                         <t t-if="breadcrumb.name" t-esc="breadcrumb.name"/>
                         <em t-else="" class="text-warning">Unnamed</em>
diff --git a/addons/web/static/src/search/favorite_menu/custom_favorite_item.js b/addons/web/static/src/search/favorite_menu/custom_favorite_item.js
index b27aa36f78b..defd55a9c46 100644
--- a/addons/web/static/src/search/favorite_menu/custom_favorite_item.js
+++ b/addons/web/static/src/search/favorite_menu/custom_favorite_item.js
@@ -1,5 +1,7 @@
 /** @odoo-module **/
 
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { CheckBox } from "@web/core/checkbox/checkbox";
 import { registry } from "@web/core/registry";
 import { useAutofocus, useService } from "@web/core/utils/hooks";
 
@@ -11,7 +13,7 @@ export class CustomFavoriteItem extends Component {
     setup() {
         this.notificationService = useService("notification");
         this.descriptionRef = useRef("description");
-        useAutofocus();
+        useAutofocus("description");
         this.state = useState({
             description: this.env.config.getDisplayName(),
             isDefault: false,
@@ -52,10 +54,9 @@ export class CustomFavoriteItem extends Component {
     }
 
     /**
-     * @param {Event} ev
+     * @param {boolean} checked
      */
-    onDefaultCheckboxChange(ev) {
-        const { checked } = ev.target;
+    onDefaultCheckboxChange(checked) {
         this.state.isDefault = checked;
         if (checked) {
             this.state.isShared = false;
@@ -63,10 +64,9 @@ export class CustomFavoriteItem extends Component {
     }
 
     /**
-     * @param {Event} ev
+     * @param {boolean} checked
      */
-    onShareCheckboxChange(ev) {
-        const { checked } = ev.target;
+    onShareCheckboxChange(checked) {
         this.state.isShared = checked;
         if (checked) {
             this.state.isDefault = false;
@@ -92,6 +92,7 @@ export class CustomFavoriteItem extends Component {
 }
 
 CustomFavoriteItem.template = "web.CustomFavoriteItem";
+CustomFavoriteItem.components = { CheckBox, Dropdown };
 favoriteMenuRegistry.add(
     "custom-favorite-item",
     { Component: CustomFavoriteItem, groupNumber: 3 },
diff --git a/addons/web/static/src/search/favorite_menu/custom_favorite_item.xml b/addons/web/static/src/search/favorite_menu/custom_favorite_item.xml
index 80934fd8d4e..04b53015f30 100644
--- a/addons/web/static/src/search/favorite_menu/custom_favorite_item.xml
+++ b/addons/web/static/src/search/favorite_menu/custom_favorite_item.xml
@@ -2,22 +2,21 @@
 <templates xml:space="preserve">
 
     <t t-name="web.CustomFavoriteItem" owl="1" >
-        <Dropdown class="o_add_favorite">
+        <Dropdown class="'o_add_favorite'">
             <t t-set-slot="toggler">
                 Save current search
             </t>
             <div class="px-3 py-2">
                 <input type="text"
                     class="o_input"
-                    autofocus=""
                     t-ref="description"
                     t-model.trim="state.description"
                     t-on-keydown="onInputKeydown"
                     />
-                <CheckBox value="state.isDefault" t-on-change="onDefaultCheckboxChange">
+                <CheckBox value="state.isDefault" onChange.bind="onDefaultCheckboxChange">
                     Use by default
                 </CheckBox>
-                <CheckBox value="state.isShared" t-on-change="onShareCheckboxChange">
+                <CheckBox value="state.isShared" onChange.bind="onShareCheckboxChange">
                     Share with all users
                 </CheckBox>
             </div>
diff --git a/addons/web/static/src/search/favorite_menu/favorite_menu.js b/addons/web/static/src/search/favorite_menu/favorite_menu.js
index 5869be55d79..d8061ef06a9 100644
--- a/addons/web/static/src/search/favorite_menu/favorite_menu.js
+++ b/addons/web/static/src/search/favorite_menu/favorite_menu.js
@@ -1,5 +1,7 @@
 /** @odoo-module **/
 
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
 import { FACET_ICONS } from "../utils/misc";
 import { registry } from "@web/core/registry";
@@ -64,3 +66,4 @@ export class FavoriteMenu extends Component {
 }
 
 FavoriteMenu.template = "web.FavoriteMenu";
+FavoriteMenu.components = { Dropdown, DropdownItem };
diff --git a/addons/web/static/src/search/favorite_menu/favorite_menu.xml b/addons/web/static/src/search/favorite_menu/favorite_menu.xml
index 361598d7995..bd0a99b0d3f 100644
--- a/addons/web/static/src/search/favorite_menu/favorite_menu.xml
+++ b/addons/web/static/src/search/favorite_menu/favorite_menu.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.FavoriteMenu" owl="1">
-        <Dropdown class="o_favorite_menu btn-group" togglerClass="'btn btn-light'">
+        <Dropdown class="'o_favorite_menu btn-group'" togglerClass="'btn btn-light'">
             <t t-set-slot="toggler">
                 <i class="oi-small mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Favorites</span>
@@ -13,16 +13,15 @@
                     <div role="separator" class="dropdown-divider"/>
                 </t>
                 <t t-if="item.type ==='favorite'">
-                    <DropdownItem class="o_menu_item"
-                        t-att-class="{ selected: item.isActive }"
+                    <DropdownItem class="{ o_menu_item: true, selected: item.isActive }"
                         parentClosingMode="'none'"
                         onSelected="() => this.onFavoriteSelected(item.id)"
-                    >
+                        >
                         <span class="d-flex p-0 align-items-center justify-content-between">
                             <t t-esc="item.description"/>
                             <i class="o_icon_right fa fa-trash-o"
                                 title="Delete item"
-                                t-on-click.stop="openConfirmationDialog(item.id)"
+                                t-on-click.stop="() => this.openConfirmationDialog(item.id)"
                             />
                         </span>
                     </DropdownItem>
diff --git a/addons/web/static/src/search/filter_menu/custom_filter_item.js b/addons/web/static/src/search/filter_menu/custom_filter_item.js
index cd04ea4f615..f62e0d0fd81 100644
--- a/addons/web/static/src/search/filter_menu/custom_filter_item.js
+++ b/addons/web/static/src/search/filter_menu/custom_filter_item.js
@@ -1,5 +1,6 @@
 /** @odoo-module **/
 
+import { Dropdown } from "@web/core/dropdown/dropdown";
 import { DatePicker, DateTimePicker } from "@web/core/datepicker/datepicker";
 import { Domain } from "@web/core/domain";
 import { serializeDate, serializeDateTime } from "@web/core/l10n/dates";
@@ -312,5 +313,5 @@ export class CustomFilterItem extends Component {
     }
 }
 
-CustomFilterItem.components = { DatePicker, DateTimePicker };
+CustomFilterItem.components = { DatePicker, DateTimePicker, Dropdown };
 CustomFilterItem.template = "web.CustomFilterItem";
diff --git a/addons/web/static/src/search/filter_menu/custom_filter_item.xml b/addons/web/static/src/search/filter_menu/custom_filter_item.xml
index 25c3255cbed..fa2fb2df9e5 100644
--- a/addons/web/static/src/search/filter_menu/custom_filter_item.xml
+++ b/addons/web/static/src/search/filter_menu/custom_filter_item.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.CustomFilterItem" owl="1">
-        <Dropdown class="o_add_custom_filter_menu">
+        <Dropdown class="'o_add_custom_filter_menu'">
             <t t-set-slot="toggler">
                 Add Custom Filter
             </t>
@@ -12,7 +12,7 @@
                     <t t-set="selectedOperator" t-value="OPERATORS[FIELD_TYPES[fieldType]][condition.operator]"/>
                     <span t-if="!condition_first" class="o_or_filter">or</span>
                     <select class="o_input o_generator_menu_field"
-                        t-on-change="onFieldSelect(condition)"
+                        t-on-change="ev => this.onFieldSelect(condition, ev)"
                         >
                         <option t-foreach="fields" t-as="field" t-key="field_index"
                             t-att-value="field.name"
@@ -21,7 +21,7 @@
                         />
                     </select>
                     <select class="o_input o_generator_menu_operator"
-                        t-on-change="onOperatorSelect(condition)"
+                        t-on-change="ev => this.onOperatorSelect(condition, ev)"
                         >
                         <option t-foreach="OPERATORS[FIELD_TYPES[fieldType]]" t-as="operator" t-key="operator_index"
                             t-att-value="operator.symbol"
@@ -51,7 +51,7 @@
                             />
                         </t>
                         <select t-elif="fieldType === 'selection'" class="o_input"
-                            t-on-change="onValueChange(condition)"
+                            t-on-change="ev => this.onValueChange(condition, ev)"
                             >
                             <option t-foreach="fields[condition.field].selection" t-as="option" t-key="option_index"
                                 t-att-value="option[0]"
@@ -66,20 +66,20 @@
                             t-attf-title="Number using {{ DECIMAL_POINT }} as decimal separator."
                             t-attf-pattern="[0-9]+([\\{{ DECIMAL_POINT }}][0-9]+)?"
                             t-att-value="condition.displayedValue"
-                            t-on-change="onValueChange(condition)"
+                            t-on-change="ev => this.onValueChange(condition, ev)"
                         />
                         <input t-elif="['integer', 'id'].includes(fieldType)"
                             class="o_input"
                             step="1"
                             type="number"
                             t-att-value="condition.displayedValue"
-                            t-on-change="onValueChange(condition)"
+                            t-on-change="ev => this.onValueChange(condition, ev)"
                         />
                         <input t-else=""
                             type="text"
                             class="o_input"
                             t-att-value="condition.displayedValue"
-                            t-on-change="onValueChange(condition)"
+                            t-on-change="ev => this.onValueChange(condition, ev)"
                         />
                     </span>
                     <i t-if="conditions.length gt 1"
@@ -87,7 +87,7 @@
                         role="image"
                         aria-label="Delete"
                         title="Delete"
-                        t-on-click="onRemoveCondition(condition_index)"
+                        t-on-click="() => this.onRemoveCondition(condition_index)"
                     />
                 </div>
             </t>
diff --git a/addons/web/static/src/search/filter_menu/filter_menu.js b/addons/web/static/src/search/filter_menu/filter_menu.js
index c1699da06e1..d4529f6cdd5 100644
--- a/addons/web/static/src/search/filter_menu/filter_menu.js
+++ b/addons/web/static/src/search/filter_menu/filter_menu.js
@@ -1,5 +1,7 @@
 /** @odoo-module **/
 
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { CustomFilterItem } from "./custom_filter_item";
 import { FACET_ICONS } from "../utils/misc";
 import { useBus } from "@web/core/utils/hooks";
@@ -36,5 +38,5 @@ export class FilterMenu extends Component {
     }
 }
 
-FilterMenu.components = { CustomFilterItem };
+FilterMenu.components = { CustomFilterItem, Dropdown, DropdownItem };
 FilterMenu.template = "web.FilterMenu";
diff --git a/addons/web/static/src/search/filter_menu/filter_menu.xml b/addons/web/static/src/search/filter_menu/filter_menu.xml
index 7d52d6b6dc1..41e77131a68 100644
--- a/addons/web/static/src/search/filter_menu/filter_menu.xml
+++ b/addons/web/static/src/search/filter_menu/filter_menu.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.FilterMenu" owl="1">
-        <Dropdown class="o_filter_menu btn-group" togglerClass="'btn btn-light'">
+        <Dropdown class="'o_filter_menu btn-group ' + props.class" togglerClass="'btn btn-light'">
             <t t-set-slot="toggler">
                 <i class="oi-small mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Filters</span>
@@ -22,10 +22,9 @@
                             <t t-if="subGroup !== null and subGroup !== option.groupNumber">
                                 <div class="dropdown-divider" role="separator"/>
                             </t>
-                            <DropdownItem class="o_item_option"
-                                t-att-class="{ selected: option.isActive }"
-                                parentClosingMode="'none'"
+                            <DropdownItem class="{ o_item_option: true, selected: option.isActive }"
                                 t-esc="option.description"
+                                parentClosingMode="'none'"
                                 onSelected="() => this.onFilterSelected({ itemId: item.id, optionId: option.id })"
                             />
                             <t t-set="subGroup" t-value="option.groupNumber"/>
@@ -33,8 +32,7 @@
                     </Dropdown>
                 </t>
                 <t t-else="">
-                    <DropdownItem class="o_menu_item"
-                        t-att-class="{ selected: item.isActive }"
+                    <DropdownItem class="{ o_menu_item: true, selected: item.isActive }"
                         parentClosingMode="'none'"
                         t-esc="item.description"
                         onSelected="() => this.onFilterSelected({ itemId: item.id })"
diff --git a/addons/web/static/src/search/group_by_menu/custom_group_by_item.js b/addons/web/static/src/search/group_by_menu/custom_group_by_item.js
index 499e4c4fd7e..c97c57ae025 100644
--- a/addons/web/static/src/search/group_by_menu/custom_group_by_item.js
+++ b/addons/web/static/src/search/group_by_menu/custom_group_by_item.js
@@ -1,5 +1,7 @@
 /** @odoo-module **/
 
+import { Dropdown } from "@web/core/dropdown/dropdown";
+
 const { Component, useState } = owl;
 
 export class CustomGroupByItem extends Component {
@@ -9,10 +11,7 @@ export class CustomGroupByItem extends Component {
             this.state.fieldName = this.props.fields[0].name;
         }
     }
-
-    onApply() {
-        this.trigger("add-custom-group", { fieldName: this.state.fieldName });
-    }
 }
 
 CustomGroupByItem.template = "web.CustomGroupByItem";
+CustomGroupByItem.components = { Dropdown };
diff --git a/addons/web/static/src/search/group_by_menu/custom_group_by_item.xml b/addons/web/static/src/search/group_by_menu/custom_group_by_item.xml
index ec8602df122..f2a202bf589 100644
--- a/addons/web/static/src/search/group_by_menu/custom_group_by_item.xml
+++ b/addons/web/static/src/search/group_by_menu/custom_group_by_item.xml
@@ -1,7 +1,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.CustomGroupByItem" owl="1">
-        <Dropdown class="o_add_custom_group_menu">
+        <Dropdown class="'o_add_custom_group_menu'">
             <t t-set-slot="toggler">
                 Add Custom Group
             </t>
@@ -14,7 +14,9 @@
                 </select>
             </div>
             <div class="px-3 py-2">
-                <button class="btn btn-primary w-100" t-on-click="onApply">
+                <button class="btn btn-primary w-100"
+                    t-on-click="() => props.onAddCustomGroup(state.fieldName)"
+                    >
                     Apply
                 </button>
             </div>
diff --git a/addons/web/static/src/search/group_by_menu/group_by_menu.js b/addons/web/static/src/search/group_by_menu/group_by_menu.js
index 7f1656b9990..a99b034cdf2 100644
--- a/addons/web/static/src/search/group_by_menu/group_by_menu.js
+++ b/addons/web/static/src/search/group_by_menu/group_by_menu.js
@@ -1,8 +1,9 @@
 /** @odoo-module **/
 
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { CustomGroupByItem } from "./custom_group_by_item";
 import { FACET_ICONS, GROUPABLE_TYPES } from "../utils/misc";
-import { Dropdown } from "@web/core/dropdown/dropdown";
 import { sortBy } from "@web/core/utils/arrays";
 import { useBus } from "@web/core/utils/hooks";
 
@@ -58,15 +59,14 @@ export class GroupByMenu extends Component {
     }
 
     /**
-     * @param {CustomEvent} ev
+     * @param {string} fieldName
      */
-    onAddCustomGroup(ev) {
-        const { fieldName } = ev.detail;
+    onAddCustomGroup(fieldName) {
         this.env.searchModel.createNewGroupBy(fieldName);
     }
 }
 
-GroupByMenu.components = { CustomGroupByItem };
+GroupByMenu.components = { CustomGroupByItem, Dropdown, DropdownItem };
 GroupByMenu.template = "web.GroupByMenu";
 GroupByMenu.defaultProps = {
     showActiveItems: true,
diff --git a/addons/web/static/src/search/group_by_menu/group_by_menu.xml b/addons/web/static/src/search/group_by_menu/group_by_menu.xml
index 4ca9a351246..d2e70be41ff 100644
--- a/addons/web/static/src/search/group_by_menu/group_by_menu.xml
+++ b/addons/web/static/src/search/group_by_menu/group_by_menu.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.GroupByMenu" owl="1">
-        <Dropdown class="o_group_by_menu btn-group"
+        <Dropdown class="'o_group_by_menu btn-group'"
             togglerClass="'btn btn-light'"
             t-props="dropdownProps"
         >
@@ -25,8 +25,7 @@
                             <t t-if="subGroup !== null and subGroup !== option.groupNumber">
                                 <div class="dropdown-divider" role="separator"/>
                             </t>
-                            <DropdownItem class="o_item_option"
-                                t-att-class="{ selected: option.isActive }"
+                            <DropdownItem class="{ o_item_option: true, selected: option.isActive }"
                                 parentClosingMode="'none'"
                                 t-esc="option.description"
                                 onSelected="() => this.onGroupBySelected({ itemId: item.id, optionId: option.id})"
@@ -36,8 +35,7 @@
                     </Dropdown>
                 </t>
                 <t t-else="">
-                    <DropdownItem class="o_menu_item"
-                        t-att-class="{ selected: item.isActive }"
+                    <DropdownItem class="{ o_menu_item: true, selected: item.isActive }"
                         parentClosingMode="'none'"
                         t-esc="item.description"
                         onSelected="() => this.onGroupBySelected({ itemId: item.id })"
@@ -47,7 +45,7 @@
             </t>
             <t t-if="fields.length">
                 <div t-if="items.length" role="separator" class="dropdown-divider"/>
-                <CustomGroupByItem fields="fields" t-on-add-custom-group="onAddCustomGroup"/>
+                <CustomGroupByItem fields="fields" onAddCustomGroup.bind="onAddCustomGroup"/>
             </t>
         </Dropdown>
     </t>
diff --git a/addons/web/static/src/search/pager_hook.js b/addons/web/static/src/search/pager_hook.js
index 45beda3f9d2..8756d5aa2af 100644
--- a/addons/web/static/src/search/pager_hook.js
+++ b/addons/web/static/src/search/pager_hook.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-const { useEnv, useSubEnv } = owl;
+const { useEnv, useChildSubEnv } = owl;
 
 /**
  * @typedef PagerUpdateParams
@@ -24,7 +24,7 @@ const { useEnv, useSubEnv } = owl;
 export function usePager(getProps) {
     const env = useEnv();
 
-    useSubEnv({
+    useChildSubEnv({
         config: {
             ...env.config,
             getPagerProps: getProps,
diff --git a/addons/web/static/src/search/search_bar/search_bar.js b/addons/web/static/src/search/search_bar/search_bar.js
index 43fed62a4ec..a0af07ca743 100644
--- a/addons/web/static/src/search/search_bar/search_bar.js
+++ b/addons/web/static/src/search/search_bar/search_bar.js
@@ -27,14 +27,14 @@ export class SearchBar extends Component {
         });
 
         // derived state
-        this.items = [];
+        this.items = useState([]);
         this.subItems = {};
 
         this.orm = useService("orm");
 
         this.keepLast = new KeepLast();
 
-        this.focusOnUpdate = useAutofocus();
+        this.focusOnUpdate = useAutofocus("search-input");
 
         this.inputRef = useRef("search-input");
 
@@ -92,8 +92,7 @@ export class SearchBar extends Component {
 
         const trimmedQuery = this.state.query.trim();
 
-        this.items = [];
-
+        this.items.length = 0;
         if (!trimmedQuery) {
             return;
         }
diff --git a/addons/web/static/src/search/search_bar/search_bar.xml b/addons/web/static/src/search/search_bar/search_bar.xml
index b65f4a299da..173059506df 100644
--- a/addons/web/static/src/search/search_bar/search_bar.xml
+++ b/addons/web/static/src/search/search_bar/search_bar.xml
@@ -7,7 +7,7 @@
                 role="img"
                 aria-label="search"
                 tabindex="0"
-                t-on-keydown="onFacetKeydown(facet, facet_index)"
+                t-on-keydown="ev => this.onFacetKeydown(facet, facet_index, ev)"
                 >
                 <t t-if="facet.icon">
                     <span t-attf-class="o_searchview_facet_label {{ facet.icon }}"/>
@@ -27,7 +27,7 @@
                     role="img"
                     aria-label="Remove"
                     title="Remove"
-                    t-on-click="onFacetRemove(facet)"
+                    t-on-click="() => this.onFacetRemove(facet)"
                 />
             </div>
         </t>
@@ -36,7 +36,6 @@
     <t t-name="web.SearchBar.Input" owl="1">
         <input type="text"
             class="o_searchview_input"
-            autofocus=""
             accesskey="Q"
             placeholder="Search..."
             role="searchbox"
@@ -52,13 +51,13 @@
                 <li class="o_menu_item"
                     t-att-class="{ o_indent: item.isChild, o_selection_focus: item_index === state.focusedIndex}"
                     t-att-id="item.id"
-                    t-on-click="selectItem(item)"
-                    t-on-mousemove="onItemMousemove(item_index)"
+                    t-on-click="() => this.selectItem(item)"
+                    t-on-mousemove="() => this.onItemMousemove(item_index)"
                     >
                     <t t-if="item.isParent">
                         <a class="o_expand"
                             href="#"
-                            t-on-click.stop.prevent="toggleItem(item, !item.isExpanded)"
+                            t-on-click.stop.prevent="() => this.toggleItem(item, !item.isExpanded)"
                             >
                             <i t-attf-class="fa fa-caret-{{ item.isExpanded ? 'down' : 'right' }}"/>
                         </a>
diff --git a/addons/web/static/src/search/search_panel/search_panel.js b/addons/web/static/src/search/search_panel/search_panel.js
index d681495cb43..9b43d9a2015 100644
--- a/addons/web/static/src/search/search_panel/search_panel.js
+++ b/addons/web/static/src/search/search_panel/search_panel.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-const { Component, useState } = owl;
+const { Component, onMounted, onWillStart, onWillUpdateProps, useState } = owl;
 
 /**
  * Search panel
@@ -21,24 +21,24 @@ export class SearchPanel extends Component {
         this.hasImportedState = false;
 
         this.importState(this.props.importedState);
-    }
 
-    async willStart() {
-        await this.env.searchModel.sectionsPromise;
-        this.expandDefaultValue();
-        this.updateActiveValues();
-    }
+        onWillStart(async () => {
+            await this.env.searchModel.sectionsPromise;
+            this.expandDefaultValue();
+            this.updateActiveValues();
+        });
 
-    mounted() {
-        this.updateGroupHeadersChecked();
-        if (this.hasImportedState) {
-            this.el.scroll({ top: this.scrollTop });
-        }
-    }
+        onMounted(() => {
+            this.updateGroupHeadersChecked();
+            if (this.hasImportedState) {
+                this.el.scroll({ top: this.scrollTop });
+            }
+        });
 
-    async willUpdateProps() {
-        await this.env.searchModel.sectionsPromise;
-        this.updateActiveValues();
+        onWillUpdateProps(async () => {
+            await this.env.searchModel.sectionsPromise;
+            this.updateActiveValues();
+        });
     }
 
     //---------------------------------------------------------------------
diff --git a/addons/web/static/src/search/search_panel/search_panel.xml b/addons/web/static/src/search/search_panel/search_panel.xml
index c9e6d827864..bc125c55706 100644
--- a/addons/web/static/src/search/search_panel/search_panel.xml
+++ b/addons/web/static/src/search/search_panel/search_panel.xml
@@ -34,7 +34,7 @@
                                 <input type="checkbox"
                                     class="custom-control-input"
                                     t-attf-id="{{ section.id }}_input_{{ groupId }})"
-                                    t-on-click="toggleFilterGroup(section.id, group)"
+                                    t-on-click="() => this.toggleFilterGroup(section.id, group)"
                                 />
                                 <label t-attf-for="{{ section.id }}_input_{{ groupId }})"
                                     class="o_search_panel_label custom-control-label"
@@ -79,7 +79,7 @@
         <li class="o_search_panel_category_value list-group-item border-0">
             <header class="list-group-item-action"
                 t-att-class="{ active: state.active[section.id] === valueId }"
-                t-on-click="toggleCategory(section, value)"
+                t-on-click="() => this.toggleCategory(section, value)"
                 >
                 <label class="o_search_panel_label mb0" t-att-class="{ o_with_counters: section.enableCounters }">
                     <div class="o_toggle_fold">
@@ -114,7 +114,7 @@
                 t-attf-id="{{ section.id }}_input_{{ valueId }}"
                 t-att-checked="state.active[section.id][valueId]"
                 class="custom-control-input"
-                t-on-click="toggleFilterValue(section.id, valueId)"
+                t-on-click="ev => this.toggleFilterValue(section.id, valueId, ev)"
             />
             <label class="o_search_panel_label custom-control-label"
                 t-attf-for="{{ section.id }}_input_{{ valueId }}"
diff --git a/addons/web/static/src/search/with_search/with_search.js b/addons/web/static/src/search/with_search/with_search.js
index 435a107d83c..66a275dcfa1 100644
--- a/addons/web/static/src/search/with_search/with_search.js
+++ b/addons/web/static/src/search/with_search/with_search.js
@@ -4,7 +4,7 @@ import { useBus, useService } from "@web/core/utils/hooks";
 import { SearchModel } from "@web/search/search_model";
 import { CallbackRecorder, useSetupAction } from "@web/webclient/actions/action_hook";
 
-const { Component, useSubEnv } = owl;
+const { Component, onWillStart, onWillUpdateProps, useSubEnv, useChildSubEnv } = owl;
 
 export const SEARCH_KEYS = ["comparison", "context", "domain", "groupBy", "orderBy"];
 const OTHER_SEARCH_KEYS = ["irFilters", "searchViewArch", "searchViewFields", "searchViewId"];
@@ -18,39 +18,41 @@ export class WithSearch extends Component {
         }
 
         const SearchModelClass = this.Component.SearchModel || SearchModel;
-        this.env.searchModel = new SearchModelClass(this.env, {
+        this.searchModel = new SearchModelClass(this.env, {
             user: useService("user"),
             orm: useService("orm"),
             view: useService("view"),
         });
 
-        useBus(this.env.searchModel, "update", this.render);
+        useSubEnv({ searchModel: this.searchModel });
+
+        useBus(this.searchModel, "update", this.render);
         useSetupAction({
             getGlobalState: () => {
                 return {
-                    searchModel: JSON.stringify(this.env.searchModel.exportState()),
+                    searchModel: JSON.stringify(this.searchModel.exportState()),
                 };
             },
         });
-    }
 
-    async willStart() {
-        const config = { ...this.props };
-        if (config.globalState && config.globalState.searchModel) {
-            config.state = JSON.parse(config.globalState.searchModel);
-            delete config.globalState;
-        }
-        await this.env.searchModel.load(config);
-    }
-
-    async willUpdateProps(nextProps) {
-        const config = {};
-        for (const key of SEARCH_KEYS) {
-            if (nextProps[key] !== undefined) {
-                config[key] = nextProps[key];
+        onWillStart(async () => {
+            const config = { ...this.props };
+            if (config.globalState && config.globalState.searchModel) {
+                config.state = JSON.parse(config.globalState.searchModel);
+                delete config.globalState;
             }
-        }
-        await this.env.searchModel.reload(config);
+            await this.searchModel.load(config);
+        });
+
+        onWillUpdateProps(async (nextProps) => {
+            const config = {};
+            for (const key of SEARCH_KEYS) {
+                if (nextProps[key] !== undefined) {
+                    config[key] = nextProps[key];
+                }
+            }
+            await this.searchModel.reload(config);
+        });
     }
 
     //-------------------------------------------------------------------------
@@ -60,11 +62,11 @@ export class WithSearch extends Component {
     get componentProps() {
         const componentProps = { ...this.props.componentProps };
         for (const key of SEARCH_KEYS) {
-            componentProps[key] = this.env.searchModel[key];
+            componentProps[key] = this.searchModel[key];
         }
         componentProps.info = componentProps.info || {};
         for (const key of OTHER_SEARCH_KEYS) {
-            componentProps.info[key] = this.env.searchModel[key];
+            componentProps.info[key] = this.searchModel[key];
         }
         return componentProps;
     }
@@ -103,5 +105,7 @@ WithSearch.props = {
     activateFavorite: { type: Boolean, optional: true },
     dynamicFilters: { type: Array, element: Object, optional: true },
     searchMenuTypes: { type: Array, element: String, optional: true },
+
+    class: { type: String, optional: true },
 };
 WithSearch.template = "web.WithSearch";
diff --git a/addons/web/static/src/start.js b/addons/web/static/src/start.js
index 4f02dda784d..60ac93f30d3 100644
--- a/addons/web/static/src/start.js
+++ b/addons/web/static/src/start.js
@@ -4,9 +4,11 @@ import { makeEnv, startServices } from "./env";
 import { legacySetupProm } from "./legacy/legacy_setup";
 import { mapLegacyEnvToWowlEnv } from "./legacy/utils";
 import { processTemplates } from "./core/assets";
+import { localization } from "@web/core/l10n/localization";
 import { session } from "@web/session";
+import { renderToString } from "./core/utils/render";
 
-const { Component, mount, whenReady } = owl;
+const { App, whenReady } = owl;
 
 /**
  * Function to start a webclient.
@@ -31,13 +33,28 @@ export async function startWebClient(Webclient) {
         startServices(env),
         odoo.loadTemplatesPromise.then(processTemplates),
     ]);
-    env.qweb.addTemplates(templates);
 
     // start web client
     await whenReady();
+    window.__OWL_TEMPLATES__ = templates;
     const legacyEnv = await legacySetupProm;
     mapLegacyEnvToWowlEnv(legacyEnv, env);
-    const root = await mount(Webclient, { env, target: document.body, position: "self" });
+    const app = new App(Webclient, {
+        env,
+        dev: env.debug,
+        templates: window.__OWL_TEMPLATES__,
+        translatableAttributes: ["data-tooltip"],
+        translateFn: env._t,
+    });
+    renderToString.app = app;
+    const root = await app.mount(document.body);
+    const classList = document.body.classList;
+    if (localization.direction === "rtl") {
+        classList.add("o_rtl");
+    }
+    if (env.services.user.userId === 1) {
+        classList.add("o_is_superuser");
+    }
     // delete odoo.debug; // FIXME: some legacy code rely on this
     odoo.__WOWL_DEBUG__ = { root };
     odoo.isReady = true;
diff --git a/addons/web/static/src/views/debug_items.js b/addons/web/static/src/views/debug_items.js
index 976cb8f4984..79d55573011 100644
--- a/addons/web/static/src/views/debug_items.js
+++ b/addons/web/static/src/views/debug_items.js
@@ -10,10 +10,10 @@ const { xml } = owl;
 const debugRegistry = registry.category("debug");
 
 class FieldViewGetDialog extends Dialog {}
-FieldViewGetDialog.props = Object.assign({}, Dialog.props, {
+FieldViewGetDialog.props = {
+    ...Dialog.props,
     arch: { type: String },
-    close: Function,
-});
+};
 FieldViewGetDialog.bodyTemplate = xml`<pre t-esc="props.arch"/>`;
 FieldViewGetDialog.title = _lt("Fields View Get");
 
diff --git a/addons/web/static/src/views/graph/graph_renderer.js b/addons/web/static/src/views/graph/graph_renderer.js
index 8d288780f73..74aa2e89628 100644
--- a/addons/web/static/src/views/graph/graph_renderer.js
+++ b/addons/web/static/src/views/graph/graph_renderer.js
@@ -6,9 +6,9 @@ import { formatFloat } from "@web/fields/formatters";
 import { SEP } from "./graph_model";
 import { sortBy } from "@web/core/utils/arrays";
 import { useAssets } from "@web/core/assets";
-import { useEffect } from "@web/core/utils/hooks";
+import { renderToString } from "@web/core/utils/render";
 
-const { Component, useRef } = owl;
+const { Component, onWillUnmount, useEffect, useRef } = owl;
 
 const NO_DATA = _lt("No data");
 
@@ -52,9 +52,10 @@ export class GraphRenderer extends Component {
         useAssets({ jsLibs: ["/web/static/lib/Chart/Chart.js"] });
 
         useEffect(() => this.renderChart());
+        onWillUnmount(this.onWillUnmount);
     }
 
-    willUnmount() {
+    onWillUnmount() {
         if (this.chart) {
             this.chart.destroy();
         }
@@ -107,7 +108,7 @@ export class GraphRenderer extends Component {
         }
         const chartAreaTop = this.chart.chartArea.top;
         const viewContentTop = this.el.getBoundingClientRect().top;
-        const innerHTML = this.env.qweb.renderToString("web.GraphRenderer.CustomTooltip", {
+        const innerHTML = renderToString("web.GraphRenderer.CustomTooltip", {
             maxWidth: getMaxWidth(this.chart.chartArea),
             measure: measures[measure].string,
             mode: this.model.metaData.mode,
@@ -451,10 +452,10 @@ export class GraphRenderer extends Component {
         const sortedDataPoints = sortBy(tooltipModel.dataPoints, "yLabel", "desc");
         const items = [];
         for (const item of sortedDataPoints) {
-            const id = item.index;
+            const index = item.index;
             const dataset = data.datasets[item.datasetIndex];
-            let label = dataset.trueLabels[id];
-            let value = this.formatValue(dataset.data[id], allIntegers);
+            let label = dataset.trueLabels[index];
+            let value = this.formatValue(dataset.data[index], allIntegers);
             let boxColor;
             let percentage;
             if (mode === "pie") {
@@ -464,7 +465,7 @@ export class GraphRenderer extends Component {
                 if (domains.length > 1) {
                     label = `${dataset.label} / ${label}`;
                 }
-                boxColor = dataset.backgroundColor[id];
+                boxColor = dataset.backgroundColor[index];
                 const totalData = dataset.data.reduce((a, b) => a + b, 0);
                 percentage = totalData && ((dataset.data[item.index] * 100) / totalData).toFixed(2);
             } else {
@@ -473,7 +474,7 @@ export class GraphRenderer extends Component {
                 }
                 boxColor = mode === "bar" ? dataset.backgroundColor : dataset.borderColor;
             }
-            items.push({ id, label, value, boxColor, percentage });
+            items.push({ label, value, boxColor, percentage });
         }
         return items;
     }
@@ -627,4 +628,4 @@ export class GraphRenderer extends Component {
 }
 
 GraphRenderer.template = "web.GraphRenderer";
-GraphRenderer.props = ["model", "onGraphClicked"];
+GraphRenderer.props = ["class?", "model", "onGraphClicked"];
diff --git a/addons/web/static/src/views/graph/graph_renderer.xml b/addons/web/static/src/views/graph/graph_renderer.xml
index c41b2377e82..01a7c8b61f7 100644
--- a/addons/web/static/src/views/graph/graph_renderer.xml
+++ b/addons/web/static/src/views/graph/graph_renderer.xml
@@ -10,7 +10,7 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr t-foreach="tooltipItems" t-as="tooltipItem" t-key="tooltipItem.id">
+                    <tr t-foreach="tooltipItems" t-as="tooltipItem" t-key="tooltipItem_index">
                         <td>
                             <span class="o_square" t-attf-style="background-color: {{ tooltipItem.boxColor }}" />
                             <span class="o_label" t-attf-style="max-width: {{ maxWidth }}" t-esc="tooltipItem.label" />
@@ -28,7 +28,7 @@
     </t>
 
     <t t-name="web.GraphRenderer" owl="1">
-        <div class="o_graph_renderer">
+        <div t-att-class="'o_graph_renderer o_renderer ' + props.class">
             <div class="o_graph_canvas_container" t-ref="container">
                 <canvas t-ref="canvas" />
             </div>
diff --git a/addons/web/static/src/views/graph/graph_view.js b/addons/web/static/src/views/graph/graph_view.js
index 53303402e24..51d6b47c6e6 100644
--- a/addons/web/static/src/views/graph/graph_view.js
+++ b/addons/web/static/src/views/graph/graph_view.js
@@ -1,5 +1,7 @@
 /** @odoo-module **/
 
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { _lt } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
@@ -135,7 +137,7 @@ export class GraphView extends Component {
 GraphView.template = "web.GraphView";
 GraphView.buttonTemplate = "web.GraphView.Buttons";
 
-GraphView.components = { GroupByMenu, Renderer: GraphRenderer, Layout };
+GraphView.components = { Dropdown, DropdownItem, GroupByMenu, Renderer: GraphRenderer, Layout };
 
 GraphView.defaultProps = {
     additionalMeasures: [],
diff --git a/addons/web/static/src/views/graph/graph_view.xml b/addons/web/static/src/views/graph/graph_view.xml
index 8c9b9e735a2..04ec625a420 100644
--- a/addons/web/static/src/views/graph/graph_view.xml
+++ b/addons/web/static/src/views/graph/graph_view.xml
@@ -15,15 +15,15 @@
         </t>
         <div class="btn-group" role="toolbar" aria-label="Change graph">
             <button class="btn btn-secondary oi oi-chart--column o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
-                t-on-click="onModeSelected('bar')"
+                t-on-click="() => this.onModeSelected('bar')"
                 t-att-class="{ active: model.metaData.mode === 'bar' }"
             />
             <button class="btn btn-secondary oi oi-chart--area--filled o_graph_button" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
-                t-on-click="onModeSelected('line')"
+                t-on-click="() => this.onModeSelected('line')"
                 t-att-class="{ active: model.metaData.mode === 'line' }"
             />
             <button class="btn btn-secondary oi oi-chart--pie o_graph_button" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
-                t-on-click="onModeSelected('pie')"
+                t-on-click="() => this.onModeSelected('pie')"
                 t-att-class="{ active: model.metaData.mode === 'pie' }"
             />
         </div>
@@ -35,18 +35,18 @@
         </div>
         <div t-if="model.metaData.mode !== 'pie' and model.metaData.domains.length === 1" class="btn-group" role="toolbar" aria-label="Sort graph">
             <button class="btn btn-secondary oi oi-sort--descending o_graph_button" data-tooltip="Descending" aria-label="Descending"
-                t-on-click="toggleOrder('DESC')"
+                t-on-click="() => this.toggleOrder('DESC')"
                 t-att-class="{ active: model.metaData.order === 'DESC' }"
             />
             <button class="btn btn-secondary oi oi-sort--ascending o_graph_button" data-tooltip="Ascending" aria-label="Ascending"
-                t-on-click="toggleOrder('ASC')"
+                t-on-click="() => this.toggleOrder('ASC')"
                 t-att-class="{ active: model.metaData.order === 'ASC' }"
             />
         </div>
     </t>
 
     <t t-name="web.GraphView" owl="1">
-        <Layout viewType="'graph'" useSampleModel="model.useSampleModel">
+        <Layout viewType="'graph'" useSampleModel="model.useSampleModel" className="props.className">
             <t t-set-slot="control-panel-bottom-left">
                 <t t-call="{{ constructor.buttonTemplate }}"/>
             </t>
@@ -55,11 +55,10 @@
                     <t t-set="noContentHelp" t-value="props.info.noContentHelp"/>
                 </t>
                 <Renderer
-                    class="o_renderer"
+                    class="model.useSampleModel ? 'o_sample_data_disabled' : ''"
                     model="model"
-                    t-att-class="{ o_sample_data_disabled: model.useSampleModel }"
                     onGraphClicked="(domain) => this.onGraphClicked(domain)"
-                />
+                    />
             </t>
             <t t-else="" t-call="web.NoContentHelper">
                 <t t-set="title">Invalid data</t>
diff --git a/addons/web/static/src/views/helpers/no_content_helpers.xml b/addons/web/static/src/views/helpers/no_content_helpers.xml
index 4bb96ce8e46..25027550a7c 100644
--- a/addons/web/static/src/views/helpers/no_content_helpers.xml
+++ b/addons/web/static/src/views/helpers/no_content_helpers.xml
@@ -4,7 +4,7 @@
     <t t-name="web.ActionHelper" owl="1">
         <div class="o_view_nocontent">
             <div class="o_nocontent_help">
-                <t t-raw="noContentHelp"/>
+                <t t-out="noContentHelp"/>
             </div>
         </div>
     </t>
diff --git a/addons/web/static/src/views/helpers/standard_view_props.js b/addons/web/static/src/views/helpers/standard_view_props.js
index 7017a572b33..a6cf7f1944d 100644
--- a/addons/web/static/src/views/helpers/standard_view_props.js
+++ b/addons/web/static/src/views/helpers/standard_view_props.js
@@ -19,6 +19,7 @@ export const standardViewProps = {
     },
     resModel: String,
     arch: { type: String },
+    className: { type: String, optional: 1 },
     comparison: { validate: () => true }, // fix problem with validation with type: [Object, null]
     // Issue OWL: https://github.com/odoo/owl/issues/910
     context: { type: Object },
diff --git a/addons/web/static/src/views/layout.js b/addons/web/static/src/views/layout.js
index 664ded5da2f..a9e6f62d5ab 100644
--- a/addons/web/static/src/views/layout.js
+++ b/addons/web/static/src/views/layout.js
@@ -23,10 +23,28 @@ export class Layout extends Component {
         this.components = extractLayoutComponents(this.env.config);
         this.display = display;
     }
+    get className() {
+        const classes = this.props.className.split(" ");
+        if (this.props.useSampleModel) {
+            classes.push("o_view_sample_data");
+        }
+        if (this.props.viewType) {
+            classes.push(`o_${this.props.viewType}_view`);
+        }
+        return classes.join(" ");
+    }
+    get controlPanelSlots() {
+        const slots = { ...this.props.slots };
+        delete slots.default;
+        return slots;
+    }
 }
 
 Layout.template = "web.Layout";
+Layout.defaultProps = { className: "" };
 Layout.props = {
+    className: { type: String, optional: true },
+    slots: { type: Object, optional: true },
     viewType: { type: String, optional: true },
     useSampleModel: { type: Boolean, optional: true },
 };
diff --git a/addons/web/static/src/views/layout.xml b/addons/web/static/src/views/layout.xml
index c71cec37f5e..bf25dda0161 100644
--- a/addons/web/static/src/views/layout.xml
+++ b/addons/web/static/src/views/layout.xml
@@ -2,8 +2,8 @@
 <templates xml:space="preserve">
 
     <t t-name="web.Layout" owl="1">
-        <div t-att-class="{ o_view_sample_data: props.useSampleModel }" t-attf-class="{{ props.viewType ? `o_${props.viewType}_view` : '' }}">
-            <t t-component="components.ControlPanel" t-if="display.controlPanel">
+        <div t-att-class="className">
+            <t t-component="components.ControlPanel" slots="controlPanelSlots" t-if="display.controlPanel">
                 <!-- Empty body to assign slot id to control panel -->
             </t>
             <div class="o_content" t-att-class="{ o_component_with_search_panel: display.searchPanel }">
diff --git a/addons/web/static/src/views/onboarding_banner.js b/addons/web/static/src/views/onboarding_banner.js
index cd9768f1966..21604540990 100644
--- a/addons/web/static/src/views/onboarding_banner.js
+++ b/addons/web/static/src/views/onboarding_banner.js
@@ -4,7 +4,7 @@ import { loadAssets } from "@web/core/assets";
 import { useService } from "@web/core/utils/hooks";
 import { useActionLinks } from "@web/views/helpers/view_hook";
 
-const { Component, xml } = owl;
+const { Component, markup, onWillStart, xml } = owl;
 
 export class OnboardingBanner extends Component {
     setup() {
@@ -18,9 +18,11 @@ export class OnboardingBanner extends Component {
                 this.render();
             },
         });
+
+        onWillStart(this.onWillStart);
     }
 
-    async willStart() {
+    async onWillStart() {
         this.bannerHTML = await this.loadBanner(this.env.config.bannerRoute);
     }
 
@@ -46,9 +48,9 @@ export class OnboardingBanner extends Component {
                 elem.remove();
             });
         await loadAssets(assets);
-        return new XMLSerializer().serializeToString(banner);
+        return markup(new XMLSerializer().serializeToString(banner));
     }
 }
 
-OnboardingBanner.template = xml`<div class="w-100" t-raw="bannerHTML" />`;
+OnboardingBanner.template = xml`<div class="w-100" t-out="bannerHTML"/>`;
 OnboardingBanner.props = {};
diff --git a/addons/web/static/src/views/pivot/pivot_group_by_menu.js b/addons/web/static/src/views/pivot/pivot_group_by_menu.js
index 81049f55df6..e40ec0d0d34 100644
--- a/addons/web/static/src/views/pivot/pivot_group_by_menu.js
+++ b/addons/web/static/src/views/pivot/pivot_group_by_menu.js
@@ -34,13 +34,10 @@ export class PivotGroupByMenu extends GroupByMenu {
     }
     /**
      * @override
-     * @param {CustomEvent} ev
+     * @param {string} fieldName
      */
-    onAddCustomGroup(ev) {
-        this.trigger("add-custom-group-by", {
-            fieldName: ev.detail.fieldName,
-            groupId: this.props.cell.groupId,
-        });
+    onAddCustomGroup(fieldName) {
+        this.props.onAddCustomGroupBy(fieldName);
     }
     /**
      * @override
diff --git a/addons/web/static/src/views/pivot/pivot_renderer.js b/addons/web/static/src/views/pivot/pivot_renderer.js
index a4ea3cb7850..afa9107931c 100644
--- a/addons/web/static/src/views/pivot/pivot_renderer.js
+++ b/addons/web/static/src/views/pivot/pivot_renderer.js
@@ -1,11 +1,12 @@
 /** @odoo-module **/
 
-import { PivotGroupByMenu } from "@web/views/pivot/pivot_group_by_menu";
+import { CheckBox } from "@web/core/checkbox/checkbox";
 import { localization } from "@web/core/l10n/localization";
 import { registry } from "@web/core/registry";
+import { PivotGroupByMenu } from "@web/views/pivot/pivot_group_by_menu";
 import fieldUtils from "web.field_utils";
 
-const { Component } = owl;
+const { Component, onWillUpdateProps } = owl;
 const formatterRegistry = registry.category("formatters");
 
 export class PivotRenderer extends Component {
@@ -13,8 +14,10 @@ export class PivotRenderer extends Component {
         this.model = this.props.model;
         this.table = this.model.getTable();
         this.l10n = localization;
+
+        onWillUpdateProps(this.onWillUpdateProps);
     }
-    willUpdateProps() {
+    onWillUpdateProps() {
         this.table = this.model.getTable();
     }
     /**
@@ -74,10 +77,11 @@ export class PivotRenderer extends Component {
      * Handle the adding of a custom groupby (inside the view, not the searchview).
      *
      * @param {"col"|"row"} type
-     * @param {CustomEvent} ev
+     * @param {Array[]} groupId
+     * @param {string} fieldName
      */
-    onAddCustomGroupBy(type, ev) {
-        this.model.addGroupBy({ ...ev.detail, custom: true, type });
+    onAddCustomGroupBy(type, groupId, fieldName) {
+        this.model.addGroupBy({ groupId, fieldName, custom: true, type });
     }
 
     /**
@@ -145,5 +149,5 @@ export class PivotRenderer extends Component {
     }
 }
 PivotRenderer.template = "web.PivotRenderer";
-PivotRenderer.components = { PivotGroupByMenu };
+PivotRenderer.components = { CheckBox, PivotGroupByMenu };
 PivotRenderer.props = ["model", "onCellClicked"];
diff --git a/addons/web/static/src/views/pivot/pivot_renderer.xml b/addons/web/static/src/views/pivot/pivot_renderer.xml
index 9f1e033fa0f..052a17c8602 100644
--- a/addons/web/static/src/views/pivot/pivot_renderer.xml
+++ b/addons/web/static/src/views/pivot/pivot_renderer.xml
@@ -25,7 +25,7 @@
                             <td class="o_pivot_cell_value text-right" t-att-class="{
                                     o_empty: cell.value === undefined,
                                     'font-weight-bold': cell.isBold,
-                                }" t-on-click="onCellClicked(cell)"
+                                }" t-on-click="() => this.onCellClicked(cell)"
                                    t-on-mouseover="onMouseEnter" t-on-mouseout="onMouseLeave">
                                 <t t-if="cell.value !== undefined">
                                     <div t-if="cell.originIndexes.length > 1" class="o_variation" t-att-class="{
@@ -63,7 +63,7 @@
             }}"
             t-att-data-tooltip="cell.label"
             t-attf-data-tooltip-position="{{ l10n.direction === 'ltr' ? 'right' : 'left' }}"
-            t-on-click.prevent="onHeaderClick(cell, isXAxis ? 'col' : 'row')"
+            t-on-click.prevent="() => this.onHeaderClick(cell, isXAxis ? 'col' : 'row')"
         >
             <t t-if="cell.isLeaf and !cell.isFolded">
                 <PivotGroupByMenu
@@ -72,9 +72,8 @@
                     cell="cell"
                     customGroupBys="model.metaData.customGroupBys"
                     showActiveItems="false"
-                    t-on-click.stop=""
-                    onItemSelected="payload => this.onGroupBySelected(isXAxis ? 'col' : 'row', payload)"
-                    t-on-add-custom-group-by="onAddCustomGroupBy(isXAxis ? 'col' : 'row')"
+                    onItemSelected="(payload) => this.onGroupBySelected(isXAxis ? 'col' : 'row', payload)"
+                    onAddCustomGroupBy="fieldName => this.onAddCustomGroupBy(isXAxis ? 'col' : 'row', cell.groupId, fieldName)"
                 />
             </t>
             <span t-esc="cell.title"/>
@@ -87,7 +86,7 @@
                 o_pivot_measure_row: !cell.originIndexes,
                 o_pivot_sort_order_asc: cell.order === 'asc',
                 o_pivot_sort_order_desc: cell.order === 'desc',
-            }" t-on-click.prevent="onMeasureClick(cell)" t-on-mouseover="onMouseEnter" t-on-mouseout="onMouseLeave">
+            }" t-on-click.prevent="() => this.onMeasureClick(cell)" t-on-mouseover="onMouseEnter" t-on-mouseout="onMouseLeave">
             <t t-esc="cell.title"/>
         </th>
     </t>
diff --git a/addons/web/static/src/views/pivot/pivot_view.js b/addons/web/static/src/views/pivot/pivot_view.js
index b44759fd14f..adce6380390 100644
--- a/addons/web/static/src/views/pivot/pivot_view.js
+++ b/addons/web/static/src/views/pivot/pivot_view.js
@@ -1,5 +1,7 @@
 /** @odoo-module **/
 
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { _lt } from "@web/core/l10n/translation";
 import { download } from "@web/core/network/download";
 import { registry } from "@web/core/registry";
@@ -157,7 +159,7 @@ export class PivotView extends Component {
 
 PivotView.template = "web.PivotView";
 PivotView.buttonTemplate = "web.PivotView.Buttons";
-PivotView.components = { Renderer: PivotRenderer, Layout };
+PivotView.components = { Dropdown, DropdownItem, Renderer: PivotRenderer, Layout };
 
 PivotView.props = {
     ...standardViewProps,
diff --git a/addons/web/static/src/views/pivot/pivot_view.xml b/addons/web/static/src/views/pivot/pivot_view.xml
index 42b82a123cb..4fe993bf5b4 100644
--- a/addons/web/static/src/views/pivot/pivot_view.xml
+++ b/addons/web/static/src/views/pivot/pivot_view.xml
@@ -17,7 +17,7 @@
     </t>
 
     <t t-name="web.PivotView" owl="1">
-        <Layout viewType="'pivot'" useSampleModel="model.useSampleModel">
+        <Layout viewType="'pivot'" useSampleModel="model.useSampleModel" className="props.className">
             <t t-set-slot="control-panel-bottom-left">
                 <t t-call="{{ constructor.buttonTemplate }}"/>
             </t>
diff --git a/addons/web/static/src/views/view.js b/addons/web/static/src/views/view.js
index 5f411d49b45..782a3b735f0 100644
--- a/addons/web/static/src/views/view.js
+++ b/addons/web/static/src/views/view.js
@@ -9,7 +9,7 @@ import { WithSearch } from "@web/search/with_search/with_search";
 import { useActionLinks } from "@web/views/helpers/view_hook";
 import { extractLayoutComponents } from "@web/views/layout";
 
-const { Component, useSubEnv } = owl;
+const { Component, onWillUpdateProps, onWillStart, useSubEnv } = owl;
 const viewRegistry = registry.category("views");
 
 /** @typedef {Object} Config
@@ -151,10 +151,14 @@ export class View extends Component {
                 ...this.env.config,
             },
         });
+
         useActionLinks({ resModel });
+
+        onWillStart(this.onWillStart);
+        onWillUpdateProps(this.onWillUpdateProps);
     }
 
-    async willStart() {
+    async onWillStart() {
         // determine view type
         let ViewClass = viewRegistry.get(this.props.type);
         const type = ViewClass.type;
@@ -250,6 +254,7 @@ export class View extends Component {
         const viewProps = {
             info: { actionMenus, mode: this.props.display.mode },
             arch,
+            className: "o_action o_view_controller",
             fields,
             resModel,
             useSampleModel: false,
@@ -271,12 +276,8 @@ export class View extends Component {
         }
 
         let { noContentHelp } = this.props;
-        if (noContentHelp !== undefined) {
-            const htmlHelp = document.createElement("div");
-            htmlHelp.innerHTML = noContentHelp;
-            if (htmlHelp.innerText.trim()) {
-                viewProps.info.noContentHelp = noContentHelp;
-            }
+        if (noContentHelp) {
+            viewProps.info.noContentHelp = noContentHelp;
         }
 
         // prepare the WithSearch component props
@@ -311,7 +312,7 @@ export class View extends Component {
         }
     }
 
-    async willUpdateProps(nextProps) {
+    async onWillUpdateProps(nextProps) {
         // we assume that nextProps can only vary in the search keys:
         // comparison, context, domain, groupBy, orderBy
         const { comparison, context, domain, groupBy, orderBy } = nextProps;
diff --git a/addons/web/static/src/views/view.xml b/addons/web/static/src/views/view.xml
index 47d764f9f13..05f163ce586 100644
--- a/addons/web/static/src/views/view.xml
+++ b/addons/web/static/src/views/view.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
   <t t-name="web.View" owl="1">
-    <WithSearch t-props="withSearchProps" class="o_action o_view_controller"/>
+    <WithSearch t-props="withSearchProps"/>
   </t>
 
   <t t-name="web.ReportViewMeasures" owl="1">
@@ -14,13 +14,11 @@
                t-as="measure"
                t-key="measure_value.name">
                 <div t-if="!measure_first and measure == '__count'" role="separator" class="dropdown-divider"/>
-                <DropdownItem class="o_menu_item dropdown-item"
-                    t-att-class="{ selected: activeMeasures.includes(measure) }"
-                    parentClosingMode="'none'"
-                    onSelected="() => this.onMeasureSelected({ measure: measure_value.name })"
-                    >
-                    <t t-esc="measures[measure].string"/>
-                </DropdownItem>
+                <DropdownItem class="{ o_menu_item: true, selected: activeMeasures.includes(measure) }"
+                  parentClosingMode="'none'"
+                  t-esc="measures[measure].string"
+                  onSelected="() => this.onMeasureSelected({ measure: measure_value.name })"
+                />
             </t>
         </Dropdown>
   </t>
diff --git a/addons/web/static/src/views/view_service.js b/addons/web/static/src/views/view_service.js
index 84feb891d7e..474f645f38a 100644
--- a/addons/web/static/src/views/view_service.js
+++ b/addons/web/static/src/views/view_service.js
@@ -47,7 +47,7 @@ export const viewService = {
     start(env, { orm }) {
         let cache = {};
 
-        env.bus.on("CLEAR-CACHES", null, () => {
+        env.bus.addEventListener("CLEAR-CACHES", () => {
             cache = {};
             const processedArchs = registry.category("__processed_archs__");
             processedArchs.content = {};
diff --git a/addons/web/static/src/webclient/actions/action_container.js b/addons/web/static/src/webclient/actions/action_container.js
index 2700904f6d3..41746dc54ee 100644
--- a/addons/web/static/src/webclient/actions/action_container.js
+++ b/addons/web/static/src/webclient/actions/action_container.js
@@ -2,7 +2,7 @@
 
 import { ActionDialog } from "./action_dialog";
 
-const { Component, xml } = owl;
+const { Component, xml, onWillDestroy } = owl;
 
 // -----------------------------------------------------------------------------
 // ActionContainer (Component)
@@ -10,16 +10,15 @@ const { Component, xml } = owl;
 export class ActionContainer extends Component {
     setup() {
         this.info = {};
-        this.env.bus.on("ACTION_MANAGER:UPDATE", this, (info) => {
+        this.onActionManagerUpdate = ({ detail: info }) => {
             this.info = info;
             this.render();
+        };
+        this.env.bus.addEventListener("ACTION_MANAGER:UPDATE", this.onActionManagerUpdate);
+        onWillDestroy(() => {
+            this.env.bus.removeEventListener("ACTION_MANAGER:UPDATE", this.onActionManagerUpdate);
         });
     }
-
-    __destroy() {
-        this.env.bus.off("ACTION_MANAGER:UPDATE", this);
-        super.__destroy();
-    }
 }
 ActionContainer.components = { ActionDialog };
 ActionContainer.template = xml`
diff --git a/addons/web/static/src/webclient/actions/action_dialog.js b/addons/web/static/src/webclient/actions/action_dialog.js
index 591d71d1808..7e5578876bd 100644
--- a/addons/web/static/src/webclient/actions/action_dialog.js
+++ b/addons/web/static/src/webclient/actions/action_dialog.js
@@ -3,9 +3,9 @@
 import { Dialog } from "@web/core/dialog/dialog";
 import { DebugMenu } from "@web/core/debug/debug_menu";
 import { useOwnDebugContext } from "@web/core/debug/debug_context";
-import { useEffect } from "@web/core/utils/hooks";
+import { useLegacyRefs } from "@web/legacy/utils";
 
-const { useSubEnv } = owl;
+const { useEffect } = owl;
 
 const LEGACY_SIZE_CLASSES = {
     "extra-large": "modal-xl",
@@ -30,10 +30,10 @@ ActionDialog.components = { ...Dialog.components, DebugMenu };
 ActionDialog.template = "web.ActionDialog";
 ActionDialog.bodyTemplate = "web.ActionDialogBody";
 ActionDialog.props = {
+    ...Dialog.props,
     ActionComponent: { optional: true },
     actionProps: { optional: true },
     title: { optional: true },
-    close: Function,
 };
 
 /**
@@ -51,19 +51,13 @@ class LegacyAdaptedActionDialog extends ActionDialog {
         const ControllerComponent = this.props && this.props.ActionComponent;
         const Controller = ControllerComponent && ControllerComponent.Component;
         this.isLegacy = Controller && Controller.isLegacy;
-        if (this.isLegacy) {
-            useSubEnv({
-                setLegacyControllerWidget: (widget) => {
-                    this.legacyController = widget;
-                },
-            });
-        }
+        const legacyRefs = useLegacyRefs();
         useEffect(
             () => {
                 if (this.isLegacy) {
                     // Render legacy footer buttons
                     const footer = this.modalRef.el.querySelector("footer");
-                    this.legacyController.renderButtons($(footer));
+                    legacyRefs.widget.renderButtons($(footer));
                 }
             },
             () => []
diff --git a/addons/web/static/src/webclient/actions/action_hook.js b/addons/web/static/src/webclient/actions/action_hook.js
index 5224fe59c42..e2dff9e7319 100644
--- a/addons/web/static/src/webclient/actions/action_hook.js
+++ b/addons/web/static/src/webclient/actions/action_hook.js
@@ -1,9 +1,8 @@
 /** @odoo-module **/
 
 import { getScrollPosition, setScrollPosition } from "@web/core/utils/scrolling";
-import { useEffect } from "@web/core/utils/hooks";
 
-const { useComponent } = owl;
+const { useComponent, useEffect } = owl;
 
 // -----------------------------------------------------------------------------
 // Action hook
diff --git a/addons/web/static/src/webclient/actions/action_service.js b/addons/web/static/src/webclient/actions/action_service.js
index 54a4ac7ba5b..b408c8522cd 100644
--- a/addons/web/static/src/webclient/actions/action_service.js
+++ b/addons/web/static/src/webclient/actions/action_service.js
@@ -14,7 +14,7 @@ import { View } from "@web/views/view";
 import { ActionDialog } from "./action_dialog";
 import { CallbackRecorder } from "./action_hook";
 
-const { Component, useSubEnv, xml } = owl;
+const { Component, markup, onMounted, onWillUnmount, onError, useChildSubEnv, xml } = owl;
 
 const actionHandlersRegistry = registry.category("action_handlers");
 const actionRegistry = registry.category("actions");
@@ -91,7 +91,7 @@ function makeActionManager(env) {
         _loadAction(actionRequest, options.additionalContext);
     }
 
-    env.bus.on("CLEAR-CACHES", null, () => {
+    env.bus.addEventListener("CLEAR-CACHES", () => {
         actionCache = {};
     });
 
@@ -153,13 +153,19 @@ function makeActionManager(env) {
                 active_model: context.active_model,
             };
             const key = `${JSON.stringify(actionRequest)},${JSON.stringify(additional_context)}`;
+            let action;
             if (!actionCache[key]) {
                 actionCache[key] = env.services.rpc("/web/action/load", {
                     action_id: actionRequest,
                     additional_context,
                 });
+                action = await actionCache[key];
+                if (action.help) {
+                    action.help = markup(action.help);
+                }
+            } else {
+                action = await actionCache[key];
             }
-            const action = await actionCache[key];
             if (!action) {
                 return {
                     type: "ir.actions.client",
@@ -191,6 +197,13 @@ function makeActionManager(env) {
                       )
                     : domain;
         }
+        if (action.help) {
+            const htmlHelp = document.createElement("div");
+            htmlHelp.innerHTML = action.help;
+            if (!htmlHelp.innerText.trim()) {
+                delete action.help;
+            }
+        }
         action = { ...action }; // manipulate a copy to keep cached action unmodified
         action.jsId = `action_${++id}`;
         if (action.type === "ir.actions.act_window" || action.type === "ir.actions.client") {
@@ -551,24 +564,31 @@ function makeActionManager(env) {
                 this.Component = controller.Component;
                 this.titleService = useService("title");
                 useDebugCategory("action", { action });
-                useSubEnv({ config: controller.config });
+                useChildSubEnv({
+                    config: controller.config,
+                });
                 if (action.target !== "new") {
                     this.__beforeLeave__ = new CallbackRecorder();
                     this.__getGlobalState__ = new CallbackRecorder();
                     this.__getLocalState__ = new CallbackRecorder();
-                    useBus(env.bus, "CLEAR-UNCOMMITTED-CHANGES", (callbacks) => {
+                    useBus(env.bus, "CLEAR-UNCOMMITTED-CHANGES", (ev) => {
+                        const callbacks = ev.detail;
                         const beforeLeaveFns = this.__beforeLeave__.callbacks;
                         callbacks.push(...beforeLeaveFns);
                     });
-                    useSubEnv({
+                    useChildSubEnv({
                         __beforeLeave__: this.__beforeLeave__,
                         __getGlobalState__: this.__getGlobalState__,
                         __getLocalState__: this.__getLocalState__,
                     });
                 }
                 this.isMounted = false;
+
+                onMounted(this.onMounted);
+                onWillUnmount(this.onWillUnmount);
+                onError(this.onError);
             }
-            catchError(error) {
+            onError(error) {
                 reject(error);
                 cleanDomFromBootstrap();
                 if (action.target === "new") {
@@ -596,7 +616,7 @@ function makeActionManager(env) {
                     env.bus.trigger("ACTION_MANAGER:UPDATE", info);
                 }
             }
-            mounted() {
+            onMounted() {
                 if (action.target === "new") {
                     dialogCloseProm = new Promise((_r) => {
                         dialogCloseResolve = _r;
@@ -652,7 +672,7 @@ function makeActionManager(env) {
                 env.bus.trigger("ACTION_MANAGER:UI-UPDATED", _getActionMode(action));
                 this.isMounted = true;
             }
-            willUnmount() {
+            onWillUnmount() {
                 if (action.target === "new" && dialogCloseResolve) {
                     dialogCloseResolve();
                 }
diff --git a/addons/web/static/src/webclient/actions/client_actions.js b/addons/web/static/src/webclient/actions/client_actions.js
index 1084be09f8d..844142f381e 100644
--- a/addons/web/static/src/webclient/actions/client_actions.js
+++ b/addons/web/static/src/webclient/actions/client_actions.js
@@ -2,9 +2,9 @@
 
 import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
-import { sprintf } from "@web/core/utils/strings";
+import { escape, sprintf } from "@web/core/utils/strings";
 
-const { Component, escape, xml } = owl;
+const { Component, onMounted, xml } = owl;
 
 export const displayNotificationAction = (env, action) => {
     const params = action.params || {};
@@ -13,12 +13,11 @@ export const displayNotificationAction = (env, action) => {
         sticky: params.sticky || false,
         title: params.title,
         type: params.type || "info",
-        messageIsHtml: true,
     };
     let links = (params.links || []).map((link) => {
         return `<a href="${escape(link.url)}" target="_blank">${escape(link.label)}</a>`;
     });
-    const message = sprintf(escape(params.message), ...links);
+    const message = owl.markup(sprintf(escape(params.message), ...links));
     env.services.notification.add(message, options);
     return params.next;
 };
@@ -28,9 +27,10 @@ registry.category("actions").add("display_notification", displayNotificationActi
 class InvalidAction extends Component {
     setup() {
         this.notification = useService("notification");
+        onMounted(this.onMounted);
     }
 
-    mounted() {
+    onMounted() {
         const message = sprintf(
             this.env._t("No action with id '%s' could be found"),
             this.props.actionId
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.js b/addons/web/static/src/webclient/burger_menu/burger_menu.js
index 99f7db2f8f8..1f49e3fa988 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.js
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.js
@@ -1,12 +1,13 @@
 /** @odoo-module **/
 
-import { useService } from "@web/core/utils/hooks";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { registry } from "@web/core/registry";
+import { Transition } from "@web/core/transition";
+import { useService } from "@web/core/utils/hooks";
 import { BurgerUserMenu } from "./user_menu/user_menu";
 import { MobileSwitchCompanyMenu } from "./mobile_switch_company_menu/mobile_switch_company_menu";
-import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 
-const { Component, Portal, onMounted, useState } = owl;
+const { Component, onMounted, useState } = owl;
 
 /**
  * This file includes the widget Menu in mobile to render the BurgerMenu which
@@ -15,21 +16,21 @@ const { Component, Portal, onMounted, useState } = owl;
 
 const SWIPE_ACTIVATION_THRESHOLD = 100;
 
-export class BurgerMenu extends owl.Component {
+export class BurgerMenu extends Component {
     setup() {
         this.company = useService("company");
         this.user = useService("user");
         this.menuRepo = useService("menu");
-        this.state = owl.hooks.useState({
+        this.state = useState({
             isUserMenuOpened: false,
             isBurgerOpened: false,
         });
         this.swipeStartX = null;
         onMounted(() => {
-            this.env.bus.on("HOME-MENU:TOGGLED", this, () => {
+            this.env.bus.addEventListener("HOME-MENU:TOGGLED", () => {
                 this._closeBurger();
             });
-            this.env.bus.on("ACTION_MANAGER:UPDATE", this, (req) => {
+            this.env.bus.addEventListener("ACTION_MANAGER:UPDATE", ({ detail: req }) => {
                 if (req.id) {
                     this._closeBurger();
                 }
@@ -74,10 +75,10 @@ export class BurgerMenu extends owl.Component {
 }
 BurgerMenu.template = "web.BurgerMenu";
 BurgerMenu.components = {
-    Portal: Portal,
     DropdownItem,
     BurgerUserMenu,
     MobileSwitchCompanyMenu,
+    Transition,
 };
 
 const systrayItem = {
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.scss b/addons/web/static/src/webclient/burger_menu/burger_menu.scss
index 227dfeb0eb2..9124f010cf0 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.scss
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.scss
@@ -11,11 +11,9 @@
   transition: transform .2s ease;
 
   // Menu Toggle-Animations
-  &, &.burgerslide-enter-to, &.burgerslide-leave {
-    transform: translateX(-100%);
-  }
+  transform: translateX(-100%);
 
-  &.burgerslide-enter, &.burgerslide-leave-to {
+  &.burgerslide-enter, &.burgerslide-leave {
     transform: translateX(0);
   }
 
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.xml b/addons/web/static/src/webclient/burger_menu/burger_menu.xml
index 25a247aad5c..3b757cdbc6a 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.xml
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.xml
@@ -10,42 +10,42 @@
         t-on-click="_openBurger">
         <i class="oi oi-lg oi-open-panel--filled--right"/>
     </a>
-    <Portal target="'body.o_web_client'">
-      <div t-if="state.isBurgerOpened" class="o_burger_menu d-flex d-md-none flex-column flex-nowrap position-fixed" t-on-touchstart.stop="_onSwipeStart" t-on-touchend.stop="_onSwipeEnd" t-transition="burgerslide">
-        <div class="o_burger_menu_topbar d-flex align-items-center justify-content-between"
-            t-on-click.stop='_toggleUserMenu'>
-            <span class="dropdown-toggle small d-flex align-items-center justify-content-between o-no-caret" t-att-class="{active: state.isUserMenuOpened}">
-                <img class="o_burger_menu_avatar o_image_24_cover rounded-circle" t-att-src="'/web/image?model=res.users&amp;field=avatar_128&amp;id=' + user.userId" alt="Menu"/>
-                <span class="o_burger_menu_username px-2"><t t-esc="user.name"/></span>
-                <i t-if="currentApp" class="oi" t-att-class="state.isUserMenuOpened ? 'oi-caret--down' : 'oi-caret--left'"/>
-            </span>
-            <span type="button" class="o_burger_menu_close oi oi-close" aria-label="Close menu" title="Close menu" t-on-click.stop="_closeBurger"/>
-        </div>
-        <div class="o_burger_menu_content flex-grow-1 flex-shrink-1 overflow-auto"
-            t-att-class="{o_burger_menu_dark: !state.isUserMenuOpened and currentApp}">
-            <div t-if="!currentApp or state.isUserMenuOpened" class="o_burger_menu_user">
-                <MobileSwitchCompanyMenu t-if="Object.values(company.availableCompanies).length > 1" />
-                <BurgerUserMenu/>
-            </div>
+    <t t-portal="'body'">
+      <Transition name="'burgerslide'" visible="state.isBurgerOpened" leaveDuration="200" t-slot-scope="transition">
+        <div class="o_burger_menu d-flex flex-column flex-nowrap position-fixed" t-att-class="transition.className" t-on-touchstart.stop="_onSwipeStart" t-on-touchend.stop="_onSwipeEnd">
+          <div class="o_burger_menu_topbar d-flex align-items-center justify-content-between"
+              t-on-click.stop='_toggleUserMenu'>
+              <span class="dropdown-toggle small d-flex align-items-center justify-content-between o-no-caret" t-att-class="{active: state.isUserMenuOpened}">
+                  <img class="o_burger_menu_avatar o_image_24_cover rounded-circle" t-att-src="'/web/image?model=res.users&amp;field=avatar_128&amp;id=' + user.userId" alt="Menu"/>
+                  <span class="o_burger_menu_username px-2"><t t-esc="user.name"/></span>
+                  <i t-if="currentApp" class="oi" t-att-class="state.isUserMenuOpened ? 'oi-caret--down' : 'oi-caret--left'"/>
+              </span>
+              <span type="button" class="o_burger_menu_close oi oi-close" aria-label="Close menu" title="Close menu" t-on-click.stop="_closeBurger"/>
+          </div>
+          <div class="o_burger_menu_content flex-grow-1 flex-shrink-1 overflow-auto"
+              t-att-class="{o_burger_menu_dark: !state.isUserMenuOpened and currentApp}">
+              <div t-if="!currentApp or state.isUserMenuOpened" class="o_burger_menu_user">
+                  <MobileSwitchCompanyMenu t-if="Object.values(company.availableCompanies).length > 1" />
+                  <BurgerUserMenu/>
+              </div>
 
-            <!-- Current App Sections -->
-            <div class="o_burger_menu_app" t-if="!state.isUserMenuOpened and currentApp">
-                <div class="o_menu_sections">
-                    <t t-foreach="currentAppSections" t-as="subMenu">
-                        <t t-call="web.BurgerSection">
-                            <t t-set="section" t-value="subMenu" />
-                        </t>
-                    </t>
-                </div>
-            </div>
+              <!-- Current App Sections -->
+              <div class="o_burger_menu_app" t-if="!state.isUserMenuOpened and currentApp">
+                  <div class="o_menu_sections">
+                      <t t-foreach="currentAppSections" t-as="subMenu" t-key="subMenu_index">
+                          <t t-call="web.BurgerSection">
+                              <t t-set="section" t-value="subMenu" />
+                          </t>
+                      </t>
+                  </div>
+              </div>
+          </div>
         </div>
-      </div>
-      <div t-else="" />
-    </Portal>
-    <Portal target="'body.o_web_client'">
+      </Transition>
+    </t>
+    <t t-portal="'body'">
         <div t-if="state.isBurgerOpened" class="o_burger_menu_backdrop d-md-none" t-on-click.stop="_closeBurger" t-on-touchstart.stop="_onSwipeStart" t-on-touchend.stop="_onSwipeEnd" />
-        <div t-else="" />
-    </Portal>
+    </t>
 </div>
 
 <t t-name="web.BurgerSection" owl="1">
@@ -54,14 +54,14 @@
             <span t-esc="section.name"/>
         </button>
         <div class="dropdown-menu d-block">
-            <t t-foreach="section.childrenTree" t-as="subSection" >
+            <t t-foreach="section.childrenTree" t-as="subSection" t-key="subSection_index">
                 <t t-call="web.BurgerSection">
                     <t t-set="section" t-value="subSection" />
                 </t>
             </t>
         </div>
     </div>
-    <DropdownItem t-else="" t-key="section.id" t-on-click.stop="_onMenuClicked(section)" dataset="{ menuXmlid: section.xmlid }">
+    <DropdownItem t-else="" t-key="section.id" onSelected="() => this._onMenuClicked(section)" dataset="{ menuXmlid: section.xmlid }">
         <span t-esc="section.name" />
     </DropdownItem>
 </t>
diff --git a/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml b/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml
index 2cd003c7787..74d1cc769b4 100644
--- a/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml
+++ b/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml
@@ -4,19 +4,19 @@
 <t t-name="web.MobileSwitchCompanyMenu" owl="1">
     <div class="o_burger_menu_companies p-3 bg-100">
         <div class="o_burger_menu_user_title h6 mb-3">Companies</div>
-        <t t-foreach="Object.values(companyService.availableCompanies)" t-as="company">
+        <t t-foreach="Object.values(companyService.availableCompanies)" t-as="company" t-key="company.id">
             <t t-set="id" t-value="company.id"/>
             <t t-set="displayName" t-value="company.name"/>
             <t t-set="isCompanySelected" t-value="selectedCompanies.includes(id)"/>
             <t t-set="checkIcon" t-value="isCompanySelected ? 'fa-check-square text-primary' : 'fa-square-o'"/>
             <t t-set="isCompanyCurrent" t-value="companyService.currentCompany.id === id"/>
             <div class="d-flex menu_companies_item" t-att-data-company-id="id">
-                <div class="border-right toggle_company" t-att-class="{'border-primary' : isCompanyCurrent}" t-on-click="toggleCompany(id)">
+                <div class="border-right toggle_company" t-att-class="{'border-primary' : isCompanyCurrent}" t-on-click="() => this.toggleCompany(id)">
                     <span class="btn border-0 p-2">
                         <i t-attf-class="fa fa-fw h2 m-0 {{checkIcon}}"/>
                     </span>
                 </div>
-                <div class="flex-grow-1 p-2 ml-1 log_into text-muted" t-att-class="{'alert-primary': isCompanyCurrent}" t-on-click="logIntoCompany(id)">
+                <div class="flex-grow-1 p-2 ml-1 log_into text-muted" t-att-class="{'alert-primary': isCompanyCurrent}" t-on-click="() => this.logIntoCompany(id)">
                     <span t-esc="displayName" class="company_label" t-att-class="isCompanyCurrent ? 'text-900 font-weight-bold' : ''"/>
                     <small t-if="isCompanyCurrent" class="ml-1">(current)</small>
                 </div>
diff --git a/addons/web/static/src/webclient/burger_menu/user_menu/user_menu.xml b/addons/web/static/src/webclient/burger_menu/user_menu/user_menu.xml
index be7cb8bc126..c3fd757a254 100644
--- a/addons/web/static/src/webclient/burger_menu/user_menu/user_menu.xml
+++ b/addons/web/static/src/webclient/burger_menu/user_menu/user_menu.xml
@@ -6,7 +6,7 @@
       <t t-foreach="getElements()" t-as="element" t-key="element_index">
           <t t-if="!element.hide">
               <t t-if="element.type == 'item'">
-                <a t-att-class="'dropdown-item'" t-att-href="element.href or ''" t-esc="element.description" t-on-click.stop.prevent="_onItemClicked(element.callback)"/>
+                <a t-att-class="'dropdown-item'" t-att-href="element.href or ''" t-esc="element.description" t-on-click.stop.prevent="() => this._onItemClicked(element.callback)"/>
               </t>
               <div t-if="element.type == 'separator'" role="separator" class="dropdown-divider"/>
           </t>
diff --git a/addons/web/static/src/webclient/clickbot/clickbot.js b/addons/web/static/src/webclient/clickbot/clickbot.js
index 1f1a412c96f..768ec0dadd1 100644
--- a/addons/web/static/src/webclient/clickbot/clickbot.js
+++ b/addons/web/static/src/webclient/clickbot/clickbot.js
@@ -11,12 +11,15 @@
         "base.menu_theme_store",
         "base.menu_third_party",
         "account.menu_action_account_bank_journal_form",
+        "event_barcode.menu_event_registration_desk", // there's no way to come back from this menu
+        "hr_attendance.menu_hr_attendance_kiosk_no_user_mode", // same here
         "pos_adyen.menu_pos_adyen_account",
         "payment_odoo.menu_adyen_account",
         "payment_odoo.root_adyen_menu",
     ];
 
     const { isEnterprise } = odoo.info;
+    const { onWillStart } = owl;
     let appsMenusOnly = false;
     let actionCount = 0;
     let viewUpdateCount = 0;
@@ -38,7 +41,7 @@
         }
         setupDone = true;
         const env = odoo.__WOWL_DEBUG__.root.env;
-        env.bus.on("ACTION_MANAGER:UI-UPDATED", null, () => {
+        env.bus.addEventListener("ACTION_MANAGER:UI-UPDATED", () => {
             actionCount++;
         });
 
@@ -58,9 +61,11 @@
         const { WithSearch } = odoo.__DEBUG__.services["@web/search/with_search/with_search"];
 
         patch(WithSearch.prototype, "PatchedWithSearch", {
-            async willStart() {
-                await this._super(...arguments);
-                viewUpdateCount++;
+            setup() {
+                this._super();
+                onWillStart(() => {
+                    viewUpdateCount++;
+                });
             },
             async render() {
                 await this._super(...arguments);
@@ -155,7 +160,13 @@
     async function ensureHomeMenu() {
         const homeMenu = document.querySelector(".o_home_menu");
         if (!homeMenu) {
-            const menuToggle = document.querySelector("nav.o_main_navbar > a.o_menu_toggle");
+            let menuToggle = document.querySelector("nav.o_main_navbar > a.o_menu_toggle");
+            if (!menuToggle) {
+                // In the Barcode application, there is no navbar. So you have to click
+                // on the o_stock_barcode_menu button which is the equivalent of
+                // the o_menu_toggle button in the navbar.
+                menuToggle = document.querySelector(".o_stock_barcode_menu");
+            }
             await triggerClick(menuToggle, "home menu toggle button");
             await waitForCondition(() => document.querySelector(".o_home_menu"));
         }
@@ -191,11 +202,11 @@
         let menu = menus[menuIndex];
         if (menu.classList.contains("dropdown-toggle")) {
             // the current menu is a dropdown toggler -> open it and pick a menu inside the dropdown
-            if (!menu.nextSibling) {
+            if (!menu.nextElementSibling) {
                 // might already be opened if the last menu was blacklisted
                 await triggerClick(menu, "menu toggler");
             }
-            const dropdown = menu.nextSibling;
+            const dropdown = menu.nextElementSibling;
             if (!dropdown) {
                 menuIndex = 0; // empty More menu has no dropdown (FIXME?)
                 return;
diff --git a/addons/web/static/src/webclient/clickbot/clickbot_loader.js b/addons/web/static/src/webclient/clickbot/clickbot_loader.js
index 720524f6a12..0b38c60b7af 100644
--- a/addons/web/static/src/webclient/clickbot/clickbot_loader.js
+++ b/addons/web/static/src/webclient/clickbot/clickbot_loader.js
@@ -1,8 +1,7 @@
 /** @odoo-module alias=web.clickEverywhere **/
 
-import { registry } from "../../core/registry";
-
-const { loadJS } = owl;
+import { loadJS } from "@web/core/assets";
+import { registry } from "@web/core/registry";
 
 export default async function startClickEverywhere(xmlId, appsMenusOnly) {
     await loadJS("web/static/src/webclient/clickbot/clickbot.js");
diff --git a/addons/web/static/src/webclient/debug_items.js b/addons/web/static/src/webclient/debug_items.js
index 24dc91ced09..c5a255b1700 100644
--- a/addons/web/static/src/webclient/debug_items.js
+++ b/addons/web/static/src/webclient/debug_items.js
@@ -3,7 +3,7 @@ import { registry } from "@web/core/registry";
 import { browser } from "@web/core/browser/browser";
 
 import dialogs from "web.view_dialogs";
-import { ComponentAdapter } from "web.OwlCompatibility";
+import { standaloneAdapter } from "web.OwlCompatibility";
 
 const { Component } = owl;
 
@@ -55,7 +55,7 @@ export function openViewItem({ env }) {
         type: "item",
         description: env._t("Open View"),
         callback: () => {
-            const adapterParent = new ComponentAdapter(null, { Component: Component });
+            const adapterParent = standaloneAdapter({ Component });
             const selectCreateDialog = new dialogs.SelectCreateDialog(adapterParent, {
                 res_model: "ir.ui.view",
                 title: env._t("Select a view"),
diff --git a/addons/web/static/src/webclient/loading_indicator/loading_indicator.js b/addons/web/static/src/webclient/loading_indicator/loading_indicator.js
index 02220252d96..abe55f8b235 100644
--- a/addons/web/static/src/webclient/loading_indicator/loading_indicator.js
+++ b/addons/web/static/src/webclient/loading_indicator/loading_indicator.js
@@ -3,8 +3,9 @@
 import { browser } from "@web/core/browser/browser";
 import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
+import { Transition } from "@web/core/transition";
 
-const { Component, useState } = owl;
+const { Component, onWillDestroy, useState } = owl;
 
 /**
  * Loading Indicator
@@ -23,12 +24,16 @@ export class LoadingIndicator extends Component {
             show: false,
         });
         this.rpcIds = new Set();
-        this.env.bus.on("RPC:REQUEST", this, this.requestCall);
-        this.env.bus.on("RPC:RESPONSE", this, this.responseCall);
+        this.env.bus.addEventListener("RPC:REQUEST", this.requestCall.bind(this));
+        this.env.bus.addEventListener("RPC:RESPONSE", this.responseCall.bind(this));
+        onWillDestroy(() => {
+            this.env.bus.removeEventListener("RPC:REQUEST", this.requestCall.bind(this));
+            this.env.bus.removeEventListener("RPC:RESPONSE", this.responseCall.bind(this));
+        });
         this.uiService = useService("ui");
     }
 
-    requestCall(rpcId) {
+    requestCall({ detail: rpcId }) {
         if (this.state.count === 0) {
             this.state.show = true;
             this.blockUITimer = browser.setTimeout(() => {
@@ -40,7 +45,7 @@ export class LoadingIndicator extends Component {
         this.state.count++;
     }
 
-    responseCall(rpcId) {
+    responseCall({ detail: rpcId }) {
         this.rpcIds.delete(rpcId);
         this.state.count = this.rpcIds.size;
         if (this.state.count === 0) {
@@ -56,6 +61,7 @@ export class LoadingIndicator extends Component {
 }
 
 LoadingIndicator.template = "web.LoadingIndicator";
+LoadingIndicator.components = { Transition };
 
 registry.category("main_components").add("LoadingIndicator", {
     Component: LoadingIndicator,
diff --git a/addons/web/static/src/webclient/loading_indicator/loading_indicator.scss b/addons/web/static/src/webclient/loading_indicator/loading_indicator.scss
index 2f990d82f1d..b037232dc46 100644
--- a/addons/web/static/src/webclient/loading_indicator/loading_indicator.scss
+++ b/addons/web/static/src/webclient/loading_indicator/loading_indicator.scss
@@ -3,17 +3,12 @@
   bottom: 0;
   right: 0;
   z-index: $zindex-modal + 1;
+  background-color: $o-brand-odoo;
+  color: white;
+  padding: 4px;
 
-  &.o_loading > span {
-    background-color: $o-brand-odoo;
-    color: white;
-    padding: 4px;
-
-    &.fade-leave-active {
-      transition: opacity 0.4s;
-    }
-    &.fade-leave-to {
-      opacity: 0;
-    }
+  transition: opacity 0.4s;
+  &.o-fade-leave, &.o-fade-enter {
+    opacity: 0;
   }
 }
diff --git a/addons/web/static/src/webclient/loading_indicator/loading_indicator.xml b/addons/web/static/src/webclient/loading_indicator/loading_indicator.xml
index 79edd2a6930..7371b2f6fd4 100644
--- a/addons/web/static/src/webclient/loading_indicator/loading_indicator.xml
+++ b/addons/web/static/src/webclient/loading_indicator/loading_indicator.xml
@@ -2,11 +2,9 @@
 <templates xml:space="preserve">
 
     <t t-name="web.LoadingIndicator" owl="1">
-        <div t-attf-class="o_loading_indicator {{state.show ? 'o_loading' : ''}}">
-            <span t-if="state.show" t-transition="fade">
-                <t>Loading<t t-if="env.debug" t-esc="' (' + state.count + ')'" /></t>
-            </span>
-        </div>
+        <Transition visible="state.show" name="'o-fade'" t-slot-scope="transition" leaveDuration="400">
+            <span class="o_loading_indicator" t-att-class="transition.className">Loading<t t-if="env.debug" t-esc="' (' + state.count + ')'" /></span>
+        </Transition>
     </t>
 
 </templates>
diff --git a/addons/web/static/src/webclient/navbar/navbar.js b/addons/web/static/src/webclient/navbar/navbar.js
index 8c2622b8a6b..f4af05e5267 100644
--- a/addons/web/static/src/webclient/navbar/navbar.js
+++ b/addons/web/static/src/webclient/navbar/navbar.js
@@ -2,12 +2,12 @@
 
 import { Dropdown } from "@web/core/dropdown/dropdown";
 import { DropdownItem } from "@web/core/dropdown/dropdown_item";
-import { useEffect, useService, onDestroyed, useBus } from "@web/core/utils/hooks";
+import { useService, useBus } from "@web/core/utils/hooks";
 import { registry } from "@web/core/registry";
 import { debounce } from "@web/core/utils/timing";
 import { ErrorHandler, NotUpdatable } from "@web/core/utils/components";
 
-const { Component, useExternalListener, useRef } = owl;
+const { Component, onWillDestroy, useExternalListener, useEffect, useRef } = owl;
 const systrayRegistry = registry.category("systray");
 
 const getBoundingClientRect = Element.prototype.getBoundingClientRect;
@@ -37,7 +37,7 @@ export class NavBar extends Component {
         this.menuService = useService("menu");
         this.appSubMenus = useRef("appSubMenus");
         const debouncedAdapt = debounce(this.adapt.bind(this), 250);
-        onDestroyed(() => debouncedAdapt.cancel());
+        onWillDestroy(() => debouncedAdapt.cancel());
         useExternalListener(window, "resize", debouncedAdapt);
 
         let adaptCounter = 0;
@@ -185,4 +185,4 @@ export class NavBar extends Component {
     }
 }
 NavBar.template = "web.NavBar";
-NavBar.components = { MenuDropdown, DropdownItem, NotUpdatable, ErrorHandler };
+NavBar.components = { Dropdown, DropdownItem, MenuDropdown, NotUpdatable, ErrorHandler };
diff --git a/addons/web/static/src/webclient/navbar/navbar.scss b/addons/web/static/src/webclient/navbar/navbar.scss
index 47c642498da..d223a4e2fa4 100644
--- a/addons/web/static/src/webclient/navbar/navbar.scss
+++ b/addons/web/static/src/webclient/navbar/navbar.scss
@@ -87,7 +87,7 @@
         }
     }
 
-    .o_menu_systray_item {
+    .o_menu_systray > * {
         > a, > .dropdown > a, > button, > label { // <label> is required by website
             @extend %-main-navbar-entry-base;
             @extend %-main-navbar-entry-spacing;
diff --git a/addons/web/static/src/webclient/navbar/navbar.xml b/addons/web/static/src/webclient/navbar/navbar.xml
index 0b77911acbf..e7e738b5e3a 100644
--- a/addons/web/static/src/webclient/navbar/navbar.xml
+++ b/addons/web/static/src/webclient/navbar/navbar.xml
@@ -17,7 +17,7 @@
           t-if="currentApp"
           href="getMenuItemHref(currentApp)"
           t-esc="currentApp.name"
-          class="o_menu_brand d-none d-md-block"
+          class="'o_menu_brand d-none d-md-block'"
           dataset="{ menuXmlid: currentApp.xmlid, section: currentApp.id }"
           onSelected="() => this.onNavBarDropdownItemSelection(currentApp)"
         />
@@ -32,7 +32,7 @@
           <t t-foreach="systrayItems" t-as="item" t-key="item.key">
             <NotUpdatable>
                 <ErrorHandler onError="error => this.handleItemError(error, item)">
-                    <t t-component="item.Component" t-props="item.props" class="o_menu_systray_item"/>
+                    <t t-component="item.Component" t-props="item.props"/>
                 </ErrorHandler>
             </NotUpdatable>
           </t>
@@ -42,7 +42,7 @@
   </t>
 
   <t t-name="web.NavBar.AppsMenu" owl="1">
-    <Dropdown hotkey="'h'" title="'Home Menu'" class="o_navbar_apps_menu">
+    <Dropdown hotkey="'h'" title="'Home Menu'" class="'o_navbar_apps_menu'">
       <t t-set-slot="toggler">
         <i class="oi oi-apps" />
       </t>
@@ -50,8 +50,7 @@
         t-foreach="apps"
         t-as="app"
         t-key="app.id"
-        class="o_app"
-        t-att-class="{ focus: menuService.getCurrentApp() === app }"
+        class="{ 'o_app': true, focus: menuService.getCurrentApp() === app }"
         href="getMenuItemHref(app)"
         t-esc="app.name"
         dataset="{ menuXmlid: app.xmlid, section: app.id }"
@@ -79,7 +78,7 @@
         <t t-if="!section.childrenTree.length">
           <DropdownItem
             title="section.name"
-            class="o_nav_entry"
+            class="'o_nav_entry'"
             href="getMenuItemHref(section)"
             hotkey="hotkey"
             t-esc="section.name"
@@ -118,7 +117,7 @@
       <DropdownItem
         t-if="!item.childrenTree.length"
         href="getMenuItemHref(item)"
-        class="dropdown-item"
+        class="'dropdown-item'"
         t-esc="item.name"
         dataset="{ menuXmlid: item.xmlid, section: item.id }"
         onSelected="() => this.onNavBarDropdownItemSelection(item)"
@@ -130,7 +129,7 @@
           t-foreach="item.childrenTree"
           t-as="subItem"
           t-key="subItem.id"
-          class="o_dropdown_menu_group_entry dropdown-item"
+          class="'o_dropdown_menu_group_entry dropdown-item'"
           href="getMenuItemHref(subItem)"
           t-esc="subItem.name"
           dataset="{ menuXmlid: subItem.xmlid, section: subItem.id }"
@@ -141,7 +140,7 @@
   </t>
 
   <t t-name="web.NavBar.SectionsMenu.MoreDropdown" owl="1">
-    <Dropdown class="o_menu_sections_more" title="'More Menu'" hotkey="hotkey">
+    <Dropdown class="'o_menu_sections_more'" title="'More Menu'" hotkey="hotkey">
       <t t-set-slot="toggler">
         <i class="oi oi-large oi-add--thick"/>
       </t>
@@ -149,7 +148,7 @@
 
         <t t-if="!section.childrenTree.length">
           <DropdownItem
-            class="o_more_dropdown_section"
+            class="'o_more_dropdown_section'"
             href="getMenuItemHref(section)"
             t-esc="section.name"
             dataset="{ menuXmlid: section.xmlid, section: section.id }"
diff --git a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.js b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.js
index 34761672811..aa508bb255a 100644
--- a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.js
+++ b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.js
@@ -1,5 +1,7 @@
 /** @odoo-module **/
 
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { useService } from "@web/core/utils/hooks";
 import { registry } from "@web/core/registry";
 import { browser } from "@web/core/browser/browser";
@@ -37,6 +39,7 @@ export class SwitchCompanyMenu extends Component {
     }
 }
 SwitchCompanyMenu.template = "web.SwitchCompanyMenu";
+SwitchCompanyMenu.components = { Dropdown, DropdownItem };
 SwitchCompanyMenu.toggleDelay = 1000;
 
 export const systrayItem = {
diff --git a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
index aa9a0af812c..3c20e059d95 100644
--- a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
+++ b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
@@ -2,12 +2,12 @@
 <templates xml:space="preserve">
 
 <t t-name="web.SwitchCompanyMenu" owl="1">
-    <Dropdown class="o_switch_company_menu d-none d-md-block" position="'bottom-end'">
+    <Dropdown class="'o_switch_company_menu d-none d-md-block'" position="'bottom-end'">
         <t t-set-slot="toggler">
             <i class="oi oi-lg oi-connection--two-way d-lg-none"/>
             <span class="oe_topbar_name d-none d-lg-block" t-esc="currentCompany.name"/>
         </t>
-        <t t-foreach="Object.values(companyService.availableCompanies).sort((c1, c2) => c1.sequence - c2.sequence)" t-as="company">
+        <t t-foreach="Object.values(companyService.availableCompanies).sort((c1, c2) => c1.sequence - c2.sequence)" t-as="company" t-key="company.id">
             <t t-call="web.SwitchCompanyItem">
                 <t t-set="company" t-value="company" />
             </t>
@@ -17,7 +17,7 @@
 
 
 <t t-name="web.SwitchCompanyItem" owl="1">
-    <DropdownItem class="p-0 bg-white">
+    <DropdownItem class="'p-0 bg-white'">
         <t t-set="isCompanySelected" t-value="selectedCompanies.includes(company.id)"/>
         <t t-set="isCurrent" t-value="company.id === companyService.currentCompany.id"/>
         <div class="d-flex" data-menu="company" t-att-data-company-id="company.id">
@@ -29,7 +29,7 @@
                 tabindex="0"
                 class="border-right toggle_company"
                 t-attf-class="{{isCurrent ? 'border-primary' : ''}}"
-                t-on-click.stop="toggleCompany(company.id)">
+                t-on-click.stop="() => this.toggleCompany(company.id)">
 
                 <span class="btn btn-light border-0 p-2">
                     <i class="fa fa-fw py-2" t-att-class="isCompanySelected ? 'fa-check-square text-primary' : 'fa-square-o'"/>
@@ -44,7 +44,7 @@
                 tabindex="0"
                 class="d-flex flex-grow-1 align-items-center py-0 log_into pl-2"
                 t-att-class="isCurrent ? 'alert-primary ml-1 mr-2' : 'btn btn-light font-weight-normal border-0'"
-                t-on-click="logIntoCompany(company.id)">
+                t-on-click="() => this.logIntoCompany(company.id)">
 
                 <span
                     class='company_label pr-3'
diff --git a/addons/web/static/src/webclient/user_menu/user_menu.js b/addons/web/static/src/webclient/user_menu/user_menu.js
index 0ef5cf84f64..0a88a4aec35 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu.js
+++ b/addons/web/static/src/webclient/user_menu/user_menu.js
@@ -1,7 +1,8 @@
 /** @odoo-module **/
 
-import { browser } from "@web/core/browser/browser";
+import { Dropdown } from "@web/core/dropdown/dropdown";
 import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { browser } from "@web/core/browser/browser";
 import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
 
@@ -30,7 +31,7 @@ export class UserMenu extends Component {
     }
 }
 UserMenu.template = "web.UserMenu";
-UserMenu.components = { DropdownItem };
+UserMenu.components = { Dropdown, DropdownItem };
 
 export const systrayItem = {
     Component: UserMenu,
diff --git a/addons/web/static/src/webclient/user_menu/user_menu.xml b/addons/web/static/src/webclient/user_menu/user_menu.xml
index e4a3dad0aaf..35b7c84e82a 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu.xml
+++ b/addons/web/static/src/webclient/user_menu/user_menu.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.UserMenu" owl="1">
-        <Dropdown class="o_user_menu d-none d-md-block pr-0" togglerClass="'py-1 py-lg-0'">
+        <Dropdown class="'o_user_menu d-none d-md-block pr-0'" togglerClass="'py-1 py-lg-0'">
             <t t-set-slot="toggler">
                 <img class="rounded-circle o_user_avatar h-75 py-1" t-att-src="source" alt="User"/>
                 <span class="oe_topbar_name d-none d-lg-block ml-1"><t t-esc="user.name"/><t t-if="env.debug" t-esc="' (' + user.db.name + ')'"/></span>
@@ -12,8 +12,8 @@
                     <DropdownItem
                         t-if="element.type == 'item'"
                         href="element.href"
-                        t-esc="element.description"
                         dataset="{ menu: element.id }"
+                        t-esc="element.description"
                         onSelected="element.callback"
                     />
                     <div t-if="element.type == 'separator'" role="separator" class="dropdown-divider"/>
diff --git a/addons/web/static/src/webclient/webclient.js b/addons/web/static/src/webclient/webclient.js
index cf0260f1dd7..1f49110337d 100644
--- a/addons/web/static/src/webclient/webclient.js
+++ b/addons/web/static/src/webclient/webclient.js
@@ -1,16 +1,16 @@
 /** @odoo-module **/
 
-import { ActionContainer } from "./actions/action_container";
-import { NavBar } from "./navbar/navbar";
-import { useBus, useEffect, useService } from "@web/core/utils/hooks";
-import { NotUpdatable } from "../core/utils/components";
-import { MainComponentsContainer } from "../core/main_components_container";
-import { useOwnDebugContext } from "../core/debug/debug_context";
-import { registry } from "@web/core/registry";
+import { useOwnDebugContext } from "@web/core/debug/debug_context";
 import { DebugMenu } from "@web/core/debug/debug_menu";
 import { localization } from "@web/core/l10n/localization";
+import { MainComponentsContainer } from "@web/core/main_components_container";
+import { registry } from "@web/core/registry";
+import { NotUpdatable } from "@web/core/utils/components";
+import { useBus, useService } from "@web/core/utils/hooks";
+import { ActionContainer } from "./actions/action_container";
+import { NavBar } from "./navbar/navbar";
 
-const { Component, useExternalListener } = owl;
+const { Component, onMounted, useExternalListener, useState } = owl;
 
 export class WebClient extends Component {
     setup() {
@@ -31,28 +31,25 @@ export class WebClient extends Component {
             );
         }
         this.localization = localization;
+        this.state = useState({
+            fullscreen: false,
+        });
         this.title.setParts({ zopenerp: "Odoo" }); // zopenerp is easy to grep
         useBus(this.env.bus, "ROUTE_CHANGE", this.loadRouterState);
-        useBus(this.env.bus, "ACTION_MANAGER:UI-UPDATED", (mode) => {
+        useBus(this.env.bus, "ACTION_MANAGER:UI-UPDATED", ({ detail: mode }) => {
             if (mode !== "new") {
-                this.el.classList.toggle("o_fullscreen", mode === "fullscreen");
+                this.state.fullscreen = mode === "fullscreen";
             }
         });
-        useEffect(
-            () => {
-                this.loadRouterState();
-            },
-            () => []
-        );
+        onMounted(() => {
+            this.loadRouterState();
+            // the chat window and dialog services listen to 'web_client_ready' event in
+            // order to initialize themselves:
+            this.env.bus.trigger("WEB_CLIENT_READY");
+        });
         useExternalListener(window, "click", this.onGlobalClick, { capture: true });
     }
 
-    mounted() {
-        // the chat window and dialog services listen to 'web_client_ready' event in
-        // order to initialize themselves:
-        this.env.bus.trigger("WEB_CLIENT_READY");
-    }
-
     async loadRouterState() {
         let stateLoaded = await this.actionService.loadState();
         let menuId = Number(this.router.current.hash.menu_id || 0);
diff --git a/addons/web/static/src/webclient/webclient.xml b/addons/web/static/src/webclient/webclient.xml
index 91ed7a44293..4593ad40038 100644
--- a/addons/web/static/src/webclient/webclient.xml
+++ b/addons/web/static/src/webclient/webclient.xml
@@ -2,15 +2,13 @@
 <templates xml:space="preserve">
 
     <t t-name="web.WebClient" owl="1">
-        <body class="o_web_client" t-att-class="{'o_is_superuser': user.userId === 1, 'o_rtl': localization.direction === 'rtl' }">
-            <NotUpdatable>
-                <NavBar/>
-            </NotUpdatable>
-            <NotUpdatable>
-                <ActionContainer/>
-            </NotUpdatable>
-            <MainComponentsContainer/>
-        </body>
+        <NotUpdatable t-if="!state.fullscreen">
+            <NavBar/>
+        </NotUpdatable>
+        <NotUpdatable>
+            <ActionContainer/>
+        </NotUpdatable>
+        <MainComponentsContainer/>
     </t>
 
 </templates>
diff --git a/addons/web/static/src/webclient/webclient_extra.scss b/addons/web/static/src/webclient/webclient_extra.scss
index 8b1c89a05ce..3dcb112371b 100644
--- a/addons/web/static/src/webclient/webclient_extra.scss
+++ b/addons/web/static/src/webclient/webclient_extra.scss
@@ -18,16 +18,6 @@ select {
   background: white;
 }
 
-//------------------------------------------------------------------------------
-// Loading
-//------------------------------------------------------------------------------
-
-.o_loading > span {
-  background-color: $o-brand-odoo;
-  color: white;
-  padding: 4px;
-}
-
 //------------------------------------------------------------------------------
 // User menu in navbar
 //------------------------------------------------------------------------------
diff --git a/addons/web/static/src/webclient/webclient_layout.scss b/addons/web/static/src/webclient/webclient_layout.scss
index 0a9094809d5..87f917ee134 100644
--- a/addons/web/static/src/webclient/webclient_layout.scss
+++ b/addons/web/static/src/webclient/webclient_layout.scss
@@ -43,12 +43,6 @@ html {
       }
     }
 
-    &.o_fullscreen {
-      .o_main_navbar {
-        display: none;
-      }
-    }
-
     .o_main_navbar {
       flex: 0 0 auto;
     }
@@ -73,13 +67,6 @@ html {
       }
     }
   }
-
-  .o_loading > span {
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    z-index: $zindex-modal + 1;
-  }
 }
 
 @media print {
diff --git a/addons/web/static/tests/core/checkbox_tests.js b/addons/web/static/tests/core/checkbox_tests.js
index 9ae54133005..309bd01cdbb 100644
--- a/addons/web/static/tests/core/checkbox_tests.js
+++ b/addons/web/static/tests/core/checkbox_tests.js
@@ -3,39 +3,59 @@
 import { CheckBox } from "@web/core/checkbox/checkbox";
 import { translatedTerms } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
-import { makeTestEnv } from "../helpers/mock_env";
-import { makeFakeLocalizationService } from "../helpers/mock_services";
-import { getFixture, patchWithCleanup } from "../helpers/utils";
+import { makeTestEnv } from "@web/../tests/helpers/mock_env";
+import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
+import { click, getFixture, patchWithCleanup, mount } from "@web/../tests/helpers/utils";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 const serviceRegistry = registry.category("services");
 
-let env;
 let target;
 
 QUnit.module("Components", (hooks) => {
     hooks.beforeEach(async () => {
-        env = await makeTestEnv();
         target = getFixture();
     });
 
     QUnit.module("CheckBox");
 
     QUnit.test("can be rendered", async (assert) => {
-        await mount(CheckBox, { env, target, props: {} });
+        const env = await makeTestEnv();
+        await mount(CheckBox, target, { env, props: {} });
         assert.containsOnce(target, "div.custom-checkbox");
     });
 
     QUnit.test("has a slot for translatable text", async (assert) => {
         patchWithCleanup(translatedTerms, { ragabadabadaba: "rugubudubudubu" });
+        serviceRegistry.add("localization", makeFakeLocalizationService());
+        const env = await makeTestEnv();
 
         class Parent extends Component {}
         Parent.template = xml`<CheckBox>ragabadabadaba</CheckBox>`;
+        Parent.components = { CheckBox };
 
-        serviceRegistry.add("localization", makeFakeLocalizationService());
-
-        const parent = await mount(Parent, { env, target });
+        const parent = await mount(Parent, target, { env });
         assert.containsOnce(target, "div.custom-checkbox");
         assert.strictEqual(parent.el.innerText, "rugubudubudubu");
     });
+
+    QUnit.test("call onChange prop when some change occurs", async (assert) => {
+        const env = await makeTestEnv();
+
+        let value = false;
+        class Parent extends Component {
+            onChange(checked) {
+                value = checked;
+            }
+        }
+        Parent.template = xml`<CheckBox onChange="onChange"/>`;
+        Parent.components = { CheckBox };
+
+        await mount(Parent, target, { env });
+        assert.containsOnce(target, "div.custom-checkbox");
+        await click(target.querySelector("input"));
+        assert.strictEqual(value, true);
+        await click(target.querySelector("input"));
+        assert.strictEqual(value, false);
+    });
 });
diff --git a/addons/web/static/tests/core/commands/command_palette_tests.js b/addons/web/static/tests/core/commands/command_palette_tests.js
index c763e980b15..5f7cc109d3f 100644
--- a/addons/web/static/tests/core/commands/command_palette_tests.js
+++ b/addons/web/static/tests/core/commands/command_palette_tests.js
@@ -12,13 +12,14 @@ import {
     click,
     getFixture,
     makeDeferred,
+    mount,
     nextTick,
     patchWithCleanup,
     triggerHotkey,
 } from "../../helpers/utils";
 import { editSearchBar } from "./command_service_tests";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 
 let env;
 let target;
@@ -57,15 +58,10 @@ QUnit.module("Command Palette Dialog", {
         env = await makeTestEnv();
         target = getFixture();
     },
-    afterEach() {
-        if (testComponent) {
-            testComponent.destroy();
-        }
-    },
 });
 
 QUnit.test("empty providers", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const config = {
         providers: [],
     };
@@ -88,7 +84,7 @@ QUnit.test("empty providers", async (assert) => {
 });
 
 QUnit.test("custom empty message", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const emptyMessageByNamespace = {
         default: "Empty Default",
         "@": "Empty @",
@@ -131,7 +127,7 @@ QUnit.test("custom empty message", async (assert) => {
 });
 
 QUnit.test("custom placeholder", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const config = {
         placeholder: "placeholder test",
         providers: [],
@@ -150,7 +146,7 @@ QUnit.test("custom placeholder", async (assert) => {
 });
 
 QUnit.test("add a footer", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const config = {
         providers: [],
         FooterComponent,
@@ -173,7 +169,7 @@ QUnit.test("command with a Custom Component", async (assert) => {
         </div>
     `;
 
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const action = () => {};
     const providers = [
         {
@@ -214,7 +210,7 @@ QUnit.test("command with a Custom Component", async (assert) => {
 });
 
 QUnit.test("multi namespace with provider", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const action = () => {};
     const providers = [
         {
@@ -266,7 +262,7 @@ QUnit.test("multi namespace with provider", async (assert) => {
 });
 
 QUnit.test("apply a fuzzysearch on the namespace default not on the others", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const action = () => {};
     const providers = [
         {
@@ -330,7 +326,7 @@ QUnit.test("apply a fuzzysearch on the namespace default not on the others", asy
 });
 
 QUnit.test("multi provider with the same namespace", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const action = () => {};
     const providers = [
         {
@@ -374,7 +370,7 @@ QUnit.test("multi provider with the same namespace", async (assert) => {
 });
 
 QUnit.test("check the concurrency during a research", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const imSearchDef = makeDeferred();
     const provide = async (env, options) => {
         if (options.searchValue) {
@@ -419,7 +415,7 @@ QUnit.test("check the concurrency during a research", async (assert) => {
 QUnit.test(
     "open the command palette with a searchValue already in the searchbar",
     async (assert) => {
-        testComponent = await mount(TestComponent, { env, target });
+        testComponent = await mount(TestComponent, target, { env });
         const action = () => {};
         const providers = [
             {
@@ -467,7 +463,7 @@ QUnit.test(
 );
 
 QUnit.test("open the command palette with a namespace already in the searchbar", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const action = () => {};
     const providers = [
         {
@@ -514,7 +510,7 @@ QUnit.test("open the command palette with a namespace already in the searchbar",
 });
 
 QUnit.test("multi provider with categories", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const categoriesByNamespace = {
         default: ["cat1", "cat2"],
         "@": ["@cat1", "@cat2"],
@@ -639,7 +635,7 @@ QUnit.test("multi provider with categories", async (assert) => {
 });
 
 QUnit.test("don't display by categories if there is a search value", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const categoriesByNamespace = {
         default: ["cat1", "cat2"],
     };
@@ -699,7 +695,7 @@ QUnit.test("don't display by categories if there is a search value", async (asse
 });
 
 QUnit.test("click on command", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const commands = [
         {
             name: "Command1",
@@ -739,7 +735,7 @@ QUnit.test("click on command", async (assert) => {
 });
 
 QUnit.test("press enter on command", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const commands = [
         {
             name: "Command1",
@@ -783,7 +779,7 @@ QUnit.test("press enter on command", async (assert) => {
 });
 
 QUnit.test("keyboard navigation scroll", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const commands = [
         { name: "Command1" },
         { name: "Command2" },
@@ -941,7 +937,7 @@ QUnit.test("keyboard navigation scroll", async (assert) => {
 });
 
 QUnit.test("multi level command", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const emptyMessageByNamespace = {
         default: "Empty Default",
     };
@@ -1013,7 +1009,7 @@ QUnit.test("multi level command", async (assert) => {
 });
 
 QUnit.test("command palette dialog can be rendered and closed on outside click", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
 
     const config = {
         providers: [],
@@ -1033,7 +1029,7 @@ QUnit.test("command palette dialog can be rendered and closed on outside click",
 QUnit.test("navigate in the command palette with the arrows", async (assert) => {
     assert.expect(6);
 
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const action = () => {};
     const commands = [
         {
@@ -1094,7 +1090,7 @@ QUnit.test("navigate in the command palette with the arrows", async (assert) =>
 QUnit.test("navigate in the command palette with an empty list", async (assert) => {
     assert.expect(6);
 
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const providers = [
         {
             provide: () => [],
@@ -1122,7 +1118,7 @@ QUnit.test("navigate in the command palette with an empty list", async (assert)
 });
 
 QUnit.test("bold the searchValue on the commands", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const action = () => {};
     const providers = [
         {
@@ -1177,7 +1173,7 @@ QUnit.test("bold the searchValue on the commands", async (assert) => {
 });
 
 QUnit.test("bold the searchValue on the commands with special char", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    testComponent = await mount(TestComponent, target, { env });
     const action = () => {};
     const providers = [
         {
diff --git a/addons/web/static/tests/core/commands/command_service_tests.js b/addons/web/static/tests/core/commands/command_service_tests.js
index 9a8c6221b46..de875eb6eaa 100644
--- a/addons/web/static/tests/core/commands/command_service_tests.js
+++ b/addons/web/static/tests/core/commands/command_service_tests.js
@@ -11,13 +11,20 @@ import { registry } from "@web/core/registry";
 import { uiService, useActiveElement } from "@web/core/ui/ui_service";
 import testUtils from "web.test_utils";
 import { clearRegistryWithCleanup, makeTestEnv } from "../../helpers/mock_env";
-import { click, getFixture, nextTick, patchWithCleanup, triggerHotkey } from "../../helpers/utils";
+import {
+    click,
+    destroy,
+    getFixture,
+    mount,
+    nextTick,
+    patchWithCleanup,
+    triggerHotkey,
+} from "../../helpers/utils";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 
 let env;
 let target;
-let testComponent;
 const serviceRegistry = registry.category("services");
 const commandCategoryRegistry = registry.category("command_categories");
 const commandProviderRegistry = registry.category("command_provider");
@@ -36,7 +43,6 @@ class TestComponent extends Component {
 }
 TestComponent.template = xml`
   <div>
-    <div class="o_dialog_container"/>
     <t t-component="DialogContainer.Component" t-props="DialogContainer.props" />
   </div>
 `;
@@ -70,11 +76,6 @@ QUnit.module("Command Service", {
         env = await makeTestEnv();
         target = getFixture();
     },
-    afterEach() {
-        if (testComponent) {
-            testComponent.destroy();
-        }
-    },
 });
 
 QUnit.test("commands evilness 👹", async (assert) => {
@@ -103,23 +104,23 @@ QUnit.test("useCommand hook", async (assert) => {
 
     class MyComponent extends TestComponent {
         setup() {
-            super.setup();
             useCommand("Take the throne", () => {
                 assert.step("Hodor");
             });
         }
     }
-    testComponent = await mount(MyComponent, { env, target });
+    const comp = await mount(MyComponent, target, { env });
 
     triggerHotkey("control+k");
     await nextTick();
     assert.containsOnce(target, ".o_command");
+
     assert.deepEqual(target.querySelector(".o_command").textContent, "Take the throne");
 
     await click(target, ".o_command");
     assert.verifySteps(["Hodor"]);
 
-    testComponent.unmount();
+    destroy(comp);
     triggerHotkey("control+k");
     await nextTick();
     assert.containsNone(target, ".o_command");
@@ -143,7 +144,7 @@ QUnit.test("useCommand hook when the activeElement change", async (assert) => {
     }
     OtherComponent.template = xml`<div></div>`;
 
-    await mount(MyComponent, { env, target });
+    await mount(MyComponent, target, { env });
     triggerHotkey("control+k");
     await nextTick();
     assert.containsN(target, ".o_command", 2);
@@ -153,7 +154,7 @@ QUnit.test("useCommand hook when the activeElement change", async (assert) => {
     );
     triggerHotkey("escape");
 
-    await mount(OtherComponent, { env, target });
+    await mount(OtherComponent, target, { env });
 
     triggerHotkey("control+k");
     await nextTick();
@@ -204,7 +205,7 @@ QUnit.test("global command with hotkey", async (assert) => {
         }
     }
     MyComponent.template = xml`<div></div>`;
-    await mount(MyComponent, { env, target });
+    await mount(MyComponent, target, { env });
 
     triggerHotkey("a");
     await nextTick();
@@ -230,7 +231,7 @@ QUnit.test("data-hotkey added to command palette", async (assert) => {
       <TestComponent />
     </div>
   `;
-    testComponent = await mount(MyComponent, { env, target });
+    await mount(MyComponent, target, { env });
 
     // Open palette
     triggerHotkey("control+k");
@@ -292,7 +293,7 @@ QUnit.test("access to hotkeys from the command palette", async (assert) => {
       <TestComponent />
     </div>
   `;
-    testComponent = await mount(MyComponent, { env, target });
+    await mount(MyComponent, target, { env });
 
     // Open palette
     triggerHotkey("control+k");
@@ -333,7 +334,7 @@ QUnit.test("access to hotkeys from the command palette", async (assert) => {
 QUnit.test("can be searched", async (assert) => {
     assert.expect(4);
 
-    testComponent = await mount(TestComponent, { env, target });
+    await mount(TestComponent, target, { env });
 
     // Register some commands
     function action() {}
@@ -402,7 +403,7 @@ QUnit.test("configure the empty message based on the namespace", async (assert)
         emptyMessage: "Empty @",
     });
 
-    testComponent = await mount(TestComponent, { env, target });
+    await mount(TestComponent, target, { env });
 
     // Open palette
     triggerHotkey("control+k");
@@ -452,7 +453,7 @@ QUnit.test("footer displays the right tips", async (assert) => {
         name: "FirstName",
     });
 
-    testComponent = await mount(TestComponent, { env, target });
+    await mount(TestComponent, target, { env });
 
     // Open palette
     triggerHotkey("control+k");
@@ -513,7 +514,7 @@ QUnit.test("defined multiple providers with the same namespace", async (assert)
             })),
     });
 
-    testComponent = await mount(TestComponent, { env, target });
+    await mount(TestComponent, target, { env });
 
     // Open palette
     triggerHotkey("control+k");
@@ -557,7 +558,7 @@ QUnit.test("can switch between command providers", async (assert) => {
             })),
     });
 
-    testComponent = await mount(TestComponent, { env, target });
+    await mount(TestComponent, target, { env });
 
     // Open palette
     triggerHotkey("control+k");
@@ -622,7 +623,7 @@ QUnit.test("multi level commands", async (assert) => {
             })),
     });
 
-    testComponent = await mount(TestComponent, { env, target });
+    await mount(TestComponent, target, { env });
 
     // Open palette
     triggerHotkey("control+k");
@@ -696,7 +697,7 @@ QUnit.test("multi level commands with hotkey", async (assert) => {
         ],
     });
 
-    testComponent = await mount(TestComponent, { env, target });
+    await mount(TestComponent, target, { env });
 
     // Open palette
     triggerHotkey("control+k");
@@ -737,7 +738,7 @@ QUnit.test("multi level commands with hotkey", async (assert) => {
 });
 
 QUnit.test("command categories", async (assert) => {
-    testComponent = await mount(TestComponent, { env, target });
+    await mount(TestComponent, target, { env });
 
     // Register some commands
     function action() {}
@@ -776,7 +777,7 @@ QUnit.test("data-command-category", async (assert) => {
       <TestComponent />
     </div>
   `;
-    testComponent = await mount(MyComponent, { env, target });
+    await mount(MyComponent, target, { env });
 
     // Open palette
     triggerHotkey("control+k");
@@ -811,7 +812,7 @@ QUnit.test("display shortcuts correctly for non-MacOS ", async (assert) => {
     </div>
   `;
 
-    testComponent = await mount(MyComponent, { env, target });
+    await mount(MyComponent, target, { env });
 
     // Register some commands
     function action() {}
@@ -852,7 +853,7 @@ QUnit.test("display shortcuts correctly for MacOS ", async (assert) => {
         </div>
     `;
 
-    testComponent = await mount(MyComponent, { env, target });
+    await mount(MyComponent, target, { env });
 
     // Register some commands
     function action() {}
@@ -894,7 +895,7 @@ QUnit.test(
     </div>
   `;
 
-        testComponent = await mount(MyComponent, { env, target });
+        await mount(MyComponent, target, { env });
         // Open palette
         triggerHotkey("control+k");
         await nextTick();
@@ -927,7 +928,7 @@ QUnit.test("display shortcuts correctly for MacOS with a new overlayModifier", a
     </div>
   `;
 
-    testComponent = await mount(MyComponent, { env, target });
+    await mount(MyComponent, target, { env });
     // Open palette
     triggerHotkey("control+k");
     await nextTick();
diff --git a/addons/web/static/tests/core/commands/menu_provider_tests.js b/addons/web/static/tests/core/commands/menu_provider_tests.js
index 1265cd01831..6d0a99cf7a1 100644
--- a/addons/web/static/tests/core/commands/menu_provider_tests.js
+++ b/addons/web/static/tests/core/commands/menu_provider_tests.js
@@ -3,15 +3,16 @@
 import { createWebClient, getActionManagerServerData } from "@web/../tests/webclient/helpers";
 import { browser } from "@web/core/browser/browser";
 import { registry } from "@web/core/registry";
-import { click, nextTick, patchWithCleanup, triggerHotkey } from "../../helpers/utils";
+import { click, getFixture, nextTick, patchWithCleanup, triggerHotkey } from "../../helpers/utils";
 import { editSearchBar } from "./command_service_tests";
 
 let serverData;
+let target;
 QUnit.module("Menu Command Provider", {
     async beforeEach() {
         patchWithCleanup(browser, {
             clearTimeout: () => {},
-            setTimeout: (later, wait) => {
+            setTimeout: (later) => {
                 later();
             },
         });
@@ -62,75 +63,77 @@ QUnit.module("Menu Command Provider", {
             type: "ir.actions.client",
             params: { description: "Report" },
         };
+
+        target = getFixture();
     },
     afterEach() {},
 });
 
 QUnit.test("displays only apps if the search value is '/'", async (assert) => {
-    const webClient = await createWebClient({ serverData });
-    assert.containsNone(webClient, ".o_menu_brand");
+    await createWebClient({ serverData });
+    assert.containsNone(target, ".o_menu_brand");
 
     triggerHotkey("control+k");
     await nextTick();
     await editSearchBar("/");
-    assert.containsOnce(webClient, ".o_command_palette");
-    assert.containsOnce(webClient, ".o_command_category");
-    assert.containsN(webClient, ".o_command", 2);
+    assert.containsOnce(target, ".o_command_palette");
+    assert.containsOnce(target, ".o_command_category");
+    assert.containsN(target, ".o_command", 2);
     assert.deepEqual(
-        [...webClient.el.querySelectorAll(".o_command")].map((el) => el.textContent),
+        [...target.querySelectorAll(".o_command")].map((el) => el.textContent),
         ["Contact", "Sales"]
     );
 });
 
 QUnit.test("displays apps and menu items if the search value is not only '/'", async (assert) => {
-    const webClient = await createWebClient({ serverData });
+    await createWebClient({ serverData });
 
     triggerHotkey("control+k");
     await nextTick();
     await editSearchBar("/sal");
-    assert.containsOnce(webClient, ".o_command_palette");
-    assert.containsN(webClient, ".o_command", 3);
+    assert.containsOnce(target, ".o_command_palette");
+    assert.containsN(target, ".o_command", 3);
     assert.deepEqual(
-        [...webClient.el.querySelectorAll(".o_command")].map((el) => el.textContent),
+        [...target.querySelectorAll(".o_command")].map((el) => el.textContent),
         ["Sales", "Sales / Info", "Sales / Report"]
     );
 });
 
 QUnit.test("opens an app", async (assert) => {
-    const webClient = await createWebClient({ serverData });
-    assert.containsNone(webClient, ".o_menu_brand");
+    await createWebClient({ serverData });
+    assert.containsNone(target, ".o_menu_brand");
 
     triggerHotkey("control+k");
     await nextTick();
     await editSearchBar("/");
-    assert.containsOnce(webClient, ".o_command_palette");
+    assert.containsOnce(target, ".o_command_palette");
 
     triggerHotkey("enter");
     await nextTick();
     await nextTick();
-    assert.strictEqual(webClient.el.querySelector(".o_menu_brand").textContent, "Contact");
+    assert.strictEqual(target.querySelector(".o_menu_brand").textContent, "Contact");
     assert.strictEqual(
-        webClient.el.querySelector(".test_client_action").textContent,
+        target.querySelector(".test_client_action").textContent,
         " ClientAction_Id 1"
     );
 });
 
 QUnit.test("opens a menu items", async (assert) => {
-    const webClient = await createWebClient({ serverData });
-    assert.containsNone(webClient, ".o_menu_brand");
+    await createWebClient({ serverData });
+    assert.containsNone(target, ".o_menu_brand");
 
     triggerHotkey("control+k");
     await nextTick();
     await editSearchBar("/sal");
-    assert.containsOnce(webClient, ".o_command_palette");
-    assert.containsN(webClient, ".o_command_category", 2);
+    assert.containsOnce(target, ".o_command_palette");
+    assert.containsN(target, ".o_command_category", 2);
 
-    click(webClient.el, "#o_command_2");
+    click(target, "#o_command_2");
     await nextTick();
     await nextTick();
-    assert.strictEqual(webClient.el.querySelector(".o_menu_brand").textContent, "Sales");
+    assert.strictEqual(target.querySelector(".o_menu_brand").textContent, "Sales");
     assert.strictEqual(
-        webClient.el.querySelector(".test_client_action").textContent,
+        target.querySelector(".test_client_action").textContent,
         " ClientAction_Report"
     );
 });
diff --git a/addons/web/static/tests/core/datepicker_tests.js b/addons/web/static/tests/core/datepicker_tests.js
index 5aa51964f11..ed4fd79b1d1 100644
--- a/addons/web/static/tests/core/datepicker_tests.js
+++ b/addons/web/static/tests/core/datepicker_tests.js
@@ -1,19 +1,19 @@
 /** @odoo-module **/
 
+import CustomFilterItem from "web.CustomFilterItem";
+import ActionModel from "web.ActionModel";
 import { DatePicker, DateTimePicker } from "@web/core/datepicker/datepicker";
 import { registry } from "@web/core/registry";
 import { uiService } from "@web/core/ui/ui_service";
+import { editSelect } from "web.test_utils_fields";
+import { createComponent } from "web.test_utils";
 import { registerCleanup } from "../helpers/cleanup";
 import { makeTestEnv } from "../helpers/mock_env";
 import { makeFakeLocalizationService } from "../helpers/mock_services";
-import { click, getFixture, triggerEvent } from "../helpers/utils";
-import CustomFilterItem from 'web.CustomFilterItem';
-import ActionModel from 'web.ActionModel';
-import { applyFilter, toggleMenu } from '@web/../tests/search/helpers';
-import { editSelect } from 'web.test_utils_fields';
-import { createComponent } from 'web.test_utils';
+import { click, destroy, getFixture, mount, triggerEvent } from "../helpers/utils";
+import { applyFilter, toggleMenu } from "@web/../tests/search/helpers";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 const { DateTime } = luxon;
 const serviceRegistry = registry.category("services");
 
@@ -40,12 +40,10 @@ const mountPicker = async (Picker, props) => {
     `;
 
     const env = await makeTestEnv();
-    const target = getFixture();
     if (!props.onDateTimeChanged) {
         props.onDateTimeChanged = () => {};
     }
-    const parent = await mount(Parent, { env, props: { Picker, props }, target });
-    registerCleanup(() => parent.destroy());
+    const parent = await mount(Parent, getFixture(), { env, props: { Picker, props } });
     return parent;
 };
 
@@ -429,23 +427,27 @@ QUnit.module("Components", () => {
         assert.strictEqual(input.value, "12:30:01 1997/01/09");
     });
 
-    QUnit.test('custom filter date', async function (assert) {
+    QUnit.test("custom filter date", async function (assert) {
         assert.expect(3);
         class MockedSearchModel extends ActionModel {
             dispatch(method, ...args) {
-                assert.strictEqual(method, 'createNewFilters');
+                assert.strictEqual(method, "createNewFilters");
                 const preFilters = args[0];
                 const preFilter = preFilters[0];
-                assert.strictEqual(preFilter.description,
+                assert.strictEqual(
+                    preFilter.description,
                     'A date is equal to "05/05/2005"',
-                    "description should be in localized format");
-                assert.deepEqual(preFilter.domain,
+                    "description should be in localized format"
+                );
+                assert.deepEqual(
+                    preFilter.domain,
                     '[["date_field","=","2005-05-05"]]',
-                    "domain should be in UTC format");
+                    "domain should be in UTC format"
+                );
             }
         }
         const searchModel = new MockedSearchModel();
-        const date_field = { name: 'date_field', string: "A date", type: 'date', searchable: true };
+        const date_field = { name: "date_field", string: "A date", type: "date", searchable: true };
         const cfi = await createComponent(CustomFilterItem, {
             props: {
                 fields: { date_field },
@@ -453,11 +455,10 @@ QUnit.module("Components", () => {
             env: { searchModel },
         });
         await toggleMenu(cfi, "Add Custom Filter");
-        await editSelect(cfi.el.querySelector('.o_generator_menu_field'), 'date_field');
-        const valueInput = cfi.el.querySelector('.o_generator_menu_value .o_input');
+        await editSelect(cfi.el.querySelector(".o_generator_menu_field"), "date_field");
+        const valueInput = cfi.el.querySelector(".o_generator_menu_value .o_input");
         await click(valueInput);
-        await editSelect(valueInput, '05/05/2005');
+        await editSelect(valueInput, "05/05/2005");
         await applyFilter(cfi);
-        cfi.destroy();
     });
 });
diff --git a/addons/web/static/tests/core/debug/debug_manager_tests.js b/addons/web/static/tests/core/debug/debug_manager_tests.js
index 1b25ad93117..7ff342f7694 100644
--- a/addons/web/static/tests/core/debug/debug_manager_tests.js
+++ b/addons/web/static/tests/core/debug/debug_manager_tests.js
@@ -10,7 +10,6 @@ import { uiService } from "@web/core/ui/ui_service";
 import { useSetupView } from "@web/views/helpers/view_hook";
 import { ActionDialog } from "@web/webclient/actions/action_dialog";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
-import { registerCleanup } from "../../helpers/cleanup";
 import { makeTestEnv, prepareRegistriesWithCleanup } from "../../helpers/mock_env";
 import {
     fakeCommandService,
@@ -18,12 +17,18 @@ import {
     makeFakeLocalizationService,
     makeFakeUserService,
 } from "../../helpers/mock_services";
-import { click, getFixture, legacyExtraNextTick, patchWithCleanup } from "../../helpers/utils";
+import {
+    click,
+    getFixture,
+    legacyExtraNextTick,
+    mount,
+    patchWithCleanup,
+} from "../../helpers/utils";
 import { createWebClient, doAction, getActionManagerServerData } from "../../webclient/helpers";
 import { openViewItem } from "@web/webclient/debug_items";
 import { editSearchView, editView } from "@web/views/debug_items";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 
 export class DebugMenuParent extends Component {
     setup() {
@@ -100,8 +105,7 @@ QUnit.module("DebugMenu", (hooks) => {
                 return null;
             });
         const env = await makeTestEnv(testConfig);
-        const debugManager = await mount(DebugMenuParent, { env, target });
-        registerCleanup(() => debugManager.destroy());
+        const debugManager = await mount(DebugMenuParent, target, { env });
         let debugManagerEl = debugManager.el;
         await click(debugManager.el.querySelector("button.dropdown-toggle"));
         debugManagerEl = debugManager.el;
@@ -157,8 +161,7 @@ QUnit.module("DebugMenu", (hooks) => {
                 };
             });
         const env = await makeTestEnv(testConfig);
-        const debugManager = await mount(DebugMenuParent, { env, target });
-        registerCleanup(() => debugManager.destroy());
+        const debugManager = await mount(DebugMenuParent, target, { env });
         await click(debugManager.el.querySelector("button.dropdown-toggle"));
         const items = [...debugManager.el.querySelectorAll(".dropdown-menu .dropdown-item")];
         assert.deepEqual(
@@ -169,14 +172,10 @@ QUnit.module("DebugMenu", (hooks) => {
 
     QUnit.test("Don't display the DebugMenu if debug mode is disabled", async (assert) => {
         const env = await makeTestEnv(testConfig);
-        const actionDialog = await mount(ActionDialog, {
+        await mount(ActionDialog, target, {
             env,
-            target,
             props: { close: () => {} },
         });
-        registerCleanup(() => {
-            actionDialog.destroy();
-        });
         assert.containsOnce(target, ".o_dialog");
         assert.containsNone(target, ".o_dialog .o_debug_manager .oi-debug");
     });
@@ -226,14 +225,10 @@ QUnit.module("DebugMenu", (hooks) => {
             }
             patchWithCleanup(odoo, { debug: "1" });
             const env = await makeTestEnv(testConfig);
-            const actionDialog = await mount(WithCustom, {
+            await mount(WithCustom, target, {
                 env,
-                target,
                 props: { close: () => {} },
             });
-            registerCleanup(() => {
-                actionDialog.destroy();
-            });
             assert.containsOnce(target, ".o_dialog");
             assert.containsOnce(target, ".o_dialog .o_debug_manager .oi-debug");
             await click(target, ".o_dialog .o_debug_manager button");
@@ -275,8 +270,7 @@ QUnit.module("DebugMenu", (hooks) => {
         });
         debugRegistry.category("default").add("regenerateAssets", regenerateAssets);
         const env = await makeTestEnv(testConfig);
-        const debugManager = await mount(DebugMenuParent, { env, target });
-        registerCleanup(() => debugManager.destroy());
+        const debugManager = await mount(DebugMenuParent, target, { env });
         await click(debugManager.el.querySelector("button.dropdown-toggle"));
         assert.containsOnce(debugManager.el, ".dropdown-menu .dropdown-item");
         const item = debugManager.el.querySelector(".dropdown-menu .dropdown-item");
@@ -326,16 +320,16 @@ QUnit.module("DebugMenu", (hooks) => {
             "partner,1,form": `<form><div class="some_view"/></form>`,
         });
 
-        const webClient = await createWebClient({ serverData, mockRPC });
-        await click(webClient.el.querySelector(".o_debug_manager button"));
-        await click(webClient.el.querySelector(".o_debug_manager .dropdown-item"));
+        await createWebClient({ serverData, mockRPC });
+        await click(target.querySelector(".o_debug_manager button"));
+        await click(target.querySelector(".o_debug_manager .dropdown-item"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".modal .o_list_view");
+        assert.containsOnce(target, ".modal .o_list_view");
 
-        await click(webClient.el.querySelector(".modal .o_list_view .o_data_row"));
+        await click(target.querySelector(".modal .o_list_view .o_data_row"));
         await legacyExtraNextTick();
-        assert.containsNone(webClient, ".modal");
-        assert.containsOnce(webClient, ".some_view");
+        assert.containsNone(target, ".modal");
+        assert.containsOnce(target, ".some_view");
     });
 
     QUnit.test("can edit a pivot view", async (assert) => {
@@ -371,12 +365,12 @@ QUnit.module("DebugMenu", (hooks) => {
 
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 1234);
-        await click(webClient.el.querySelector(".o_debug_manager button"));
-        await click(webClient.el.querySelector(".o_debug_manager .dropdown-item"));
+        await click(target.querySelector(".o_debug_manager button"));
+        await click(target.querySelector(".o_debug_manager .dropdown-item"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".modal .o_form_view");
+        assert.containsOnce(target, ".modal .o_form_view");
         assert.strictEqual(
-            webClient.el.querySelector(".modal .o_form_view .o_field_widget[name=id]").value,
+            target.querySelector(".modal .o_form_view .o_field_widget[name=id]").value,
             "18"
         );
     });
@@ -407,12 +401,12 @@ QUnit.module("DebugMenu", (hooks) => {
 
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 1);
-        await click(webClient.el.querySelector(".o_debug_manager button"));
-        await click(webClient.el.querySelector(".o_debug_manager .dropdown-item"));
+        await click(target.querySelector(".o_debug_manager button"));
+        await click(target.querySelector(".o_debug_manager .dropdown-item"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".modal .o_form_view");
+        assert.containsOnce(target, ".modal .o_form_view");
         assert.strictEqual(
-            webClient.el.querySelector(".modal .o_form_view .o_field_widget[name=id]").value,
+            target.querySelector(".modal .o_form_view .o_field_widget[name=id]").value,
             "293"
         );
     });
@@ -465,14 +459,14 @@ QUnit.module("DebugMenu", (hooks) => {
 
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 1);
-        assert.containsOnce(webClient, ".o-toy-view");
+        assert.containsOnce(target, ".o-toy-view");
 
-        await click(webClient.el.querySelector(".o_debug_manager button"));
-        await click(webClient.el.querySelector(".o_debug_manager .dropdown-item"));
+        await click(target.querySelector(".o_debug_manager button"));
+        await click(target.querySelector(".o_debug_manager .dropdown-item"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".modal .o_form_view");
+        assert.containsOnce(target, ".modal .o_form_view");
         assert.strictEqual(
-            webClient.el.querySelector(".modal .o_form_view .o_field_widget[name=id]").value,
+            target.querySelector(".modal .o_form_view .o_field_widget[name=id]").value,
             "293"
         );
     });
@@ -497,8 +491,8 @@ QUnit.module("DebugMenu", (hooks) => {
             const webClient = await createWebClient({ serverData, mockRPC });
             // opens a form view in a dialog without a control panel.
             await doAction(webClient, 5);
-            await click(webClient.el.querySelector(".o_dialog .o_debug_manager button"));
-            assert.containsNone(webClient, ".o_debug_manager .dropdown-item");
+            await click(target.querySelector(".o_dialog .o_debug_manager button"));
+            assert.containsNone(target, ".o_debug_manager .dropdown-item");
         }
     );
 });
diff --git a/addons/web/static/tests/core/dialog_service_tests.js b/addons/web/static/tests/core/dialog_service_tests.js
index ddf3a47db9e..fb308ceccd6 100644
--- a/addons/web/static/tests/core/dialog_service_tests.js
+++ b/addons/web/static/tests/core/dialog_service_tests.js
@@ -10,14 +10,20 @@ import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { registerCleanup } from "../helpers/cleanup";
 import { clearRegistryWithCleanup, makeTestEnv } from "../helpers/mock_env";
 import { makeFakeLocalizationService, makeFakeRPCService } from "../helpers/mock_services";
-import { click, getFixture, makeDeferred, nextTick, patchWithCleanup } from "../helpers/utils";
+import {
+    click,
+    getFixture,
+    makeDeferred,
+    mount,
+    nextTick,
+    patchWithCleanup,
+} from "../helpers/utils";
 import { Dialog } from "../../src/core/dialog/dialog";
 
-const { Component, mount, xml } = owl;
+const { Component, onMounted, xml } = owl;
 
 let env;
 let target;
-let pseudoWebClient;
 const serviceRegistry = registry.category("services");
 const mainComponentRegistry = registry.category("main_components");
 
@@ -47,15 +53,12 @@ QUnit.module("DialogManager", {
 
         env = await makeTestEnv();
     },
-    afterEach() {
-        pseudoWebClient.destroy();
-    },
 });
 QUnit.test("Simple rendering with a single dialog", async (assert) => {
     assert.expect(4);
     class CustomDialog extends Dialog {}
     CustomDialog.title = "Welcome";
-    pseudoWebClient = await mount(PseudoWebClient, { env, target });
+    await mount(PseudoWebClient, target, { env });
     assert.containsNone(target, ".o_dialog_container .o_dialog");
     env.services.dialog.add(CustomDialog);
     await nextTick();
@@ -71,7 +74,7 @@ QUnit.test("Simple rendering and close a single dialog", async (assert) => {
     class CustomDialog extends Dialog {}
     CustomDialog.title = "Welcome";
 
-    pseudoWebClient = await mount(PseudoWebClient, { env, target });
+    await mount(PseudoWebClient, target, { env });
     assert.containsNone(target, ".o_dialog_container .o_dialog");
 
     const removeDialog = env.services.dialog.add(CustomDialog);
@@ -97,7 +100,7 @@ QUnit.test("rendering with two dialogs", async (assert) => {
             this.title = this.props.title;
         }
     }
-    pseudoWebClient = await mount(PseudoWebClient, { env, target });
+    await mount(PseudoWebClient, target, { env });
     assert.containsNone(target, ".o_dialog_container .o_dialog");
     env.services.dialog.add(CustomDialog, { title: "Hello" });
     await nextTick();
@@ -123,7 +126,7 @@ QUnit.test("multiple dialogs can become the UI active element", async (assert) =
             this.title = this.props.title;
         }
     }
-    pseudoWebClient = await mount(PseudoWebClient, { env, target });
+    await mount(PseudoWebClient, target, { env });
 
     env.services.dialog.add(CustomDialog, { title: "Hello" });
     await nextTick();
@@ -168,7 +171,7 @@ QUnit.test("Interactions between multiple dialogs", async (assert) => {
             this.title = this.props.title;
         }
     }
-    pseudoWebClient = await mount(PseudoWebClient, { env, target });
+    await mount(PseudoWebClient, target, { env });
 
     env.services.dialog.add(CustomDialog, { title: "Hello" });
     await nextTick();
@@ -222,9 +225,11 @@ QUnit.test("dialog component crashes", async (assert) => {
 
     const prom = makeDeferred();
     patchWithCleanup(ErrorDialog.prototype, {
-        mounted() {
+        setup() {
             this._super();
-            prom.resolve();
+            onMounted(() => {
+                prom.resolve();
+            });
         },
     });
 
@@ -246,12 +251,12 @@ QUnit.test("dialog component crashes", async (assert) => {
     serviceRegistry.add("error", errorService);
     serviceRegistry.add("localization", makeFakeLocalizationService());
 
-    pseudoWebClient = await mount(PseudoWebClient, { env, target });
+    await mount(PseudoWebClient, target, { env });
 
     env.services.dialog.add(FailingDialog);
     await prom;
 
     assert.verifySteps(["error"]);
-    assert.containsOnce(pseudoWebClient, ".modal");
-    assert.containsOnce(pseudoWebClient, ".modal .o_dialog_error");
+    assert.containsOnce(target, ".modal");
+    assert.containsOnce(target, ".modal .o_dialog_error");
 });
diff --git a/addons/web/static/tests/core/dialog_tests.js b/addons/web/static/tests/core/dialog_tests.js
index a7699bf561d..668f9a67eec 100644
--- a/addons/web/static/tests/core/dialog_tests.js
+++ b/addons/web/static/tests/core/dialog_tests.js
@@ -1,15 +1,15 @@
 /** @odoo-module **/
 
 import { registry } from "@web/core/registry";
-import { useService, useEffect } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { uiService } from "@web/core/ui/ui_service";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { Dialog } from "@web/core/dialog/dialog";
 import { makeTestEnv } from "../helpers/mock_env";
-import { click, getFixture } from "../helpers/utils";
+import { click, destroy, getFixture, mount } from "../helpers/utils";
 import { makeFakeDialogService } from "../helpers/mock_services";
 
-const { Component, mount, useState, xml } = owl;
+const { Component, useEffect, useState, xml } = owl;
 const serviceRegistry = registry.category("services");
 let parent;
 let target;
@@ -27,15 +27,22 @@ class SimpleDialog extends Dialog {
         this.size = "size" in this.props ? this.props.size : this.constructor.size;
         this.fullscreen =
             "fullscreen" in this.props ? this.props.fullscreen : this.constructor.fullscreen;
-        // Forward modal ref to parent through prop
-        useEffect(() => {
-            if (this.props.modalRef) {
-                this.props.modalRef.el = this.modalRef.el;
+
+        const setRef = () => {
+            if (this.props.setModalRef) {
+                this.props.setModalRef(this.modalRef.el);
             }
-        });
+        };
+
+        useEffect(setRef);
     }
 }
 SimpleDialog.bodyTemplate = xml`<t t-slot="default"/>`;
+SimpleDialog.props = {
+    ...Dialog.props,
+    close: { type: Function, optional: true },
+};
+SimpleDialog.defaultProps = { close: () => {} };
 
 QUnit.module("Components", (hooks) => {
     hooks.beforeEach(async () => {
@@ -46,7 +53,6 @@ QUnit.module("Components", (hooks) => {
     });
     hooks.afterEach(() => {
         if (parent) {
-            parent.unmount();
             parent = undefined;
         }
     });
@@ -64,7 +70,7 @@ QUnit.module("Components", (hooks) => {
             `;
 
         const env = await makeTestEnv();
-        parent = await mount(Parent, { env, target, props: {} });
+        parent = await mount(Parent, target, { env, props: {} });
         assert.containsOnce(target, ".o_dialog");
         assert.containsOnce(
             target,
@@ -101,7 +107,7 @@ QUnit.module("Components", (hooks) => {
           `;
         Parent.components = { SimpleDialog };
         const env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.containsN(target, ".o_dialog", 2);
         assert.deepEqual(
             [...target.querySelectorAll("header .modal-title")].map((el) => el.textContent),
@@ -129,7 +135,7 @@ QUnit.module("Components", (hooks) => {
             </MyDialog>
         `;
         Parent.components = { MyDialog };
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.containsOnce(target, ".o_dialog");
         await click(target, ".o_dialog header button.close");
         assert.verifySteps(["close"]);
@@ -153,7 +159,7 @@ QUnit.module("Components", (hooks) => {
                 </MyDialog>
             `;
             Parent.components = { MyDialog };
-            parent = await mount(Parent, { env, target });
+            parent = await mount(Parent, target, { env });
             assert.containsOnce(target, ".o_dialog");
             await click(target, ".o_dialog footer button");
             assert.verifySteps(["close"]);
@@ -163,6 +169,11 @@ QUnit.module("Components", (hooks) => {
     QUnit.test("render custom footer buttons is possible", async function (assert) {
         assert.expect(2);
         class SimpleButtonsDialog extends Dialog {}
+        SimpleButtonsDialog.props = {
+            ...Dialog.props,
+            close: { type: Function, optional: true },
+        };
+        SimpleButtonsDialog.defaultProps = { close: () => {} };
         SimpleButtonsDialog.footerTemplate = xml`
             <div>
                 <button class="btn btn-primary">The First Button</button>
@@ -170,8 +181,8 @@ QUnit.module("Components", (hooks) => {
             </div>
           `;
         class Parent extends Component {
-            constructor() {
-                super(...arguments);
+            setup() {
+                super.setup();
                 this.state = useState({
                     displayDialog: true,
                 });
@@ -184,7 +195,7 @@ QUnit.module("Components", (hooks) => {
           `;
         Parent.components = { SimpleButtonsDialog };
         const env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.containsOnce(target, ".o_dialog");
         assert.containsN(target, ".o_dialog footer button", 2);
     });
@@ -194,7 +205,7 @@ QUnit.module("Components", (hooks) => {
         class SubComponent extends Component {
             _onClick() {
                 assert.step("subcomponent-clicked");
-                this.trigger("subcomponent-clicked");
+                this.props.onClicked();
             }
         }
         SubComponent.template = xml`
@@ -208,11 +219,11 @@ QUnit.module("Components", (hooks) => {
         Parent.components = { SimpleDialog, SubComponent };
         Parent.template = xml`
               <SimpleDialog>
-                  <SubComponent text="'Wow(l) Effect'" t-on-subcomponent-clicked="_onSubcomponentClicked"/>
+                  <SubComponent text="'Wow(l) Effect'" onClicked="_onSubcomponentClicked"/>
               </SimpleDialog>
           `;
         const env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.containsOnce(target, ".o_dialog");
         assert.containsOnce(target, ".o_dialog main .o_subcomponent");
         assert.strictEqual(target.querySelector(".o_subcomponent").textContent, "Wow(l) Effect");
@@ -228,7 +239,7 @@ QUnit.module("Components", (hooks) => {
           `;
         const env = await makeTestEnv();
         Parent.components = { SimpleDialog };
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.containsOnce(target, ".o_dialog");
         assert.containsNone(target, ".o_dialog header");
         assert.containsOnce(target, "main", "a dialog has always a main node");
@@ -247,7 +258,7 @@ QUnit.module("Components", (hooks) => {
       </div>`;
         Parent.components = { SimpleDialog };
         const env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.containsN(target, ".o_dialog", 4);
         assert.containsOnce(
             target,
@@ -275,7 +286,7 @@ QUnit.module("Components", (hooks) => {
           `;
         Parent.components = { SimpleDialog };
         const env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.containsOnce(target, ".o_dialog");
         assert.hasClass(target.querySelector(".o_dialog .modal"), "o_modal_full");
     });
@@ -285,27 +296,31 @@ QUnit.module("Components", (hooks) => {
         class Parent extends Component {
             setup() {
                 this.ui = useService("ui");
-                this.modalRef = { el: null };
+                this.modal = null;
                 assert.strictEqual(
                     this.ui.activeElement,
                     document,
                     "UI active element should be the default (document) as Parent is not mounted yet"
                 );
+                owl.onMounted(() => {
+                    assert.strictEqual(
+                        this.ui.activeElement,
+                        this.modal,
+                        "UI active element should be the dialog modal"
+                    );
+                });
             }
-            mounted() {
-                assert.strictEqual(
-                    this.ui.activeElement,
-                    this.modalRef.el,
-                    "UI active element should be the dialog modal"
-                );
+            setModalRef(modalEl) {
+                this.modal = modalEl;
             }
         }
         const env = await makeTestEnv();
-        Parent.template = xml`<div><SimpleDialog modalRef="modalRef"/></div>`;
+        Parent.template = xml`<div><SimpleDialog setModalRef="el => this.setModalRef(el)"/></div>`;
         Parent.components = { SimpleDialog };
-        parent = await mount(Parent, { env, target });
 
-        parent.unmount();
+        const parent = await mount(Parent, target, { env });
+        destroy(parent);
+
         assert.strictEqual(
             env.services.ui.activeElement,
             document,
diff --git a/addons/web/static/tests/core/dropdown_tests.js b/addons/web/static/tests/core/dropdown_tests.js
index 1a36ddeecce..a2c2eb2975a 100644
--- a/addons/web/static/tests/core/dropdown_tests.js
+++ b/addons/web/static/tests/core/dropdown_tests.js
@@ -1,10 +1,11 @@
 /** @odoo-module **/
 
 import { browser } from "@web/core/browser/browser";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { registry } from "@web/core/registry";
 import { uiService } from "@web/core/ui/ui_service";
-import { DropdownItem } from "../../src/core/dropdown/dropdown_item";
 import { registerCleanup } from "../helpers/cleanup";
 import { makeTestEnv } from "../helpers/mock_env";
 import { makeFakeLocalizationService } from "../helpers/mock_services";
@@ -12,13 +13,14 @@ import {
     click,
     getFixture,
     makeDeferred,
+    mount,
     mouseEnter,
     nextTick,
     patchWithCleanup,
     triggerHotkey,
 } from "../helpers/utils";
 
-const { Component, mount, xml } = owl;
+const { App, Component, xml } = owl;
 const serviceRegistry = registry.category("services");
 
 let env;
@@ -30,7 +32,6 @@ QUnit.module("Components", ({ beforeEach }) => {
         serviceRegistry.add("hotkey", hotkeyService);
         serviceRegistry.add("ui", uiService);
         target = getFixture();
-        registerCleanup(() => parent.destroy());
         patchWithCleanup(browser, {
             setTimeout: (fn) => fn(),
             clearTimeout: () => {},
@@ -42,11 +43,12 @@ QUnit.module("Components", ({ beforeEach }) => {
     QUnit.test("can be rendered", async (assert) => {
         class Parent extends Component {}
         Parent.template = xml`<Dropdown/>`;
+        Parent.components = { Dropdown };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.strictEqual(
             parent.el.outerHTML,
-            '<div class="o-dropdown dropdown o-dropdown--no-caret"><button class="dropdown-toggle  "></button></div>'
+            '<div class="o-dropdown dropdown o-dropdown--no-caret"><button class="dropdown-toggle"></button></div>'
         );
         assert.containsOnce(parent.el, "button.dropdown-toggle");
         assert.containsNone(parent.el, ".dropdown-menu");
@@ -55,17 +57,19 @@ QUnit.module("Components", ({ beforeEach }) => {
     QUnit.test("DropdownItem can be rendered as <span/>", async (assert) => {
         class Parent extends Component {}
         Parent.template = xml`<DropdownItem>coucou</DropdownItem>`;
+        Parent.components = { DropdownItem };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.strictEqual(parent.el.outerHTML, '<span class="dropdown-item">coucou</span>');
     });
 
     QUnit.test("DropdownItem (with href prop) can be rendered as <a/>", async (assert) => {
         class Parent extends Component {}
         Parent.template = xml`<DropdownItem href="'#'">coucou</DropdownItem>`;
+        Parent.components = { DropdownItem };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
-        assert.strictEqual(parent.el.outerHTML, '<a href="#" class="dropdown-item">coucou</a>');
+        parent = await mount(Parent, target, { env });
+        assert.strictEqual(parent.el.outerHTML, '<a class="dropdown-item" href="#">coucou</a>');
     });
 
     QUnit.test("DropdownItem: prevents click default with href", async (assert) => {
@@ -84,11 +88,12 @@ QUnit.module("Components", ({ beforeEach }) => {
         class Parent extends Component {}
         Parent.template = xml`
             <Dropdown>
-                <DropdownItem class="link" href="'#'"/>
-                <DropdownItem class="nolink" />
+                <DropdownItem class="'link'" href="'#'"/>
+                <DropdownItem class="'nolink'" />
             </Dropdown>`;
+        Parent.components = { Dropdown, DropdownItem };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         // The item containing the link class contains an href prop,
         // which will turn it into <a href=> So it must be defaultPrevented
         // The other one not contain any href props, it must not be defaultPrevented,
@@ -102,12 +107,12 @@ QUnit.module("Components", ({ beforeEach }) => {
     QUnit.test("can be styled", async (assert) => {
         class Parent extends Component {}
         Parent.template = xml`
-        <Dropdown class="one" togglerClass="'two'" menuClass="'three'">
-            <DropdownItem class="four" />
-        </Dropdown>
-      `;
+        <Dropdown class="'one'" togglerClass="'two'" menuClass="'three'">
+            <DropdownItem class="'four'" />
+        </Dropdown>`;
+        Parent.components = { Dropdown, DropdownItem };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         await click(parent.el, "button.dropdown-toggle");
         assert.hasClass(parent.el, "dropdown one");
         const toggler = parent.el.querySelector(".dropdown-toggle");
@@ -131,8 +136,9 @@ QUnit.module("Components", ({ beforeEach }) => {
             }
         }
         Parent.template = xml`<Dropdown beforeOpen="beforeOpen"/>`;
+        Parent.components = { Dropdown };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         await click(parent.el, "button.dropdown-toggle");
         assert.verifySteps(["beforeOpen"]);
         assert.containsNone(parent.el, ".dropdown-menu");
@@ -154,8 +160,9 @@ QUnit.module("Components", ({ beforeEach }) => {
             }
         }
         Parent.template = xml`<Dropdown startOpen="true" beforeOpen="beforeOpen"/>`;
+        Parent.components = { Dropdown };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.verifySteps(["beforeOpen"]);
         assert.containsOnce(parent.el, ".dropdown-menu");
     });
@@ -168,8 +175,9 @@ QUnit.module("Components", ({ beforeEach }) => {
           <Dropdown/>
         </div>
       `;
+        Parent.components = { Dropdown };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         await click(parent.el, "button.dropdown-toggle");
         assert.containsOnce(parent.el, ".dropdown-menu");
         await click(parent.el, "div.outside");
@@ -183,8 +191,9 @@ QUnit.module("Components", ({ beforeEach }) => {
             <DropdownItem/>
         </Dropdown>
       `;
+        Parent.components = { Dropdown, DropdownItem };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         await click(parent.el, "button.dropdown-toggle");
         await click(parent.el, ".dropdown-menu .dropdown-item");
         assert.containsNone(parent.el, ".dropdown-menu");
@@ -201,8 +210,9 @@ QUnit.module("Components", ({ beforeEach }) => {
             <DropdownItem onSelected="() => onItemSelected(42)"/>
         </Dropdown>
       `;
+        Parent.components = { Dropdown, DropdownItem };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         await click(parent.el, "button.dropdown-toggle");
         await click(parent.el, ".dropdown-menu .dropdown-item");
     });
@@ -216,8 +226,9 @@ QUnit.module("Components", ({ beforeEach }) => {
             </Dropdown>
         </Dropdown>
       `;
+        Parent.components = { Dropdown };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         await click(parent.el, "button.dropdown-toggle:last-child");
         await mouseEnter(parent.el, "button.dropdown-toggle:last-child");
         await mouseEnter(parent.el, "button.dropdown-toggle:last-child");
@@ -233,8 +244,9 @@ QUnit.module("Components", ({ beforeEach }) => {
             </Dropdown>
         </Dropdown>
       `;
+        Parent.components = { Dropdown };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.containsN(parent.el, ".dropdown-menu", 3);
     });
 
@@ -250,8 +262,9 @@ QUnit.module("Components", ({ beforeEach }) => {
           </Dropdown>
         </div>
       `;
+        Parent.components = { Dropdown };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         await click(parent.el, "button.dropdown-toggle:last-child");
         await mouseEnter(parent.el, "button.dropdown-toggle:last-child");
         await mouseEnter(parent.el, "button.dropdown-toggle:last-child");
@@ -269,8 +282,9 @@ QUnit.module("Components", ({ beforeEach }) => {
             </Dropdown>
         </Dropdown>
       `;
+        Parent.components = { Dropdown, DropdownItem };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         await click(parent.el, "button.dropdown-toggle:last-child");
         await mouseEnter(parent.el, "button.dropdown-toggle:last-child");
         assert.containsN(parent.el, ".dropdown-menu", 2);
@@ -289,15 +303,16 @@ QUnit.module("Components", ({ beforeEach }) => {
         Parent.template = xml`
         <Dropdown>
             <Dropdown>
-                <DropdownItem class="item1" parentClosingMode="'none'" />
-                <DropdownItem class="item2" parentClosingMode="'closest'" />
-                <DropdownItem class="item3" parentClosingMode="'all'" />
-                <DropdownItem class="item4" />
+                <DropdownItem class="'item1'" parentClosingMode="'none'" />
+                <DropdownItem class="'item2'" parentClosingMode="'closest'" />
+                <DropdownItem class="'item3'" parentClosingMode="'all'" />
+                <DropdownItem class="'item4'" />
             </Dropdown>
         </Dropdown>
       `;
+        Parent.components = { Dropdown, DropdownItem };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         // Open the 2-level dropdowns
         await click(parent.el, "button.dropdown-toggle:last-child");
         await mouseEnter(parent.el, "button.dropdown-toggle:last-child");
@@ -324,28 +339,8 @@ QUnit.module("Components", ({ beforeEach }) => {
     });
 
     QUnit.test("multi-level dropdown: recursive template can be rendered", async (assert) => {
-        const recursiveTemplate = `
-        <Dropdown startOpen="true">
-            <t t-set-slot="toggler">
-                <t t-esc="name" />
-            </t>
-            <t t-foreach="items" t-as="item">
-
-              <t t-if="!item.children.length">
-                <DropdownItem t-esc="item.name" />
-              </t>
-
-              <t t-else="" t-call="recursive.Template">
-                <t t-set="name" t-value="item.name" />
-                <t t-set="items" t-value="item.children" />
-              </t>
-
-            </t>
-        </Dropdown>
-    `;
         class Parent extends Component {
-            constructor() {
-                super(...arguments);
+            setup() {
                 this.name = "foo";
                 this.items = [
                     {
@@ -376,9 +371,35 @@ QUnit.module("Components", ({ beforeEach }) => {
             }
         }
         Parent.template = "recursive.Template";
+        Parent.components = { Dropdown, DropdownItem };
         env = await makeTestEnv();
-        env.qweb.addTemplate("recursive.Template", recursiveTemplate);
-        parent = await mount(Parent, { env, target });
+        const app = new App(Parent, {
+            env,
+            templates: window.__OWL_TEMPLATES__,
+            test: true,
+        });
+        registerCleanup(() => app.destroy());
+        app.addTemplate(
+            "recursive.Template",
+            `<Dropdown startOpen="true">
+                <t t-set-slot="toggler">
+                    <t t-esc="name" />
+                </t>
+                <t t-foreach="items" t-as="item" t-key="item_index">
+
+                <t t-if="!item.children.length">
+                    <DropdownItem><t t-esc="item.name"/></DropdownItem>
+                </t>
+
+                <t t-else="" t-call="recursive.Template">
+                    <t t-set="name" t-value="item.name" />
+                    <t t-set="items" t-value="item.children" />
+                </t>
+
+                </t>
+            </Dropdown>`
+        );
+        parent = await app.mount(target);
         assert.deepEqual(
             [...parent.el.querySelectorAll("button,.dropdown-menu > .dropdown-item")].map(
                 (el) => el.textContent
@@ -417,14 +438,15 @@ QUnit.module("Components", ({ beforeEach }) => {
             }
             Parent.template = xml`
         <div>
-          <Dropdown class="one" />
-          <Dropdown class="two" beforeOpen="beforeOpen"/>
-          <Dropdown class="three" />
+          <Dropdown class="'one'" />
+          <Dropdown class="'two'" beforeOpen="beforeOpen"/>
+          <Dropdown class="'three'" />
           <div class="outside">OUTSIDE</div>
         </div>
       `;
+            Parent.components = { Dropdown };
             env = await makeTestEnv();
-            parent = await mount(Parent, { env, target });
+            parent = await mount(Parent, target, { env });
             // Click on ONE
             const one = parent.el.querySelector(".one");
             await click(one, "button");
@@ -466,13 +488,14 @@ QUnit.module("Components", ({ beforeEach }) => {
             class Parent extends Component {}
             Parent.template = xml`
         <div>
-          <div><Dropdown class="foo" /></div>
-          <Dropdown class="bar1" />
-          <Dropdown class="bar2" />
+          <div><Dropdown class="'foo'" /></div>
+          <Dropdown class="'bar1'" />
+          <Dropdown class="'bar2'" />
         </div>
       `;
+            Parent.components = { Dropdown };
             env = await makeTestEnv();
-            parent = await mount(Parent, { env, target });
+            parent = await mount(Parent, target, { env });
             // Click on FOO
             await click(parent.el, ".foo button");
             assert.containsOnce(parent.el, ".dropdown-menu");
@@ -491,13 +514,14 @@ QUnit.module("Components", ({ beforeEach }) => {
             class Parent extends Component {}
             Parent.template = xml`
         <div>
-          <div><Dropdown class="foo" /></div>
-          <Dropdown class="bar1" />
-          <Dropdown class="bar2" />
+          <div><Dropdown class="'foo'" /></div>
+          <Dropdown class="'bar1'" />
+          <Dropdown class="'bar2'" />
         </div>
       `;
+            Parent.components = { Dropdown };
             env = await makeTestEnv();
-            parent = await mount(Parent, { env, target });
+            parent = await mount(Parent, target, { env });
             // Click on BAR1
             await click(parent.el, ".bar1 button");
             assert.containsOnce(parent.el, ".dropdown-menu");
@@ -518,13 +542,14 @@ QUnit.module("Components", ({ beforeEach }) => {
         class Parent extends Component {}
         Parent.template = xml`
         <div>
-          <Dropdown class="one" manualOnly="true"/>
-          <Dropdown class="two" manualOnly="true"/>
+          <Dropdown class="'one'" manualOnly="true"/>
+          <Dropdown class="'two'" manualOnly="true"/>
           <div class="outside">OUTSIDE</div>
         </div>
       `;
+        Parent.components = { Dropdown };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         // Click on one
         await click(parent.el, ".one button");
         assert.containsOnce(parent.el, ".dropdown-menu");
@@ -555,13 +580,14 @@ QUnit.module("Components", ({ beforeEach }) => {
         }
         Parent.template = xml`
         <Dropdown hotkey="'m'">
-            <DropdownItem class="item1" onSelected="() => onItemSelected(1)">item1</DropdownItem>
-            <DropdownItem class="item2" hotkey="'2'" onSelected="() => onItemSelected(2)">item2</DropdownItem>
-            <DropdownItem class="item3" onSelected="() => onItemSelected(3)">item3</DropdownItem>
+            <DropdownItem class="'item1'" onSelected="() => onItemSelected(1)">item1</DropdownItem>
+            <DropdownItem class="'item2'" hotkey="'2'" onSelected="() => onItemSelected(2)">item2</DropdownItem>
+            <DropdownItem class="'item3'" onSelected="() => onItemSelected(3)">item3</DropdownItem>
         </Dropdown>
       `;
+        Parent.components = { Dropdown, DropdownItem };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.containsNone(parent.el, ".dropdown-menu", "menu is closed at start");
 
         triggerHotkey("m", true);
@@ -652,8 +678,9 @@ QUnit.module("Components", ({ beforeEach }) => {
                 </div>
             </div>`;
 
+        Parent.components = { Dropdown, DropdownItem };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.containsOnce(parent, ".dropdown");
         assert.containsNone(parent, ".dropdown .dropdown-menu");
         assert.containsNone(parent, ".dropdown button.dropdown-toggle");
@@ -670,21 +697,22 @@ QUnit.module("Components", ({ beforeEach }) => {
             }
         }
         Parent.template = xml`
-            <Dropdown class="first" hotkey="'1'">
-                <DropdownItem class="first-first" onSelected="() => onItemSelected('first-first')">O</DropdownItem>
-                <Dropdown class="second">
-                    <DropdownItem class="second-first" onSelected="() => onItemSelected('second-first')">O</DropdownItem>
-                    <Dropdown class="third">
-                        <DropdownItem class="third-first" onSelected="() => onItemSelected('third-first')">O</DropdownItem>
-                        <DropdownItem class="third-last" onSelected="() => onItemSelected('third-last')">O</DropdownItem>
+            <Dropdown class="'first'" hotkey="'1'">
+                <DropdownItem class="'first-first'" onSelected="() => onItemSelected('first-first')">O</DropdownItem>
+                <Dropdown class="'second'">
+                    <DropdownItem class="'second-first'" onSelected="() => onItemSelected('second-first')">O</DropdownItem>
+                    <Dropdown class="'third'">
+                        <DropdownItem class="'third-first'" onSelected="() => onItemSelected('third-first')">O</DropdownItem>
+                        <DropdownItem class="'third-last'" onSelected="() => onItemSelected('third-last')">O</DropdownItem>
                     </Dropdown>
-                    <DropdownItem class="second-last" onSelected="() => onItemSelected('second-last')">O</DropdownItem>
+                    <DropdownItem class="'second-last'" onSelected="() => onItemSelected('second-last')">O</DropdownItem>
                 </Dropdown>
-                <DropdownItem class="first-last" onSelected="() => onItemSelected('first-last')">O</DropdownItem>
+                <DropdownItem class="'first-last'" onSelected="() => onItemSelected('first-last')">O</DropdownItem>
             </Dropdown>
         `;
+        Parent.components = { Dropdown, DropdownItem };
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.containsNone(parent.el, ".dropdown-menu", "menus are closed at start");
 
         // Highlighting and selecting items
@@ -765,16 +793,17 @@ QUnit.module("Components", ({ beforeEach }) => {
         assert.expect(10);
         class Parent extends Component {}
         Parent.template = xml`
-            <Dropdown class="first" hotkey="'1'">
-                <DropdownItem class="first-first">O</DropdownItem>
-                <Dropdown class="second">
-                    <DropdownItem class="second-first">O</DropdownItem>
+            <Dropdown class="'first'" hotkey="'1'">
+                <DropdownItem class="'first-first'">O</DropdownItem>
+                <Dropdown class="'second'">
+                    <DropdownItem class="'second-first'">O</DropdownItem>
                 </Dropdown>
             </Dropdown>
         `;
+        Parent.components = { Dropdown, DropdownItem };
         serviceRegistry.add("localization", makeFakeLocalizationService({ direction: "rtl" }));
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.containsNone(parent.el, ".dropdown-menu", "menus are closed at start");
 
         // Highlighting and selecting items
@@ -813,11 +842,12 @@ QUnit.module("Components", ({ beforeEach }) => {
             Parent.template = xml`
                 <Dropdown togglerClass="'main'">
                     <Dropdown togglerClass="'sub'" />
-                    <DropdownItem class="item" />
+                    <DropdownItem class="'item'" />
                 </Dropdown>
             `;
+            Parent.components = { Dropdown, DropdownItem };
             env = await makeTestEnv();
-            parent = await mount(Parent, { env, target });
+            parent = await mount(Parent, target, { env });
             assert.containsNone(parent.el, ".dropdown-menu", "menus are closed at start");
 
             // Open main dropdown
@@ -844,6 +874,7 @@ QUnit.module("Components", ({ beforeEach }) => {
                 </Dropdown>
             </Dropdown>
         `;
+        Parent.components = { Dropdown };
         env = await makeTestEnv();
         let hotkeyRegistrationsCount = 0;
         patchWithCleanup(env.services.hotkey, {
@@ -856,7 +887,7 @@ QUnit.module("Components", ({ beforeEach }) => {
                 };
             },
         });
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.containsNone(parent.el, ".dropdown-menu", "menus are closed at start");
         assert.strictEqual(hotkeyRegistrationsCount, 0, "no hotkey registered");
 
@@ -900,9 +931,10 @@ QUnit.module("Components", ({ beforeEach }) => {
 
         class Parent extends Component {}
         Parent.template = xml`<Dropdown tooltip="'My tooltip'"></Dropdown>`;
+        Parent.components = { Dropdown };
 
         env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
+        parent = await mount(Parent, target, { env });
         assert.strictEqual(
             parent.el.querySelector("button.dropdown-toggle").dataset.tooltip,
             "My tooltip"
diff --git a/addons/web/static/tests/core/effects/effect_service_tests.js b/addons/web/static/tests/core/effects/effect_service_tests.js
index 8ad7c5e0163..9846a876e76 100644
--- a/addons/web/static/tests/core/effects/effect_service_tests.js
+++ b/addons/web/static/tests/core/effects/effect_service_tests.js
@@ -7,10 +7,16 @@ import { userService } from "@web/core/user_service";
 import { session } from "@web/session";
 import { makeTestEnv } from "../../helpers/mock_env";
 import { makeFakeLocalizationService } from "../../helpers/mock_services";
-import { click, getFixture, mockTimeout, nextTick, patchWithCleanup } from "../../helpers/utils";
-import { registerCleanup } from "../../helpers/cleanup";
+import {
+    click,
+    getFixture,
+    mockTimeout,
+    mount,
+    nextTick,
+    patchWithCleanup,
+} from "../../helpers/utils";
 
-const { Component, mount, xml } = owl;
+const { Component, markup, xml } = owl;
 const serviceRegistry = registry.category("services");
 const mainComponentRegistry = registry.category("main_components");
 
@@ -30,8 +36,7 @@ Parent.template = xml`
 async function makeParent() {
     const env = await makeTestEnv({ serviceRegistry });
     const target = getFixture();
-    const parent = await mount(Parent, { env, target });
-    registerCleanup(() => parent.destroy());
+    const parent = await mount(Parent, target, { env });
     return parent;
 }
 
@@ -40,8 +45,7 @@ QUnit.module("Effect Service", (hooks) => {
     let execRegisteredTimeouts;
     hooks.beforeEach(() => {
         effectParams = {
-            message: "<div>Congrats!</div>",
-            messageIsHtml: true,
+            message: markup("<div>Congrats!</div>"),
         };
 
         execRegisteredTimeouts = mockTimeout();
@@ -111,7 +115,7 @@ QUnit.module("Effect Service", (hooks) => {
     QUnit.test("rendering a rainbowman with an escaped message", async function (assert) {
         const parent = await makeParent();
 
-        parent.env.services.effect.add({ ...effectParams, messageIsHtml: false });
+        parent.env.services.effect.add(effectParams);
         await nextTick();
         execRegisteredTimeouts();
 
@@ -119,7 +123,7 @@ QUnit.module("Effect Service", (hooks) => {
         assert.containsOnce(parent.el, ".o_reward_rainbow");
         assert.strictEqual(
             parent.el.querySelector(".o_reward_msg_content").textContent,
-            "<div>Congrats!</div>"
+            "Congrats!"
         );
     });
 
diff --git a/addons/web/static/tests/core/errors/error_dialogs_tests.js b/addons/web/static/tests/core/errors/error_dialogs_tests.js
index 38c26e79497..64b1bb02420 100644
--- a/addons/web/static/tests/core/errors/error_dialogs_tests.js
+++ b/addons/web/static/tests/core/errors/error_dialogs_tests.js
@@ -14,13 +14,10 @@ import { uiService } from "@web/core/ui/ui_service";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { makeTestEnv } from "../../helpers/mock_env";
 import { makeFakeDialogService, makeFakeLocalizationService } from "../../helpers/mock_services";
-import { click, getFixture, nextTick, patchWithCleanup } from "../../helpers/utils";
-
-const { Component, mount, xml } = owl;
+import { click, getFixture, mount, nextTick, patchWithCleanup } from "../../helpers/utils";
 
 let target;
 let env;
-let parent;
 const serviceRegistry = registry.category("services");
 
 QUnit.module("Error dialogs", {
@@ -31,27 +28,22 @@ QUnit.module("Error dialogs", {
         serviceRegistry.add("localization", makeFakeLocalizationService());
         serviceRegistry.add("dialog", makeFakeDialogService());
     },
-    async afterEach() {
-        parent.unmount();
-    },
 });
 
 QUnit.test("ErrorDialog with traceback", async (assert) => {
     assert.expect(11);
-    class Parent extends Component {
-        constructor() {
-            super(...arguments);
-            this.message = "Something bad happened";
-            this.data = { debug: "Some strange unreadable stack" };
-            this.name = "ERROR_NAME";
-            this.traceback = "This is a tracback string";
-        }
-    }
-    Parent.components = { ErrorDialog };
-    Parent.template = xml`<ErrorDialog traceback="traceback" name="name" message="message" data="data"/>`;
     assert.containsNone(target, ".o_dialog");
     env = await makeTestEnv();
-    parent = await mount(Parent, { env, target });
+    await mount(ErrorDialog, target, {
+        env,
+        props: {
+            message: "Something bad happened",
+            data: { debug: "Some strange unreadable stack" },
+            name: "ERROR_NAME",
+            traceback: "This is a tracback string",
+            close() {},
+        },
+    });
     assert.containsOnce(target, ".o_dialog");
     assert.strictEqual(target.querySelector("header .modal-title").textContent, "Odoo Error");
     const mainButtons = target.querySelectorAll("main button");
@@ -91,19 +83,18 @@ QUnit.test("ErrorDialog with traceback", async (assert) => {
 
 QUnit.test("Client ErrorDialog with traceback", async (assert) => {
     assert.expect(11);
-    class Parent extends Component {
-        setup() {
-            this.message = "Something bad happened";
-            this.data = { debug: "Some strange unreadable stack" };
-            this.name = "ERROR_NAME";
-            this.traceback = "This is a traceback string";
-        }
-    }
-    Parent.components = { ClientErrorDialog };
-    Parent.template = xml`<ClientErrorDialog traceback="traceback" name="name" message="message" data="data"/>`;
     assert.containsNone(target, ".o_dialog");
     env = await makeTestEnv();
-    parent = await mount(Parent, { env, target });
+    await mount(ClientErrorDialog, target, {
+        env,
+        props: {
+            message: "Something bad happened",
+            data: { debug: "Some strange unreadable stack" },
+            name: "ERROR_NAME",
+            traceback: "This is a traceback string",
+            close() {},
+        },
+    });
     assert.containsOnce(target, ".o_dialog");
     assert.strictEqual(
         target.querySelector("header .modal-title").textContent,
@@ -163,17 +154,15 @@ QUnit.test("button clipboard copy error traceback", async (assert) => {
         },
     });
     env = await makeTestEnv();
-    class Parent extends Component {
-        constructor() {
-            super(...arguments);
-            this.message = error.message;
-            this.name = "ERROR_NAME";
-            this.traceback = "This is a traceback";
-        }
-    }
-    Parent.components = { ErrorDialog };
-    Parent.template = xml`<ErrorDialog traceback="traceback" name="name" message="message" data="data"/>`;
-    parent = await mount(Parent, { env, target });
+    await mount(ErrorDialog, target, {
+        env,
+        props: {
+            message: error.message,
+            name: "ERROR_NAME",
+            traceback: "This is a traceback",
+            close() {},
+        },
+    });
     const clipboardButton = target.querySelector(".fa-clipboard");
     click(clipboardButton);
     await nextTick();
@@ -181,19 +170,17 @@ QUnit.test("button clipboard copy error traceback", async (assert) => {
 
 QUnit.test("WarningDialog", async (assert) => {
     assert.expect(6);
-    class Parent extends Component {
-        constructor() {
-            super(...arguments);
-            this.name = "odoo.exceptions.UserError";
-            this.message = "...";
-            this.data = { arguments: ["Some strange unreadable message"] };
-        }
-    }
-    Parent.components = { WarningDialog };
-    Parent.template = xml`<WarningDialog exceptionName="name" message="message" data="data"/>`;
     assert.containsNone(target, ".o_dialog");
     env = await makeTestEnv();
-    parent = await mount(Parent, { env, target });
+    await mount(WarningDialog, target, {
+        env,
+        props: {
+            exceptionName: "odoo.exceptions.UserError",
+            message: "...",
+            data: { arguments: ["Some strange unreadable message"] },
+            close() {},
+        },
+    });
     assert.containsOnce(target, ".o_dialog");
     assert.strictEqual(target.querySelector("header .modal-title").textContent, "User Error");
     assert.containsOnce(target, "main .o_dialog_warning");
@@ -203,26 +190,6 @@ QUnit.test("WarningDialog", async (assert) => {
 
 QUnit.test("RedirectWarningDialog", async (assert) => {
     assert.expect(10);
-
-    class CloseRedirectWarningDialog extends RedirectWarningDialog {}
-
-    class Parent extends Component {
-        constructor() {
-            super(...arguments);
-            this.data = {
-                arguments: [
-                    "Some strange unreadable message",
-                    "buy_action_id",
-                    "Buy book on cryptography",
-                ],
-            };
-        }
-        close() {
-            assert.step("dialog-closed");
-        }
-    }
-    Parent.components = { RedirectWarningDialog: CloseRedirectWarningDialog };
-    Parent.template = xml`<RedirectWarningDialog data="data" close="close"/>`;
     const faceActionService = {
         name: "action",
         start() {
@@ -236,7 +203,21 @@ QUnit.test("RedirectWarningDialog", async (assert) => {
     serviceRegistry.add("action", faceActionService);
     env = await makeTestEnv();
     assert.containsNone(target, ".o_dialog");
-    parent = await mount(Parent, { env, target });
+    await mount(RedirectWarningDialog, target, {
+        env,
+        props: {
+            data: {
+                arguments: [
+                    "Some strange unreadable message",
+                    "buy_action_id",
+                    "Buy book on cryptography",
+                ],
+            },
+            close() {
+                assert.step("dialog-closed");
+            },
+        },
+    });
     assert.containsOnce(target, ".o_dialog");
     assert.strictEqual(target.querySelector("header .modal-title").textContent, "Odoo Warning");
     assert.strictEqual(target.querySelector("main").textContent, "Some strange unreadable message");
@@ -254,12 +235,9 @@ QUnit.test("RedirectWarningDialog", async (assert) => {
 
 QUnit.test("Error504Dialog", async (assert) => {
     assert.expect(5);
-    class Parent extends Component {}
-    Parent.components = { Error504Dialog };
-    Parent.template = xml`<Error504Dialog/>`;
     assert.containsNone(target, ".o_dialog");
     env = await makeTestEnv();
-    parent = await mount(Parent, { env, target });
+    await mount(Error504Dialog, target, { env, props: { close() {} } });
     assert.containsOnce(target, ".o_dialog");
     assert.strictEqual(target.querySelector("header .modal-title").textContent, "Request timeout");
     assert.strictEqual(
@@ -271,9 +249,6 @@ QUnit.test("Error504Dialog", async (assert) => {
 
 QUnit.test("SessionExpiredDialog", async (assert) => {
     assert.expect(7);
-    class Parent extends Component {}
-    Parent.components = { SessionExpiredDialog };
-    Parent.template = xml`<SessionExpiredDialog/>`;
     patchWithCleanup(browser, {
         location: {
             reload() {
@@ -283,7 +258,7 @@ QUnit.test("SessionExpiredDialog", async (assert) => {
     });
     env = await makeTestEnv();
     assert.containsNone(target, ".o_dialog");
-    parent = await mount(Parent, { env, target });
+    await mount(SessionExpiredDialog, target, { env, props: { close() {} } });
     assert.containsOnce(target, ".o_dialog");
     assert.strictEqual(
         target.querySelector("header .modal-title").textContent,
diff --git a/addons/web/static/tests/core/file_input_tests.js b/addons/web/static/tests/core/file_input_tests.js
index 62dd3d58d63..b32e5b0ecf5 100644
--- a/addons/web/static/tests/core/file_input_tests.js
+++ b/addons/web/static/tests/core/file_input_tests.js
@@ -4,9 +4,8 @@ import { FileInput } from "@web/core/file_input/file_input";
 import { registry } from "@web/core/registry";
 import testUtils from "web.test_utils";
 import { makeTestEnv } from "../helpers/mock_env";
-import { getFixture } from "../helpers/utils";
+import { getFixture, mount } from "../helpers/utils";
 
-const { mount } = owl;
 const serviceRegistry = registry.category("services");
 
 // -----------------------------------------------------------------------------
@@ -29,10 +28,9 @@ async function createFileInput(config) {
         target.addEventListener("uploaded", config.onUploaded);
     }
 
-    const fileInput = await mount(FileInput, {
+    const fileInput = await mount(FileInput, target, {
         env,
         props: config.props,
-        target,
     });
     return fileInput;
 }
@@ -59,6 +57,7 @@ QUnit.module("Components", () => {
                 assert.step(route);
                 return "[]";
             },
+            props: {},
         });
         const input = fileInput.el.querySelector("input");
 
@@ -73,8 +72,6 @@ QUnit.module("Components", () => {
 
         assert.notOk(input.multiple, "'multiple' attribute should not be set");
         assert.verifySteps(["/web/binary/upload"]);
-
-        fileInput.destroy();
     });
 
     QUnit.test("Upload a file: custom attachment", async function (assert) {
@@ -114,7 +111,5 @@ QUnit.module("Components", () => {
 
         assert.ok(input.multiple, "'multiple' attribute should be set");
         assert.verifySteps(["/web/binary/upload_attachment"]);
-
-        fileInput.destroy();
     });
 });
diff --git a/addons/web/static/tests/core/hotkeys/hotkey_service_tests.js b/addons/web/static/tests/core/hotkeys/hotkey_service_tests.js
index 4909a892d3a..144f49a2914 100644
--- a/addons/web/static/tests/core/hotkeys/hotkey_service_tests.js
+++ b/addons/web/static/tests/core/hotkeys/hotkey_service_tests.js
@@ -6,9 +6,16 @@ import { registry } from "@web/core/registry";
 import { uiService, useActiveElement } from "@web/core/ui/ui_service";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { makeTestEnv } from "../../helpers/mock_env";
-import { getFixture, nextTick, patchWithCleanup, triggerHotkey } from "../../helpers/utils";
+import {
+    destroy,
+    getFixture,
+    mount,
+    nextTick,
+    patchWithCleanup,
+    triggerHotkey,
+} from "../../helpers/utils";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 const serviceRegistry = registry.category("services");
 
 let env;
@@ -63,18 +70,17 @@ QUnit.test("data-hotkey", async (assert) => {
     triggerHotkey(key, true);
     await nextTick();
 
-    const comp = await mount(MyComponent, { env, target });
+    const comp = await mount(MyComponent, target, { env });
 
     triggerHotkey(key, true);
     await nextTick();
 
-    comp.unmount();
+    destroy(comp);
 
     triggerHotkey(key, true);
     await nextTick();
 
     assert.verifySteps(["click"]);
-    comp.destroy();
 });
 
 QUnit.test("invisible data-hotkeys are not enabled. ", async (assert) => {
@@ -95,7 +101,7 @@ QUnit.test("invisible data-hotkeys are not enabled. ", async (assert) => {
     triggerHotkey(key, true);
     await nextTick();
 
-    const comp = await mount(MyComponent, { env, target });
+    const comp = await mount(MyComponent, target, { env });
 
     triggerHotkey(key, true);
     await nextTick();
@@ -105,8 +111,6 @@ QUnit.test("invisible data-hotkeys are not enabled. ", async (assert) => {
     triggerHotkey(key, true);
     await nextTick();
     assert.verifySteps([], "shouldn't trigger the hotkey of an invisible button");
-
-    comp.destroy();
 });
 
 QUnit.test("hook", async (assert) => {
@@ -121,18 +125,17 @@ QUnit.test("hook", async (assert) => {
     triggerHotkey(key);
     await nextTick();
 
-    const comp = await mount(TestComponent, { env, target });
+    const comp = await mount(TestComponent, target, { env });
 
     triggerHotkey(key);
     await nextTick();
 
-    comp.unmount();
+    destroy(comp);
 
     triggerHotkey(key);
     await nextTick();
 
     assert.verifySteps([key]);
-    comp.destroy();
 });
 
 QUnit.test("non-MacOS usability", async (assert) => {
@@ -191,7 +194,7 @@ QUnit.test("the overlay of hotkeys is correctly displayed", async (assert) => {
         <button t-on-click="onClick" data-hotkey="c"/>
         </div>
     `;
-    const comp = await mount(MyComponent, { env, target });
+    const comp = await mount(MyComponent, target, { env });
     const getOverlays = () =>
         [...comp.el.querySelectorAll(".o_web_hotkey_overlay")].map((el) => el.innerText);
 
@@ -237,7 +240,7 @@ QUnit.test("the overlay of hotkeys is correctly displayed on MacOs", async (asse
         <button t-on-click="onClick" data-hotkey="c"/>
         </div>
     `;
-    const comp = await mount(MyComponent, { env, target });
+    const comp = await mount(MyComponent, target, { env });
     const getOverlays = () =>
         [...comp.el.querySelectorAll(".o_web_hotkey_overlay")].map((el) => el.innerText);
 
@@ -314,7 +317,7 @@ QUnit.test("[data-hotkey] alt is required", async (assert) => {
     }
     TestComponent.template = xml`<div><button t-on-click="onClick" data-hotkey="${key}"/></div>`;
 
-    const comp = await mount(TestComponent, { env, target });
+    const comp = await mount(TestComponent, target, { env });
 
     triggerHotkey(key, true);
     await nextTick();
@@ -323,8 +326,6 @@ QUnit.test("[data-hotkey] alt is required", async (assert) => {
     triggerHotkey(key);
     await nextTick();
     assert.verifySteps([]);
-
-    comp.destroy();
 });
 
 QUnit.test("registration allows repeat if specified", async (assert) => {
@@ -370,7 +371,7 @@ QUnit.test("[data-hotkey] never allow repeat", async (assert) => {
     }
     TestComponent.template = xml`<div><button t-on-click="onClick" data-hotkey="${key}"/></div>`;
 
-    const comp = await mount(TestComponent, { env, target });
+    const comp = await mount(TestComponent, target, { env });
 
     triggerHotkey(key, true);
     await nextTick();
@@ -379,8 +380,6 @@ QUnit.test("[data-hotkey] never allow repeat", async (assert) => {
     triggerHotkey(key, true, { repeat: true });
     await nextTick();
     assert.verifySteps([]);
-
-    comp.destroy();
 });
 
 QUnit.test("hotkeys evil 👹", async (assert) => {
@@ -436,7 +435,7 @@ QUnit.test("component can register many hotkeys", async (assert) => {
     </div>
   `;
 
-    const comp = await mount(MyComponent, { env, target });
+    const comp = await mount(MyComponent, target, { env });
     triggerHotkey("a", true);
     triggerHotkey("b", true);
     triggerHotkey("c", true);
@@ -454,7 +453,6 @@ QUnit.test("component can register many hotkeys", async (assert) => {
         "callback2:e",
         "callback2:f",
     ]);
-    comp.destroy();
 });
 
 QUnit.test("many components can register same hotkeys", async (assert) => {
@@ -495,8 +493,8 @@ QUnit.test("many components can register same hotkeys", async (assert) => {
     </div>
   `;
 
-    const comp1 = await mount(MyComponent1, { env, target });
-    const comp2 = await mount(MyComponent2, { env, target });
+    await mount(MyComponent1, target, { env });
+    await mount(MyComponent2, target, { env });
     triggerHotkey("a", true);
     triggerHotkey("b", true);
     triggerHotkey("c", true);
@@ -512,8 +510,6 @@ QUnit.test("many components can register same hotkeys", async (assert) => {
         "comp2:c",
         "comp2:click",
     ]);
-    comp1.destroy();
-    comp2.destroy();
 });
 
 QUnit.test("registrations and elements belong to the correct UI owner", async (assert) => {
@@ -526,7 +522,7 @@ QUnit.test("registrations and elements belong to the correct UI owner", async (a
             assert.step("MyComponent1 [data-hotkey]");
         }
     }
-    MyComponent1.template = xml`<div><button data-hotkey="b" t-on-click="onClick()"/></div>`;
+    MyComponent1.template = xml`<div><button data-hotkey="b" t-on-click="onClick"/></div>`;
 
     class MyComponent2 extends Component {
         setup() {
@@ -537,19 +533,19 @@ QUnit.test("registrations and elements belong to the correct UI owner", async (a
             assert.step("MyComponent2 [data-hotkey]");
         }
     }
-    MyComponent2.template = xml`<div><button data-hotkey="b" t-on-click="onClick()"/></div>`;
+    MyComponent2.template = xml`<div><button data-hotkey="b" t-on-click="onClick"/></div>`;
 
-    const comp1 = await mount(MyComponent1, { env, target });
+    await mount(MyComponent1, target, { env });
     triggerHotkey("a");
     triggerHotkey("b", true);
     await nextTick();
 
-    const comp2 = await mount(MyComponent2, { env, target });
+    const comp2 = await mount(MyComponent2, target, { env });
     triggerHotkey("a");
     triggerHotkey("b", true);
     await nextTick();
 
-    comp2.unmount();
+    destroy(comp2);
     triggerHotkey("a");
     triggerHotkey("b", true);
     await nextTick();
@@ -562,9 +558,6 @@ QUnit.test("registrations and elements belong to the correct UI owner", async (a
         "MyComponent1 subscription",
         "MyComponent1 [data-hotkey]",
     ]);
-
-    comp1.destroy();
-    comp2.destroy();
 });
 
 QUnit.test("replace the overlayModifier for non-MacOs", async (assert) => {
@@ -585,7 +578,7 @@ QUnit.test("replace the overlayModifier for non-MacOs", async (assert) => {
         <button t-on-click="onClick" data-hotkey="b"/>
         </div>
     `;
-    await mount(MyComponent, { env, target });
+    await mount(MyComponent, target, { env });
 
     const key = "b";
     triggerHotkey(`alt+shift+${key}`);
@@ -623,7 +616,7 @@ QUnit.test("replace the overlayModifier for MacOs", async (assert) => {
         <button t-on-click="onClick" data-hotkey="b"/>
         </div>
     `;
-    await mount(MyComponent, { env, target });
+    await mount(MyComponent, target, { env });
 
     const key = "b";
     triggerHotkey(`alt+shift+${key}`);
diff --git a/addons/web/static/tests/core/l10n/translation_tests.js b/addons/web/static/tests/core/l10n/translation_tests.js
index 18fe4063619..8c03b1433a3 100644
--- a/addons/web/static/tests/core/l10n/translation_tests.js
+++ b/addons/web/static/tests/core/l10n/translation_tests.js
@@ -8,10 +8,10 @@ import { patch, unpatch } from "@web/core/utils/patch";
 import { session } from "@web/session";
 import { makeTestEnv } from "@web/../tests/helpers/mock_env";
 import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
-import { getFixture, patchWithCleanup } from "@web/../tests/helpers/utils";
+import { getFixture, mount, patchWithCleanup } from "@web/../tests/helpers/utils";
 import { registerCleanup } from "@web/../tests/helpers/cleanup";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 
 const terms = { Hello: "Bonjour" };
 const serviceRegistry = registry.category("services");
@@ -26,7 +26,7 @@ QUnit.test("can translate a text node", async (assert) => {
     const env = await makeTestEnv();
     patch(translatedTerms, "add translations", terms);
     const target = getFixture();
-    await mount(TestComponent, { env, target });
+    await mount(TestComponent, target, { env });
     assert.strictEqual(target.innerText, "Bonjour");
     unpatch(translatedTerms, "add translations");
 });
@@ -43,7 +43,7 @@ QUnit.test("can lazy translate", async (assert) => {
     const env = await makeTestEnv();
     patch(translatedTerms, "add translations", terms);
     const target = getFixture();
-    await mount(TestComponent, { env, target });
+    await mount(TestComponent, target, { env });
     assert.strictEqual(target.innerText, "Bonjour");
     unpatch(translatedTerms, "add translations");
 });
@@ -55,7 +55,7 @@ QUnit.test("_t is in env", async (assert) => {
     const env = await makeTestEnv();
     patch(translatedTerms, "add translations", terms);
     const target = getFixture();
-    await mount(TestComponent, { env, target });
+    await mount(TestComponent, target, { env });
     assert.strictEqual(target.innerText, "Bonjour");
     unpatch(translatedTerms, "add translations");
 });
diff --git a/addons/web/static/tests/core/main_components_container_tests.js b/addons/web/static/tests/core/main_components_container_tests.js
index 4eea217122f..da675bf95e9 100644
--- a/addons/web/static/tests/core/main_components_container_tests.js
+++ b/addons/web/static/tests/core/main_components_container_tests.js
@@ -3,11 +3,11 @@ import { MainComponentsContainer } from "@web/core/main_components_container";
 import { registry } from "@web/core/registry";
 import { clearRegistryWithCleanup, makeTestEnv } from "../helpers/mock_env";
 import { patch, unpatch } from "@web/core/utils/patch";
-import { getFixture, nextTick } from "../helpers/utils";
+import { getFixture, mount, nextTick } from "../helpers/utils";
 
-const { Component, mount, useState, xml } = owl;
+const { Component, useState, xml } = owl;
 const mainComponentsRegistry = registry.category("main_components");
-let container;
+
 let target;
 
 QUnit.module("Components", (hooks) => {
@@ -15,12 +15,6 @@ QUnit.module("Components", (hooks) => {
         target = getFixture();
         clearRegistryWithCleanup(mainComponentsRegistry);
     });
-    hooks.afterEach(() => {
-        if (container) {
-            container.unmount();
-            container = undefined;
-        }
-    });
 
     QUnit.module("MainComponentsContainer");
 
@@ -35,7 +29,7 @@ QUnit.module("Components", (hooks) => {
 
         mainComponentsRegistry.add("MainComponentA", { Component: MainComponentA, props: {} });
         mainComponentsRegistry.add("MainComponentB", { Component: MainComponentB, props: {} });
-        container = await mount(MainComponentsContainer, { env, target, props: {} });
+        const container = await mount(MainComponentsContainer, target, { env, props: {} });
         assert.equal(
             container.el.outerHTML,
             "<div><span>MainComponentA</span><span>MainComponentB</span></div>"
@@ -62,7 +56,7 @@ QUnit.module("Components", (hooks) => {
 
         mainComponentsRegistry.add("MainComponentA", { Component: MainComponentA, props: {} });
         mainComponentsRegistry.add("MainComponentB", { Component: MainComponentB, props: {} });
-        container = await mount(MainComponentsContainer, { env, target, props: {} });
+        const container = await mount(MainComponentsContainer, target, { env, props: {} });
         assert.equal(
             container.el.outerHTML,
             "<div><span>MainComponentA</span><span>MainComponentB</span></div>"
@@ -107,7 +101,7 @@ QUnit.module("Components", (hooks) => {
 
         mainComponentsRegistry.add("MainComponentA", { Component: MainComponentA, props: {} });
         mainComponentsRegistry.add("MainComponentB", { Component: MainComponentB, props: {} });
-        container = await mount(MainComponentsContainer, { env, target, props: {} });
+        const container = await mount(MainComponentsContainer, target, { env, props: {} });
         assert.equal(
             container.el.outerHTML,
             "<div><span>MainComponentA</span><span>MainComponentB</span></div>"
diff --git a/addons/web/static/tests/core/network/rpc_service_tests.js b/addons/web/static/tests/core/network/rpc_service_tests.js
index 16b4a1804e0..8016aa0c7da 100644
--- a/addons/web/static/tests/core/network/rpc_service_tests.js
+++ b/addons/web/static/tests/core/network/rpc_service_tests.js
@@ -8,10 +8,17 @@ import { useService } from "@web/core/utils/hooks";
 import { patch, unpatch } from "@web/core/utils/patch";
 import { clearRegistryWithCleanup, makeTestEnv } from "../../helpers/mock_env";
 import { makeMockXHR } from "../../helpers/mock_services";
-import { getFixture, makeDeferred, nextTick, patchWithCleanup } from "../../helpers/utils";
+import {
+    destroy,
+    getFixture,
+    makeDeferred,
+    mount,
+    nextTick,
+    patchWithCleanup,
+} from "../../helpers/utils";
 import { registerCleanup } from "../../helpers/cleanup";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 
 let isXHRMocked = false;
 const serviceRegistry = registry.category("services");
@@ -132,7 +139,7 @@ QUnit.test("rpc coming from destroyed components are left pending", async (asser
         serviceRegistry,
     });
     const target = getFixture();
-    const component = await mount(MyComponent, { env, target });
+    const component = await mount(MyComponent, target, { env });
     let isResolved = false;
     let isFailed = false;
     component
@@ -145,7 +152,7 @@ QUnit.test("rpc coming from destroyed components are left pending", async (asser
         });
     assert.strictEqual(isResolved, false);
     assert.strictEqual(isFailed, false);
-    component.destroy();
+    destroy(component);
     def.resolve();
     await nextTick();
     assert.strictEqual(isResolved, false);
@@ -165,8 +172,8 @@ QUnit.test("rpc initiated from destroyed components throw exception", async (ass
         serviceRegistry,
     });
     const target = getFixture();
-    const component = await mount(MyComponent, { env, target });
-    component.destroy();
+    const component = await mount(MyComponent, target, { env });
+    destroy(component);
     try {
         await component.rpc("/my/route");
     } catch (e) {
@@ -183,11 +190,11 @@ QUnit.test("check trigger RPC:REQUEST and RPC:RESPONSE for a simple rpc", async
     });
     let rpcIdsRequest = [];
     let rpcIdsResponse = [];
-    env.bus.on("RPC:REQUEST", null, (rpcId) => {
+    env.bus.addEventListener("RPC:REQUEST", (rpcId) => {
         rpcIdsRequest.push(rpcId);
         assert.step("RPC:REQUEST");
     });
-    env.bus.on("RPC:RESPONSE", null, (rpcId) => {
+    env.bus.addEventListener("RPC:RESPONSE", (rpcId) => {
         rpcIdsResponse.push(rpcId);
         assert.step("RPC:RESPONSE");
     });
@@ -217,11 +224,11 @@ QUnit.test("check trigger RPC:REQUEST and RPC:RESPONSE for a rpc with an error",
     });
     let rpcIdsRequest = [];
     let rpcIdsResponse = [];
-    env.bus.on("RPC:REQUEST", null, (rpcId) => {
+    env.bus.addEventListener("RPC:REQUEST", (rpcId) => {
         rpcIdsRequest.push(rpcId);
         assert.step("RPC:REQUEST");
     });
-    env.bus.on("RPC:RESPONSE", null, (rpcId) => {
+    env.bus.addEventListener("RPC:RESPONSE", (rpcId) => {
         rpcIdsResponse.push(rpcId);
         assert.step("RPC:RESPONSE");
     });
diff --git a/addons/web/static/tests/core/notifications/notifications_tests.js b/addons/web/static/tests/core/notifications/notifications_tests.js
index fbdd2fad84a..86985f34f32 100644
--- a/addons/web/static/tests/core/notifications/notifications_tests.js
+++ b/addons/web/static/tests/core/notifications/notifications_tests.js
@@ -4,9 +4,9 @@ import { browser } from "@web/core/browser/browser";
 import { notificationService } from "@web/core/notifications/notification_service";
 import { registry } from "@web/core/registry";
 import { makeTestEnv } from "../../helpers/mock_env";
-import { click, getFixture, nextTick, patchWithCleanup } from "../../helpers/utils";
+import { click, getFixture, mount, nextTick, patchWithCleanup } from "../../helpers/utils";
 
-const { mount } = owl;
+const { markup } = owl;
 
 let target;
 const serviceRegistry = registry.category("services");
@@ -25,7 +25,7 @@ QUnit.test("can display a basic notification", async (assert) => {
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    await mount(NotificationContainer, { env, target, props });
+    await mount(NotificationContainer, target, { env, props });
 
     notifService.add("I'm a basic notification");
     await nextTick();
@@ -44,7 +44,7 @@ QUnit.test("title and message are escaped by default", async (assert) => {
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    await mount(NotificationContainer, { env, target, props });
+    await mount(NotificationContainer, target, { env, props });
 
     notifService.add("<i>Some message</i>", { title: "<b>Some title</b>" });
     await nextTick();
@@ -60,22 +60,21 @@ QUnit.test("title and message are escaped by default", async (assert) => {
     );
 });
 
-QUnit.test("notification with messageIsHtml option", async (assert) => {
+QUnit.test("can display a notification with markup content", async (assert) => {
     const env = await makeTestEnv({ serviceRegistry });
     const { Component: NotificationContainer, props } = registry
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    await mount(NotificationContainer, { env, target, props });
+    await mount(NotificationContainer, target, { env, props });
 
-    notifService.add("<i>Some message</i>", { messageIsHtml: true });
+    notifService.add(markup("<b>I'm a <i>markup</i> notification</b>"));
     await nextTick();
     assert.containsOnce(target, ".o_notification");
     const notif = target.querySelector(".o_notification");
-    assert.strictEqual(notif.querySelector(".o_notification_content").textContent, "Some message");
     assert.strictEqual(
         notif.querySelector(".o_notification_content").innerHTML,
-        "<i>Some message</i>"
+        "<b>I'm a <i>markup</i> notification</b>"
     );
 });
 
@@ -85,7 +84,7 @@ QUnit.test("can display a notification of type danger", async (assert) => {
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    await mount(NotificationContainer, { env, target, props });
+    await mount(NotificationContainer, target, { env, props });
 
     notifService.add("I'm a danger notification", { type: "danger" });
     await nextTick();
@@ -104,7 +103,7 @@ QUnit.test("can display a danger notification with a title", async (assert) => {
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    await mount(NotificationContainer, { env, target, props });
+    await mount(NotificationContainer, target, { env, props });
 
     notifService.add("I'm a danger notification", { title: "Some title", type: "danger" });
     await nextTick();
@@ -124,7 +123,7 @@ QUnit.test("can display a notification with a button", async (assert) => {
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    await mount(NotificationContainer, { env, target, props });
+    await mount(NotificationContainer, target, { env, props });
 
     notifService.add("I'm a notification with button", {
         buttons: [
@@ -156,7 +155,7 @@ QUnit.test("can display a notification with a callback when closed", async (asse
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    await mount(NotificationContainer, { env, target, props });
+    await mount(NotificationContainer, target, { env, props });
 
     notifService.add("I'm a sticky notification", {
         sticky: true,
@@ -187,7 +186,7 @@ QUnit.test("notifications aren't sticky by default", async (assert) => {
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    await mount(NotificationContainer, { env, target, props });
+    await mount(NotificationContainer, target, { env, props });
 
     notifService.add("I'm a notification");
     await nextTick();
@@ -208,7 +207,7 @@ QUnit.test("can display a sticky notification", async (assert) => {
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    await mount(NotificationContainer, { env, target, props });
+    await mount(NotificationContainer, target, { env, props });
 
     notifService.add("I'm a sticky notification", { sticky: true });
     await nextTick();
@@ -221,7 +220,7 @@ QUnit.test("can close sticky notification", async (assert) => {
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    await mount(NotificationContainer, { env, target, props });
+    await mount(NotificationContainer, target, { env, props });
 
     const closeNotif = notifService.add("I'm a sticky notification", { sticky: true });
     await nextTick();
@@ -256,7 +255,7 @@ QUnit.skip("can close sticky notification with wait", async (assert) => {
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    await mount(NotificationContainer, { env, target, props });
+    await mount(NotificationContainer, target, { env, props });
 
     let id = notifService.create("I'm a sticky notification", { sticky: true });
     await nextTick();
@@ -286,7 +285,7 @@ QUnit.test("can close a non-sticky notification", async (assert) => {
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    await mount(NotificationContainer, { env, target, props });
+    await mount(NotificationContainer, target, { env, props });
 
     const closeNotif = notifService.add("I'm a sticky notification");
     await nextTick();
@@ -316,7 +315,7 @@ QUnit.test("close a non-sticky notification while another one remains", async (a
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    await mount(NotificationContainer, { env, target, props });
+    await mount(NotificationContainer, target, { env, props });
 
     const closeNotif1 = notifService.add("I'm a non-sticky notification");
     const closeNotif2 = notifService.add("I'm a sticky notification", { sticky: true });
@@ -345,7 +344,7 @@ QUnit.test("notification coming when NotificationManager not mounted yet", async
         .category("main_components")
         .get("NotificationContainer");
     const notifService = env.services.notification;
-    mount(NotificationContainer, { env, target, props });
+    mount(NotificationContainer, target, { env, props });
 
     notifService.add("I'm a non-sticky notification");
     await nextTick();
diff --git a/addons/web/static/tests/core/orm_service_tests.js b/addons/web/static/tests/core/orm_service_tests.js
index ba06a647a52..88b0184b638 100644
--- a/addons/web/static/tests/core/orm_service_tests.js
+++ b/addons/web/static/tests/core/orm_service_tests.js
@@ -4,9 +4,9 @@ import { ormService } from "@web/core/orm_service";
 import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
 import { makeTestEnv } from "../helpers/mock_env";
-import { getFixture } from "../helpers/utils";
+import { getFixture, mount } from "../helpers/utils";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 const serviceRegistry = registry.category("services");
 
 QUnit.module("ORM Service", {
@@ -272,7 +272,7 @@ QUnit.test("useModel is specialized for component", async (assert) => {
     MyComponent.template = xml`<div/>`;
 
     const target = getFixture();
-    const component = await mount(MyComponent, { env, target });
+    const component = await mount(MyComponent, target, { env });
     assert.notStrictEqual(component.orm, env.services.orm);
 });
 
diff --git a/addons/web/static/tests/core/pager_tests.js b/addons/web/static/tests/core/pager_tests.js
index 096a3ce8c92..ae33c576273 100644
--- a/addons/web/static/tests/core/pager_tests.js
+++ b/addons/web/static/tests/core/pager_tests.js
@@ -1,17 +1,22 @@
 /** @odoo-module **/
 
 import { Pager } from "@web/core/pager/pager";
-import { registerCleanup } from "../helpers/cleanup";
+import { makeTestEnv } from "../helpers/mock_env";
 import {
     click,
     triggerEvent,
     makeDeferred,
+    mount,
     nextTick,
     getFixture,
     triggerEvents,
 } from "../helpers/utils";
+import { registry } from "@web/core/registry";
+import { uiService } from "@web/core/ui/ui_service";
 
-const { Component, mount, useState, xml } = owl;
+const { Component, useState, xml } = owl;
+
+const serviceRegistry = registry.category("services");
 
 class PagerController extends Component {
     setup() {
@@ -26,10 +31,9 @@ PagerController.template = xml`<Pager t-props="state" />`;
 PagerController.components = { Pager };
 
 async function makePager(props) {
-    const pager = await mount(PagerController, { target: getFixture(), props });
-    registerCleanup(() => {
-        pager.destroy();
-    });
+    serviceRegistry.add("ui", uiService);
+    const env = await makeTestEnv();
+    const pager = await mount(PagerController, getFixture(), { env, props });
     return pager;
 }
 
diff --git a/addons/web/static/tests/core/popover/popover_hook_tests.js b/addons/web/static/tests/core/popover/popover_hook_tests.js
index 3d6b2f84a3a..8663dfcfbb9 100644
--- a/addons/web/static/tests/core/popover/popover_hook_tests.js
+++ b/addons/web/static/tests/core/popover/popover_hook_tests.js
@@ -3,14 +3,13 @@
 import { usePopover } from "@web/core/popover/popover_hook";
 import { popoverService } from "@web/core/popover/popover_service";
 import { registry } from "@web/core/registry";
-import { registerCleanup } from "../../helpers/cleanup";
 import { clearRegistryWithCleanup, makeTestEnv } from "../../helpers/mock_env";
-import { getFixture, nextTick } from "../../helpers/utils";
+import { destroy, getFixture, mount, nextTick } from "../../helpers/utils";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 
 let env;
-let fixture;
+let target;
 let popoverTarget;
 
 const mainComponents = registry.category("main_components");
@@ -36,17 +35,10 @@ QUnit.module("Popover hook", {
     async beforeEach() {
         clearRegistryWithCleanup(mainComponents);
         registry.category("services").add("popover", popoverService);
-
-        fixture = getFixture();
+        target = getFixture();
         env = await makeTestEnv();
-        const pseudoWebClient = await mount(PseudoWebClient, {
-            env,
-            target: fixture,
-        });
-        registerCleanup(() => {
-            pseudoWebClient.destroy();
-        });
-        popoverTarget = fixture.querySelector("#anchor");
+        await mount(PseudoWebClient, target, { env });
+        popoverTarget = target.querySelector("#anchor");
     },
 });
 
@@ -61,29 +53,29 @@ QUnit.test("close popover when component is unmounted", async (assert) => {
     }
     CompWithPopover.template = xml`<div />`;
 
-    const comp1 = await mount(CompWithPopover, { env, target: fixture });
+    const comp1 = await mount(CompWithPopover, target, { env });
     comp1.popover.add(popoverTarget, Comp, { id: "comp1" });
     await nextTick();
 
-    const comp2 = await mount(CompWithPopover, { env, target: fixture });
+    const comp2 = await mount(CompWithPopover, target, { env });
     comp2.popover.add(popoverTarget, Comp, { id: "comp2" });
     await nextTick();
 
-    assert.containsN(fixture, ".o_popover", 2);
-    assert.containsOnce(fixture, ".o_popover #comp1");
-    assert.containsOnce(fixture, ".o_popover #comp2");
+    assert.containsN(target, ".o_popover", 2);
+    assert.containsOnce(target, ".o_popover #comp1");
+    assert.containsOnce(target, ".o_popover #comp2");
 
-    comp1.destroy();
+    destroy(comp1);
     await nextTick();
 
-    assert.containsOnce(fixture, ".o_popover");
-    assert.containsNone(fixture, ".o_popover #comp1");
-    assert.containsOnce(fixture, ".o_popover #comp2");
+    assert.containsOnce(target, ".o_popover");
+    assert.containsNone(target, ".o_popover #comp1");
+    assert.containsOnce(target, ".o_popover #comp2");
 
-    comp2.destroy();
+    destroy(comp2);
     await nextTick();
 
-    assert.containsNone(fixture, ".o_popover");
-    assert.containsNone(fixture, ".o_popover #comp1");
-    assert.containsNone(fixture, ".o_popover #comp2");
+    assert.containsNone(target, ".o_popover");
+    assert.containsNone(target, ".o_popover #comp1");
+    assert.containsNone(target, ".o_popover #comp2");
 });
diff --git a/addons/web/static/tests/core/popover/popover_service_tests.js b/addons/web/static/tests/core/popover/popover_service_tests.js
index 78f614f62c2..07aa2f466b8 100644
--- a/addons/web/static/tests/core/popover/popover_service_tests.js
+++ b/addons/web/static/tests/core/popover/popover_service_tests.js
@@ -4,9 +4,9 @@ import { popoverService } from "@web/core/popover/popover_service";
 import { registry } from "@web/core/registry";
 import { registerCleanup } from "../../helpers/cleanup";
 import { clearRegistryWithCleanup, makeTestEnv } from "../../helpers/mock_env";
-import { click, getFixture, nextTick } from "../../helpers/utils";
+import { click, getFixture, mount, nextTick } from "../../helpers/utils";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 
 let env;
 let fixture;
@@ -40,13 +40,7 @@ QUnit.module("Popover service", {
 
         fixture = getFixture();
         env = await makeTestEnv();
-        const pseudoWebClient = await mount(PseudoWebClient, {
-            env,
-            target: fixture,
-        });
-        registerCleanup(() => {
-            pseudoWebClient.destroy();
-        });
+        await mount(PseudoWebClient, fixture, { env });
         popovers = env.services.popover;
         popoverTarget = fixture.querySelector("#anchor");
     },
@@ -139,7 +133,7 @@ QUnit.test("sub component triggers close", async (assert) => {
     assert.containsOnce(fixture, ".o_popover_container");
 
     class Comp extends Component {}
-    Comp.template = xml`<div id="comp" t-on-click="trigger('popover-closed')">in popover</div>`;
+    Comp.template = xml`<div id="comp" t-on-click="() => this.trigger('popover-closed')">in popover</div>`;
 
     popovers.add(popoverTarget, Comp, {});
     await nextTick();
diff --git a/addons/web/static/tests/core/popover/popover_tests.js b/addons/web/static/tests/core/popover/popover_tests.js
index 921703a6c5c..bfd0441a4da 100644
--- a/addons/web/static/tests/core/popover/popover_tests.js
+++ b/addons/web/static/tests/core/popover/popover_tests.js
@@ -2,9 +2,7 @@
 
 import { Popover } from "@web/core/popover/popover";
 import { registerCleanup } from "../../helpers/cleanup";
-import { getFixture } from "../../helpers/utils";
-
-const { mount } = owl;
+import { getFixture, mount } from "../../helpers/utils";
 
 let fixture;
 let popoverTarget;
@@ -36,66 +34,54 @@ QUnit.module("Popover", {
 });
 
 QUnit.test("popover can have custom class", async (assert) => {
-    const popover = await mount(Popover, {
-        target: fixture,
+    await mount(Popover, fixture, {
         props: { target: popoverTarget, popoverClass: "custom-popover" },
     });
 
     assert.containsOnce(fixture, ".o_popover.custom-popover");
-    popover.destroy();
 });
 
 QUnit.test("popover is rendered nearby target (default)", async (assert) => {
-    const popover = await mount(Popover, {
-        target: fixture,
+    await mount(Popover, fixture, {
         props: { target: popoverTarget },
     });
 
     const popoverEl = fixture.querySelector(".o_popover");
     assert.ok(pointsTo(popoverEl, "bottom"));
-    popover.destroy();
 });
 
 QUnit.test("popover is rendered nearby target (bottom)", async (assert) => {
-    const popover = await mount(Popover, {
-        target: fixture,
+    await mount(Popover, fixture, {
         props: { target: popoverTarget, position: "bottom" },
     });
 
     const popoverEl = fixture.querySelector(".o_popover");
     assert.ok(pointsTo(popoverEl, "bottom"));
-    popover.destroy();
 });
 
 QUnit.test("popover is rendered nearby target (top)", async (assert) => {
-    const popover = await mount(Popover, {
-        target: fixture,
+    await mount(Popover, fixture, {
         props: { target: popoverTarget, position: "top" },
     });
 
     const popoverEl = fixture.querySelector(".o_popover");
     assert.ok(pointsTo(popoverEl, "top"));
-    popover.destroy();
 });
 
 QUnit.test("popover is rendered nearby target (left)", async (assert) => {
-    const popover = await mount(Popover, {
-        target: fixture,
+    await mount(Popover, fixture, {
         props: { target: popoverTarget, position: "left" },
     });
 
     const popoverEl = fixture.querySelector(".o_popover");
     assert.ok(pointsTo(popoverEl, "left"));
-    popover.destroy();
 });
 
 QUnit.test("popover is rendered nearby target (right)", async (assert) => {
-    const popover = await mount(Popover, {
-        target: fixture,
+    await mount(Popover, fixture, {
         props: { target: popoverTarget, position: "right" },
     });
 
     const popoverEl = fixture.querySelector(".o_popover");
     assert.ok(pointsTo(popoverEl, "right"));
-    popover.destroy();
 });
diff --git a/addons/web/static/tests/core/position_hook_tests.js b/addons/web/static/tests/core/position_hook_tests.js
index 3670b823559..b2a8c9f3ef0 100644
--- a/addons/web/static/tests/core/position_hook_tests.js
+++ b/addons/web/static/tests/core/position_hook_tests.js
@@ -4,15 +4,16 @@ import { browser } from "@web/core/browser/browser";
 import { computePositioning, DEFAULTS, usePosition } from "@web/core/position/position_hook";
 import { registerCleanup } from "../helpers/cleanup";
 import {
+    destroy,
     getFixture,
     mockAnimationFrame,
+    mount,
     nextTick,
     patchWithCleanup,
     triggerEvent,
 } from "../helpers/utils";
 
-const { Component, css, mount, xml } = owl;
-
+const { Component, xml } = owl;
 let container;
 let reference;
 
@@ -43,13 +44,6 @@ class TestComp extends Component {
         usePosition(reference, this.constructor.popperOptions);
     }
 }
-TestComp.style = css`
-    #popper {
-        background-color: cyan;
-        height: 100px;
-        width: 100px;
-    }
-`;
 TestComp.template = xml`<div id="popper"/>`;
 /** @type {import("@web/core/position/position_hook").Options} */
 TestComp.popperOptions = {};
@@ -78,27 +72,40 @@ QUnit.module("usePosition Hook", {
         });
         TestComp.popperOptions = { container };
 
+        const sheet = document.createElement("style");
+        sheet.textContent = `
+            #popper {
+                background-color: cyan;
+                height: 100px;
+                width: 100px;
+            }
+        `;
+        document.head.appendChild(sheet);
+        registerCleanup(() => {
+            sheet.remove();
+        });
         patchWithCleanup(browser, { setTimeout: (func) => func() });
     },
 });
 
 QUnit.test("default position is bottom", async (assert) => {
-    const popper = await mount(TestComp, { target: container });
+    const popper = await mount(TestComp, container);
     assert.ok(isWellPositioned(popper.el, "bottom"));
 });
 
 QUnit.test("can add margin", async (assert) => {
     let margin = 0;
     Object.assign(TestComp.popperOptions, { margin });
-    let popper = await mount(TestComp, { target: container });
+    let popper = await mount(TestComp, container);
+
     const popBox1 = popper.el.getBoundingClientRect();
-    popper.destroy();
+    destroy(popper);
 
     margin = 20;
     Object.assign(TestComp.popperOptions, { margin });
-    popper = await mount(TestComp, { target: container });
+    popper = await mount(TestComp, container);
     const popBox2 = popper.el.getBoundingClientRect();
-    popper.destroy();
+    destroy(popper);
 
     assert.strictEqual(popBox1.top + margin, popBox2.top);
 });
@@ -112,7 +119,7 @@ QUnit.test("can use a t-ref as popper", async (assert) => {
             </div>
         `,
     });
-    const comp = await mount(TestComp, { target: container });
+    const comp = await mount(TestComp, container);
     assert.notOk(isWellPositioned(comp.el));
     assert.ok(isWellPositioned(comp.el.querySelector("#popper")));
 });
@@ -125,7 +132,7 @@ QUnit.test("has no effect when component is destroyed", async (assert) => {
         return originalReference;
     };
 
-    const popper = await mount(TestComp, { target: container });
+    const comp = await mount(TestComp, container);
     assert.verifySteps(["reference called"], "reference called when component mounted");
 
     triggerEvent(document, null, "scroll");
@@ -136,7 +143,7 @@ QUnit.test("has no effect when component is destroyed", async (assert) => {
 
     triggerEvent(document, null, "scroll");
     await nextTick();
-    popper.destroy();
+    destroy(comp);
     execRegisteredCallbacks();
     assert.verifySteps(
         [],
@@ -147,7 +154,7 @@ QUnit.test("has no effect when component is destroyed", async (assert) => {
 const getPositionTest = (position, positionToCheck) => {
     return async (assert) => {
         Object.assign(TestComp.popperOptions, { position });
-        const popper = await mount(TestComp, { target: container });
+        const popper = await mount(TestComp, container);
         positionToCheck = positionToCheck || position;
         assert.ok(isWellPositioned(popper.el, positionToCheck));
     };
@@ -185,7 +192,7 @@ const CONTAINER_STYLE_MAP = {
 const getRepositionTest = (from, to, containerStyleChanges) => {
     return async (assert) => {
         Object.assign(TestComp.popperOptions, { position: from });
-        const popper = await mount(TestComp, { target: container });
+        const popper = await mount(TestComp, container);
         assert.ok(isWellPositioned(popper.el, from), `points to ${from} direction`);
 
         // Change container style and force update
diff --git a/addons/web/static/tests/core/scroller_service_tests.js b/addons/web/static/tests/core/scroller_service_tests.js
index 2d47f3627b4..3abb890d144 100644
--- a/addons/web/static/tests/core/scroller_service_tests.js
+++ b/addons/web/static/tests/core/scroller_service_tests.js
@@ -5,13 +5,12 @@ import { scrollerService } from "@web/core/scroller_service";
 import { scrollTo } from "@web/core/utils/scrolling";
 import { registerCleanup } from "../helpers/cleanup";
 import { makeTestEnv } from "../helpers/mock_env";
-import { click, getFixture, nextTick } from "../helpers/utils";
+import { click, getFixture, mount, nextTick } from "../helpers/utils";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 const serviceRegistry = registry.category("services");
 
 let env;
-let comp;
 let target;
 
 QUnit.module("ScrollerService", {
@@ -19,8 +18,6 @@ QUnit.module("ScrollerService", {
         serviceRegistry.add("scroller", scrollerService);
         env = await makeTestEnv();
         target = getFixture();
-
-        registerCleanup(() => comp && comp.destroy());
     },
 });
 
@@ -38,7 +35,7 @@ QUnit.test("Ignore empty hrefs", async (assert) => {
             </button>
         </div>`;
 
-    comp = await mount(MyComponent, { env, target });
+    const comp = await mount(MyComponent, target, { env });
 
     /**
      * To determine whether the hash changed we need to use a custom hash for
@@ -106,7 +103,7 @@ QUnit.test("Simple rendering with a scroll", async (assert) => {
             <div id="scrollToHere">sroll here!</div>
         </div>
     `;
-    comp = await mount(MyComponent, { env, target: scrollableParent });
+    await mount(MyComponent, scrollableParent, { env });
 
     assert.strictEqual(scrollableParent.scrollTop, 0);
     await click(scrollableParent, ".btn.btn-primary");
@@ -169,7 +166,7 @@ QUnit.test("Rendering with multiple anchors and scrolls", async (assert) => {
             <a href="#anchor2" class="link2">TO ANCHOR 2</a>
         </div>
     `;
-    comp = await mount(MyComponent, { env, target: scrollableParent });
+    await mount(MyComponent, scrollableParent, { env });
     assert.strictEqual(scrollableParent.scrollTop, 0);
     await click(scrollableParent, ".link1");
 
@@ -216,7 +213,7 @@ QUnit.test("clicking anchor when no scrollable", async (assert) => {
             </div>
         </div>
     `;
-    comp = await mount(MyComponent, { env, target: scrollableParent });
+    await mount(MyComponent, scrollableParent, { env });
     assert.strictEqual(scrollableParent.scrollTop, 0);
     await click(scrollableParent, ".btn.btn-primary");
     assert.ok(scrollableParent.scrollTop === 0, "no scroll happened");
@@ -291,7 +288,7 @@ QUnit.test("clicking anchor when multi levels scrollables", async (assert) => {
                 </p>
         </div>
     `;
-    comp = await mount(MyComponent, { env, target: scrollableParent });
+    await mount(MyComponent, scrollableParent, { env });
 
     const border = (el) => {
         // Returns the state of the element in relation to the borders
@@ -364,7 +361,7 @@ QUnit.test("Simple scroll to HTML elements", async (assert) => {
             </p>
         </div>
     `;
-    comp = await mount(MyComponent, { env, target: scrollableParent });
+    await mount(MyComponent, scrollableParent, { env });
     assert.strictEqual(scrollableParent.scrollTop, 0);
 
     // The element must be contained in the scrollable parent (top and bottom)
diff --git a/addons/web/static/tests/core/tooltip/tooltip_service_tests.js b/addons/web/static/tests/core/tooltip/tooltip_service_tests.js
index d7756b910c1..ad5fea6e0fa 100644
--- a/addons/web/static/tests/core/tooltip/tooltip_service_tests.js
+++ b/addons/web/static/tests/core/tooltip/tooltip_service_tests.js
@@ -9,7 +9,7 @@ import { clearRegistryWithCleanup, makeTestEnv } from "../../helpers/mock_env";
 import { getFixture, nextTick, patchWithCleanup, triggerEvent } from "../../helpers/utils";
 import { registerCleanup } from "../../helpers/cleanup";
 
-const { Component, mount, useState, xml } = owl;
+const { App, Component, useState, xml } = owl;
 
 const mainComponents = registry.category("main_components");
 
@@ -61,164 +61,170 @@ async function makeParent(Child, options = {}) {
         </div>`;
     Parent.components = { PopoverContainer, Child };
 
-    const parent = await mount(Parent, { env, target });
-    registerCleanup(() => parent.destroy());
-    return parent;
+    const app = new App(Parent, {
+        env,
+        target,
+        templates: window.__OWL_TEMPLATES__,
+        test: true,
+    });
+    registerCleanup(() => app.destroy());
+    for (const [name, template] of Object.entries(options.templates || {})) {
+        app.addTemplate(name, template);
+    }
+
+    return app.mount(target);
 }
 
 let target;
-QUnit.module(
-    "Tooltip service",
-    {
-        beforeEach() {
-            target = getFixture();
-        },
-    },
-    () => {
-        QUnit.test("basic rendering", async (assert) => {
-            class MyComponent extends Component {}
-            MyComponent.template = xml`<button data-tooltip="hello">Action</button>`;
-            let simulateTimeout;
-            const mockSetTimeout = (fn) => {
-                simulateTimeout = fn;
-            };
-            let simulateInterval;
-            const mockSetInterval = (fn) => {
-                simulateInterval = fn;
-            };
-            const parent = await makeParent(MyComponent, { mockSetTimeout, mockSetInterval });
+QUnit.module("Tooltip service", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+    });
 
-            assert.containsNone(parent, ".o_popover_container .o_popover");
-            target.querySelector("button").dispatchEvent(new Event("mouseenter"));
-            await nextTick();
-            assert.containsNone(parent, ".o_popover_container .o_popover");
+    QUnit.test("basic rendering", async (assert) => {
+        class MyComponent extends Component {}
+        MyComponent.template = xml`<button data-tooltip="hello">Action</button>`;
+        let simulateTimeout;
+        const mockSetTimeout = (fn) => {
+            simulateTimeout = fn;
+        };
+        let simulateInterval;
+        const mockSetInterval = (fn) => {
+            simulateInterval = fn;
+        };
+        const parent = await makeParent(MyComponent, { mockSetTimeout, mockSetInterval });
 
-            simulateTimeout();
-            await nextTick();
-            assert.containsOnce(parent, ".o_popover_container .o_popover");
-            assert.strictEqual(
-                target.querySelector(".o_popover_container .o_popover").innerText,
-                "hello"
-            );
+        assert.containsNone(parent, ".o_popover_container .o_popover");
+        target.querySelector("button").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsNone(parent, ".o_popover_container .o_popover");
 
-            const buttonRect = target.querySelector("button").getBoundingClientRect();
-            const x = buttonRect.right + 10;
-            const y = buttonRect.bottom + 10;
-            await triggerEvent(target, "button", "mousemove", {
-                pageX: x,
-                layerX: x,
-                screenX: x,
-                pageY: y,
-                layerY: y,
-                screenY: y,
-            });
-            assert.containsOnce(parent, ".o_popover_container .o_popover");
-            simulateInterval();
-            await nextTick();
-            assert.containsNone(parent, ".o_popover_container .o_popover");
+        simulateTimeout();
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(
+            target.querySelector(".o_popover_container .o_popover").innerText,
+            "hello"
+        );
+
+        const buttonRect = target.querySelector("button").getBoundingClientRect();
+        const x = buttonRect.right + 10;
+        const y = buttonRect.bottom + 10;
+        await triggerEvent(target, "button", "mousemove", {
+            pageX: x,
+            layerX: x,
+            screenX: x,
+            pageY: y,
+            layerY: y,
+            screenY: y,
         });
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        simulateInterval();
+        await nextTick();
+        assert.containsNone(parent, ".o_popover_container .o_popover");
+    });
 
-        QUnit.test("basic rendering 2", async (assert) => {
-            class MyComponent extends Component {}
-            MyComponent.template = xml`<span data-tooltip="hello" class="our_span"><span class="our_span">Action</span></span>`;
-            let simulateTimeout;
-            const mockSetTimeout = (fn) => {
-                simulateTimeout = fn;
-            };
-            let simulateInterval;
-            const mockSetInterval = (fn) => {
-                simulateInterval = fn;
-            };
-            const parent = await makeParent(MyComponent, { mockSetTimeout, mockSetInterval });
+    QUnit.test("basic rendering 2", async (assert) => {
+        class MyComponent extends Component {}
+        MyComponent.template = xml`<span data-tooltip="hello" class="our_span"><span class="our_span">Action</span></span>`;
+        let simulateTimeout;
+        const mockSetTimeout = (fn) => {
+            simulateTimeout = fn;
+        };
+        let simulateInterval;
+        const mockSetInterval = (fn) => {
+            simulateInterval = fn;
+        };
+        const parent = await makeParent(MyComponent, { mockSetTimeout, mockSetInterval });
 
-            assert.containsNone(parent, ".o_popover_container .o_popover");
-            let [outerSpan, innerSpan] = target.querySelectorAll("span.our_span");
-            outerSpan.dispatchEvent(new Event("mouseenter"));
-            innerSpan.dispatchEvent(new Event("mouseenter"));
-            await nextTick();
-            assert.containsNone(parent, ".o_popover_container .o_popover");
+        assert.containsNone(parent, ".o_popover_container .o_popover");
+        let [outerSpan, innerSpan] = target.querySelectorAll("span.our_span");
+        outerSpan.dispatchEvent(new Event("mouseenter"));
+        innerSpan.dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsNone(parent, ".o_popover_container .o_popover");
 
-            simulateTimeout();
-            await nextTick();
-            assert.containsOnce(parent, ".o_popover_container .o_popover");
-            assert.strictEqual(
-                target.querySelector(".o_popover_container .o_popover").innerText,
-                "hello"
-            );
+        simulateTimeout();
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(
+            target.querySelector(".o_popover_container .o_popover").innerText,
+            "hello"
+        );
 
-            const outerSpanRect = outerSpan.getBoundingClientRect();
-            const x = outerSpanRect.right + 10;
-            const y = outerSpanRect.bottom + 10;
-            await triggerEvent(target, 'span[data-tooltip="hello"]', "mousemove", {
-                pageX: x,
-                layerX: x,
-                screenX: x,
-                pageY: y,
-                layerY: y,
-                screenY: y,
-            });
-            assert.containsOnce(parent, ".o_popover_container .o_popover");
-            simulateInterval();
-            await nextTick();
-            assert.containsNone(parent, ".o_popover_container .o_popover");
+        const outerSpanRect = outerSpan.getBoundingClientRect();
+        const x = outerSpanRect.right + 10;
+        const y = outerSpanRect.bottom + 10;
+        await triggerEvent(target, 'span[data-tooltip="hello"]', "mousemove", {
+            pageX: x,
+            layerX: x,
+            screenX: x,
+            pageY: y,
+            layerY: y,
+            screenY: y,
         });
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        simulateInterval();
+        await nextTick();
+        assert.containsNone(parent, ".o_popover_container .o_popover");
+    });
 
-        QUnit.test("remove element with opened tooltip", async (assert) => {
-            let compState;
-            class MyComponent extends Component {
-                setup() {
-                    this.state = useState({ visible: true });
-                    compState = this.state;
-                }
+    QUnit.test("remove element with opened tooltip", async (assert) => {
+        let compState;
+        class MyComponent extends Component {
+            setup() {
+                this.state = useState({ visible: true });
+                compState = this.state;
             }
-            MyComponent.template = xml`
+        }
+        MyComponent.template = xml`
             <div>
                 <button t-if="state.visible" data-tooltip="hello">Action</button>
             </div>`;
-            let simulateInterval;
-            const mockSetInterval = (fn) => {
-                simulateInterval = fn;
-            };
-            const parent = await makeParent(MyComponent, { mockSetInterval });
+        let simulateInterval;
+        const mockSetInterval = (fn) => {
+            simulateInterval = fn;
+        };
+        const parent = await makeParent(MyComponent, { mockSetInterval });
 
-            assert.containsOnce(parent, "button");
-            assert.containsNone(parent, ".o_popover_container .o_popover");
-            target.querySelector("button").dispatchEvent(new Event("mouseenter"));
-            await nextTick();
-            assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.containsOnce(parent, "button");
+        assert.containsNone(parent, ".o_popover_container .o_popover");
+        target.querySelector("button").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
 
-            compState.visible = false;
-            await nextTick();
-            assert.containsNone(parent, "button");
-            simulateInterval();
-            await nextTick();
-            assert.containsNone(parent, ".o_popover_container .o_popover");
-        });
+        compState.visible = false;
+        await nextTick();
+        assert.containsNone(parent, "button");
+        simulateInterval();
+        await nextTick();
+        assert.containsNone(parent, ".o_popover_container .o_popover");
+    });
 
-        QUnit.test("rendering with several tooltips", async (assert) => {
-            class MyComponent extends Component {}
-            MyComponent.template = xml`
+    QUnit.test("rendering with several tooltips", async (assert) => {
+        class MyComponent extends Component {}
+        MyComponent.template = xml`
             <div>
                 <button class="button_1" data-tooltip="tooltip 1">Action 1</button>
                 <button class="button_2" data-tooltip="tooltip 2">Action 2</button>
             </div>`;
-            const parent = await makeParent(MyComponent);
+        const parent = await makeParent(MyComponent);
 
-            assert.containsNone(parent, ".o_popover_container .o_popover");
-            target.querySelector("button.button_1").dispatchEvent(new Event("mouseenter"));
-            await nextTick();
-            assert.containsOnce(parent, ".o_popover_container .o_popover");
-            assert.strictEqual(target.querySelector(".o_popover").innerText, "tooltip 1");
-            target.querySelector("button.button_1").dispatchEvent(new Event("mouseleave"));
-            target.querySelector("button.button_2").dispatchEvent(new Event("mouseenter"));
-            await nextTick();
-            assert.containsOnce(parent, ".o_popover_container .o_popover");
-            assert.strictEqual(target.querySelector(".o_popover").innerText, "tooltip 2");
-        });
+        assert.containsNone(parent, ".o_popover_container .o_popover");
+        target.querySelector("button.button_1").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(target.querySelector(".o_popover").innerText, "tooltip 1");
+        target.querySelector("button.button_1").dispatchEvent(new Event("mouseleave"));
+        target.querySelector("button.button_2").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(target.querySelector(".o_popover").innerText, "tooltip 2");
+    });
 
-        QUnit.test("positionning", async (assert) => {
-            class MyComponent extends Component {}
-            MyComponent.template = xml`
+    QUnit.test("positionning", async (assert) => {
+        class MyComponent extends Component {}
+        MyComponent.template = xml`
             <div style="height: 400px; padding: 40px">
                 <button class="default" data-tooltip="default">Default</button>
                 <button class="top" data-tooltip="top" data-tooltip-position="top">Top</button>
@@ -226,67 +232,69 @@ QUnit.module(
                 <button class="bottom" data-tooltip="bottom" data-tooltip-position="bottom">Bottom</button>
                 <button class="left" data-tooltip="left" data-tooltip-position="left">Left</button>
             </div>`;
-            const parent = await makeParent(MyComponent);
+        const parent = await makeParent(MyComponent);
 
-            // default
-            target.querySelector("button.default").dispatchEvent(new Event("mouseenter"));
-            await nextTick();
-            assert.containsOnce(parent, ".o_popover_container .o_popover");
-            assert.strictEqual(target.querySelector(".o_popover").innerText, "default");
-            assert.hasClass(target.querySelector(".o_popover"), "o-popper-position--bm");
+        // default
+        target.querySelector("button.default").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(target.querySelector(".o_popover").innerText, "default");
+        assert.hasClass(target.querySelector(".o_popover"), "o-popper-position--bm");
 
-            // top
-            target.querySelector("button.top").dispatchEvent(new Event("mouseenter"));
-            await nextTick();
-            assert.containsOnce(parent, ".o_popover_container .o_popover");
-            assert.strictEqual(target.querySelector(".o_popover").innerText, "top");
-            assert.hasClass(target.querySelector(".o_popover"), "o-popper-position--tm");
+        // top
+        target.querySelector("button.top").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(target.querySelector(".o_popover").innerText, "top");
+        assert.hasClass(target.querySelector(".o_popover"), "o-popper-position--tm");
 
-            // right
-            target.querySelector("button.right").dispatchEvent(new Event("mouseenter"));
-            await nextTick();
-            assert.containsOnce(parent, ".o_popover_container .o_popover");
-            assert.strictEqual(target.querySelector(".o_popover").innerText, "right");
-            assert.hasClass(target.querySelector(".o_popover"), "o-popper-position--rm");
+        // right
+        target.querySelector("button.right").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(target.querySelector(".o_popover").innerText, "right");
+        assert.hasClass(target.querySelector(".o_popover"), "o-popper-position--rm");
 
-            // bottom
-            target.querySelector("button.bottom").dispatchEvent(new Event("mouseenter"));
-            await nextTick();
-            assert.containsOnce(parent, ".o_popover_container .o_popover");
-            assert.strictEqual(target.querySelector(".o_popover").innerText, "bottom");
-            assert.hasClass(target.querySelector(".o_popover"), "o-popper-position--bm");
+        // bottom
+        target.querySelector("button.bottom").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(target.querySelector(".o_popover").innerText, "bottom");
+        assert.hasClass(target.querySelector(".o_popover"), "o-popper-position--bm");
 
-            // left
-            target.querySelector("button.left").dispatchEvent(new Event("mouseenter"));
-            await nextTick();
-            assert.containsOnce(parent, ".o_popover_container .o_popover");
-            assert.strictEqual(target.querySelector(".o_popover").innerText, "left");
-            assert.hasClass(target.querySelector(".o_popover"), "o-popper-position--lm");
-        });
+        // left
+        target.querySelector("button.left").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(target.querySelector(".o_popover").innerText, "left");
+        assert.hasClass(target.querySelector(".o_popover"), "o-popper-position--lm");
+    });
 
-        QUnit.test("tooltip with a template, no info", async (assert) => {
-            class MyComponent extends Component {}
-            MyComponent.template = xml`
+    QUnit.test("tooltip with a template, no info", async (assert) => {
+        class MyComponent extends Component {}
+        MyComponent.template = xml`
             <button data-tooltip-template="my_tooltip_template">Action</button>
         `;
 
-            const parent = await makeParent(MyComponent);
-            parent.env.qweb.addTemplate("my_tooltip_template", "<i>tooltip</i>");
+        const templates = {
+            my_tooltip_template: "<i>tooltip</i>",
+        };
+        const parent = await makeParent(MyComponent, { templates });
 
-            assert.containsNone(parent, ".o_popover_container .o-tooltip");
-            target.querySelector("button").dispatchEvent(new Event("mouseenter"));
-            await nextTick();
-            assert.containsOnce(parent, ".o_popover_container .o-tooltip");
-            assert.strictEqual(target.querySelector(".o-tooltip").innerHTML, "<i>tooltip</i>");
-        });
+        assert.containsNone(parent, ".o_popover_container .o-tooltip");
+        target.querySelector("button").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o-tooltip");
+        assert.strictEqual(target.querySelector(".o-tooltip").innerHTML, "<i>tooltip</i>");
+    });
 
-        QUnit.test("tooltip with a template and info", async (assert) => {
-            class MyComponent extends Component {
-                get info() {
-                    return JSON.stringify({ x: 3, y: "abc" });
-                }
+    QUnit.test("tooltip with a template and info", async (assert) => {
+        class MyComponent extends Component {
+            get info() {
+                return JSON.stringify({ x: 3, y: "abc" });
             }
-            MyComponent.template = xml`
+        }
+        MyComponent.template = xml`
             <button
                 data-tooltip-template="my_tooltip_template"
                 t-att-data-tooltip-info="info">
@@ -294,25 +302,23 @@ QUnit.module(
             </button>
         `;
 
-            const parent = await makeParent(MyComponent);
-            parent.env.qweb.addTemplate(
-                "my_tooltip_template",
-                `
-                    <ul>
-                        <li>X: <t t-esc="info.x"/></li>
-                        <li>Y: <t t-esc="info.y"/></li>
-                    </ul>
-                `
-            );
+        const templates = {
+            my_tooltip_template: `
+                <ul>
+                    <li>X: <t t-esc="info.x"/></li>
+                    <li>Y: <t t-esc="info.y"/></li>
+                </ul>
+            `,
+        };
+        const parent = await makeParent(MyComponent, { templates });
 
-            assert.containsNone(parent, ".o_popover_container .o-tooltip");
-            target.querySelector("button").dispatchEvent(new Event("mouseenter"));
-            await nextTick();
-            assert.containsOnce(parent, ".o_popover_container .o-tooltip");
-            assert.strictEqual(
-                target.querySelector(".o-tooltip").innerHTML,
-                "<ul><li>X: 3</li><li>Y: abc</li></ul>"
-            );
-        });
-    }
-);
+        assert.containsNone(parent, ".o_popover_container .o-tooltip");
+        target.querySelector("button").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o-tooltip");
+        assert.strictEqual(
+            target.querySelector(".o-tooltip").innerHTML,
+            "<ul><li>X: 3</li><li>Y: abc</li></ul>"
+        );
+    });
+});
diff --git a/addons/web/static/tests/core/transition_test.js b/addons/web/static/tests/core/transition_test.js
new file mode 100644
index 00000000000..32b2211b0e3
--- /dev/null
+++ b/addons/web/static/tests/core/transition_test.js
@@ -0,0 +1,79 @@
+/** @odoo-module **/
+
+import { Transition, useTransition, config as transitionConfig } from "@web/core/transition";
+import { getFixture, mockTimeout, mount, nextTick, patchWithCleanup } from "../helpers/utils";
+
+const { Component, xml, useState } = owl;
+
+QUnit.module("Transition");
+
+QUnit.test("useTransition hook", async (assert) => {
+    patchWithCleanup(transitionConfig, {
+        disabled: false,
+    });
+    class Parent extends Component {
+        setup() {
+            this.transition = useTransition({
+                name: "test",
+                onLeave: () => assert.step("leave"),
+            });
+        }
+    }
+    Parent.template = xml`<div t-if="transition.shouldMount" t-att-class="transition.className"/>`;
+    const execRegisteredTimeouts = mockTimeout();
+
+    const target = getFixture();
+    const parent = await mount(Parent, target);
+    // Mounted with -enter but not -enter-active
+    assert.containsOnce(target, ".test.test-enter:not(.test-enter-active)");
+    await nextTick();
+    // No longer has -enter class but now has -enter-active
+    assert.containsOnce(target, ".test.test-enter-active:not(.test-enter)");
+    parent.transition.shouldMount = false;
+    await nextTick();
+    // Leaving: -leave but not -enter-active
+    assert.containsOnce(target, ".test.test-leave:not(.test-enter-active)");
+    assert.verifySteps([]);
+    execRegisteredTimeouts();
+    assert.verifySteps(["leave"]);
+    await nextTick();
+    assert.containsNone(target, ".test");
+});
+
+QUnit.test("Transition HOC", async (assert) => {
+    patchWithCleanup(transitionConfig, {
+        disabled: false,
+    });
+    class Parent extends Component {
+        setup() {
+            this.state = useState({ show: true });
+        }
+        onLeave() {
+            assert.step("leave");
+        }
+    }
+    Parent.template = xml`
+        <Transition name="'test'" visible="state.show" t-slot-scope="transition" onLeave="onLeave">
+            <div t-att-class="transition.className"/>
+        </Transition>
+    `;
+    Parent.components = { Transition };
+    const execRegisteredTimeouts = mockTimeout();
+
+    const target = getFixture();
+    const parent = await mount(Parent, target);
+    // Mounted with -enter but not -enter-active
+    assert.containsOnce(target, ".test.test-enter:not(.test-enter-active)");
+    await nextTick();
+    // No longer has -enter class but now has -enter-active
+    assert.containsOnce(target, ".test.test-enter-active:not(.test-enter)");
+    parent.state.show = false;
+    await nextTick();
+    // Leaving: -leave but not -enter-active
+    assert.containsOnce(target, ".test.test-leave:not(.test-enter-active)");
+    assert.verifySteps([]);
+    execRegisteredTimeouts();
+    assert.verifySteps(["leave"]);
+    await nextTick();
+    assert.containsNone(target, ".test");
+});
diff --git a/addons/web/static/tests/core/ui_service_tests.js b/addons/web/static/tests/core/ui_service_tests.js
index c383748285d..2d85768fa42 100644
--- a/addons/web/static/tests/core/ui_service_tests.js
+++ b/addons/web/static/tests/core/ui_service_tests.js
@@ -4,9 +4,9 @@ import { registry } from "@web/core/registry";
 import { uiService, useActiveElement } from "@web/core/ui/ui_service";
 import { makeTestEnv } from "../helpers/mock_env";
 import { makeFakeLocalizationService } from "../helpers/mock_services";
-import { getFixture, nextTick } from "../helpers/utils";
+import { destroy, getFixture, mount, nextTick } from "../helpers/utils";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 const serviceRegistry = registry.category("services");
 
 let target;
@@ -28,7 +28,7 @@ QUnit.test("block and unblock once ui with ui service", async (assert) => {
     const env = await makeTestEnv({ ...baseConfig });
     ({ Component: BlockUI, props } = registry.category("main_components").get("BlockUI"));
     const ui = env.services.ui;
-    await mount(BlockUI, { env, target, props });
+    await mount(BlockUI, target, { env, props });
     let blockUI = target.querySelector(".o_blockUI");
     assert.strictEqual(blockUI, null, "ui should not be blocked");
     ui.block();
@@ -45,7 +45,7 @@ QUnit.test("use block and unblock several times to block ui with ui service", as
     const env = await makeTestEnv({ ...baseConfig });
     ({ Component: BlockUI, props } = registry.category("main_components").get("BlockUI"));
     const ui = env.services.ui;
-    await mount(BlockUI, { env, target, props });
+    await mount(BlockUI, target, { env, props });
     let blockUI = target.querySelector(".o_blockUI");
     assert.strictEqual(blockUI, null, "ui should not be blocked");
     ui.block();
@@ -77,24 +77,24 @@ QUnit.test("a component can be the active element", async (assert) => {
     const ui = env.services.ui;
     assert.deepEqual(ui.activeElement, document);
 
-    const comp = await mount(MyComponent, { env, target });
+    const comp = await mount(MyComponent, target, { env });
     assert.deepEqual(ui.activeElement, comp.el);
 
-    comp.unmount();
+    destroy(comp);
     assert.deepEqual(ui.activeElement, document);
-    comp.destroy();
 });
 
 QUnit.test("a component can be the  UI active element: with t-ref delegation", async (assert) => {
     class MyComponent extends Component {
         setup() {
             useActiveElement("delegatedRef");
+            this.hasRef = true;
         }
     }
     MyComponent.template = xml`
     <div>
       <h1>My Component</h1>
-      <div id="owner" t-ref="delegatedRef"/>
+      <div t-if="hasRef" id="owner" t-ref="delegatedRef"/>
     </div>
   `;
 
@@ -102,10 +102,11 @@ QUnit.test("a component can be the  UI active element: with t-ref delegation", a
     const ui = env.services.ui;
     assert.deepEqual(ui.activeElement, document);
 
-    const comp = await mount(MyComponent, { env, target });
+    const comp = await mount(MyComponent, target, { env });
     assert.deepEqual(ui.activeElement, comp.el.querySelector("div#owner"));
+    comp.hasRef = false;
+    comp.render();
+    await nextTick();
 
-    comp.unmount();
     assert.deepEqual(ui.activeElement, document);
-    comp.destroy();
 });
diff --git a/addons/web/static/tests/core/utils/component_tests.js b/addons/web/static/tests/core/utils/component_tests.js
index 9a86bab1432..4002a8df9c9 100644
--- a/addons/web/static/tests/core/utils/component_tests.js
+++ b/addons/web/static/tests/core/utils/component_tests.js
@@ -2,20 +2,22 @@
 
 import { NotUpdatable, ErrorHandler } from "@web/core/utils/components";
 import { makeTestEnv } from "../../helpers/mock_env";
-import { getFixture } from "../../helpers/utils";
+import { getFixture, mount } from "../../helpers/utils";
 
-const { Component, mount, xml } = owl;
+const { Component, onMounted, onWillUpdateProps, xml } = owl;
 
 QUnit.module("utils", () => {
     QUnit.module("components");
 
     QUnit.test("NotUpdatable component", async function (assert) {
         class Child extends Component {
-            mounted() {
-                assert.step("mounted");
-            }
-            willUpdateProps() {
-                assert.step("willupdateprops");
+            setup() {
+                onMounted(() => {
+                    assert.step("mounted");
+                });
+                onWillUpdateProps(() => {
+                    assert.step("willupdateprops");
+                });
             }
         }
         Child.template = xml`<div>hey</div>`;
@@ -28,12 +30,11 @@ QUnit.module("utils", () => {
         Parent.components = { Child, NotUpdatable };
 
         const target = getFixture();
-        const parent = await mount(Parent, { env: makeTestEnv(), target });
+        const parent = await mount(Parent, target, { env: makeTestEnv() });
         assert.verifySteps(["mounted", "mounted"]);
 
         await parent.render();
         assert.verifySteps(["willupdateprops"]);
-        parent.destroy();
     });
 
     QUnit.test("ErrorHandler component", async function (assert) {
@@ -63,8 +64,7 @@ QUnit.module("utils", () => {
         Parent.components = { Boom, ErrorHandler };
 
         const target = getFixture();
-        const parent = await mount(Parent, { env: makeTestEnv(), target });
+        await mount(Parent, target, { env: makeTestEnv() });
         assert.strictEqual(target.innerHTML, "<div> not boom </div>");
-        parent.destroy();
     });
 });
diff --git a/addons/web/static/tests/core/utils/hooks_tests.js b/addons/web/static/tests/core/utils/hooks_tests.js
index f39fe233480..e41de8f9c10 100644
--- a/addons/web/static/tests/core/utils/hooks_tests.js
+++ b/addons/web/static/tests/core/utils/hooks_tests.js
@@ -1,20 +1,12 @@
 /** @odoo-module **/
 
 import { uiService } from "@web/core/ui/ui_service";
-import {
-    useAutofocus,
-    useBus,
-    useEffect,
-    useListener,
-    useService,
-    onDestroyed,
-} from "@web/core/utils/hooks";
+import { useAutofocus, useBus, useListener, useService } from "@web/core/utils/hooks";
 import { registry } from "@web/core/registry";
 import { makeTestEnv } from "../../helpers/mock_env";
-import { click, getFixture, nextTick } from "../../helpers/utils";
-import { registerCleanup } from "../../helpers/cleanup";
+import { click, destroy, getFixture, mount, nextTick } from "../../helpers/utils";
 
-const { Component, mount, useState, xml } = owl;
+const { Component, xml, useRef } = owl;
 const serviceRegistry = registry.category("services");
 
 QUnit.module("utils", () => {
@@ -25,11 +17,12 @@ QUnit.module("utils", () => {
             class MyComponent extends Component {
                 setup() {
                     useAutofocus();
+                    this.inputRef = useRef("autofocus");
                 }
             }
             MyComponent.template = xml`
                 <span>
-                    <input type="text" autofocus="" />
+                    <input type="text" t-ref="autofocus" />
                 </span>
             `;
 
@@ -37,28 +30,27 @@ QUnit.module("utils", () => {
 
             const env = await makeTestEnv();
             const target = getFixture();
-            const comp = await mount(MyComponent, { env, target });
+            const comp = await mount(MyComponent, target, { env });
             await nextTick();
 
-            assert.strictEqual(document.activeElement, comp.el.querySelector("input"));
+            assert.strictEqual(document.activeElement, comp.inputRef.el);
 
             comp.render();
             await nextTick();
-            assert.strictEqual(document.activeElement, comp.el.querySelector("input"));
-
-            comp.destroy();
+            assert.strictEqual(document.activeElement, comp.inputRef.el);
         });
 
         QUnit.test("useAutofocus: conditional autofocus", async function (assert) {
             class MyComponent extends Component {
                 setup() {
-                    this.forceFocus = useAutofocus();
+                    this.forceFocus = useAutofocus("input");
+                    this.inputRef = useRef("input");
                     this.showInput = true;
                 }
             }
             MyComponent.template = xml`
                 <span>
-                    <input t-if="showInput" type="text" autofocus="" />
+                    <input t-if="showInput" type="text" t-ref="input" />
                 </span>
             `;
 
@@ -66,24 +58,22 @@ QUnit.module("utils", () => {
 
             const env = await makeTestEnv();
             const target = getFixture();
-            const comp = await mount(MyComponent, { env, target });
+            const comp = await mount(MyComponent, target, { env });
             await nextTick();
 
-            assert.strictEqual(document.activeElement, comp.el.querySelector("input"));
+            assert.strictEqual(document.activeElement, comp.inputRef.el);
 
             comp.showInput = false;
             comp.forceFocus();
             comp.render();
             await nextTick();
-            assert.notStrictEqual(document.activeElement, comp.el.querySelector("input"));
+            assert.notStrictEqual(document.activeElement, comp.inputRef.el);
 
             comp.showInput = true;
             comp.forceFocus();
             comp.render();
             await nextTick();
-            assert.strictEqual(document.activeElement, comp.el.querySelector("input"));
-
-            comp.destroy();
+            assert.strictEqual(document.activeElement, comp.inputRef.el);
         });
 
         QUnit.module("useBus");
@@ -101,211 +91,17 @@ QUnit.module("utils", () => {
 
             const env = await makeTestEnv();
             const target = getFixture();
-            const comp = await mount(MyComponent, { env, target });
+            const comp = await mount(MyComponent, target, { env });
             env.bus.trigger("test-event");
             await nextTick();
             assert.verifySteps(["callback"]);
 
-            comp.unmount();
+            destroy(comp);
             env.bus.trigger("test-event");
             await nextTick();
             assert.verifySteps([]);
-
-            comp.destroy();
         });
 
-        QUnit.module("useEffect");
-
-        QUnit.test(
-            "useEffect: effect runs on mount, is reapplied on patch, and is cleaned up on unmount and before reapplying",
-            async function (assert) {
-                assert.expect(7);
-
-                let cleanupRun = 0;
-                class MyComponent extends Component {
-                    setup() {
-                        this.state = useState({
-                            value: 0,
-                        });
-                        useEffect(() => {
-                            assert.step(`value is ${this.state.value}`);
-                            return () =>
-                                assert.step(
-                                    `cleaning up for value = ${
-                                        this.state.value
-                                    } (cleanup ${cleanupRun++})`
-                                );
-                        });
-                    }
-                }
-                MyComponent.template = xml`<div/>`;
-
-                const env = await makeTestEnv();
-                const target = getFixture();
-                const component = await mount(MyComponent, { env, target });
-
-                assert.step("before state mutation");
-                component.state.value++;
-                // Wait for an owl render
-                await new Promise((resolve) => requestAnimationFrame(resolve));
-                assert.step("after state mutation");
-                await component.unmount();
-
-                assert.verifySteps([
-                    "value is 0",
-                    "before state mutation",
-                    // While one might expect value to be 0 at cleanup, because the value is
-                    // read during cleanup from the state rather than captured by a dependency
-                    // it already has the new value. Having this in business code is a symptom
-                    // of a missing dependency and can lead to bugs.
-                    "cleaning up for value = 1 (cleanup 0)",
-                    "value is 1",
-                    "after state mutation",
-                    "cleaning up for value = 1 (cleanup 1)",
-                ]);
-            }
-        );
-
-        QUnit.test(
-            "useEffect: dependencies prevent effects from rerunning when unchanged",
-            async function (assert) {
-                assert.expect(21);
-
-                class MyComponent extends Component {
-                    setup() {
-                        this.state = useState({
-                            a: 0,
-                            b: 0,
-                        });
-                        useEffect(
-                            (a) => {
-                                assert.step(`Effect a: ${a}`);
-                                return () => assert.step(`cleaning up for a: ${a}`);
-                            },
-                            () => [this.state.a]
-                        );
-                        useEffect(
-                            (b) => {
-                                assert.step(`Effect b: ${b}`);
-                                return () => assert.step(`cleaning up for b: ${b}`);
-                            },
-                            () => [this.state.b]
-                        );
-                        useEffect(
-                            (a, b) => {
-                                assert.step(`Effect ab: {a: ${a}, b: ${b}}`);
-                                return () => assert.step(`cleaning up for ab: {a: ${a}, b: ${b}}`);
-                            },
-                            () => [this.state.a, this.state.b]
-                        );
-                    }
-                }
-                MyComponent.template = xml`<div/>`;
-
-                const env = await makeTestEnv();
-                const target = getFixture();
-                assert.step("before mount");
-                const component = await mount(MyComponent, { env, target });
-                assert.step("after mount");
-
-                assert.step("before state mutation: a");
-                component.state.a++;
-                // Wait for an owl render
-                await new Promise((resolve) => requestAnimationFrame(resolve));
-                assert.step("after state mutation: a");
-
-                assert.step("before state mutation: b");
-                component.state.b++;
-                // Wait for an owl render
-                await new Promise((resolve) => requestAnimationFrame(resolve));
-                assert.step("after state mutation: b");
-                await component.unmount();
-
-                assert.verifySteps([
-                    // All effects run on mount
-                    "before mount",
-                    "Effect a: 0",
-                    "Effect b: 0",
-                    "Effect ab: {a: 0, b: 0}",
-                    "after mount",
-
-                    "before state mutation: a",
-                    // Cleanups run in reverse order
-                    "cleaning up for ab: {a: 0, b: 0}",
-                    // Cleanup for b is not run
-                    "cleaning up for a: 0",
-
-                    "Effect a: 1",
-                    // Effect b is not run
-                    "Effect ab: {a: 1, b: 0}",
-                    "after state mutation: a",
-
-                    "before state mutation: b",
-                    "cleaning up for ab: {a: 1, b: 0}",
-                    "cleaning up for b: 0",
-                    // Cleanup for a is not run
-
-                    // Effect a is not run
-                    "Effect b: 1",
-                    "Effect ab: {a: 1, b: 1}",
-                    "after state mutation: b",
-
-                    // All cleanups run on unmount
-                    "cleaning up for ab: {a: 1, b: 1}",
-                    "cleaning up for b: 1",
-                    "cleaning up for a: 1",
-                ]);
-            }
-        );
-
-        QUnit.test(
-            "useEffect: effect with empty dependency list never reruns",
-            async function (assert) {
-                assert.expect(6);
-
-                class MyComponent extends Component {
-                    setup() {
-                        this.state = useState({
-                            value: 0,
-                        });
-                        useEffect(
-                            () => {
-                                assert.step(`value is ${this.state.value}`);
-                                return () => assert.step(`cleaning up for ${this.state.value}`);
-                            },
-                            () => []
-                        );
-                    }
-                }
-                MyComponent.template = xml`<div t-esc="state.value"/>`;
-
-                const env = await makeTestEnv();
-                const target = getFixture();
-                const component = await mount(MyComponent, { env, target });
-
-                assert.step("before state mutation");
-                component.state.value++;
-                // Wait for an owl render
-                await new Promise((resolve) => requestAnimationFrame(resolve));
-                assert.equal(
-                    component.el.textContent,
-                    1,
-                    "Value was correctly changed inside the component"
-                );
-                assert.step("after state mutation");
-                await component.unmount();
-
-                assert.verifySteps([
-                    "value is 0",
-                    "before state mutation",
-                    // no cleanup or effect caused by mutation
-                    "after state mutation",
-                    // Value being clean
-                    "cleaning up for 1",
-                ]);
-            }
-        );
-
         QUnit.module("useListener");
 
         QUnit.test("useListener: simple usecase", async function (assert) {
@@ -318,10 +114,7 @@ QUnit.module("utils", () => {
 
             const env = await makeTestEnv();
             const target = getFixture();
-            const comp = await mount(MyComponent, { env, target });
-            registerCleanup(() => {
-                comp.destroy();
-            });
+            const comp = await mount(MyComponent, target, { env });
 
             await click(comp.el);
             assert.verifySteps(["click"]);
@@ -344,10 +137,7 @@ QUnit.module("utils", () => {
 
             const env = await makeTestEnv();
             const target = getFixture();
-            const comp = await mount(MyComponent, { env, target });
-            registerCleanup(() => {
-                comp.destroy();
-            });
+            const comp = await mount(MyComponent, target, { env });
 
             await click(comp.el);
             assert.verifySteps([]);
@@ -355,7 +145,8 @@ QUnit.module("utils", () => {
             assert.verifySteps(["click"]);
 
             comp.flag = false;
-            await comp.render();
+            comp.render();
+            await nextTick();
             await click(comp.el.querySelector("button span"));
             assert.verifySteps(["click"]);
         });
@@ -377,10 +168,7 @@ QUnit.module("utils", () => {
 
             const env = await makeTestEnv();
             const target = getFixture();
-            const comp = await mount(MyComponent, { env, target });
-            registerCleanup(() => {
-                comp.destroy();
-            });
+            const comp = await mount(MyComponent, target, { env });
 
             await click(comp.el);
             assert.verifySteps([]);
@@ -406,7 +194,7 @@ QUnit.module("utils", () => {
             const env = await makeTestEnv();
             const target = getFixture();
             try {
-                await mount(MyComponent, { env, target });
+                await mount(MyComponent, target, { env });
             } catch (e) {
                 assert.strictEqual(e.message, "Service toy_service is not available");
             }
@@ -430,27 +218,8 @@ QUnit.module("utils", () => {
             const env = await makeTestEnv();
             const target = getFixture();
 
-            const comp = await mount(MyComponent, { env, target });
+            const comp = await mount(MyComponent, target, { env });
             assert.strictEqual(comp.toyService, null);
-            comp.unmount();
-        });
-
-        QUnit.module("onDestroyed");
-
-        QUnit.test("onDestroyed is called", async (assert) => {
-            assert.expect(3);
-            class MyComponent extends Component {
-                setup() {
-                    onDestroyed(() => assert.step("onDestroyed"));
-                }
-            }
-            MyComponent.template = xml`<div/>`;
-
-            const target = getFixture();
-            const component = await mount(MyComponent, { target });
-            assert.verifySteps([]);
-            component.destroy();
-            assert.verifySteps(["onDestroyed"]);
         });
     });
 });
diff --git a/addons/web/static/tests/helpers/mock_env.js b/addons/web/static/tests/helpers/mock_env.js
index 867646a2b27..d06366ef938 100644
--- a/addons/web/static/tests/helpers/mock_env.js
+++ b/addons/web/static/tests/helpers/mock_env.js
@@ -10,28 +10,30 @@ import { makeMockServer } from "./mock_server";
 import { mocks } from "./mock_services";
 import { patchWithCleanup } from "./utils";
 
-export function clearRegistryWithCleanup(registry) {
+function prepareRegistry(registry, keepContent = false) {
+    const _addEventListener = registry.addEventListener.bind(registry);
+    const _removeEventListener = registry.removeEventListener.bind(registry);
     const patch = {
-        content: {},
+        content: keepContent ? { ...registry.content } : {},
         elements: null,
         entries: null,
         subRegistries: {},
-        // Preserve OnUpdate handlers
-        subscriptions: { UPDATE: [...registry.subscriptions.UPDATE] },
+        addEventListener(type, callback) {
+            _addEventListener(type, callback);
+            registerCleanup(() => {
+                _removeEventListener(type, callback);
+            });
+        },
     };
     patchWithCleanup(registry, patch);
 }
 
+export function clearRegistryWithCleanup(registry) {
+    prepareRegistry(registry);
+}
+
 function cloneRegistryWithCleanup(registry) {
-    const patch = {
-        content: { ...registry.content },
-        elements: null,
-        entries: null,
-        subRegistries: {},
-        // Preserve OnUpdate handlers
-        subscriptions: { UPDATE: [...registry.subscriptions.UPDATE] },
-    };
-    patchWithCleanup(registry, patch);
+    prepareRegistry(registry, true);
 }
 
 export function clearServicesMetadataWithCleanup() {
@@ -110,8 +112,8 @@ export async function makeTestEnv(config = {}) {
     });
 
     const env = makeEnv();
+    owl.Component.env = env;
     env.config = config.config || {};
     await startServices(env);
-    env.qweb.addTemplates(window.__ODOO_TEMPLATES__);
     return env;
 }
diff --git a/addons/web/static/tests/helpers/mock_services.js b/addons/web/static/tests/helpers/mock_services.js
index 3c636bea7d8..593e339756b 100644
--- a/addons/web/static/tests/helpers/mock_services.js
+++ b/addons/web/static/tests/helpers/mock_services.js
@@ -3,7 +3,7 @@
 import { browser } from "@web/core/browser/browser";
 import { routerService } from "@web/core/browser/router_service";
 import { localization } from "@web/core/l10n/localization";
-import { translatedTerms } from "@web/core/l10n/translation";
+import { _t } from "@web/core/l10n/translation";
 import { rpcService } from "@web/core/network/rpc_service";
 import { userService } from "@web/core/user_service";
 import { effectService } from "@web/core/effects/effect_service";
@@ -13,7 +13,7 @@ import { patchWithCleanup } from "./utils";
 import { companyService } from "@web/webclient/company_service";
 import { uiService } from "@web/core/ui/ui_service";
 
-const { Component } = owl;
+const { Component, status } = owl;
 
 // -----------------------------------------------------------------------------
 // Mock Services
@@ -40,16 +40,14 @@ export function makeFakeLocalizationService(config = {}) {
     return {
         name: "localization",
         start: async (env) => {
-            const _t = (str) => translatedTerms[str] || str;
             env._t = _t;
-            env.qweb.translateFn = _t;
         },
     };
 }
 
 function buildMockRPC(mockRPC) {
     return async function (...args) {
-        if (this instanceof Component && this.__owl__.status === 5) {
+        if (this instanceof Component && status(this) === "destroyed") {
             return new Promise(() => {});
         }
         if (mockRPC) {
@@ -154,7 +152,8 @@ export function makeFakeRouterService(params = {}) {
     return {
         start({ bus }) {
             const router = routerService.start(...arguments);
-            bus.on("test:hashchange", null, (hash) => {
+            bus.addEventListener("test:hashchange", (ev) => {
+                const hash = ev.detail;
                 browser.location.hash = objectToUrlEncodedString(hash);
             });
             registerCleanup(router.cancelPushes);
@@ -258,12 +257,16 @@ export function makeFakeUserService(hasGroup = () => false) {
 }
 
 export function makeFakeHTTPService(getResponse, postResponse) {
-    getResponse = getResponse || ((route, readMethod) => {
-        return readMethod === "json" ? {} : "";
-    });
-    postResponse = postResponse || ((route, params, readMethod) => {
-        return readMethod === "json" ? {} : "";
-    });
+    getResponse =
+        getResponse ||
+        ((route, readMethod) => {
+            return readMethod === "json" ? {} : "";
+        });
+    postResponse =
+        postResponse ||
+        ((route, params, readMethod) => {
+            return readMethod === "json" ? {} : "";
+        });
     return {
         start() {
             return {
@@ -272,7 +275,7 @@ export function makeFakeHTTPService(getResponse, postResponse) {
                 },
                 async post(...args) {
                     return postResponse(...args);
-                }
+                },
             };
         },
     };
diff --git a/addons/web/static/tests/helpers/utils.js b/addons/web/static/tests/helpers/utils.js
index af3951fa83b..0770f8a7217 100644
--- a/addons/web/static/tests/helpers/utils.js
+++ b/addons/web/static/tests/helpers/utils.js
@@ -6,6 +6,8 @@ import { patch, unpatch } from "@web/core/utils/patch";
 import { registerCleanup } from "./cleanup";
 import { download } from "@web/core/network/download";
 
+const { App, onMounted, onPatched, useComponent } = owl;
+
 /**
  * Patch the native Date object
  *
@@ -340,3 +342,73 @@ export function mockAnimationFrame() {
         callbacks.clear();
     };
 }
+
+export async function mount(Comp, target, config = {}) {
+    let { props, env } = config;
+    env = env || {};
+    const configuration = {
+        env,
+        templates: window.__OWL_TEMPLATES__,
+        test: true,
+        props,
+    };
+    if (env.services && "localization" in env.services) {
+        configuration.translateFn = env._t;
+    }
+    const app = new App(Comp, configuration);
+    registerCleanup(() => app.destroy());
+    return app.mount(target);
+}
+
+export function destroy(comp) {
+    comp.__owl__.app.destroy();
+}
+
+export function findChildren(comp, predicate = (e) => e) {
+    let queue = [];
+    [].unshift.apply(queue, Object.values(comp.__owl__.children));
+
+    while (queue.length > 0) {
+        const curNode = queue.pop();
+        if (predicate(curNode)) {
+            return curNode;
+        }
+        [].unshift.apply(queue, Object.values(curNode.component.__owl__.children));
+    }
+}
+
+// partial replacement of t-ref on component
+export function useChild() {
+    const node = useComponent().__owl__;
+    const setChild = () => {
+        const componentNode = Object.values(node.children)[0];
+        node.component.child = componentNode.component;
+    };
+    onMounted(setChild);
+    onPatched(setChild);
+}
+
+const lifeCycleHooks = [
+    "onError",
+    "onMounted",
+    "onPatched",
+    "onRendered",
+    "onWillDestroy",
+    "onWillPatch",
+    "onWillRender",
+    "onWillStart",
+    "onWillUnmount",
+    "onWillUpdateProps",
+];
+export function useLogLifeCycle(logFn, name = "") {
+    const component = owl.useComponent();
+    let loggedName = `${component.constructor.name}`;
+    if (name) {
+        loggedName = `${component.constructor.name} ${name}`;
+    }
+    for (const hook of lifeCycleHooks) {
+        owl[hook](() => {
+            logFn(`${hook} ${loggedName}`);
+        });
+    }
+}
diff --git a/addons/web/static/tests/legacy/component_extension_tests.js b/addons/web/static/tests/legacy/component_extension_tests.js
index d33ed8fcde9..a4ec30349b2 100644
--- a/addons/web/static/tests/legacy/component_extension_tests.js
+++ b/addons/web/static/tests/legacy/component_extension_tests.js
@@ -3,25 +3,27 @@ odoo.define('web.component_extension_tests', function (require) {
 
     const makeTestEnvironment = require("web.test_env");
     const testUtils = require("web.test_utils");
-
-    const { useListener } = require('web.custom_hooks');
+    const { destroy, getFixture, mount } = require("@web/../tests/helpers/utils");
 
     const { Component, xml } = owl;
+    const { useListener } = require("@web/core/utils/hooks");
 
-    QUnit.module("web", function () {
+    let target;
+    QUnit.module("web", { beforeEach() { target = getFixture(); }}, function () {
         QUnit.module("Component Extension");
 
         QUnit.test("Component destroyed while performing successful RPC", async function (assert) {
             assert.expect(1);
 
             class Parent extends Component {}
-            Parent.env = makeTestEnvironment({}, () => Promise.resolve());
             Parent.template = xml`<div/>`;
 
-            const parent = new Parent();
+            const env = makeTestEnvironment({}, () => Promise.resolve());
+
+            const parent = await mount(Parent, target, { env });
 
             parent.rpc({}).then(() => { throw new Error(); });
-            parent.destroy();
+            destroy(parent);
 
             await testUtils.nextTick();
 
@@ -32,13 +34,13 @@ odoo.define('web.component_extension_tests', function (require) {
             assert.expect(1);
 
             class Parent extends Component {}
-            Parent.env = makeTestEnvironment({}, () => Promise.reject());
             Parent.template = xml`<div/>`;
 
-            const parent = new Parent();
+            const env = makeTestEnvironment({}, () => Promise.reject());
+            const parent = await mount(Parent, target, { env });
 
             parent.rpc({}).catch(() => { throw new Error(); });
-            parent.destroy();
+            destroy(parent);
 
             await testUtils.nextTick();
 
@@ -51,24 +53,26 @@ odoo.define('web.component_extension_tests', function (require) {
             assert.expect(1);
 
             class Parent extends Component {
-                constructor() {
-                    super();
+                setup() {
                     useListener('custom1', '_onCustom1');
                 }
             }
-            Parent.env = makeTestEnvironment({}, () => Promise.reject());
             Parent.template = xml`<div/>`;
+            const env = makeTestEnvironment({}, () => Promise.reject());
 
-            assert.throws(() => new Parent(null), 'The handler must be a function');
+            try {
+                await mount(Parent, target, { env })
+            } catch (e) {
+                assert.strictEqual(e.message, 'The handler must be a function');
+            }
         });
 
         QUnit.test("useListener in inheritance setting", async function (assert) {
             assert.expect(12);
-            const fixture = document.body.querySelector('#qunit-fixture');
+            const env = makeTestEnvironment({}, () => Promise.reject());
 
             class Parent extends Component {
-                constructor() {
-                    super();
+                setup() {
                     useListener('custom1', this._onCustom1);
                     useListener('custom2', this._onCustom2);
                 }
@@ -79,12 +83,11 @@ odoo.define('web.component_extension_tests', function (require) {
                     assert.step('parent custom2');
                 }
             }
-            Parent.env = makeTestEnvironment({}, () => Promise.reject());
             Parent.template = xml`<div/>`;
 
             class Child extends Parent {
-                constructor() {
-                    super();
+                setup() {
+                    super.setup();
                     useListener('custom2', this._onCustom2);
                     useListener('custom3', this._onCustom3);
                 }
@@ -96,10 +99,8 @@ odoo.define('web.component_extension_tests', function (require) {
                 }
             }
 
-            const parent = new Parent(null);
-            const child = new Child(null);
-            await parent.mount(fixture);
-            await child.mount(fixture);
+            const parent = await mount(Parent, target, { env });
+            const child = await mount(Child, target, { env });
 
             parent.trigger('custom1');
             assert.verifySteps(['Parent custom1']);
@@ -116,79 +117,69 @@ odoo.define('web.component_extension_tests', function (require) {
             assert.verifySteps(['overriden custom2', 'overriden custom2']);
             child.trigger('custom3');
             assert.verifySteps(['child custom3']);
-            parent.destroy();
-            child.destroy();
         });
 
         QUnit.test("useListener with native JS selector", async function (assert) {
             assert.expect(3);
-            const fixture = document.body.querySelector('#qunit-fixture');
 
             class Parent extends Component {
-                constructor() {
-                    super();
+                setup() {
                     useListener('custom1', 'div .custom-class', this._onCustom1);
                 }
                 _onCustom1() {
                     assert.step(`custom1`);
                 }
             }
-            Parent.env = makeTestEnvironment({}, () => Promise.reject());
             Parent.template = xml`
                 <div>
                     <p>no trigger</p>
                     <h1 class="custom-class">triggers</h1>
-                </div>`;
+                </div>
+            `;
 
-            const parent = new Parent(null);
-            await parent.mount(fixture);
+            const env = makeTestEnvironment({}, () => Promise.reject());
+            const parent = await mount(Parent, target, { env });
 
             parent.el.querySelector('p').dispatchEvent(new Event('custom1', {bubbles: true}));
             assert.verifySteps([]);
             parent.el.querySelector('h1').dispatchEvent(new Event('custom1', {bubbles: true}));
             assert.verifySteps(['custom1']);
-            parent.destroy();
         });
 
         QUnit.test("useListener with native JS selector delegation", async function (assert) {
             assert.expect(3);
-            const fixture = document.body.querySelector('#qunit-fixture');
 
             class Parent extends Component {
-                constructor() {
-                    super();
+                setup() {
                     useListener('custom1', '.custom-class', this._onCustom1);
                 }
                 _onCustom1() {
                     assert.step(`custom1`);
                 }
             }
-            Parent.env = makeTestEnvironment({}, () => Promise.reject());
             Parent.template = xml`
                 <div>
                     <p>no trigger</p>
                     <h1 class="custom-class"><h2>triggers</h2></h1>
                 </div>`;
 
-            fixture.classList.add('custom-class');
-            const parent = new Parent(null);
-            await parent.mount(fixture);
+            target.classList.add('custom-class');
+            const env = makeTestEnvironment({}, () => Promise.reject());
+
+            const parent = await mount(Parent, target, { env });
 
             parent.el.querySelector('p').dispatchEvent(new Event('custom1', {bubbles: true}));
             assert.verifySteps([]);
             parent.el.querySelector('h2').dispatchEvent(new Event('custom1', {bubbles: true}));
             assert.verifySteps(['custom1']);
-            parent.destroy();
-            fixture.classList.remove('custom-class');
+            target.classList.remove('custom-class');
         });
 
         QUnit.test("useListener with capture option", async function (assert) {
             assert.expect(7);
-            const fixture = document.body.querySelector('#qunit-fixture');
 
             class Leaf extends Component {
-                constructor() {
-                    super();
+                setup() {
                     useListener('custom1', this._onCustom1);
                 }
                 _onCustom1() {
@@ -198,8 +189,7 @@ odoo.define('web.component_extension_tests', function (require) {
             Leaf.template = xml`<div class="leaf"/>`;
 
             class Root extends Component {
-                constructor() {
-                    super();
+                setup() {
                     useListener('custom1', this._onCustom1, { capture: true });
                 }
                 _onCustom1(event) {
@@ -213,8 +203,7 @@ odoo.define('web.component_extension_tests', function (require) {
             Root.template = xml`<div class="root"><Leaf/></div>`;
             Root.components = { Leaf };
 
-            const root = new Root(null);
-            await root.mount(fixture);
+            await mount(Root, target);
 
             const rootNode = document.body.querySelector('.root');
             const leafNode = document.body.querySelector('.leaf');
@@ -245,8 +234,6 @@ odoo.define('web.component_extension_tests', function (require) {
                 }
             }));
             assert.verifySteps(['Root custom1', 'Leaf custom1']);
-
-            root.destroy();
         });
     });
 });
diff --git a/addons/web/static/tests/legacy/components/action_menus_tests.js b/addons/web/static/tests/legacy/components/action_menus_tests.js
index 8cbf6ff738d..80e28da53d6 100644
--- a/addons/web/static/tests/legacy/components/action_menus_tests.js
+++ b/addons/web/static/tests/legacy/components/action_menus_tests.js
@@ -82,8 +82,6 @@ odoo.define('web.action_menus_tests', function (require) {
             await testUtils.controlPanel.toggleActionMenu(actionMenus, "Print");
 
             assert.containsNone(actionMenus, '.dropdown-menu');
-
-            actionMenus.destroy();
         });
 
         QUnit.test("empty action menus", async function (assert) {
@@ -101,8 +99,6 @@ odoo.define('web.action_menus_tests', function (require) {
             });
 
             assert.containsNone(actionMenus, ".o_cp_action_menus > *");
-
-            actionMenus.destroy();
         });
 
         QUnit.test('execute action', async function (assert) {
@@ -139,8 +135,6 @@ odoo.define('web.action_menus_tests', function (require) {
             await testUtils.controlPanel.toggleMenuItem(actionMenus, "What's taters, precious ?");
 
             assert.verifySteps(['load-action', 'do-action']);
-
-            actionMenus.destroy();
         });
 
         QUnit.test('execute callback action', async function (assert) {
@@ -173,8 +167,6 @@ odoo.define('web.action_menus_tests', function (require) {
             await testUtils.controlPanel.toggleMenuItem(actionMenus, "Boil'em");
 
             await callbackPromise;
-
-            actionMenus.destroy();
         });
 
         QUnit.test('execute print action', async function (assert) {
@@ -211,8 +203,6 @@ odoo.define('web.action_menus_tests', function (require) {
             await testUtils.controlPanel.toggleMenuItem(actionMenus, "Po-ta-toes");
 
             assert.verifySteps(['load-action', 'do-action']);
-
-            actionMenus.destroy();
         });
 
         QUnit.test('execute url action', async function (assert) {
@@ -243,8 +233,6 @@ odoo.define('web.action_menus_tests', function (require) {
             await testUtils.controlPanel.toggleMenuItem(actionMenus, "Stick'em in a stew");
 
             assert.verifySteps(['#stew']);
-
-            actionMenus.destroy();
         });
 
         QUnit.test('execute action with context', async function (assert) {
@@ -271,8 +259,6 @@ odoo.define('web.action_menus_tests', function (require) {
 
             await testUtils.controlPanel.toggleActionMenu(actionMenus, "Action");
             await testUtils.controlPanel.toggleMenuItem(actionMenus, "What's taters, precious ?");
-
-            actionMenus.destroy();
         });
     });
 });
diff --git a/addons/web/static/tests/legacy/components/custom_checkbox_tests.js b/addons/web/static/tests/legacy/components/custom_checkbox_tests.js
index 21d7ae53af2..dc2204aa43a 100644
--- a/addons/web/static/tests/legacy/components/custom_checkbox_tests.js
+++ b/addons/web/static/tests/legacy/components/custom_checkbox_tests.js
@@ -25,8 +25,6 @@ odoo.define('web.custom_checkbox_tests', function (require) {
 
             await testUtilsDom.click(checkbox.el.querySelector('label'));
             assert.ok(input.checked, 'checkbox should be checked');
-
-            checkbox.destroy();
         });
 
         QUnit.test('test checkbox: custom values', async function(assert) {
@@ -49,8 +47,6 @@ odoo.define('web.custom_checkbox_tests', function (require) {
             assert.ok(input.checked, 'checkbox should be checked');
             assert.strictEqual(input.id, 'my-custom-checkbox');
             assert.ok(input.checked, 'checkbox should be checked');
-
-            checkbox.destroy();
         });
     });
 });
diff --git a/addons/web/static/tests/legacy/components/custom_file_input_tests.js b/addons/web/static/tests/legacy/components/custom_file_input_tests.js
index 279bf67f11b..19b6701b150 100644
--- a/addons/web/static/tests/legacy/components/custom_file_input_tests.js
+++ b/addons/web/static/tests/legacy/components/custom_file_input_tests.js
@@ -41,8 +41,6 @@ odoo.define('web.custom_file_input_tests', function (require) {
 
             assert.notOk(input.multiple, "'multiple' attribute should not be set");
             assert.verifySteps(['/web/binary/upload']);
-
-            customFileInput.destroy();
         });
 
         QUnit.test("Upload a file: custom attachment", async function (assert) {
@@ -83,8 +81,6 @@ odoo.define('web.custom_file_input_tests', function (require) {
 
             assert.ok(input.multiple, "'multiple' attribute should be set");
             assert.verifySteps(['/web/binary/upload_attachment']);
-
-            customFileInput.destroy();
         });
     });
 });
diff --git a/addons/web/static/tests/legacy/components/datepicker_tests.js b/addons/web/static/tests/legacy/components/datepicker_tests.js
index 8b7f3ab0074..aead623c7b9 100644
--- a/addons/web/static/tests/legacy/components/datepicker_tests.js
+++ b/addons/web/static/tests/legacy/components/datepicker_tests.js
@@ -39,8 +39,6 @@ odoo.define('web.datepicker_tests', function (require) {
                 '01/09/1997',
                 "Datepicker should have set the correct day"
             );
-
-            picker.destroy();
         });
 
         QUnit.test("pick a date", async function (assert) {
@@ -67,8 +65,6 @@ odoo.define('web.datepicker_tests', function (require) {
 
             assert.strictEqual(input.value, '02/08/1997');
             assert.verifySteps(['datetime-changed']);
-
-            picker.destroy();
         });
 
         QUnit.test("pick a date with locale", async function (assert) {
@@ -108,8 +104,6 @@ odoo.define('web.datepicker_tests', function (require) {
 
             moment.locale(originalLocale);
             moment.updateLocale('frenchForTests', null);
-
-            picker.destroy();
         });
 
         QUnit.test("enter a date value", async function (assert) {
@@ -140,8 +134,6 @@ odoo.define('web.datepicker_tests', function (require) {
                 '02/08/1997',
                 "Datepicker should have set the correct day"
             );
-
-            picker.destroy();
         });
 
         QUnit.test("Date format is correctly set", async function (assert) {
@@ -160,7 +152,6 @@ odoo.define('web.datepicker_tests', function (require) {
 
             assert.strictEqual(input.value, '1997/01/09');
 
-            picker.destroy();
             testUtils.mock.unpatch(time);
         });
 
@@ -197,8 +188,6 @@ odoo.define('web.datepicker_tests', function (require) {
                 "Datepicker should have set the correct minute");
             assert.strictEqual(document.querySelector('.timepicker .timepicker-second').innerText.trim(), '01',
                 "Datepicker should have set the correct second");
-
-            picker.destroy();
         });
 
         QUnit.test("pick a date and time", async function (assert) {
@@ -232,8 +221,6 @@ odoo.define('web.datepicker_tests', function (require) {
 
             assert.strictEqual(input.value, '02/08/1997 15:45:05');
             assert.verifySteps(['datetime-changed']);
-
-            picker.destroy();
         });
 
         QUnit.test("pick a date and time with locale", async function (assert) {
@@ -285,8 +272,6 @@ odoo.define('web.datepicker_tests', function (require) {
 
             moment.locale(originalLocale);
             moment.updateLocale('frenchForTests', null);
-
-            picker.destroy();
         });
 
         QUnit.test("enter a datetime value", async function (assert) {
@@ -324,8 +309,6 @@ odoo.define('web.datepicker_tests', function (require) {
                 "Datepicker should have set the correct minute");
             assert.strictEqual(document.querySelector('.timepicker .timepicker-second').innerText.trim(), '05',
                 "Datepicker should have set the correct second");
-
-            picker.destroy();
         });
 
         QUnit.test("Date time format is correctly set", async function (assert) {
@@ -344,7 +327,6 @@ odoo.define('web.datepicker_tests', function (require) {
 
             assert.strictEqual(input.value, '12:30:01 1997/01/09');
 
-            picker.destroy();
             testUtils.mock.unpatch(time);
         });
     });
diff --git a/addons/web/static/tests/legacy/components/dropdown_menu_mobile_tests.js b/addons/web/static/tests/legacy/components/dropdown_menu_mobile_tests.js
index bed44988d6d..36213b97ac8 100644
--- a/addons/web/static/tests/legacy/components/dropdown_menu_mobile_tests.js
+++ b/addons/web/static/tests/legacy/components/dropdown_menu_mobile_tests.js
@@ -61,7 +61,6 @@ odoo.define('web.dropdown_menu_mobile_tests', function (require) {
                 "should display the dropdown menu at the left screen");
 
             dropdown.el.parentNode.classList.remove('clearfix');
-            dropdown.destroy();
             viewPort.style.position = '';
 
         });
diff --git a/addons/web/static/tests/legacy/components/dropdown_menu_tests.js b/addons/web/static/tests/legacy/components/dropdown_menu_tests.js
index 7de361d0a05..d8d7a9edb4e 100644
--- a/addons/web/static/tests/legacy/components/dropdown_menu_tests.js
+++ b/addons/web/static/tests/legacy/components/dropdown_menu_tests.js
@@ -3,6 +3,8 @@ odoo.define('web.dropdown_menu_tests', function (require) {
 
     const DropdownMenu = require('web.DropdownMenu');
     const testUtils = require('web.test_utils');
+    const makeTestEnvironment  = require("web.test_env");
+    const { mount } = require("@web/../tests/helpers/utils");
 
     const { Component, useState, xml } = owl;
     const { createComponent } = testUtils;
@@ -65,8 +67,6 @@ odoo.define('web.dropdown_menu_tests', function (require) {
 
             assert.containsNone(dropdown, '.dropdown-menu',
                 "Clicking outside of the dropdown should close it");
-
-            dropdown.destroy();
         });
 
         QUnit.test('only one dropdown rendering at same time (owl vs bootstrap dropdown)', async function (assert) {
@@ -122,7 +122,6 @@ odoo.define('web.dropdown_menu_tests', function (require) {
                 "bs dropdown menu should not be visible");
 
             bsDropdown.remove();
-            dropdown.destroy();
         });
 
         QUnit.test('click on an item without options should toggle it', async function (assert) {
@@ -150,8 +149,6 @@ odoo.define('web.dropdown_menu_tests', function (require) {
             await testUtils.dom.click(firstItemEl);
             assert.doesNotHaveClass(firstItemEl, 'selected');
             assert.isVisible(firstItemEl);
-
-            dropdown.destroy();
         });
 
         QUnit.test('click on an item should not change url', async function (assert) {
@@ -168,8 +165,6 @@ odoo.define('web.dropdown_menu_tests', function (require) {
             await testUtils.dom.click(dropdown.el.querySelector('.o_menu_item > a'));
             assert.strictEqual(window.location.href, initialHref,
                 "the url should not have changed after a click on an item");
-
-            dropdown.destroy();
         });
 
         QUnit.test('options rendering', async function (assert) {
@@ -193,8 +188,6 @@ odoo.define('web.dropdown_menu_tests', function (require) {
             await testUtils.dom.click(firstItemEl);
             assert.hasClass(firstItemEl.querySelector('i'), 'o_icon_right fa fa-caret-right');
             assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 3);
-
-            dropdown.destroy();
         });
 
         QUnit.test('close menu closes also submenus', async function (assert) {
@@ -214,8 +207,6 @@ odoo.define('web.dropdown_menu_tests', function (require) {
 
             await testUtils.dom.click(dropdown.el.querySelector('button'));
             assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 3);
-
-            dropdown.destroy();
         });
 
         QUnit.test('click on an option should trigger the event "item_option_clicked" with appropriate data', async function (assert) {
@@ -281,8 +272,6 @@ odoo.define('web.dropdown_menu_tests', function (require) {
             optionELs = dropdown.el.querySelectorAll('.o_menu_item .o_item_option > a');
             assert.doesNotHaveClass(optionELs[0], 'selected');
             assert.doesNotHaveClass(optionELs[1], 'selected');
-
-            dropdown.destroy();
         });
 
         QUnit.test('keyboard navigation', async function (assert) {
@@ -351,28 +340,27 @@ odoo.define('web.dropdown_menu_tests', function (require) {
             await navigate('Escape', true); // Close the dropdown
 
             assert.containsNone(dropdown, '.dropdown-menu', "Dropdown should be folded");
-
-            dropdown.destroy();
         });
 
         QUnit.test('interactions between multiple dropdowns', async function (assert) {
             assert.expect(7);
 
-            const props = { items: this.items };
+            const items = this.items;
             class Parent extends Component {
-                constructor() {
-                    super(...arguments);
-                    this.state = useState(props);
+                setup() {
+                    this.state = useState({ items });
                 }
             }
             Parent.components = { DropdownMenu };
             Parent.template = xml`
                 <div>
-                    <DropdownMenu class="first" title="'First'" items="state.items"/>
-                    <DropdownMenu class="second" title="'Second'" items="state.items"/>
+                    <DropdownMenu title="'First'" items="state.items"/>
+                    <DropdownMenu title="'Second'" items="state.items"/>
                 </div>`;
-            const parent = new Parent();
-            await parent.mount(testUtils.prepareTarget(), { position: 'first-child' });
+            const env = makeTestEnvironment();
+            const target = testUtils.prepareTarget();
+
+            const parent = await mount(Parent, target, { env });
 
             const [menu1, menu2] = parent.el.querySelectorAll('.dropdown');
 
@@ -381,20 +369,19 @@ odoo.define('web.dropdown_menu_tests', function (require) {
             await testUtils.dom.click(menu1.querySelector('button'));
 
             assert.containsOnce(parent, '.dropdown-menu');
-            assert.containsOnce(parent, '.dropdown.first .dropdown-menu');
+            const [first, second] = parent.el.querySelectorAll(".dropdown");
+            assert.containsOnce(first, '.dropdown-menu');
 
             await testUtils.dom.click(menu2.querySelector('button'));
 
             assert.containsOnce(parent, '.dropdown-menu');
-            assert.containsOnce(parent, '.dropdown.second .dropdown-menu');
+            assert.containsOnce(second, '.dropdown-menu');
 
             await testUtils.dom.click(menu2.querySelector('.o_menu_item a'));
             await testUtils.dom.click(menu1.querySelector('button'));
 
             assert.containsOnce(parent, '.dropdown-menu');
-            assert.containsOnce(parent, '.dropdown.first .dropdown-menu');
-
-            parent.destroy();
+            assert.containsOnce(first, '.dropdown-menu');
         });
 
         QUnit.test("dropdown doesn't get close on mousedown inside and mouseup outside dropdown", async function (assert) {
@@ -407,18 +394,19 @@ odoo.define('web.dropdown_menu_tests', function (require) {
 
             const items = this.items;
             class Parent extends Component {
-                constructor() {
-                    super(...arguments);
+                setup() {
                     this.items = items;
                 }
             }
             Parent.components = { DropdownMenu };
             Parent.template = xml`
                 <div>
-                    <DropdownMenu class="first" title="'First'" items="items"/>
+                    <DropdownMenu title="'First'" items="items"/>
                 </div>`;
-            const parent = new Parent();
-            await parent.mount(testUtils.prepareTarget(), { position: "first-child" });
+            const env = makeTestEnvironment();
+            const target = testUtils.prepareTarget();
+
+            const parent = await mount(Parent, target, { env });
 
             const menu = parent.el.querySelector(".dropdown");
             assert.doesNotHaveClass(menu, "show", "dropdown should not be open");
@@ -436,8 +424,6 @@ odoo.define('web.dropdown_menu_tests', function (require) {
             await testUtils.dom.triggerEvents(parent.el, "click");
             assert.hasClass(menu, "show", "dropdown should still be open");
             assert.hasClass(firstItemEl.querySelector("i"), "o_icon_right fa fa-caret-down");
-
-            parent.destroy();
         });
     });
 });
diff --git a/addons/web/static/tests/legacy/components/pager_tests.js b/addons/web/static/tests/legacy/components/pager_tests.js
index ba33fd9c191..0ec88c8d921 100644
--- a/addons/web/static/tests/legacy/components/pager_tests.js
+++ b/addons/web/static/tests/legacy/components/pager_tests.js
@@ -6,6 +6,20 @@ odoo.define('web.pager_tests', function (require) {
 
     const { createComponent } = testUtils;
 
+    const { Component, xml, useState } = owl;
+
+    class PagerController extends Component {
+        setup() {
+            this.state = useState({ ...this.props });
+        }
+        async updateProps(nextProps) {
+            Object.assign(this.state, nextProps);
+            await testUtils.nextTick();
+        }
+    }
+    PagerController.template = xml`<Pager t-props="state" />`;
+    PagerController.components = { Pager };
+
     QUnit.module('Components', {}, function () {
 
         QUnit.module('Pager');
@@ -13,15 +27,13 @@ odoo.define('web.pager_tests', function (require) {
         QUnit.test('basic interactions', async function (assert) {
             assert.expect(2);
 
-            const pager = await createComponent(Pager, {
+            const pager = await createComponent(PagerController, {
                 props: {
                     currentMinimum: 1,
                     limit: 4,
                     size: 10,
-                },
-                intercepts: {
-                    'pager-changed': function (ev) {
-                        Object.assign(this.state, ev.detail);
+                    onPagerChanged: function (detail) {
+                        pager.updateProps(detail);
                     },
                 },
             });
@@ -33,22 +45,18 @@ odoo.define('web.pager_tests', function (require) {
 
             assert.strictEqual(testUtils.controlPanel.getPagerValue(pager), "5-8",
                 "currentMinimum should now be 5");
-
-            pager.destroy();
         });
 
         QUnit.test('edit the pager', async function (assert) {
             assert.expect(4);
 
-            const pager = await createComponent(Pager, {
+            const pager = await createComponent(PagerController, {
                 props: {
                     currentMinimum: 1,
                     limit: 4,
                     size: 10,
-                },
-                intercepts: {
-                    'pager-changed': function (ev) {
-                        Object.assign(this.state, ev.detail);
+                    onPagerChanged: function (detail) {
+                        pager.updateProps(detail);
                     },
                 },
             });
@@ -67,21 +75,17 @@ odoo.define('web.pager_tests', function (require) {
                 "the pager should not contain an input anymore");
             assert.strictEqual(testUtils.controlPanel.getPagerValue(pager), "1-6",
                 "the limit should have been updated");
-
-            pager.destroy();
         });
 
         QUnit.test("keydown on pager with same value", async function (assert) {
             assert.expect(7);
 
-            const pager = await createComponent(Pager, {
+            const pager = await createComponent(PagerController, {
                 props: {
                     currentMinimum: 1,
                     limit: 4,
                     size: 10,
-                },
-                intercepts: {
-                    "pager-changed": () => assert.step("pager-changed"),
+                    onPagerChanged: () => assert.step("pager-changed"),
                 },
             });
 
@@ -98,22 +102,18 @@ odoo.define('web.pager_tests', function (require) {
             assert.containsNone(pager, "input");
             assert.strictEqual(testUtils.controlPanel.getPagerValue(pager), "1-4");
             assert.verifySteps(["pager-changed"]);
-
-            pager.destroy();
         });
 
         QUnit.test('pager value formatting', async function (assert) {
             assert.expect(8);
 
-            const pager = await createComponent(Pager, {
+            const pager = await createComponent(PagerController, {
                 props: {
                     currentMinimum: 1,
                     limit: 4,
                     size: 10,
-                },
-                intercepts: {
-                    'pager-changed': function (ev) {
-                        Object.assign(this.state, ev.detail);
+                    onPagerChanged: (detail) => {
+                        pager.updateProps(detail);
                     },
                 },
             });
@@ -133,29 +133,25 @@ odoo.define('web.pager_tests', function (require) {
             await inputAndAssert("definitelyValidNumber", "10", "fallback to previous value if not a number");
             await inputAndAssert(" 1 ,  2   ", "1-2", "value is normalized and accepts several separators");
             await inputAndAssert("3  8", "3-8", "value accepts whitespace(s) as a separator");
-
-            pager.destroy();
         });
 
         QUnit.test('pager disabling', async function (assert) {
             assert.expect(9);
 
             const reloadPromise = testUtils.makeTestPromise();
-            const pager = await createComponent(Pager, {
+            const pager = await createComponent(PagerController, {
                 props: {
                     currentMinimum: 1,
                     limit: 4,
                     size: 10,
-                },
-                intercepts: {
                     // The goal here is to test the reactivity of the pager; in a
                     // typical views, we disable the pager after switching page
                     // to avoid switching twice with the same action (double click).
-                    'pager-changed': async function (ev) {
+                    onPagerChanged: async function (detail) {
                         // 1. Simulate a (long) server action
                         await reloadPromise;
                         // 2. Update the view with loaded data
-                        Object.assign(this.state, ev.detail);
+                        pager.updateProps(detail);
                     },
                 },
             });
@@ -186,8 +182,6 @@ odoo.define('web.pager_tests', function (require) {
 
             assert.strictEqual(pager.el.querySelector('.o_pager_value').tagName, 'INPUT',
                 "pager edition is re-enabled");
-
-            pager.destroy();
         });
     });
 });
diff --git a/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js b/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js
index 2d4a56834c3..28bfc3a8e4d 100644
--- a/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js
@@ -68,7 +68,6 @@ odoo.define('web.comparison_menu_tests', function (require) {
                 ["Birthday: Previous Period", "Birthday: Previous Year"]
             );
 
-            controlPanel.destroy();
             unpatchDate();
         });
 
@@ -124,7 +123,6 @@ odoo.define('web.comparison_menu_tests', function (require) {
 
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
 
-            controlPanel.destroy();
             unpatchDate();
         });
 
@@ -143,8 +141,6 @@ odoo.define('web.comparison_menu_tests', function (require) {
             await cpHelpers.toggleMenuItemOption(controlPanel, "Birthday", 0);
 
             assert.notOk("timeRanges" in controlPanel.getQuery());
-
-            controlPanel.destroy();
         });
     });
 });
diff --git a/addons/web/static/tests/legacy/control_panel/control_panel_tests.js b/addons/web/static/tests/legacy/control_panel/control_panel_tests.js
index 43a5e83d6d0..7fe27ac1b3f 100644
--- a/addons/web/static/tests/legacy/control_panel/control_panel_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/control_panel_tests.js
@@ -83,8 +83,6 @@ odoo.define('web.control_panel_tests', function (require) {
                     ["selec", "=", "red"],
                 ]
             );
-
-            controlPanel.destroy();
         });
 
         QUnit.module('Keyboard navigation');
@@ -114,8 +112,6 @@ odoo.define('web.control_panel_tests', function (require) {
 
             // delete nothing (should not crash)
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Backspace' });
-
-            controlPanel.destroy();
         });
 
         QUnit.test('fields and filters with groups/invisible attribute', async function (assert) {
@@ -195,8 +191,6 @@ odoo.define('web.control_panel_tests', function (require) {
 
             selectorContainsValue('.o_menu_item', "GA", true);
             selectorContainsValue('.o_menu_item', "GB", false);
-
-            controlPanel.destroy();
         });
 
         QUnit.test('invisible fields and filters with unknown related fields should not be rendered', async function (assert) {
@@ -228,8 +222,6 @@ odoo.define('web.control_panel_tests', function (require) {
                 "there should not be filter dropdown");
             assert.containsNone(controlPanel.el, 'div.o_search_options div.o_group_by_menu',
                 "there should not be groupby dropdown");
-
-            controlPanel.destroy();
         });
 
         QUnit.test('groupby menu is not rendered if searchMenuTypes does not have groupBy', async function (assert) {
@@ -249,8 +241,6 @@ odoo.define('web.control_panel_tests', function (require) {
 
             assert.containsOnce(controlPanel.el, 'div.o_search_options div.o_filter_menu');
             assert.containsNone(controlPanel.el, 'div.o_search_options div.o_group_by_menu');
-
-            controlPanel.destroy();
         });
 
         QUnit.test('search field should be autofocused', async function (assert) {
@@ -270,8 +260,6 @@ odoo.define('web.control_panel_tests', function (require) {
             assert.containsOnce(controlPanel, '.o_searchview_input', "has a search field");
             assert.containsOnce(controlPanel, '.o_searchview_input:focus-within',
                 "has autofocused search field");
-    
-            controlPanel.destroy();
         });
     
         QUnit.test("search field's autofocus should be disabled on mobile device", async function (assert) {
@@ -291,8 +279,6 @@ odoo.define('web.control_panel_tests', function (require) {
             assert.containsOnce(controlPanel, '.o_searchview_input', "has a search field");
             assert.containsNone(controlPanel, '.o_searchview_input:focus-within',
                 "hasn't autofocused search field");
-    
-            controlPanel.destroy();
         });
 
     });
diff --git a/addons/web/static/tests/legacy/control_panel/custom_filter_item_tests.js b/addons/web/static/tests/legacy/control_panel/custom_filter_item_tests.js
index 29129d9fbff..f9d990665e6 100644
--- a/addons/web/static/tests/legacy/control_panel/custom_filter_item_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/custom_filter_item_tests.js
@@ -70,8 +70,6 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
             assert.containsN(cfi, '.o_filter_condition', 2);
             assert.containsOnce(cfi, '.o_filter_condition .o_or_filter');
             assert.containsN(cfi, '.o_filter_condition .o_generator_menu_delete', 2);
-
-            cfi.destroy();
         });
 
         QUnit.test('custom OR filter presets new condition from preceding', async function (assert) {
@@ -112,8 +110,6 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
                 cfi.el.querySelector('.o_filter_condition:nth-of-type(2) .o_generator_menu_operator').value,
                 operatorSecondValue
             );
-
-            cfi.destroy();
         });
 
         QUnit.test('binary field: basic search', async function (assert) {
@@ -154,8 +150,6 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
             await testUtils.fields.editSelect(cfi.el.querySelector('.o_generator_menu_field'), 'binary_field');
             await cpHelpers.editConditionOperator(cfi, 0, '=');
             await cpHelpers.applyFilter(cfi);
-
-            cfi.destroy();
         });
 
         QUnit.test('selection field: default and updated value', async function (assert) {
@@ -196,8 +190,6 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
             await testUtils.fields.editSelect(cfi.el.querySelector('.o_generator_menu_field'), 'color');
             await testUtils.fields.editSelect(cfi.el.querySelector('.o_generator_menu_value select'), 'white');
             await cpHelpers.applyFilter(cfi);
-
-            cfi.destroy();
         });
 
         QUnit.test('adding a simple filter works', async function (assert) {
@@ -231,8 +223,6 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
             assert.strictEqual(cfi.el.children.length, 2);
             assert.containsOnce(cfi, 'button.dropdown-toggle');
             assert.containsOnce(cfi, '.dropdown-menu');
-
-            cfi.destroy();
         });
 
         QUnit.test('filtering by ID interval works', async function (assert) {
@@ -277,8 +267,6 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
             for (const domain of [...expectedDomains]) {
                 await testValue(domain[0][1], domain[0][2]);
             }
-
-            cfi.destroy();
         });
 
 
@@ -330,7 +318,6 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
             }
 
             delete ActionModel.registry.map.testExtension;
-            cfi.destroy();
         });
 
         QUnit.test('custom filter datetime with equal operator', async function (assert) {
@@ -371,8 +358,6 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
             await cpHelpers.editConditionOperator(cfi, 0, '=');
             await testUtils.fields.editSelect(cfi.el.querySelector('.o_filter_condition span.o_generator_menu_value input'), '02/22/2017 11:00:00'); // in TZ
             await cpHelpers.applyFilter(cfi);
-
-            cfi.destroy();
         });
 
         QUnit.test('custom filter datetime between operator', async function (assert) {
@@ -415,8 +400,6 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
             await testUtils.fields.editSelect(valueInputs[0], '02/22/2017 11:00:00'); // in TZ
             await testUtils.fields.editSelect(valueInputs[1], '02-22-2017 17:00:00'); // in TZ
             await cpHelpers.applyFilter(cfi);
-
-            cfi.destroy();
         });
 
         QUnit.test('default custom filter datetime', async function (assert) {
@@ -454,8 +437,6 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
             assert.strictEqual(cfi.el.querySelector('.o_generator_menu_operator').value, 'between');
 
             await cpHelpers.applyFilter(cfi);
-
-            cfi.destroy();
         });
 
         QUnit.test('input value parsing', async function (assert) {
@@ -497,8 +478,6 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
             await cpHelpers.editConditionValue(cfi, 1, "DefinitelyValidID");
             // String input in a number input gives "", which is parsed as 0
             assert.strictEqual(idInput.value, "0");
-
-            cfi.destroy();
         });
 
         QUnit.test('input value parsing with language', async function (assert) {
@@ -539,8 +518,6 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
             await cpHelpers.editConditionValue(cfi, 0, "DefinitelyValidFloat");
             // The input here is a string, resulting in a parsing error instead of 0
             assert.strictEqual(floatInput.value, "4,2");
-
-            cfi.destroy();
         });
 
         QUnit.test('add custom filter with multiple values', async function (assert) {
@@ -608,8 +585,6 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
             await cpHelpers.removeCondition(cfi, 2);
 
             await cpHelpers.applyFilter(cfi);
-
-            cfi.destroy();
         });
     });
 });
diff --git a/addons/web/static/tests/legacy/control_panel/custom_group_by_item_tests.js b/addons/web/static/tests/legacy/control_panel/custom_group_by_item_tests.js
deleted file mode 100644
index baed11f3cdc..00000000000
--- a/addons/web/static/tests/legacy/control_panel/custom_group_by_item_tests.js
+++ /dev/null
@@ -1,75 +0,0 @@
-odoo.define('web.groupby_menu_generator_tests', function (require) {
-    "use strict";
-
-    const CustomGroupByItem = require('web.CustomGroupByItem');
-    const ActionModel = require('web.ActionModel');
-    const testUtils = require('web.test_utils');
-
-    const { createComponent } = testUtils;
-
-    QUnit.module('Components', {}, function () {
-
-        QUnit.module('CustomGroupByItem (legacy)');
-
-        QUnit.test('click on add custom group toggle group selector', async function (assert) {
-            assert.expect(6);
-
-            const cgi = await createComponent(CustomGroupByItem, {
-                props: {
-                    fields: [
-                        { sortable: true, name: "date", string: 'Super Date', type: 'date' },
-                    ],
-                },
-                env: {
-                    searchModel: new ActionModel(),
-                },
-            });
-
-            assert.strictEqual(cgi.el.innerText.trim(), "Add Custom Group");
-            assert.hasClass(cgi.el, 'o_add_custom_group_menu');
-            assert.strictEqual(cgi.el.children.length, 1);
-
-            await testUtils.dom.click(cgi.el.querySelector('.o_add_custom_group_menu .dropdown-toggle'));
-
-            // Single select node with a single option
-            assert.containsOnce(cgi, 'div > select');
-            assert.strictEqual(cgi.el.querySelector('div > select option').innerText.trim(),
-                "Super Date");
-
-            // Button apply
-            assert.containsOnce(cgi, 'div > button.btn.btn-primary');
-
-            cgi.destroy();
-        });
-
-        QUnit.test('select a field name in Add Custom Group menu properly trigger the corresponding field', async function (assert) {
-            assert.expect(5);
-
-            const fields = [
-                { sortable: true, name: 'candlelight', string: 'Candlelight', type: 'boolean' },
-            ];
-            class MockedSearchModel extends ActionModel {
-                dispatch(method, ...args) {
-                    assert.strictEqual(method, 'createNewGroupBy');
-                    const field = args[0];
-                    assert.deepEqual(field, fields[0]);
-                }
-            }
-            const searchModel = new MockedSearchModel();
-            const cgi = await createComponent(CustomGroupByItem, {
-                props: { fields },
-                env: { searchModel },
-            });
-
-            await testUtils.dom.click(cgi.el.querySelector('.o_add_custom_group_menu .dropdown-toggle'));
-            await testUtils.dom.click(cgi.el.querySelector('div > button.btn.btn-primary'));
-
-            // The only things visible should be the button 'Add Custome Group' and the dropdown menu;
-            assert.strictEqual(cgi.el.children.length, 2);
-            assert.containsOnce(cgi, '.dropdown-toggle');
-            assert.containsOnce(cgi, '.dropdown-menu');
-
-            cgi.destroy();
-        });
-    });
-});
diff --git a/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js b/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
index 9f99db26366..9d4063e27a4 100644
--- a/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
@@ -59,8 +59,6 @@ odoo.define('web.favorite_menu_tests', function (require) {
                 [...labelEls].map(e => e.innerText.trim()),
                 ["Use by default", "Share with all users"]
             );
-
-            controlPanel.destroy();
         });
 
         QUnit.test('favorites use by default and share are exclusive', async function (assert) {
@@ -107,8 +105,6 @@ odoo.define('web.favorite_menu_tests', function (require) {
             await testUtils.dom.click(checkboxes[0]);
             assert.notOk(checkboxes[0].checked, 'End: None of the checkboxes are checked (1)');
             assert.notOk(checkboxes[1].checked, 'End: None of the checkboxes are checked (2)');
-
-            controlPanel.destroy();
         });
 
         QUnit.test('save filter', async function (assert) {
@@ -149,8 +145,6 @@ odoo.define('web.favorite_menu_tests', function (require) {
             await cpHelpers.toggleSaveFavorite(controlPanel);
             await cpHelpers.editFavoriteName(controlPanel, "aaa");
             await cpHelpers.saveFavorite(controlPanel);
-
-            controlPanel.destroy();
         });
 
         QUnit.test('dynamic filters are saved dynamic', async function (assert) {
@@ -200,8 +194,6 @@ odoo.define('web.favorite_menu_tests', function (require) {
             await cpHelpers.saveFavorite(controlPanel);
 
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ["My favorite"]);
-
-            controlPanel.destroy();
         });
 
         QUnit.test('save filters created via autocompletion works', async function (assert) {
@@ -249,8 +241,6 @@ odoo.define('web.favorite_menu_tests', function (require) {
             await cpHelpers.saveFavorite(controlPanel);
 
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ["My favorite"]);
-
-            controlPanel.destroy();
         });
 
         QUnit.test('delete an active favorite remove it both in list of favorite and in search bar', async function (assert) {
@@ -296,8 +286,6 @@ odoo.define('web.favorite_menu_tests', function (require) {
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
             const itemEls = controlPanel.el.querySelectorAll('.o_favorite_menu .dropdown-item');
             assert.deepEqual([...itemEls].map(e => e.innerText.trim()), ["Save current search"]);
-
-            controlPanel.destroy();
         });
 
         QUnit.test('default favorite is not activated if key search_disable_custom_filters is set to true', async function (assert) {
@@ -327,8 +315,6 @@ odoo.define('web.favorite_menu_tests', function (require) {
             const { domain } = controlPanel.getQuery();
             assert.deepEqual(domain, []);
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
-
-            controlPanel.destroy();
         });
 
         QUnit.test('toggle favorite correctly clears filter, groupbys, comparison and field "options"', async function (assert) {
@@ -435,7 +421,6 @@ odoo.define('web.favorite_menu_tests', function (require) {
                 ["My favorite"]
             );
 
-            controlPanel.destroy();
             unpatchDate();
         });
 
@@ -502,8 +487,6 @@ odoo.define('web.favorite_menu_tests', function (require) {
             // third try: should fail
             await cpHelpers.editFavoriteName(controlPanel, "My favorite 2");
             await cpHelpers.saveFavorite(controlPanel);
-
-            controlPanel.destroy();
         });
 
         QUnit.test('save search filter in modal', async function (assert) {
diff --git a/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js b/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js
index bca5afaf33e..c958a96f582 100644
--- a/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js
@@ -37,8 +37,6 @@ odoo.define('web.filter_menu_tests', function (require) {
             await cpHelpers.toggleFilterMenu(controlPanel);
             assert.containsNone(controlPanel, '.o_menu_item, .dropdown-divider');
             assert.containsOnce(controlPanel, '.o_add_custom_filter_menu');
-
-            controlPanel.destroy();
         });
 
         QUnit.test('simple rendering with a single filter', async function (assert) {
@@ -58,8 +56,6 @@ odoo.define('web.filter_menu_tests', function (require) {
             assert.containsOnce(controlPanel, '.o_menu_item');
             assert.containsOnce(controlPanel, '.dropdown-divider');
             assert.containsOnce(controlPanel, 'div.o_add_custom_filter_menu');
-
-            controlPanel.destroy();
         });
 
         QUnit.test('should have Date and ID field proposed in that order in "Add custom Filter" submenu', async function (assert) {
@@ -76,8 +72,6 @@ odoo.define('web.filter_menu_tests', function (require) {
             const optionEls = controlPanel.el.querySelectorAll('.o_filter_condition select.o_generator_menu_field option');
             assert.strictEqual(optionEls[0].innerText.trim(), 'Date');
             assert.strictEqual(optionEls[1].innerText.trim(), 'ID');
-
-            controlPanel.destroy();
         });
 
         QUnit.test('toggle a "simple" filter in filter menu works', async function (assert) {
@@ -116,8 +110,6 @@ odoo.define('web.filter_menu_tests', function (require) {
             await cpHelpers.toggleMenuItem(controlPanel, "Foo");
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
             assert.notOk(cpHelpers.isItemSelected(controlPanel, "Foo"));
-
-            controlPanel.destroy();
         });
 
         QUnit.test('add a custom filter works', async function (assert) {
@@ -137,8 +129,6 @@ odoo.define('web.filter_menu_tests', function (require) {
             await cpHelpers.applyFilter(controlPanel);
 
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['ID is "1"']);
-
-            controlPanel.destroy();
         });
 
         QUnit.test('deactivate a new custom filter works', async function (assert) {
@@ -164,7 +154,6 @@ odoo.define('web.filter_menu_tests', function (require) {
             assert.notOk(cpHelpers.isItemSelected(controlPanel, 'Date is equal to "02/05/2020"'));
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
 
-            controlPanel.destroy();
             unpatchDate();
         });
 
@@ -281,7 +270,6 @@ odoo.define('web.filter_menu_tests', function (require) {
                 });
             }
 
-            controlPanel.destroy();
             unpatchDate();
         });
 
@@ -321,7 +309,6 @@ odoo.define('web.filter_menu_tests', function (require) {
             assert.ok(cpHelpers.isOptionSelected(controlPanel, "Date", 'December'));
             assert.ok(cpHelpers.isOptionSelected(controlPanel, "Date", '2016'));
 
-            controlPanel.destroy();
             unpatchDate();
         });
 
@@ -349,8 +336,6 @@ odoo.define('web.filter_menu_tests', function (require) {
 
             await cpHelpers.toggleFilterMenu(controlPanel);
             await cpHelpers.toggleMenuItem(controlPanel, 0);
-
-            controlPanel.destroy();
         });
 
         QUnit.test('Filter with JSON-parsable domain works', async function (assert) {
@@ -381,8 +366,6 @@ odoo.define('web.filter_menu_tests', function (require) {
 
             await cpHelpers.toggleFilterMenu(controlPanel);
             await cpHelpers.toggleMenuItem(controlPanel, 0);
-
-            controlPanel.destroy();
         });
 
         QUnit.test('filter with date attribute set as search_default', async function (assert) {
@@ -409,7 +392,6 @@ odoo.define('web.filter_menu_tests', function (require) {
 
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ["Date: June 2019"]);
 
-            controlPanel.destroy();
             unpatchDate();
         });
 
@@ -451,8 +433,6 @@ odoo.define('web.filter_menu_tests', function (require) {
                 cpHelpers.getFacetTexts(controlPanel),
                 ["Filter Group 1", "Filter 1 Group 2orFilter 2 GROUP 2"]
             );
-
-            controlPanel.destroy();
         });
 
         QUnit.test('arch order of groups of filters preserved', async function (assert) {
@@ -499,8 +479,6 @@ odoo.define('web.filter_menu_tests', function (require) {
             [...menuItemEls].forEach((e, index) => {
                 assert.strictEqual(e.innerText.trim(), String(index + 1));
             });
-
-            controlPanel.destroy();
         });
     });
 });
diff --git a/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js b/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js
index 795e3744773..435602f3f5c 100644
--- a/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js
@@ -38,8 +38,6 @@ odoo.define('web.groupby_menu_tests', function (require) {
             const controlPanel = await createControlPanel(params);
 
             assert.containsNone(controlPanel, '.o_menu_item, .dropdown-divider, .o_add_custom_group_menu');
-
-            controlPanel.destroy();
         });
 
         QUnit.test('simple rendering with no groupby', async function (assert) {
@@ -62,8 +60,6 @@ odoo.define('web.groupby_menu_tests', function (require) {
             assert.strictEqual(optionEls[1].innerText.trim(), 'Date');
             assert.strictEqual(optionEls[2].innerText.trim(), 'Foo');
             assert.strictEqual(optionEls[3].innerText.trim(), 'Many2Many');
-
-            controlPanel.destroy();
         });
 
         QUnit.test('simple rendering with a single groupby', async function (assert) {
@@ -84,8 +80,6 @@ odoo.define('web.groupby_menu_tests', function (require) {
             assert.strictEqual(controlPanel.el.querySelector('.o_menu_item').innerText.trim(), "Groupby Foo");
             assert.containsOnce(controlPanel, '.dropdown-divider');
             assert.containsOnce(controlPanel, '.o_add_custom_group_menu');
-
-            controlPanel.destroy();
         });
 
         QUnit.test('toggle a "simple" groupby in groupby menu works', async function (assert) {
@@ -120,8 +114,6 @@ odoo.define('web.groupby_menu_tests', function (require) {
             await cpHelpers.toggleMenuItem(controlPanel, 0);
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
             assert.notOk(cpHelpers.isItemSelected(controlPanel, 0));
-
-            controlPanel.destroy();
         });
 
         QUnit.test('toggle a "simple" groupby quickly does not crash', async function (assert) {
@@ -143,7 +135,6 @@ odoo.define('web.groupby_menu_tests', function (require) {
             cpHelpers.toggleMenuItem(controlPanel, 0);
 
             assert.ok(true);
-            controlPanel.destroy();
         });
 
         QUnit.test('remove a "Group By" facet properly unchecks groupbys in groupby menu', async function (assert) {
@@ -177,8 +168,6 @@ odoo.define('web.groupby_menu_tests', function (require) {
             assert.containsNone(controlPanel, '.o_searchview .o_searchview_facet');
             await cpHelpers.toggleGroupByMenu(controlPanel);
             assert.notOk(cpHelpers.isItemSelected(controlPanel, 0));
-
-            controlPanel.destroy();
         });
 
         QUnit.test('group by a date field using interval works', async function (assert) {
@@ -247,7 +236,6 @@ odoo.define('web.groupby_menu_tests', function (require) {
                     assert.ok(cpHelpers.isOptionSelected(controlPanel, 0, index));
                 });
             }
-            controlPanel.destroy();
         });
 
         QUnit.test('interval options are correctly grouped and ordered', async function (assert) {
@@ -307,8 +295,6 @@ odoo.define('web.groupby_menu_tests', function (require) {
             await cpHelpers.toggleMenuItem(controlPanel, 'Date');
             await cpHelpers.toggleMenuItemOption(controlPanel, 'Date', 'Week');
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: Year>Date: Quarter>Date: Day>Foo']);
-
-            controlPanel.destroy();
         });
 
         QUnit.test('the ID field should not be proposed in "Add Custom Group" menu', async function (assert) {
@@ -330,8 +316,6 @@ odoo.define('web.groupby_menu_tests', function (require) {
             const optionEls = controlPanel.el.querySelectorAll('.o_add_custom_group_menu select option');
             assert.strictEqual(optionEls.length, 1);
             assert.strictEqual(optionEls[0].innerText.trim(), "Foo");
-
-            controlPanel.destroy();
         });
 
         QUnit.test('add a date field in "Add Custome Group" activate a groupby with global default option "month"', async function (assert) {
@@ -360,8 +344,6 @@ odoo.define('web.groupby_menu_tests', function (require) {
             assert.ok(cpHelpers.isItemSelected(controlPanel, "Date"));
             await cpHelpers.toggleMenuItem(controlPanel, "Date");
             assert.ok(cpHelpers.isOptionSelected(controlPanel, "Date", "Month"));
-
-            controlPanel.destroy();
         });
 
         QUnit.test('default groupbys can be ordered', async function (assert) {
@@ -388,8 +370,6 @@ odoo.define('web.groupby_menu_tests', function (require) {
             const { groupBy } = controlPanel.getQuery();
             assert.deepEqual(groupBy, ['date_field:week', 'birthday:month']);
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: Week>Birthday: Month']);
-
-            controlPanel.destroy();
         });
 
         QUnit.test('a separator in groupbys does not cause problems', async function (assert) {
@@ -452,8 +432,6 @@ odoo.define('web.groupby_menu_tests', function (require) {
             assert.notOk(cpHelpers.isItemSelected(controlPanel, 1));
             assert.notOk(cpHelpers.isOptionSelected(controlPanel, 0, 1), 'selected');
             assert.notOk(cpHelpers.isOptionSelected(controlPanel, 0, 4), 'selected');
-
-            controlPanel.destroy();
         });
 
         QUnit.test('falsy search default groupbys are not activated', async function (assert) {
@@ -478,8 +456,6 @@ odoo.define('web.groupby_menu_tests', function (require) {
             const { groupBy } = controlPanel.getQuery();
             assert.deepEqual(groupBy, []);
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
-
-            controlPanel.destroy();
         });
     });
 });
diff --git a/addons/web/static/tests/legacy/control_panel/search_bar_tests.js b/addons/web/static/tests/legacy/control_panel/search_bar_tests.js
index 65095939e3e..61c54935266 100644
--- a/addons/web/static/tests/legacy/control_panel/search_bar_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/search_bar_tests.js
@@ -8,10 +8,11 @@ import Registry from "web.Registry";
 import SearchBar from "web.SearchBar";
 import { registry } from "@web/core/registry";
 import * as cpHelpers from "@web/../tests/search/helpers";
-import { patchWithCleanup } from "@web/../tests/helpers/utils";
+import { getFixture, patchWithCleanup } from "@web/../tests/helpers/utils";
 import { browser } from "@web/core/browser/browser";
 
 let serverData;
+let target;
 QUnit.module("Search Bar (legacy)", (hooks) => {
     hooks.beforeEach(() => {
         serverData = {
@@ -58,6 +59,7 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
                 },
             },
         };
+        target = getFixture();
     });
 
         QUnit.test("basic rendering", async function (assert) {
@@ -68,7 +70,7 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
 
             assert.strictEqual(
                 document.activeElement,
-                webClient.el.querySelector(".o_searchview input.o_searchview_input"),
+                target.querySelector(".o_searchview input.o_searchview_input"),
                 "searchview input should be focused"
             );
         });
@@ -81,21 +83,21 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             await doAction(webClient, 1);
 
             // add a facet
-            await cpHelpers.toggleGroupByMenu(webClient);
-            await cpHelpers.toggleMenuItem(webClient, 0);
-            await cpHelpers.toggleMenuItemOption(webClient, 0, 0);
-            assert.containsOnce(webClient, '.o_searchview .o_searchview_facet',
+            await cpHelpers.toggleGroupByMenu(target);
+            await cpHelpers.toggleMenuItem(target, 0);
+            await cpHelpers.toggleMenuItemOption(target, 0, 0);
+            assert.containsOnce(target, '.o_searchview .o_searchview_facet',
                 "there should be one facet");
             assert.strictEqual(document.activeElement,
-                webClient.el.querySelector('.o_searchview input.o_searchview_input'));
+                target.querySelector('.o_searchview input.o_searchview_input'));
 
             // press left to focus the facet
             await testUtils.dom.triggerEvent(document.activeElement, 'keydown', { key: 'ArrowLeft' });
-            assert.strictEqual(document.activeElement, webClient.el.querySelector('.o_searchview .o_searchview_facet'));
+            assert.strictEqual(document.activeElement, target.querySelector('.o_searchview .o_searchview_facet'));
 
             // press right to focus the input
             await testUtils.dom.triggerEvent(document.activeElement, 'keydown', { key: 'ArrowRight' });
-            assert.strictEqual(document.activeElement, webClient.el.querySelector('.o_searchview input.o_searchview_input'));
+            assert.strictEqual(document.activeElement, target.querySelector('.o_searchview input.o_searchview_input'));
         });
 
         QUnit.test('search date and datetime fields. Support of timezones', async function (assert) {
@@ -135,12 +137,12 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             await doAction(webClient, 1);
 
             // Date case
-            let searchInput = webClient.el.querySelector('.o_searchview_input');
+            let searchInput = target.querySelector('.o_searchview_input');
             await testUtils.fields.editInput(searchInput, '07/15/1983');
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
 
-            assert.strictEqual(webClient.el.querySelector('.o_searchview_facet .o_facet_values').innerText.trim(),
+            assert.strictEqual(target.querySelector('.o_searchview_facet .o_facet_values').innerText.trim(),
                 '07/15/1983',
                 'The format of the date in the facet should be in locale');
 
@@ -148,13 +150,13 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             await testUtils.dom.click($('.o_searchview_facet .o_facet_remove'));
 
             // DateTime case
-            searchInput = webClient.el.querySelector('.o_searchview_input');
+            searchInput = target.querySelector('.o_searchview_input');
             await testUtils.fields.editInput(searchInput, '07/15/1983 00:00:00');
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
 
-            assert.strictEqual(webClient.el.querySelector('.o_searchview_facet .o_facet_values').innerText.trim(),
+            assert.strictEqual(target.querySelector('.o_searchview_facet .o_facet_values').innerText.trim(),
                 '07/15/1983 00:00:00',
                 'The format of the datetime in the facet should be in locale');
         });
@@ -215,8 +217,6 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
 
             assert.strictEqual(input.value, "", "input value should be empty");
             assert.containsNone(searchBar, '.o_searchview_autocomplete');
-
-            searchBar.destroy();
         });
 
         QUnit.test('select an autocomplete field', async function (assert) {
@@ -241,13 +241,13 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             });
             await doAction(webClient, 1);
 
-            const searchInput = webClient.el.querySelector('.o_searchview_input');
+            const searchInput = target.querySelector('.o_searchview_input');
             await testUtils.fields.editInput(searchInput, 'a');
-            assert.containsN(webClient, '.o_searchview_autocomplete li', 2,
+            assert.containsN(target, '.o_searchview_autocomplete li', 2,
                 "there should be 2 result for 'a' in search bar autocomplete");
 
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
-            assert.strictEqual(webClient.el.querySelector('.o_searchview_input_container .o_facet_values').innerText.trim(),
+            assert.strictEqual(target.querySelector('.o_searchview_input_container .o_facet_values').innerText.trim(),
                 "a", "There should be a field facet with label 'a'");
         });
 
@@ -280,7 +280,7 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             await doAction(webClient, 1);
             await firstLoading;
             assert.strictEqual(searchReadCount, 1, "there should be 1 search_read");
-            const searchInput = webClient.el.querySelector('.o_searchview_input');
+            const searchInput = target.querySelector('.o_searchview_input');
 
             // 'r' key to filter on bar "First Record"
             await testUtils.fields.editInput(searchInput, 'record');
@@ -289,7 +289,7 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
 
-            assert.strictEqual(webClient.el.querySelector('.o_searchview_input_container .o_facet_values').innerText.trim(),
+            assert.strictEqual(target.querySelector('.o_searchview_input_container .o_facet_values').innerText.trim(),
                 "First record",
                 "the autocompletion facet should be correct");
             assert.strictEqual(searchReadCount, 2, "there should be 2 search_read");
@@ -302,7 +302,7 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
 
-            assert.strictEqual(webClient.el.querySelector('.o_searchview_input_container .o_facet_values').innerText.trim(),
+            assert.strictEqual(target.querySelector('.o_searchview_input_container .o_facet_values').innerText.trim(),
                 "First recordorSecond record",
                 "the autocompletion facet should be correct");
             assert.strictEqual(searchReadCount, 3, "there should be 3 search_read");
@@ -329,11 +329,11 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             });
             await doAction(webClient, 1);
 
-            const searchInput = webClient.el.querySelector('.o_searchview_input');
+            const searchInput = target.querySelector('.o_searchview_input');
             rpcs = 0;
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
 
-            assert.containsNone(webClient, '.o_searchview_facet_label');
+            assert.containsNone(target, '.o_searchview_facet_label');
             assert.strictEqual(rpcs, 2, "should have reloaded");
         });
 
@@ -343,7 +343,7 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 1);
 
-            const searchInput = webClient.el.querySelector('.o_searchview_input');
+            const searchInput = target.querySelector('.o_searchview_input');
 
             // 'a' key to filter nothing on bar
             await testUtils.fields.editInput(searchInput, 'hello there');
@@ -351,13 +351,13 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowRight' });
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
 
-            assert.strictEqual(webClient.el.querySelector('.o_searchview_autocomplete .o_selection_focus').innerText.trim(), "(no result)",
+            assert.strictEqual(target.querySelector('.o_searchview_autocomplete .o_selection_focus').innerText.trim(), "(no result)",
                 "there should be no result for 'a' in bar");
 
             await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
 
-            assert.containsNone(webClient, '.o_searchview_facet_label');
-            assert.strictEqual(webClient.el.querySelector('.o_searchview_input').value, "",
+            assert.containsNone(target, '.o_searchview_facet_label');
+            assert.strictEqual(target.querySelector('.o_searchview_input').value, "",
                 "the search input should be re-rendered");
         });
 
@@ -372,7 +372,7 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 1);
 
-            const searchInput = webClient.el.querySelector('.o_searchview_input');
+            const searchInput = target.querySelector('.o_searchview_input');
 
             // Simulate typing "TEST" on search view.
             for (let i = 0; i < TEST.length; i++) {
@@ -391,11 +391,11 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
                 await testUtils.dom.triggerEvent(searchInput, 'input',
                     { inputType: 'insertCompositionText', isComposing: true });
             }
-            assert.containsOnce(webClient.el, '.o_searchview_autocomplete',
+            assert.containsOnce(target, '.o_searchview_autocomplete',
                 "should display autocomplete dropdown menu on typing something in search view"
             );
             assert.strictEqual(
-                webClient.el.querySelector('.o_searchview_autocomplete li').innerText.trim(),
+                target.querySelector('.o_searchview_autocomplete li').innerText.trim(),
                 "Search Foo for: TEST",
                 `1st filter suggestion should be based on typed word "TEST"`
             );
@@ -412,7 +412,7 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
                 { inputType: 'insertCompositionText', isComposing: true });
 
             assert.strictEqual(
-                webClient.el.querySelector('.o_searchview_autocomplete li').innerText.trim(),
+                target.querySelector('.o_searchview_autocomplete li').innerText.trim(),
                 "Search Foo for: テスト",
                 `1st filter suggestion should be updated with soft-selection typed word "テスト"`
             );
@@ -432,7 +432,7 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             await testUtils.dom.triggerEvent(searchInput, 'compositionend');
 
             assert.strictEqual(
-                webClient.el.querySelector('.o_searchview_autocomplete li').innerText.trim(),
+                target.querySelector('.o_searchview_autocomplete li').innerText.trim(),
                 "Search Foo for: TEST",
                 `1st filter suggestion should finally be updated with click selection on word "TEST" from IME`
             );
@@ -446,12 +446,12 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             await doAction(webClient, 1);
 
             // Simulate paste text through the mouse.
-            const searchInput = webClient.el.querySelector('.o_searchview_input');
+            const searchInput = target.querySelector('.o_searchview_input');
             searchInput.value = "ABC";
             await testUtils.dom.triggerEvent(searchInput, 'input',
                 { inputType: 'insertFromPaste' });
             await testUtils.nextTick();
-            assert.containsOnce(webClient, '.o_searchview_autocomplete',
+            assert.containsOnce(target, '.o_searchview_autocomplete',
                 "should display autocomplete dropdown menu on paste in search view");
 
         });
@@ -478,14 +478,14 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             });
             await doAction(webClient, 1);
 
-            await testUtils.controlPanel.editSearch(webClient, "rec");
-            await testUtils.dom.click(webClient.el.querySelector('.o_searchview_autocomplete li:last-child'));
+            await testUtils.controlPanel.editSearch(target, "rec");
+            await testUtils.dom.click(target.querySelector('.o_searchview_autocomplete li:last-child'));
 
-            await cpHelpers.removeFacet(webClient, 0);
+            await cpHelpers.removeFacet(target, 0);
 
-            await testUtils.controlPanel.editSearch(webClient, "rec");
-            await testUtils.dom.click(webClient.el.querySelector('.o_expand'));
-            await testUtils.dom.click(webClient.el.querySelector('.o_searchview_autocomplete li.o_menu_item.o_indent'));
+            await testUtils.controlPanel.editSearch(target, "rec");
+            await testUtils.dom.click(target.querySelector('.o_expand'));
+            await testUtils.dom.click(target.querySelector('.o_searchview_autocomplete li.o_menu_item.o_indent'));
 
             assert.verifySteps([
                 '[]',
@@ -509,14 +509,14 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             });
             await doAction(webClient, 1);
 
-            await testUtils.controlPanel.editSearch(webClient, "null");
+            await testUtils.controlPanel.editSearch(target, "null");
 
             assert.strictEqual(
-                webClient.el.querySelector('.o_searchview_autocomplete .o_selection_focus').innerText,
+                target.querySelector('.o_searchview_autocomplete .o_selection_focus').innerText,
                 "Search Foo for: null"
             );
 
-            await testUtils.dom.click(webClient.el.querySelector('.o_searchview_autocomplete li.o_selection_focus a'));
+            await testUtils.dom.click(target.querySelector('.o_searchview_autocomplete li.o_selection_focus a'));
 
             assert.verifySteps([
                 JSON.stringify([]), // initial search
@@ -542,25 +542,25 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             });
             await doAction(webClient, 1);
 
-            await testUtils.controlPanel.editSearch(webClient, "y");
+            await testUtils.controlPanel.editSearch(target, "y");
 
-            assert.containsOnce(webClient, '.o_searchview_autocomplete li');
-            assert.strictEqual(webClient.el.querySelector('.o_searchview_autocomplete li').innerText, "Search Bool: Yes");
-            assert.doesNotHaveClass(webClient.el.querySelector('.o_searchview_autocomplete li'), 'o_indent');
+            assert.containsOnce(target, '.o_searchview_autocomplete li');
+            assert.strictEqual(target.querySelector('.o_searchview_autocomplete li').innerText, "Search Bool: Yes");
+            assert.doesNotHaveClass(target.querySelector('.o_searchview_autocomplete li'), 'o_indent');
 
             // select "Yes"
-            await testUtils.dom.click(webClient.el.querySelector('.o_searchview_autocomplete li'));
+            await testUtils.dom.click(target.querySelector('.o_searchview_autocomplete li'));
 
-            await cpHelpers.removeFacet(webClient, 0);
+            await cpHelpers.removeFacet(target, 0);
 
-            await testUtils.controlPanel.editSearch(webClient, "No");
+            await testUtils.controlPanel.editSearch(target, "No");
 
-            assert.containsOnce(webClient, '.o_searchview_autocomplete li');
-            assert.strictEqual(webClient.el.querySelector('.o_searchview_autocomplete li').innerText, "Search Bool: No");
-            assert.doesNotHaveClass(webClient.el.querySelector('.o_searchview_autocomplete li'), 'o_indent');
+            assert.containsOnce(target, '.o_searchview_autocomplete li');
+            assert.strictEqual(target.querySelector('.o_searchview_autocomplete li').innerText, "Search Bool: No");
+            assert.doesNotHaveClass(target.querySelector('.o_searchview_autocomplete li'), 'o_indent');
 
             // select "No"
-            await testUtils.dom.click(webClient.el.querySelector('.o_searchview_autocomplete li'));
+            await testUtils.dom.click(target.querySelector('.o_searchview_autocomplete li'));
 
             assert.verifySteps([
                 JSON.stringify([]), // initial search
@@ -580,13 +580,13 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 1);
 
-            await testUtils.controlPanel.editSearch(webClient, "n");
+            await testUtils.controlPanel.editSearch(target, "n");
 
-            assert.containsN(webClient, '.o_searchview_autocomplete li', 2);
-            assert.strictEqual(webClient.el.querySelector('.o_searchview_autocomplete li:first-child').innerText, "Search Status: New");
-            assert.strictEqual(webClient.el.querySelector('.o_searchview_autocomplete li:last-child').innerText, "Search Status: Cancelled");
-            assert.doesNotHaveClass(webClient.el.querySelector('.o_searchview_autocomplete li:first-child'), 'o_indent');
-            assert.doesNotHaveClass(webClient.el.querySelector('.o_searchview_autocomplete li:last-child'), 'o_indent');
+            assert.containsN(target, '.o_searchview_autocomplete li', 2);
+            assert.strictEqual(target.querySelector('.o_searchview_autocomplete li:first-child').innerText, "Search Status: New");
+            assert.strictEqual(target.querySelector('.o_searchview_autocomplete li:last-child').innerText, "Search Status: Cancelled");
+            assert.doesNotHaveClass(target.querySelector('.o_searchview_autocomplete li:first-child'), 'o_indent');
+            assert.doesNotHaveClass(target.querySelector('.o_searchview_autocomplete li:last-child'), 'o_indent');
         });
 
         QUnit.test("reference fields are supported in search view", async function (assert) {
@@ -614,16 +614,16 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
             });
             await doAction(webClient, 1);
 
-            await testUtils.controlPanel.editSearch(webClient, "ref");
-            await cpHelpers.validateSearch(webClient);
+            await testUtils.controlPanel.editSearch(target, "ref");
+            await cpHelpers.validateSearch(target);
 
-            assert.containsN(webClient, ".o_data_row", 5);
+            assert.containsN(target, ".o_data_row", 5);
 
-            await cpHelpers.removeFacet(webClient, 0);
-            await testUtils.controlPanel.editSearch(webClient, "ref002");
-            await cpHelpers.validateSearch(webClient);
+            await cpHelpers.removeFacet(target, 0);
+            await testUtils.controlPanel.editSearch(target, "ref002");
+            await cpHelpers.validateSearch(target);
 
-            assert.containsOnce(webClient, ".o_data_row");
+            assert.containsOnce(target, ".o_data_row");
 
             assert.verifySteps([
                 '[]',
diff --git a/addons/web/static/tests/legacy/control_panel/search_utils_tests.js b/addons/web/static/tests/legacy/control_panel/search_utils_tests.js
index ab7ef429ca9..5277f53c5c4 100644
--- a/addons/web/static/tests/legacy/control_panel/search_utils_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/search_utils_tests.js
@@ -3,6 +3,11 @@ odoo.define('web.search_utils_tests', function (require) {
 
     const { constructDateDomain } = require('web.searchUtils');
     const testUtils = require('web.test_utils');
+    const { registry } = require("@web/core/registry");
+    const { translatedTerms } = require("@web/core/l10n/translation");
+    const { patchWithCleanup } = require("@web/../tests/helpers/utils");
+    const { makeTestEnv } = require("@web/../tests/helpers/mock_env");
+    const { makeFakeLocalizationService } = require("@web/../tests/helpers/mock_services");
     const { _t } = require('web.core');
 
     const patchDate = testUtils.mock.patchDate;
@@ -268,7 +273,9 @@ odoo.define('web.search_utils_tests', function (require) {
 
             const unpatchDate = patchDate(2020, 5, 1, 13, 0, 0);
             const referenceMoment = moment().locale('en');
-            testUtils.mock.patch(_t.database.db, {
+            registry.category("services").add("localization", makeFakeLocalizationService());
+            await makeTestEnv();
+            patchWithCleanup(translatedTerms, {
                 "Q2": "Deuxième trimestre de l'an de grâce",
             });
 
@@ -282,7 +289,6 @@ odoo.define('web.search_utils_tests', function (require) {
             );
 
             unpatchDate();
-            testUtils.mock.unpatch(_t.database.db);
         });
 
         QUnit.test("Quarter option: right to left", async function (assert) {
@@ -312,7 +318,9 @@ odoo.define('web.search_utils_tests', function (require) {
 
             const unpatchDate = patchDate(2020, 5, 1, 13, 0, 0);
             const referenceMoment = moment().locale('en');
-            testUtils.mock.patch(_t.database.db, {
+            registry.category("services").add("localization", makeFakeLocalizationService());
+            await makeTestEnv();
+            patchWithCleanup(translatedTerms, {
                 "Q2": "2e Trimestre",
             });
             testUtils.mock.patch(_t.database.parameters, {
@@ -329,7 +337,6 @@ odoo.define('web.search_utils_tests', function (require) {
             );
 
             unpatchDate();
-            testUtils.mock.unpatch(_t.database.db);
             testUtils.mock.unpatch(_t.database.parameters);
         });
 
diff --git a/addons/web/static/tests/legacy/core/mixins_tests.js b/addons/web/static/tests/legacy/core/mixins_tests.js
index c1c2dc80941..dbc639120f7 100644
--- a/addons/web/static/tests/legacy/core/mixins_tests.js
+++ b/addons/web/static/tests/legacy/core/mixins_tests.js
@@ -9,7 +9,7 @@ var Widget = require('web.Widget');
 const { dialogService } = require('@web/core/dialog/dialog_service');
 const { errorService } = require("@web/core/errors/error_service");
 const { registry } = require('@web/core/registry');
-const { nextTick, patchWithCleanup } = require('@web/../tests/helpers/utils');
+const { getFixture, nextTick, patchWithCleanup } = require('@web/../tests/helpers/utils');
 const { createWebClient, doAction } = require('@web/../tests/webclient/helpers');
 
 QUnit.module('core', {}, function () {
@@ -66,10 +66,11 @@ QUnit.module('core', {}, function () {
                 throw new Error("This error should be throw only once");
             }
         };
-        const webClient = await createWebClient({mockRPC});
+        const target = getFixture();
+        const webClient = await createWebClient({ mockRPC});
         await doAction(webClient, "TestAction");
         await nextTick();
-        assert.containsOnce(webClient, ".o_dialog");
+        assert.containsOnce(target, ".o_dialog");
     });
 });
 
diff --git a/addons/web/static/tests/legacy/core/owl_dialog_tests.js b/addons/web/static/tests/legacy/core/owl_dialog_tests.js
index 137468107d0..4427545e73d 100644
--- a/addons/web/static/tests/legacy/core/owl_dialog_tests.js
+++ b/addons/web/static/tests/legacy/core/owl_dialog_tests.js
@@ -1,4 +1,3 @@
-
 odoo.define('web.owl_dialog_tests', function (require) {
     "use strict";
 
@@ -6,22 +5,25 @@ odoo.define('web.owl_dialog_tests', function (require) {
     const makeTestEnvironment = require('web.test_env');
     const Dialog = require('web.OwlDialog');
     const testUtils = require('web.test_utils');
-    const { registry } = require("@web/core/registry");
-    const { makeFakeDialogService } = require("@web/../tests/helpers/mock_services");
 
     const { makeLegacyDialogMappingTestEnv } = require('@web/../tests/helpers/legacy_env_utils');
     const { Dialog: WowlDialog } = require("@web/core/dialog/dialog");
-    const { getFixture, nextTick, patchWithCleanup } = require("@web/../tests/helpers/utils");
+    const {
+        getFixture,
+        nextTick,
+        mount,
+        destroy,
+    } = require("@web/../tests/helpers/utils");
     const { createWebClient, doAction } = require("@web/../tests/webclient/helpers");
 
-    const { Component, mount, useState, xml } = owl;
+    const { Component, useState, xml } = owl;
     const EscapeKey = { key: 'Escape', keyCode: 27, which: 27 };
 
     QUnit.module('core', {}, function () {
         QUnit.module('OwlDialog');
 
         QUnit.test("Rendering of all props", async function (assert) {
-            assert.expect(35);
+            assert.expect(36);
 
             class SubComponent extends Component {
                 // Handlers
@@ -32,12 +34,11 @@ odoo.define('web.owl_dialog_tests', function (require) {
             SubComponent.template = xml`<div class="o_subcomponent" t-esc="props.text" t-on-click="_onClick"/>`;
 
             class Parent extends Component {
-                constructor() {
-                    super(...arguments);
+                setup() {
                     this.state = useState({ textContent: "sup" });
                 }
                 // Handlers
-                _onButtonClicked(ev) {
+                _onButtonClicked() {
                     assert.step('button_clicked');
                 }
                 _onDialogClosed() {
@@ -45,7 +46,6 @@ odoo.define('web.owl_dialog_tests', function (require) {
                 }
             }
             Parent.components = { Dialog, SubComponent };
-            Parent.env = makeTestEnvironment();
             Parent.template = xml`
                 <Dialog
                     backdrop="state.backdrop"
@@ -57,16 +57,17 @@ odoo.define('web.owl_dialog_tests', function (require) {
                     subtitle="state.subtitle"
                     technical="state.technical"
                     title="state.title"
-                    t-on-dialog-closed="_onDialogClosed"
+                    onClosed="_onDialogClosed"
                     >
                     <SubComponent text="state.textContent"/>
-                    <t t-set="buttons">
+                    <t t-set-slot="buttons">
                         <button class="btn btn-primary" t-on-click="_onButtonClicked">The Button</button>
                     </t>
                 </Dialog>`;
 
-            const parent = new Parent();
-            await parent.mount(testUtils.prepareTarget());
+            const parent = await mount(Parent, getFixture(), {
+                env: makeTestEnvironment(),
+            });
             const dialog = document.querySelector('.o_dialog');
 
             // Helper function
@@ -150,6 +151,7 @@ odoo.define('web.owl_dialog_tests', function (require) {
 
             // Reactivity of buttons
             await testUtils.dom.click(dialog.querySelector('.modal-footer .btn-primary'));
+            assert.verifySteps(["button_clicked"]);
 
             // Render footer (default: true)
             await changeProps('renderFooter', false);
@@ -165,18 +167,15 @@ odoo.define('web.owl_dialog_tests', function (require) {
                 "Subcomponent should match with its given text");
             await testUtils.dom.click(dialog.querySelector('.o_subcomponent'));
 
-            assert.verifySteps(['button_clicked', 'subcomponent_clicked']);
-
-            parent.destroy();
+            assert.verifySteps(["subcomponent_clicked"]);
         });
 
         QUnit.test("Interactions between multiple dialogs", async function (assert) {
-            assert.expect(22);
+            assert.expect(23);
 
             const { legacyEnv } = await makeLegacyDialogMappingTestEnv();
             class Parent extends Component {
-                constructor() {
-                    super(...arguments);
+                setup() {
                     this.dialogIds = useState([]);
                 }
                 // Handlers
@@ -186,17 +185,16 @@ odoo.define('web.owl_dialog_tests', function (require) {
                 }
             }
             Parent.components = { Dialog };
-            Parent.env = legacyEnv;
             Parent.template = xml`
                 <div>
                     <Dialog t-foreach="dialogIds" t-as="dialogId" t-key="dialogId"
-                        contentClass="'dialog_' + dialogId"
-                        t-on-dialog-closed="_onDialogClosed(dialogId)"
-                    />
+                        contentClass="'dialog_' + dialogId" onClosed="() => this._onDialogClosed(dialogId)"
+                        />
                 </div>`;
 
-            const parent = new Parent();
-            await parent.mount(testUtils.prepareTarget());
+            const parent = await mount(Parent, getFixture(), {
+                env: legacyEnv,
+            });
 
             // Dialog 1 : Owl
             parent.dialogIds.push(1);
@@ -220,6 +218,7 @@ odoo.define('web.owl_dialog_tests', function (require) {
             // Manually closes the last legacy dialog. Should not affect the other
             // existing dialogs (3 owl and 2 legacy).
             unopenedModal.close();
+            assert.containsN(document.body, ".modal", 5);
 
             let modals = document.querySelectorAll('.modal');
             assert.notOk(modals[modals.length - 1].classList.contains('o_inactive_modal'),
@@ -267,47 +266,43 @@ odoo.define('web.owl_dialog_tests', function (require) {
             assert.containsOnce(document.body, '.o_dialog');
             assert.containsNone(document.body, '.o_legacy_dialog');
 
-            parent.unmount();
+            destroy(parent);
 
             assert.containsNone(document.body, '.modal');
             // dialog 1 is closed through the removal of its parent => no callback
             assert.verifySteps(['dialog_5_closed', 'dialog_4_closed']);
-
-            parent.destroy();
         });
 
         QUnit.test("Interactions between legacy owl dialogs and new owl dialogs", async function (assert) {
-            assert.expect(7);
+            assert.expect(9);
             const { legacyEnv, env } = await makeLegacyDialogMappingTestEnv();
 
-            let id = 1;
-            // OwlDialog env
             class OwlDialogWrapper extends Component {
                 setup() {
                     this.env = legacyEnv;
+                    this.__owl__.childEnv = legacyEnv;
                 }
             }
             OwlDialogWrapper.template = xml`
-                <Dialog t-on-dialog-closed="props.close()" />
+                <Dialog
+                onClosed="() => props.close()"
+                />
             `;
             OwlDialogWrapper.components = { Dialog };
             class WowlDialogSubClass extends WowlDialog{
-                setup(){
+                setup() {
                     super.setup();
                     this.contentClass = this.props.contentClass;
                 }
             }
             class Parent extends Component {
                 setup() {
-                    super.setup();
                     this.dialogs = useState([]);
                 }
                 // Handlers
                 _onDialogClosed(id) {
-                    return () => {
-                        assert.step(`dialog_${id}_closed`);
-                        this.dialogs.splice(this.dialogs.findIndex(d => d.id === id), 1);
-                    };
+                    assert.step(`dialog_${id}_closed`);
+                    this.dialogs.splice(this.dialogs.findIndex(d => d.id === id), 1);
                 }
             }
             Parent.template = xml`
@@ -315,30 +310,30 @@ odoo.define('web.owl_dialog_tests', function (require) {
                     <div class="o_dialog_container"/>
                     <t t-foreach="dialogs" t-as="dialog" t-key="dialog.id" t-component="dialog.class"
                         contentClass="'dialog_' + dialog.id"
-                        close="_onDialogClosed(dialog.id)"
+                        close="() => this._onDialogClosed(dialog.id)"
                     />
                 </div>`;
-            const parent = await mount(Parent, { env, target: getFixture() });
+
+            const target = getFixture();
+            const parent = await mount(Parent, target, { env });
 
             parent.dialogs.push({ id: 1, class: WowlDialogSubClass });
             await nextTick();
-            id ++;
             parent.dialogs.push({ id: 2, class: OwlDialogWrapper });
             await nextTick();
-            id ++;
             parent.dialogs.push({ id: 3, class: WowlDialogSubClass });
             await nextTick();
 
             assert.verifySteps([]);
+            assert.containsN(document.body, ".modal", 3);
             await testUtils.dom.triggerEvent(window, 'keydown', EscapeKey); // Press Escape
             assert.verifySteps(['dialog_3_closed']);
             await testUtils.dom.triggerEvent(window, 'keydown', EscapeKey); // Press Escape
             assert.verifySteps(['dialog_2_closed']);
             await testUtils.dom.triggerEvent(window, 'keydown', EscapeKey); // Press Escape
             assert.verifySteps(['dialog_1_closed']);
-
-            parent.unmount();
-            parent.destroy();
+            await nextTick();
+            assert.containsNone(document.body, ".modal");
         });
 
         QUnit.test("Z-index toggling and interactions", async function (assert) {
@@ -362,22 +357,34 @@ odoo.define('web.owl_dialog_tests', function (require) {
                 return modal;
             }
 
-            class Parent extends Component {
-                constructor() {
-                    super(...arguments);
+            class Parent1 extends Component {
+                setup() {
+                }
+            }
+            Parent1.components = { Dialog };
+            Parent1.template = xml`
+                <div>
+                    <Dialog/>
+                </div>`;
+
+            const parent1 = await mount(Parent1, getFixture(), {
+                env: makeTestEnvironment(),
+            });
+
+            class Parent2 extends Component {
+                setup() {
                     this.state = useState({ showSecondDialog: true });
                 }
             }
-            Parent.components = { Dialog };
-            Parent.env = makeTestEnvironment();
-            Parent.template = xml`
+            Parent2.components = { Dialog };
+            Parent2.template = xml`
                 <div>
-                    <Dialog/>
                     <Dialog t-if="state.showSecondDialog"/>
                 </div>`;
 
-            const parent = new Parent();
-            await parent.mount(testUtils.prepareTarget());
+            const parent2 = await mount(Parent2, getFixture(), {
+                env: makeTestEnvironment(),
+            });
 
             const frontEndModal = createCustomModal('modal');
             const backEndModal = createCustomModal('modal o_technical_modal');
@@ -387,7 +394,7 @@ odoo.define('web.owl_dialog_tests', function (require) {
             const feZIndexBefore = getComputedStyle(frontEndModal).zIndex;
             const beZIndexBefore = getComputedStyle(backEndModal).zIndex;
 
-            parent.state.showSecondDialog = false;
+            parent2.state.showSecondDialog = false;
             await testUtils.nextTick();
 
             assert.ok(owlIndexBefore < getComputedStyle(document.querySelector('.o_dialog .modal')).zIndex,
@@ -397,9 +404,10 @@ odoo.define('web.owl_dialog_tests', function (require) {
             assert.strictEqual(beZIndexBefore, getComputedStyle(backEndModal).zIndex,
                 "z-index of custom back-end modals should not be impacted by Owl Dialog activity system");
 
-            parent.destroy();
             frontEndModal.destroy();
             backEndModal.destroy();
+            destroy(parent1);
+            destroy(parent2);
         });
 
         QUnit.test("remove tabindex on inactive dialog", async (assert) => {
@@ -453,56 +461,57 @@ odoo.define('web.owl_dialog_tests', function (require) {
                 },
             };
 
+            const target = getFixture();
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 1);
 
-            await testUtils.dom.click(webClient.el.querySelector(`.fc-event[data-event-id="1"]`));
-            await testUtils.dom.click(webClient.el.querySelector(`.o_cw_popover_edit`));
+            await testUtils.dom.click(target.querySelector(`.fc-event[data-event-id="1"]`));
+            await testUtils.dom.click(target.querySelector(`.o_cw_popover_edit`));
 
-            assert.containsNone(webClient.el, ".o_dialog");
-            assert.containsOnce(webClient.el, ".modal");
-            assert.containsOnce(webClient.el, ".modal[tabindex='-1']");
+            assert.containsNone(target, ".o_dialog");
+            assert.containsOnce(target, ".modal");
+            assert.containsOnce(target, ".modal[tabindex='-1']");
 
             assert.strictEqual(
-                webClient.el.querySelector(`.o_field_widget[name="display_name"]`).value,
+                target.querySelector(`.o_field_widget[name="display_name"]`).value,
                 "Event 1"
             );
             await testUtils.fields.editInput(
-                webClient.el.querySelector(`.o_field_widget[name="display_name"]`),
+                target.querySelector(`.o_field_widget[name="display_name"]`),
                 "legacy"
             );
             assert.strictEqual(
-                webClient.el.querySelector(`.o_field_widget[name="display_name"]`).value,
+                target.querySelector(`.o_field_widget[name="display_name"]`).value,
                 "legacy"
             );
 
-            await testUtils.dom.click(webClient.el.querySelector(`button[name="2"]`));
-            assert.containsOnce(webClient.el, ".o_dialog");
-            assert.containsN(webClient.el, ".modal", 2);
-            assert.containsOnce(webClient.el, ".modal:not([tabindex='-1'])");
-            assert.containsOnce(webClient.el, ".o_dialog .modal[tabindex='-1']");
+            await testUtils.dom.click(target.querySelector(`button[name="2"]`));
+            assert.containsOnce(target, ".o_dialog");
+            assert.containsN(target, ".modal", 2);
+            assert.containsOnce(target, ".modal:not([tabindex='-1'])");
+            assert.containsOnce(target, ".o_dialog .modal[tabindex='-1']");
 
             assert.strictEqual(
-                webClient.el.querySelector(`.o_dialog .o_field_widget[name="display_name"]`).value,
+                target.querySelector(`.o_dialog .o_field_widget[name="display_name"]`).value,
                 ""
             );
             await testUtils.fields.editInput(
-                webClient.el.querySelector(`.o_dialog .o_field_widget[name="display_name"]`),
+                target.querySelector(`.o_dialog .o_field_widget[name="display_name"]`),
                 "wowl"
             );
             assert.strictEqual(
-                webClient.el.querySelector(`.o_dialog .o_field_widget[name="display_name"]`).value,
+                target.querySelector(`.o_dialog .o_field_widget[name="display_name"]`).value,
                 "wowl"
             );
 
-            await testUtils.dom.click(webClient.el.querySelector(`.o_dialog .modal-header .close`));
-            assert.containsNone(webClient.el, ".o_dialog");
-            assert.containsOnce(webClient.el, ".modal");
-            assert.containsOnce(webClient.el, ".modal[tabindex='-1']");
+            await testUtils.dom.click(target.querySelector(`.o_dialog .modal-header .close`));
+            assert.containsNone(target, ".o_dialog");
+            assert.containsOnce(target, ".modal");
+            assert.containsOnce(target, ".modal[tabindex='-1']");
 
-            await testUtils.dom.click(webClient.el.querySelector(`.modal-header .close`));
-            assert.containsNone(webClient.el, ".o_dialog");
-            assert.containsNone(webClient.el, ".modal");
+            await testUtils.dom.click(target.querySelector(`.modal-header .close`));
+            assert.containsNone(target, ".o_dialog");
+            assert.containsNone(target, ".modal");
         });
     });
 });
diff --git a/addons/web/static/tests/legacy/core/popover_tests.js b/addons/web/static/tests/legacy/core/popover_tests.js
index 62c8d458070..d42c3d53715 100644
--- a/addons/web/static/tests/legacy/core/popover_tests.js
+++ b/addons/web/static/tests/legacy/core/popover_tests.js
@@ -4,9 +4,9 @@ odoo.define('web.popover_tests', function (require) {
     const makeTestEnvironment = require('web.test_env');
     const Popover = require('web.Popover');
     const testUtils = require('web.test_utils');
-    const { useEffect } = require("@web/core/utils/hooks");
+    const { click, mount } = require("@web/../tests/helpers/utils");
 
-    const { Component, useRef, useState, xml } = owl;
+    const { Component, useState, xml } = owl;
 
     QUnit.module('core', {}, function () {
         QUnit.module('Popover');
@@ -18,28 +18,23 @@ odoo.define('web.popover_tests', function (require) {
             SubComponent.template = xml`
                 <div class="o_subcomponent" style="width: 280px;" t-esc="props.text"/>
             `;
-            let popoverElement;
 
             class Parent extends Component {
-                setup() {
+                constructor() {
+                    super(...arguments);
                     this.state = useState({
                         position: 'right',
                         title: '👋',
                         textContent: 'sup',
                     });
-                    const root = useRef("root");
-                    useEffect(() => {
-                        popoverElement = root.el.children[1];
-                    });
                 }
             }
-            // Popover should be included as a globally available Component
-            Parent.components = { SubComponent };
-            Parent.env = makeTestEnvironment();
+            Parent.components = { Popover, SubComponent };
             Parent.template = xml`
-                <div t-ref="root">
+                <div>
                     <button id="passiveTarget">🚫</button>
-                    <Popover position="state.position"
+                    <Popover
+                        position="state.position"
                         title="state.title"
                         >
                         <t t-set-slot="opened">
@@ -51,16 +46,17 @@ odoo.define('web.popover_tests', function (require) {
                     </Popover>
                 </div>`;
 
-            const parent = new Parent();
-            const fixture = testUtils.prepareTarget();
+            const target = testUtils.prepareTarget();
+            const env = makeTestEnvironment();
+
             /**
              * The component being tested behaves differently based on its
-             * visibility (or not) in the viewport. The qunit fixture has to be
+             * visibility (or not) in the viewport. The qunit target has to be
              * in the view port for these tests to be meaningful.
              */
-            fixture.style.top = '300px';
-            fixture.style.left = '150px';
-            fixture.style.width = '300px';
+            target.style.top = '300px';
+            target.style.left = '150px';
+            target.style.width = '300px';
 
             // Helper functions
             async function changeProps(key, value) {
@@ -84,19 +80,19 @@ odoo.define('web.popover_tests', function (require) {
                 return hasCorrectClass && correctLeft && correctTop;
             }
 
-            await parent.mount(fixture);
+            const parent = await mount(Parent, target, { env });
             const body = document.querySelector('body');
             let popover, title;
             // Show/hide
             assert.containsNone(body, '.o_popover');
-            await testUtils.dom.click('#target');
+            await click(body, '#target');
             assert.containsOnce(body, '.o_popover');
             assert.containsOnce(body, '.o_subcomponent');
             assert.containsOnce(body, '.o_popover--right');
-            await testUtils.dom.click('#passiveTarget');
+            await click(body, '#passiveTarget');
             assert.containsNone(body, '.o_popover');
             // Reactivity of title
-            await testUtils.dom.click('#target');
+            await click(body, '#target');
             popover = document.querySelector('.o_popover');
             title = popover.querySelector('.o_popover_header').innerText.trim();
             assert.strictEqual(title, '👋');
@@ -108,10 +104,11 @@ odoo.define('web.popover_tests', function (require) {
                 'The title of the popover should have changed.'
             );
             // Position and target reactivity
+            const element = document.getElementById("passiveTarget").nextSibling;
             assert.ok(
                 pointsTo(
                     document.querySelector('.o_popover'),
-                    popoverElement,
+                    element,
                     parent.state.position
                 ),
                 'Popover should be visually aligned with its target'
@@ -120,7 +117,7 @@ odoo.define('web.popover_tests', function (require) {
             assert.ok(
                 pointsTo(
                     document.querySelector('.o_popover'),
-                    popoverElement,
+                    element,
                     parent.state.position
                 ),
                 'Popover should be bottomed positioned'
@@ -132,16 +129,15 @@ odoo.define('web.popover_tests', function (require) {
                 'wassup',
                 'Subcomponent should match with its given text'
             );
-            await testUtils.dom.click('#passiveTarget');
+            await click(body, '#passiveTarget');
             // Requested position not fitting
             await changeProps('position', 'left');
-            await testUtils.dom.click('#target');
+            await click(body, '#target');
             assert.ok(
-                pointsTo(document.querySelector('.o_popover'), popoverElement, 'right'),
+                pointsTo(document.querySelector('.o_popover'), element, 'right'),
                 "Popover should be right-positioned because it doesn't fit left"
             );
-            await testUtils.dom.click('#passiveTarget');
-            parent.destroy();
+            await click(body, '#passiveTarget');
         });
 
         QUnit.test('Multiple popovers', async function (assert) {
@@ -149,19 +145,18 @@ odoo.define('web.popover_tests', function (require) {
 
             class Parent extends Component {}
             Parent.components = { Popover };
-            Parent.env = makeTestEnvironment();
             Parent.template = xml`
                 <div>
                     <Popover>
                         <button id="firstTarget">👋</button>
-                        <t t-set="opened">
+                        <t t-set-slot="opened">
                             <p id="firstContent">first popover</p>
                         </t>
                     </Popover>
                     <br/>
                     <Popover>
                         <button id="secondTarget">👏</button>
-                        <t t-set="opened">
+                        <t t-set-slot="opened">
                             <p id="secondContent">second popover</p>
                         </t>
                     </Popover>
@@ -169,112 +164,107 @@ odoo.define('web.popover_tests', function (require) {
                     <span id="dismissPopovers">💀</span>
                 </div>`;
 
-            const parent = new Parent();
-            const fixture = testUtils.prepareTarget();
+            const target = testUtils.prepareTarget();
+            const env = makeTestEnvironment();
 
             const body = document.querySelector('body');
-            await parent.mount(fixture);
+
+            await mount(Parent, target, { env });
             // Show first popover
             assert.containsNone(body, '.o_popover');
-            await testUtils.dom.click('#firstTarget');
+            await click(body, '#firstTarget');
             assert.containsOnce(body, '#firstContent');
             assert.containsNone(body, '#secondContent');
-            await testUtils.dom.click('#dismissPopovers');
+            await click(body, '#dismissPopovers');
             assert.containsNone(body, '.o_popover');
             // Show first then display second
-            await testUtils.dom.click('#firstTarget');
+            await click(body, '#firstTarget');
             assert.containsOnce(body, '#firstContent');
             assert.containsNone(body, '#secondContent');
-            await testUtils.dom.click('#secondTarget');
+            await click(body, '#secondTarget');
             assert.containsNone(body, '#firstContent');
             assert.containsOnce(body, '#secondContent');
-            await testUtils.dom.click('#dismissPopovers');
+            await click(body, '#dismissPopovers');
             assert.containsNone(body, '.o_popover');
-            parent.destroy();
         });
 
         QUnit.test('toggle', async function (assert) {
             assert.expect(4);
 
             class Parent extends Component {}
-            // Popover should be included as a globally available Component
-            Object.assign(Parent, {
-                env: makeTestEnvironment(),
-                template: xml`
-                    <div>
-                        <Popover>
-                            <button id="open">Open</button>
-                            <t t-set="opened">
-                                Opened!
-                            </t>
-                        </Popover>
-                    </div>
-                `,
-            });
+            Parent.template = xml`
+                <div>
+                    <Popover>
+                        <button id="open">Open</button>
+                        <t t-set-slot="opened">
+                            Opened!
+                        </t>
+                    </Popover>
+                </div>
+            `;
+            Parent.components = { Popover };
 
-            const parent = new Parent();
-            const fixture = testUtils.prepareTarget();
-            await parent.mount(fixture);
+            const target = testUtils.prepareTarget();
+            const env = makeTestEnvironment();
+
+            await mount(Parent, target, { env });
 
             const body = document.querySelector('body');
             assert.containsOnce(body, '#open');
             assert.containsNone(body, '.o_popover');
 
-            await testUtils.dom.click('#open');
+            await click(body, '#open');
             assert.containsOnce(body, '.o_popover');
 
-            await testUtils.dom.click('#open');
+            await click(body, '#open');
             assert.containsNone(body, '.o_popover');
-
-            parent.destroy();
         });
 
         QUnit.test('close event', async function (assert) {
             assert.expect(7);
 
             // Needed to trigger the event from inside the Popover slot.
-            class Content extends Component {}
+            class Content extends Component {
+                onClick() {
+                    this.trigger("o-popover-close");
+                }
+            }
             Content.template = xml`
-                <button id="close" t-on-click="trigger('o-popover-close')">
+                <button id="close" t-on-click="onClick">
                     Close
                 </button>
             `;
 
             class Parent extends Component {}
-            // Popover should be included as a globally available Component
-            Object.assign(Parent, {
-                components: { Content },
-                env: makeTestEnvironment(),
-                template: xml`
-                    <div>
-                        <Popover>
-                            <button id="open">Open</button>
-                            <t t-set="opened">
-                                <Content/>
-                            </t>
-                        </Popover>
-                    </div>
-                `,
-            });
+            Parent.components = { Content, Popover };
+            Parent.template = xml`
+                <div>
+                    <Popover>
+                        <button id="open">Open</button>
+                        <t t-set-slot="opened">
+                            <Content/>
+                        </t>
+                    </Popover>
+                </div>
+            `;
 
-            const parent = new Parent();
-            const fixture = testUtils.prepareTarget();
-            await parent.mount(fixture);
+            const target = testUtils.prepareTarget();
+            const env = makeTestEnvironment();
+
+            await mount(Parent, target, { env });
 
             const body = document.querySelector('body');
             assert.containsOnce(body, '#open');
             assert.containsNone(body, '.o_popover');
             assert.containsNone(body, '#close');
 
-            await testUtils.dom.click('#open');
+            await click(body, '#open');
             assert.containsOnce(body, '.o_popover');
             assert.containsOnce(body, '#close');
 
-            await testUtils.dom.click('#close');
+            await click(body, '#close');
             assert.containsNone(body, '.o_popover');
             assert.containsNone(body, '#close');
-
-            parent.destroy();
         });
     });
 });
diff --git a/addons/web/static/tests/legacy/fields/basic_fields_tests.js b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
index 4b65bddab58..83d4c80148e 100644
--- a/addons/web/static/tests/legacy/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
@@ -17,7 +17,7 @@ var field_registry = require('web.field_registry');
 const  makeTestEnvironment = require("web.test_env");
 const { makeLegacyCommandService } = require("@web/legacy/utils");
 const { registry } = require("@web/core/registry");
-const { legacyExtraNextTick, patchWithCleanup, triggerHotkey, nextTick, click } = require("@web/../tests/helpers/utils");
+const { getFixture, legacyExtraNextTick, patchWithCleanup, triggerHotkey, nextTick, click } = require("@web/../tests/helpers/utils");
 const { createWebClient, doAction } = require('@web/../tests/webclient/helpers');
 
 var createView = testUtils.createView;
@@ -33,6 +33,7 @@ const PRODUCT_IMAGE = 'R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAA
 const FR_FLAG_URL = '/base/static/img/country_flags/fr.png';
 const EN_FLAG_URL = '/base/static/img/country_flags/gb.png';
 
+let target;
 
 QUnit.module('fields', {}, function () {
 
@@ -156,6 +157,8 @@ QUnit.module('basic_fields', {
                 }]
             },
         };
+
+        target = getFixture();
     },
 }, function () {
 
@@ -6710,7 +6713,7 @@ QUnit.module('basic_fields', {
             'partner,false,search': '<search></search>',
         };
         const serverData = { models: this.data, views}
-        const webClient = await createWebClient({serverData});
+        const webClient = await createWebClient({ serverData });
         await doAction(webClient, {
             res_id: 1,
             type: 'ir.actions.act_window',
@@ -6719,23 +6722,23 @@ QUnit.module('basic_fields', {
             'view_mode': 'form',
             'views': [[false, 'form']],
         });
-        assert.containsOnce(webClient, ".fa-star")
+        assert.containsOnce(target, ".fa-star")
 
         triggerHotkey("control+k")
         await nextTick();
-        const idx = [...webClient.el.querySelectorAll(".o_command")].map(el => el.textContent).indexOf("Set priority...ALT + R")
+        const idx = [...target.querySelectorAll(".o_command")].map(el => el.textContent).indexOf("Set priority...ALT + R")
         assert.ok(idx >= 0);
 
-        await click([...webClient.el.querySelectorAll(".o_command")][idx])
+        await click([...target.querySelectorAll(".o_command")][idx])
         await nextTick();
-        assert.deepEqual([...webClient.el.querySelectorAll(".o_command")].map(el => el.textContent), [
+        assert.deepEqual([...target.querySelectorAll(".o_command")].map(el => el.textContent), [
             "Normal",
             "Blocked",
             "Done"
           ])
-        await click(webClient.el, "#o_command_2")
+        await click(target, "#o_command_2")
         await legacyExtraNextTick();
-        assert.containsN(webClient, ".fa-star", 2)
+        assert.containsN(target, ".fa-star", 2)
     });
 
     QUnit.module('StateSelection Widget');
@@ -7009,7 +7012,7 @@ QUnit.module('basic_fields', {
             'partner,false,search': '<search></search>',
         };
         const serverData = { models: this.data, views}
-        const webClient = await createWebClient({serverData});
+        const webClient = await createWebClient({ serverData });
         await doAction(webClient, {
             res_id: 1,
             type: 'ir.actions.act_window',
@@ -7018,23 +7021,23 @@ QUnit.module('basic_fields', {
             'view_mode': 'form',
             'views': [[false, 'form']],
         });
-        assert.containsOnce(webClient, ".o_status_red")
+        assert.containsOnce(target, ".o_status_red")
 
         triggerHotkey("control+k")
         await nextTick();
-        const idx = [...webClient.el.querySelectorAll(".o_command")].map(el => el.textContent).indexOf("Set kanban state...ALT + SHIFT + R")
+        const idx = [...target.querySelectorAll(".o_command")].map(el => el.textContent).indexOf("Set kanban state...ALT + SHIFT + R")
         assert.ok(idx >= 0);
 
-        await click([...webClient.el.querySelectorAll(".o_command")][idx])
+        await click([...target.querySelectorAll(".o_command")][idx])
         await nextTick();
-        assert.deepEqual([...webClient.el.querySelectorAll(".o_command")].map(el => el.textContent), [
+        assert.deepEqual([...target.querySelectorAll(".o_command")].map(el => el.textContent), [
             "Normal",
             "Blocked",
             "Done"
           ])
-        await click(webClient.el, "#o_command_2")
+        await click(target, "#o_command_2")
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_status_green")
+        assert.containsOnce(target, ".o_status_green")
     });
 
 
diff --git a/addons/web/static/tests/legacy/fields/relational_fields/field_many2many_tests.js b/addons/web/static/tests/legacy/fields/relational_fields/field_many2many_tests.js
index c35898426d1..ff6ce352664 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields/field_many2many_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields/field_many2many_tests.js
@@ -1721,7 +1721,6 @@ QUnit.module('fields', {}, function () {
             // type something that doesn't exist
             await testUtils.fields.editAndTrigger(form.$('.o_field_many2one input'),
                 'Something that does not exist', 'keydown');
-            // await testUtils.nextTick();
             assert.containsN(form.$('.o_field_many2one input').autocomplete('widget'), 'li.o_m2o_dropdown_option', 2,
                 'autocomplete should contain Create and Create and Edit... options');
 
diff --git a/addons/web/static/tests/legacy/fields/relational_fields/field_many2one_tests.js b/addons/web/static/tests/legacy/fields/relational_fields/field_many2one_tests.js
index 48cfcec1f06..9adb4e9b548 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields/field_many2one_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields/field_many2one_tests.js
@@ -2,7 +2,6 @@ odoo.define('web.field_many_to_one_tests', function (require) {
 "use strict";
 
 var BasicModel = require('web.BasicModel');
-var FormController = require('web.FormController');
 var FormView = require('web.FormView');
 var ListView = require('web.ListView');
 var relationalFields = require('web.relational_fields');
diff --git a/addons/web/static/tests/legacy/fields/relational_fields_tests.js b/addons/web/static/tests/legacy/fields/relational_fields_tests.js
index 8edffa39563..fd00a37aee2 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields_tests.js
@@ -13,7 +13,7 @@ const core = require('web.core');
 const makeTestEnvironment = require("web.test_env");
 const { makeLegacyCommandService } = require("@web/legacy/utils");
 const { createWebClient, doAction } = require('@web/../tests/webclient/helpers');
-const { triggerHotkey, nextTick, click } = require("@web/../tests/helpers/utils");
+const { getFixture, triggerHotkey, nextTick, click } = require("@web/../tests/helpers/utils");
 const { registry } = require("@web/core/registry");
 
 const { makeLegacyDialogMappingTestEnv } = require('@web/../tests/helpers/legacy_env_utils');
@@ -1040,7 +1040,8 @@ QUnit.module('relational_fields', {
             'partner,false,search': '<search></search>',
         };
         const serverData = { models: this.data, views}
-        const webClient = await createWebClient({serverData});
+        const target = getFixture();
+        const webClient = await createWebClient({ serverData });
         await doAction(webClient, {
             res_id: 1,
             type: 'ir.actions.act_window',
@@ -1049,22 +1050,22 @@ QUnit.module('relational_fields', {
             'view_mode': 'form',
             'views': [[false, 'form']],
         });
-        assert.containsOnce(webClient, ".o_field_widget")
+        assert.containsOnce(target, ".o_field_widget")
 
         triggerHotkey("control+k")
         await nextTick();
-        const movestage = webClient.el.querySelectorAll(".o_command");
+        const movestage = target.querySelectorAll(".o_command");
         const idx = [...movestage].map(el => el.textContent).indexOf("Move to Trululu...ALT + SHIFT + X")
         assert.ok(idx >= 0);
 
         await click(movestage[idx])
         await nextTick();
-        assert.deepEqual([...webClient.el.querySelectorAll(".o_command")].map(el => el.textContent), [
+        assert.deepEqual([...target.querySelectorAll(".o_command")].map(el => el.textContent), [
             "first record",
             "second record",
             "aaa",
           ])
-        await click(webClient.el, "#o_command_2")
+        await click(target, "#o_command_2")
     });
 
     QUnit.module('FieldSelection');
diff --git a/addons/web/static/tests/legacy/helpers/test_env.js b/addons/web/static/tests/legacy/helpers/test_env.js
index 95cfafda502..664a234c8ff 100644
--- a/addons/web/static/tests/legacy/helpers/test_env.js
+++ b/addons/web/static/tests/legacy/helpers/test_env.js
@@ -4,11 +4,11 @@ odoo.define('web.test_env', async function (require) {
     const Bus = require('web.Bus');
     const { buildQuery } = require('web.rpc');
     const session = require('web.session');
-    const { registerCleanup } = require("@web/../tests/helpers/cleanup");
 
-    const { Component, QWeb } = owl;
+    const { renderToString } = require('@web/core/utils/render');
+    const { App, Component } = owl;
 
-    let qweb;
+    let app;
 
     /**
      * Creates a test environment with the given environment object.
@@ -20,14 +20,10 @@ odoo.define('web.test_env', async function (require) {
      * @returns {Proxy}
      */
     function makeTestEnvironment(env = {}, providedRPC = null) {
-        if (!qweb) {
-            // avoid parsing templates at every test because it takes a lot of
-            // time and they never change
-            qweb = new QWeb({ templates: session.owlTemplates });
+        if (!app) {
+            app = new App(null, { templates: window.__OWL_TEMPLATES__, test: true });
+            renderToString.app = app;
         }
-        registerCleanup(() => {
-            qweb.subscriptions = {};
-        });
 
         const defaultTranslationParamters = {
             code: "en_US",
@@ -65,7 +61,6 @@ odoo.define('web.test_env', async function (require) {
                 SIZES: { XS: 0, VSM: 1, SM: 2, MD: 3, LG: 4, XL: 5, XXL: 6 },
             }, env.device),
             isDebug: env.isDebug || (() => false),
-            qweb,
             services: Object.assign({
                 ajax: {
                     rpc() {
diff --git a/addons/web/static/tests/legacy/helpers/test_utils_create.js b/addons/web/static/tests/legacy/helpers/test_utils_create.js
index 934a9f49d44..2a9a3dc81c0 100644
--- a/addons/web/static/tests/legacy/helpers/test_utils_create.js
+++ b/addons/web/static/tests/legacy/helpers/test_utils_create.js
@@ -13,15 +13,17 @@ odoo.define('web.test_utils_create', function (require) {
     const ActionMenus = require('web.ActionMenus');
     const concurrency = require('web.concurrency');
     const ControlPanel = require('web.ControlPanel');
-    const customHooks = require('web.custom_hooks');
+    const { useListener } = require("@web/core/utils/hooks");
     const dom = require('web.dom');
     const makeTestEnvironment = require('web.test_env');
     const ActionModel = require('web.ActionModel');
     const Registry = require('web.Registry');
     const testUtilsMock = require('web.test_utils_mock');
     const Widget = require('web.Widget');
+    const { destroy, getFixture, mount, useChild } = require('@web/../tests/helpers/utils');
+    const { registerCleanup } = require("@web/../tests/helpers/cleanup");
 
-    const { Component, useRef, useState, xml } = owl;
+    const { Component, onMounted, onWillStart, useState, xml } = owl;
 
     /**
      * Similar as createView, but specific for calendar views. Some calendar
@@ -81,27 +83,25 @@ odoo.define('web.test_utils_create', function (require) {
         }
         const cleanUp = await testUtilsMock.addMockEnvironmentOwl(Component, params);
         class Parent extends Component {
-            constructor() {
-                super(...arguments);
+            setup() {
                 this.Component = constructor;
                 this.state = useState(params.props || {});
-                this.component = useRef('component');
                 for (const eventName in params.intercepts || {}) {
-                    customHooks.useListener(eventName, params.intercepts[eventName]);
+                    useListener(eventName, params.intercepts[eventName]);
                 }
+                useChild();
             }
         }
-        Parent.template = xml`<t t-component="Component" t-props="state" t-ref="component"/>`;
-        const parent = new Parent();
-        await parent.mount(prepareTarget(params.debug), { position: 'first-child' });
-        const child = parent.component.comp;
-        const originalDestroy = child.destroy;
-        child.destroy = function () {
-            child.destroy = originalDestroy;
-            cleanUp();
-            parent.destroy();
-        };
-        return child;
+        Parent.template = xml`<t t-component="Component" t-props="state"/>`;
+
+        const target = getFixture();
+        const env = Component.env;
+        const parent = await mount(Parent, target, { env });
+        registerCleanup(cleanUp);
+        registerCleanup(() => {
+            destroy(parent);
+        });
+        return parent.child;
     }
 
     /**
@@ -121,7 +121,6 @@ odoo.define('web.test_utils_create', function (require) {
      *    available helpers)
      */
     async function createControlPanel(params = {}) {
-        const debug = params.debug || false;
         const env = makeTestEnvironment(params.env || {});
         const props = Object.assign({
             action: {},
@@ -159,44 +158,38 @@ odoo.define('web.test_utils_create', function (require) {
         };
 
         class Parent extends Component {
-            constructor() {
-                super();
+            setup() {
                 this.searchModel = new ActionModel(extensions, globalConfig);
                 this.state = useState(props);
-            }
-            async willStart() {
-                await this.searchModel.load();
-            }
-            mounted() {
-                if (params['get-controller-query-params']) {
-                    this.searchModel.on('get-controller-query-params', this,
-                        params['get-controller-query-params']);
-                }
-                if (params.search) {
-                    this.searchModel.on('search', this, params.search);
-                }
-                this.controlPanel = Object.values(this.__owl__.children)[0];
+                useChild();
+                onWillStart(async () => {
+                    await this.searchModel.load();
+                });
+                onMounted(() => {
+                    if (params['get-controller-query-params']) {
+                        this.searchModel.on('get-controller-query-params', this,
+                            params['get-controller-query-params']);
+                    }
+                    if (params.search) {
+                        this.searchModel.on('search', this, params.search);
+                    }
+                });
             }
         }
         Parent.components = { ControlPanel };
-        Parent.env = env;
         Parent.template = xml`
             <ControlPanel
                 t-props="state"
                 searchModel="searchModel"
             />`;
 
-        const parent = new Parent();
-        await parent.mount(prepareTarget(debug), { position: 'first-child' });
-
-        const controlPanel = parent.controlPanel;
-        const destroy = controlPanel.destroy;
-        controlPanel.destroy = function () {
-            controlPanel.destroy = destroy;
-            parent.destroy();
-        };
-        controlPanel.getQuery = () => parent.searchModel.get('query');
-
+        const target = getFixture();
+        const parent = await mount(Parent, target, { env });
+        const controlPanel = parent.child;
+        controlPanel.getQuery = () => parent.searchModel.get("query");
+        registerCleanup(() => {
+            destroy(parent);
+        });
         return controlPanel;
     }
 
diff --git a/addons/web/static/tests/legacy/helpers/test_utils_mock.js b/addons/web/static/tests/legacy/helpers/test_utils_mock.js
index 4b7f29c0456..f363fdeaced 100644
--- a/addons/web/static/tests/legacy/helpers/test_utils_mock.js
+++ b/addons/web/static/tests/legacy/helpers/test_utils_mock.js
@@ -411,7 +411,8 @@ async function addMockEnvironmentOwl(Component, params, mockServer) {
     // set the test env on owl Component
     const env = await _getMockedOwlEnv(params, mockServer);
     const originalEnv = Component.env;
-    Component.env = makeTestEnvironment(env, mockServer.performRpc.bind(mockServer));
+    const __env = makeTestEnvironment(env, mockServer.performRpc.bind(mockServer));
+    owl.Component.env = __env;
 
     // while we have a mix between Owl and legacy stuff, some of them triggering
     // events on the env.bus (a new Bus instance especially created for the current
diff --git a/addons/web/static/tests/legacy/owl_compatibility_tests.js b/addons/web/static/tests/legacy/owl_compatibility_tests.js
index 019f7c7a21b..b1eaff5bd8a 100644
--- a/addons/web/static/tests/legacy/owl_compatibility_tests.js
+++ b/addons/web/static/tests/legacy/owl_compatibility_tests.js
@@ -1,24 +1,38 @@
 odoo.define('web.OwlCompatibilityTests', function (require) {
     "use strict";
 
-    const AbstractField = require('web.AbstractField');
     const fieldRegistry = require('web.field_registry');
     const widgetRegistry = require('web.widgetRegistry');
     const FormView = require('web.FormView');
 
-    const { ComponentAdapter, ComponentWrapper, WidgetAdapterMixin } = require('web.OwlCompatibility');
+    const {
+        ComponentAdapter,
+        ComponentWrapper,
+        WidgetAdapterMixin,
+    } = require('web.OwlCompatibility');
     const testUtils = require('web.test_utils');
     const Widget = require('web.Widget');
 
-    const { Component, useState, xml } = owl;
     const makeTestPromise = testUtils.makeTestPromise;
     const nextTick = testUtils.nextTick;
     const addMockEnvironmentOwl = testUtils.mock.addMockEnvironmentOwl;
 
+    const { mount, useLogLifeCycle, destroy } = require("@web/../tests/helpers/utils");
+
+    const {
+        Component,
+        onError,
+        onMounted,
+        onWillDestroy,
+        onWillStart,
+        onWillUnmount,
+        onWillUpdateProps,
+        useState,
+        xml,
+    } = owl;
 
     // from Owl internal status enum
-    const ISMOUNTED = 3; 
-    const ISDESTROYED = 5;
+    const ISMOUNTED = 3;
 
     const WidgetAdapter = Widget.extend(WidgetAdapterMixin, {
         destroy() {
@@ -51,12 +65,9 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             Parent.components = { ComponentAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
             assert.strictEqual(parent.el.innerHTML, '<div>Hello World!</div>');
-
-            parent.destroy();
         });
 
         QUnit.test("sub widget with one argument", async function (assert) {
@@ -84,12 +95,9 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             Parent.components = { ComponentAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
             assert.strictEqual(parent.el.innerHTML, '<div>Hello World!</div>');
-
-            parent.destroy();
         });
 
         QUnit.test("sub widget with several arguments (common Adapter)", async function (assert) {
@@ -106,27 +114,28 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
                 }
             });
             class Parent extends Component {
-                constructor() {
-                    super(...arguments);
+                setup() {
                     this.MyWidget = MyWidget;
+                    this.error = false;
+                    onError((e) => {
+                        assert.strictEqual(
+                            e.toString(),
+                            `Error: ComponentAdapter has more than 1 argument, 'widgetArgs' must be overriden.`
+                        );
+                        this.error = true;
+                        this.render();
+                    })
                 }
             }
             Parent.template = xml`
                 <div>
-                    <ComponentAdapter Component="MyWidget" a1="'Hello'" a2="'World'"/>
+                    <t t-if="error">Error</t>
+                    <ComponentAdapter t-else="" Component="MyWidget" a1="'Hello'" a2="'World'"/>
                 </div>`;
             Parent.components = { ComponentAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            try {
-                await parent.mount(target);
-            } catch (e) {
-                assert.strictEqual(e.toString(),
-                    `Error: ComponentAdapter has more than 1 argument, 'widgetArgs' must be overriden.`);
-            }
-
-            parent.destroy();
+            await mount(Parent, target);
         });
 
         QUnit.test("sub widget with several arguments (specific Adapter)", async function (assert) {
@@ -160,12 +169,9 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             Parent.components = { MyWidgetAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
             assert.strictEqual(parent.el.innerHTML, '<div>Hello World!</div>');
-
-            parent.destroy();
         });
 
         QUnit.test("sub widget and widgetArgs props", async function (assert) {
@@ -194,12 +200,9 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             Parent.components = { ComponentAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
             assert.strictEqual(parent.el.innerHTML, '<div>Hello World!</div>');
-
-            parent.destroy();
         });
 
         QUnit.test("sub widget is updated when props change", async function (assert) {
@@ -244,8 +247,7 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             Parent.components = { MyWidgetAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
             assert.strictEqual(parent.el.innerHTML, '<div>Hello World!</div>');
 
@@ -253,8 +255,6 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             await nextTick();
 
             assert.strictEqual(parent.el.innerHTML, '<div>Hello GED!</div>');
-
-            parent.destroy();
         });
 
         QUnit.test("sub widget is updated when props change (async)", async function (assert) {
@@ -287,8 +287,8 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
                 }
             }
             class AsyncComponent extends Component {
-                willUpdateProps() {
-                    return prom;
+                setup() {
+                    onWillUpdateProps(() => prom);
                 }
             }
             AsyncComponent.template = xml`<div>Hi <t t-esc="props.name"/>!</div>`;
@@ -309,8 +309,7 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             Parent.components = { AsyncComponent, MyWidgetAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
             assert.strictEqual(parent.el.innerHTML, '<div>Hi World!</div><div>Hello World!</div>');
 
@@ -325,12 +324,10 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             assert.strictEqual(parent.el.innerHTML, '<div>Hi GED!</div><div>Hello GED!</div>');
 
             assert.verifySteps(['render', 'update', 'render']);
-
-            parent.destroy();
         });
 
         QUnit.test("sub widget methods are correctly called", async function (assert) {
-            assert.expect(8);
+            assert.expect(5);
 
             const MyWidget = Widget.extend({
                 on_attach_callback: function () {
@@ -357,17 +354,11 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             Parent.components = { ComponentAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
             assert.verifySteps(['on_attach_callback']);
 
-            parent.unmount();
-            await parent.mount(target);
-
-            assert.verifySteps(['on_detach_callback', 'on_attach_callback']);
-
-            parent.destroy();
+            destroy(parent);
 
             assert.verifySteps(['on_detach_callback', 'destroy']);
         });
@@ -390,17 +381,14 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             }
             Parent.template = xml`
                 <div>
-                    <ComponentAdapter t-foreach="Children" t-as="Child" Component="Child"/>
+                    <ComponentAdapter t-foreach="Children" t-as="Child" Component="Child" t-key="Child"/>
                 </div>`;
             Parent.components = { ComponentAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
             assert.strictEqual(parent.el.innerHTML, '<div>widget</div><div>component</div>');
-
-            parent.destroy();
         });
 
         QUnit.test("sub widget that triggers events", async function (assert) {
@@ -430,15 +418,12 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             Parent.components = { ComponentAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
             widget.trigger_up('some-event', { value: 'a' });
             widget.trigger_up('some_event', { value: 'b' }); // _ are converted to -
 
             assert.verifySteps(['a', 'b']);
-
-            parent.destroy();
         });
 
         QUnit.test("sub widget that calls _rpc", async function (assert) {
@@ -468,13 +453,10 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             });
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target, { env: owl.Component.env });
 
             assert.strictEqual(parent.el.innerHTML, '<div></div>');
             assert.verifySteps(['some/route 2']);
-
-            parent.destroy();
             cleanUp();
         });
 
@@ -506,15 +488,17 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
                     <ComponentAdapter Component="MyWidget"/>
                 </div>`;
             Parent.components = { ComponentAdapter };
-            Parent.env.services.math = {
-                sqrt: v => Math.sqrt(v),
+
+            const env = {
+                services: {
+                    math: {
+                        sqrt: v => Math.sqrt(v),
+                    }
+                }
             };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
-
-            parent.destroy();
+            const parent = await mount(Parent, target, { env });
         });
 
         QUnit.test("sub widget that requests the session", async function (assert) {
@@ -541,10 +525,7 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             });
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
-
-            parent.destroy();
+            await mount(Parent, target, { env: owl.Component.env });
             cleanUp();
         });
 
@@ -577,12 +558,10 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             });
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target, { env: owl.Component.env });
 
             assert.strictEqual(parent.el.innerHTML, '<div></div>');
 
-            parent.destroy();
             cleanUp();
         });
 
@@ -617,8 +596,7 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             Parent.components = { ComponentAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
             assert.strictEqual(parent.el.innerHTML, '<div>Hi</div>');
 
@@ -631,8 +609,6 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             await nextTick();
 
             assert.strictEqual(parent.el.innerHTML, '<div>Hi</div>');
-
-            parent.destroy();
         });
 
         QUnit.test("sub widget in a t-if, and events", async function (assert) {
@@ -664,8 +640,7 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             Parent.components = { ComponentAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
             assert.strictEqual(parent.el.innerHTML, '<div>Hi</div>');
             myWidget.trigger_up('some-event', { value: 'a' });
@@ -683,11 +658,9 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             myWidget.trigger_up('some-event', { value: 'c' });
 
             assert.verifySteps(['a', 'c']);
-
-            parent.destroy();
         });
 
-        QUnit.test("adapter keeps same el as sub widget (modify)", async function (assert) {
+        QUnit.test("adapter contains the el of sub widget as firstChild (modify)", async function (assert) {
             assert.expect(7);
 
             let myWidget;
@@ -736,39 +709,37 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             Parent.components = { MyWidgetAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
-            assert.strictEqual(parent.el, myWidget.el);
-            await testUtils.dom.click(parent.el);
+            const widgetEl = myWidget.el;
+
+            assert.strictEqual(target.firstChild, widgetEl);
+            await testUtils.dom.click(widgetEl);
 
             parent.state.name = "AAB";
             await nextTick();
 
-            assert.strictEqual(parent.el, myWidget.el);
-            await testUtils.dom.click(parent.el);
+            assert.strictEqual(widgetEl, myWidget.el);
+            await testUtils.dom.click(widgetEl);
 
             parent.state.name = "MCM";
             await nextTick();
 
-            assert.strictEqual(parent.el, myWidget.el);
-            await testUtils.dom.click(parent.el);
+            assert.strictEqual(widgetEl, myWidget.el);
+            await testUtils.dom.click(widgetEl);
 
             assert.verifySteps(["GED", "AAB", "MCM"]);
-
-            parent.destroy();
         });
 
-        QUnit.test("adapter keeps same el as sub widget (replace)", async function (assert) {
-            assert.expect(7);
+        QUnit.test("adapter handles a widget that replaces its el", async function (assert) {
+            assert.expect(10);
 
-            let myWidget;
+            let renderId = 0;
             const MyWidget = Widget.extend({
                 events: {
                     click: "_onClick",
                 },
                 init: function (parent, name) {
-                    myWidget = this;
                     this._super.apply(this, arguments);
                     this.name = name;
                 },
@@ -777,6 +748,7 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
                 },
                 render: function () {
                     this._replaceElement("<div>Click me!</div>");
+                    this.el.classList.add(`widget_id_${renderId++}`);
                 },
                 update: function (name) {
                     this.name = name;
@@ -808,118 +780,124 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             Parent.components = { MyWidgetAdapter };
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
-            assert.strictEqual(parent.el, myWidget.el);
-            await testUtils.dom.click(parent.el);
+            assert.containsOnce(target, ".widget_id_0");
+
+            await testUtils.dom.click(target.querySelector(".widget_id_0"));
 
             parent.state.name = "AAB";
             await nextTick();
 
-            assert.strictEqual(parent.el, myWidget.el);
-            await testUtils.dom.click(parent.el);
+            assert.containsNone(target, ".widget_id_0");
+            assert.containsOnce(target, ".widget_id_1");
+            await testUtils.dom.click(target.querySelector(".widget_id_1"));
 
             parent.state.name = "MCM";
             await nextTick();
 
-            assert.strictEqual(parent.el, myWidget.el);
-            await testUtils.dom.click(parent.el);
+            assert.containsNone(target, ".widget_id_0");
+            assert.containsNone(target, ".widget_id_1");
+            assert.containsOnce(target, ".widget_id_2");
+            await testUtils.dom.click(target.querySelector(".widget_id_2"));
 
             assert.verifySteps(["GED", "AAB", "MCM"]);
-
-            parent.destroy();
         });
 
         QUnit.module('WidgetAdapterMixin and ComponentWrapper');
 
         QUnit.test("widget with sub component", async function (assert) {
-            assert.expect(1);
-
-            class MyComponent extends Component {}
-            MyComponent.template = xml`<div>Component</div>`;
-            const MyWidget = WidgetAdapter.extend({
-                start() {
-                    const component = new ComponentWrapper(this, MyComponent, {});
-                    return component.mount(this.el);
-                }
-            });
-
-            const target = testUtils.prepareTarget();
-            const widget = new MyWidget();
-            await widget.appendTo(target);
-
-            assert.strictEqual(widget.el.innerHTML, '<div>Component</div>');
-
-            widget.destroy();
-        });
-
-        QUnit.test("sub component hooks are correctly called", async function (assert) {
-            assert.expect(14);
+            assert.expect(2);
 
             let component;
+            let wrapper;
             class MyComponent extends Component {
-                constructor(parent) {
-                    super(parent);
-                    assert.step("init");
-                }
-                async willStart() {
-                    assert.step("willStart");
-                }
-                mounted() {
-                    assert.step("mounted");
-                }
-                willUnmount() {
-                    assert.step("willUnmount");
-                }
-                __destroy() {
-                    super.__destroy();
-                    assert.step("__destroy");
+                setup() {
+                    component = this;
                 }
             }
             MyComponent.template = xml`<div>Component</div>`;
             const MyWidget = WidgetAdapter.extend({
                 start() {
-                    component = new ComponentWrapper(this, MyComponent, {});
-                    return component.mount(this.el);
-                }
+                    wrapper = new ComponentWrapper(this, MyComponent, {});
+                    return wrapper.mount(this.el);
+                },
             });
 
             const target = testUtils.prepareTarget();
             const widget = new MyWidget();
             await widget.appendTo(target);
 
-            assert.verifySteps(['init', 'willStart', 'mounted']);
-            assert.ok(component.__owl__.status === ISMOUNTED);
+            assert.strictEqual(widget.el.innerHTML, "<div>Component</div>");
+            assert.strictEqual(wrapper.componentRef.comp, component);
+
+            widget.destroy();
+        });
+
+        QUnit.test("sub component hooks are correctly called", async function (assert) {
+            assert.expect(13);
+
+            class MyComponent extends Component {
+                setup() {
+                    assert.step("setup");
+                    onWillStart(() => {
+                        assert.step("willStart");
+                    });
+                    onMounted(() => {
+                        assert.step("mounted");
+                    });
+                    onWillUnmount(() => {
+                        assert.step("willUnmount");
+                    });
+                    onWillDestroy(() => {
+                        assert.step("willDestroy");
+                    });
+                }
+            }
+            MyComponent.template = xml`<div>Component</div>`;
+            const MyWidget = WidgetAdapter.extend({
+                start() {
+                    const component = new ComponentWrapper(this, MyComponent, {});
+                    return component.mount(this.el);
+                },
+            });
+
+            const target = testUtils.prepareTarget();
+            const widget = new MyWidget();
+            await widget.appendTo(target);
+
+            assert.verifySteps(["setup", "willStart", "mounted"]);
+            assert.strictEqual(widget.el.innerHTML, "<div>Component</div>");
 
             widget.$el.detach();
             widget.on_detach_callback();
 
-            assert.verifySteps(['willUnmount']);
-            assert.ok(component.__owl__.status !== ISMOUNTED);
+            assert.verifySteps(["willUnmount"]);
 
             widget.$el.appendTo(target);
             widget.on_attach_callback();
 
-            assert.verifySteps(['mounted']);
-            assert.ok(component.__owl__.status === ISMOUNTED);
+            assert.verifySteps(["mounted"]);
+            assert.strictEqual(widget.el.innerHTML, "<div>Component</div>");
 
             widget.destroy();
 
-            assert.verifySteps(['willUnmount', '__destroy']);
+            assert.verifySteps(["willUnmount", "willDestroy"]);
         });
 
-        QUnit.test("isMounted with several sub components", async function (assert) {
-            assert.expect(9);
+        QUnit.test("lifecycle with several sub components", async function (assert) {
+            assert.expect(21);
 
-            let c1;
-            let c2;
-            class MyComponent extends Component {}
+            class MyComponent extends Component {
+                setup() {
+                    useLogLifeCycle(assert.step.bind(assert), this.props.id);
+                }
+            }
             MyComponent.template = xml`<div>Component <t t-esc="props.id"/></div>`;
             const MyWidget = WidgetAdapter.extend({
                 start() {
-                    c1 = new ComponentWrapper(this, MyComponent, {id: 1});
-                    c2 = new ComponentWrapper(this, MyComponent, {id: 2});
+                    const c1 = new ComponentWrapper(this, MyComponent, {id: 1});
+                    const c2 = new ComponentWrapper(this, MyComponent, {id: 2});
                     return Promise.all([c1.mount(this.el), c2.mount(this.el)]);
                 }
             });
@@ -929,39 +907,54 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             await widget.appendTo(target);
 
             assert.strictEqual(widget.el.innerHTML, '<div>Component 1</div><div>Component 2</div>');
-            assert.ok(c1.__owl__.status === ISMOUNTED);
-            assert.ok(c2.__owl__.status === ISMOUNTED);
+            assert.verifySteps([
+                "onWillStart MyComponent 1",
+                "onWillStart MyComponent 2",
+                "onWillRender MyComponent 1",
+                "onRendered MyComponent 1",
+                "onWillRender MyComponent 2",
+                "onRendered MyComponent 2",
+                "onMounted MyComponent 1",
+                "onMounted MyComponent 2"
+            ]);
 
             widget.$el.detach();
             widget.on_detach_callback();
-
-            assert.ok(c1.__owl__.status !== ISMOUNTED);
-            assert.ok(c2.__owl__.status !== ISMOUNTED);
+            assert.verifySteps([
+                "onWillUnmount MyComponent 1",
+                "onWillUnmount MyComponent 2"
+            ]);
 
             widget.$el.appendTo(target);
             widget.on_attach_callback();
-
-            assert.ok(c1.__owl__.status === ISMOUNTED);
-            assert.ok(c2.__owl__.status === ISMOUNTED);
+            assert.verifySteps([
+                "onMounted MyComponent 1",
+                "onMounted MyComponent 2"
+            ]);
 
             widget.destroy();
-
-            assert.ok(c1.__owl__.status === ISDESTROYED);
-            assert.ok(c2.__owl__.status === ISDESTROYED);
+            assert.verifySteps([
+                "onWillUnmount MyComponent 1",
+                "onWillDestroy MyComponent 1",
+                "onWillUnmount MyComponent 2",
+                "onWillDestroy MyComponent 2"
+            ]);
         });
 
-        QUnit.test("isMounted with several levels of sub components", async function (assert) {
-            assert.expect(5);
+        QUnit.test("lifecycle with several levels of sub components", async function (assert) {
+            assert.expect(21);
 
-            let child;
             class MyChildComponent extends Component {
-                constructor() {
-                    super(...arguments);
-                    child = this;
+                setup() {
+                    useLogLifeCycle(assert.step.bind(assert));
                 }
             }
             MyChildComponent.template = xml`<div>child</div>`;
-            class MyComponent extends Component {}
+            class MyComponent extends Component {
+                setup() {
+                    useLogLifeCycle(assert.step.bind(assert));
+                }
+            }
             MyComponent.template = xml`<div><MyChildComponent/></div>`;
             MyComponent.components = { MyChildComponent };
             const MyWidget = WidgetAdapter.extend({
@@ -976,21 +969,303 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             await widget.appendTo(target);
 
             assert.strictEqual(widget.el.innerHTML, '<div><div>child</div></div>');
-            assert.ok(child.__owl__.status === ISMOUNTED);
+            assert.verifySteps([
+                "onWillStart MyComponent",
+                "onWillRender MyComponent",
+                "onWillStart MyChildComponent",
+                "onRendered MyComponent",
+                "onWillRender MyChildComponent",
+                "onRendered MyChildComponent",
+                "onMounted MyChildComponent",
+                "onMounted MyComponent"
+            ]);
 
             widget.$el.detach();
             widget.on_detach_callback();
-
-            assert.ok(child.__owl__.status !== ISMOUNTED);
+            assert.verifySteps([
+                "onWillUnmount MyComponent",
+                "onWillUnmount MyChildComponent"
+            ]);
 
             widget.$el.appendTo(target);
             widget.on_attach_callback();
-
-            assert.ok(child.__owl__.status === ISMOUNTED);
+            assert.verifySteps([
+                "onMounted MyChildComponent",
+                "onMounted MyComponent"
+            ]);
 
             widget.destroy();
+            assert.verifySteps([
+                "onWillUnmount MyComponent",
+                "onWillUnmount MyChildComponent",
+                "onWillDestroy MyChildComponent",
+                "onWillDestroy MyComponent"
+            ]);
+        });
 
-            assert.ok(child.__owl__.status === ISDESTROYED);
+        QUnit.test("lifecycle mount in fragment", async function (assert) {
+            assert.expect(17);
+
+            class MyChildComponent extends Component {
+                setup() {
+                    useLogLifeCycle(assert.step.bind(assert));
+                }
+            }
+            MyChildComponent.template = xml`<div>child</div>`;
+            class MyComponent extends Component {
+                setup() {
+                    useLogLifeCycle(assert.step.bind(assert));
+                }
+            }
+            MyComponent.template = xml`<div><MyChildComponent/></div>`;
+            MyComponent.components = { MyChildComponent };
+            const MyWidget = WidgetAdapter.extend({
+                start() {
+                    let component = new ComponentWrapper(this, MyComponent, {});
+                    return component.mount(this.el);
+                }
+            });
+
+            const target = testUtils.prepareTarget();
+            const widget = new MyWidget();
+            const fragment = document.createElement("div");
+            await widget.appendTo(fragment);
+
+            assert.strictEqual(widget.el.innerHTML, '<div><div>child</div></div>');
+            assert.verifySteps([
+                "onWillStart MyComponent",
+                "onWillRender MyComponent",
+                "onWillStart MyChildComponent",
+                "onRendered MyComponent",
+                "onWillRender MyChildComponent",
+                "onRendered MyChildComponent",
+            ]);
+
+            widget.$el.appendTo(target);
+            widget.on_attach_callback();
+            assert.verifySteps([
+                "onMounted MyChildComponent",
+                "onMounted MyComponent"
+            ]);
+
+            widget.on_attach_callback();
+            assert.verifySteps([]);
+
+            widget.destroy();
+            assert.verifySteps([
+                "onWillUnmount MyComponent",
+                "onWillUnmount MyChildComponent",
+                "onWillDestroy MyChildComponent",
+                "onWillDestroy MyComponent"
+            ]);
+        });
+
+        QUnit.test("lifecycle mount/unmount", async function (assert) {
+            assert.expect(37);
+
+            class MyChildComponent extends Component {
+                setup() {
+                    useLogLifeCycle(assert.step.bind(assert));
+                }
+            }
+            MyChildComponent.template = xml`<div>child</div>`;
+            class MyComponent extends Component {
+                setup() {
+                    useLogLifeCycle(assert.step.bind(assert));
+                }
+            }
+            MyComponent.template = xml`<div><MyChildComponent/></div>`;
+            MyComponent.components = { MyChildComponent };
+
+            const target = testUtils.prepareTarget();
+            const widget = new ComponentWrapper(null, MyComponent, {});
+            await widget.mount(target);
+
+            assert.strictEqual(target.innerHTML, "<div><div>child</div></div>");
+            assert.verifySteps([
+                "onWillStart MyComponent",
+                "onWillRender MyComponent",
+                "onWillStart MyChildComponent",
+                "onRendered MyComponent",
+                "onWillRender MyChildComponent",
+                "onRendered MyChildComponent",
+                "onMounted MyChildComponent",
+                "onMounted MyComponent"
+            ]);
+
+            widget.unmount();
+            assert.strictEqual(target.innerHTML, "");
+            assert.verifySteps([
+                "onWillUnmount MyComponent",
+                "onWillUnmount MyChildComponent",
+            ]);
+
+            await widget.mount();
+
+            assert.verifySteps([
+                "onWillUpdateProps MyComponent",
+                "onWillRender MyComponent",
+                "onWillUpdateProps MyChildComponent",
+                "onRendered MyComponent",
+                "onWillRender MyChildComponent",
+                "onRendered MyChildComponent",
+                "onMounted MyChildComponent",
+                "onMounted MyComponent"
+            ]);
+            assert.strictEqual(target.innerHTML, "<div><div>child</div></div>");
+
+            widget.unmount();
+            assert.strictEqual(target.innerHTML, "");
+            assert.verifySteps([
+                "onWillUnmount MyComponent",
+                "onWillUnmount MyChildComponent",
+            ]);
+
+            await widget.mount();
+
+            assert.verifySteps([
+                "onWillUpdateProps MyComponent",
+                "onWillRender MyComponent",
+                "onWillUpdateProps MyChildComponent",
+                "onRendered MyComponent",
+                "onWillRender MyChildComponent",
+                "onRendered MyChildComponent",
+                "onMounted MyChildComponent",
+                "onMounted MyComponent"
+            ]);
+        });
+
+        QUnit.test("lifecycle mount/unmount/update", async function (assert) {
+            assert.expect(24);
+
+            class MyChildComponent extends Component {
+                setup() {
+                    useLogLifeCycle(assert.step.bind(assert));
+                }
+            }
+            MyChildComponent.template = xml`<div>child <t t-esc="props.text" /></div>`;
+            class MyComponent extends Component {
+                setup() {
+                    useLogLifeCycle(assert.step.bind(assert));
+                }
+            }
+            MyComponent.template = xml`<div><MyChildComponent t-props="props" /></div>`;
+            MyComponent.components = { MyChildComponent };
+
+            const target = testUtils.prepareTarget();
+            const widget = new ComponentWrapper(null, MyComponent, {
+                text: "takeNoMess"
+            });
+            await widget.mount(target);
+
+            assert.strictEqual(target.innerHTML, "<div><div>child takeNoMess</div></div>");
+            assert.verifySteps([
+                "onWillStart MyComponent",
+                "onWillRender MyComponent",
+                "onWillStart MyChildComponent",
+                "onRendered MyComponent",
+                "onWillRender MyChildComponent",
+                "onRendered MyChildComponent",
+                "onMounted MyChildComponent",
+                "onMounted MyComponent"
+            ]);
+
+            widget.unmount();
+            assert.strictEqual(target.innerHTML, "");
+            assert.verifySteps([
+                "onWillUnmount MyComponent",
+                "onWillUnmount MyChildComponent",
+            ]);
+
+            await widget.update({
+                text: "leveeBreaks"
+            });
+
+            assert.verifySteps([
+                "onWillUpdateProps MyComponent",
+                "onWillRender MyComponent",
+                "onWillUpdateProps MyChildComponent",
+                "onRendered MyComponent",
+                "onWillRender MyChildComponent",
+                "onRendered MyChildComponent",
+                "onMounted MyChildComponent",
+                "onMounted MyComponent"
+            ]);
+            assert.strictEqual(target.innerHTML, "<div><div>child leveeBreaks</div></div>");
+        });
+
+        QUnit.test("lifecycle mount/unmount/update/render", async function (assert) {
+            assert.expect(36);
+
+            class MyChildComponent extends Component {
+                setup() {
+                    useLogLifeCycle(assert.step.bind(assert));
+                }
+            }
+            MyChildComponent.template = xml`<div>child <t t-esc="props.text" /></div>`;
+            class MyComponent extends Component {
+                setup() {
+                    useLogLifeCycle(assert.step.bind(assert));
+                }
+            }
+            MyComponent.template = xml`<div><MyChildComponent t-props="props" /></div>`;
+            MyComponent.components = { MyChildComponent };
+
+            const target = testUtils.prepareTarget();
+            const widget = new ComponentWrapper(null, MyComponent, {
+                text: "takeNoMess"
+            });
+            await widget.mount(target);
+
+            assert.strictEqual(target.innerHTML, "<div><div>child takeNoMess</div></div>");
+            assert.verifySteps([
+                "onWillStart MyComponent",
+                "onWillRender MyComponent",
+                "onWillStart MyChildComponent",
+                "onRendered MyComponent",
+                "onWillRender MyChildComponent",
+                "onRendered MyChildComponent",
+                "onMounted MyChildComponent",
+                "onMounted MyComponent"
+            ]);
+
+            widget.unmount();
+            assert.strictEqual(target.innerHTML, "");
+            assert.verifySteps([
+                "onWillUnmount MyComponent",
+                "onWillUnmount MyChildComponent",
+            ]);
+
+            await widget.update({
+                text: "leveeBreaks"
+            });
+
+            assert.verifySteps([
+                "onWillUpdateProps MyComponent",
+                "onWillRender MyComponent",
+                "onWillUpdateProps MyChildComponent",
+                "onRendered MyComponent",
+                "onWillRender MyChildComponent",
+                "onRendered MyChildComponent",
+                "onMounted MyChildComponent",
+                "onMounted MyComponent"
+            ]);
+            assert.strictEqual(target.innerHTML, "<div><div>child leveeBreaks</div></div>");
+
+            await widget.render();
+            assert.verifySteps([
+                "onWillUpdateProps MyComponent",
+                "onWillRender MyComponent",
+                "onWillUpdateProps MyChildComponent",
+                "onRendered MyComponent",
+                "onWillRender MyChildComponent",
+                "onRendered MyChildComponent",
+                "onWillPatch MyComponent",
+                "onWillPatch MyChildComponent",
+                "onPatched MyChildComponent",
+                "onPatched MyComponent"
+            ]);
+            assert.strictEqual(target.innerHTML, "<div><div>child leveeBreaks</div></div>");
         });
 
         QUnit.test("sub component can be updated (in DOM)", async function (assert) {
@@ -1022,9 +1297,13 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
         });
 
         QUnit.test("sub component can be updated (not in DOM)", async function (assert) {
-            assert.expect(4);
+            assert.expect(18);
 
-            class MyComponent extends Component {}
+            class MyComponent extends Component {
+                setup() {
+                    useLogLifeCycle((log) => assert.step(log));
+                }
+            }
             MyComponent.template = xml`<div>Component <t t-esc="props.val"/></div>`;
             const MyWidget = WidgetAdapter.extend({
                 start() {
@@ -1039,23 +1318,43 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             const target = testUtils.prepareTarget();
             const widget = new MyWidget();
             await widget.appendTo(target);
+            assert.verifySteps([
+                "onWillStart MyComponent",
+                "onWillRender MyComponent",
+                "onRendered MyComponent",
+                "onMounted MyComponent"
+            ]);
 
-            assert.strictEqual(widget.el.innerHTML, '<div>Component 1</div>');
+            assert.strictEqual(target.innerHTML, '<div><div>Component 1</div></div>');
 
             widget.$el.detach();
             widget.on_detach_callback();
 
-            assert.ok(widget.component.__owl__.status !== ISMOUNTED);
+            assert.verifySteps([
+                "onWillUnmount MyComponent"
+            ]);
 
             await widget.update();
+            assert.verifySteps([
+                "onWillUpdateProps MyComponent",
+                "onWillRender MyComponent",
+                "onRendered MyComponent"
+            ]);
 
             widget.$el.appendTo(target);
             widget.on_attach_callback();
+            assert.verifySteps([
+                "onMounted MyComponent"
+            ]);
 
-            assert.ok(widget.component.__owl__.status === ISMOUNTED);
-            assert.strictEqual(widget.el.innerHTML, '<div>Component 2</div>');
+            assert.strictEqual(target.innerHTML, '<div><div>Component 2</div></div>');
 
             widget.destroy();
+
+            assert.verifySteps([
+                "onWillUnmount MyComponent",
+                "onWillDestroy MyComponent"
+            ]);
         });
 
         QUnit.test("update a destroyed sub component", async function (assert) {
@@ -1218,8 +1517,7 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
 
 
             const target = testUtils.prepareTarget();
-            const parent = new Parent();
-            await parent.mount(target);
+            const parent = await mount(Parent, target);
 
             assert.strictEqual(parent.el.innerHTML, '<div><span>Component</span></div>');
 
@@ -1235,8 +1533,6 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
                 '[root] both-event 3',
                 '[widget] both-event 4',
             ]);
-
-            parent.destroy();
         });
 
         QUnit.test("Legacy over Owl over legacy", async function (assert) {
diff --git a/addons/web/static/tests/legacy/views/abstract_controller_tests.js b/addons/web/static/tests/legacy/views/abstract_controller_tests.js
index 7daa6d40a89..a75b03f3c52 100644
--- a/addons/web/static/tests/legacy/views/abstract_controller_tests.js
+++ b/addons/web/static/tests/legacy/views/abstract_controller_tests.js
@@ -8,8 +8,9 @@ var BasicView = require("web.BasicView");
 var BasicRenderer = require("web.BasicRenderer");
 const AbstractRenderer = require('web.AbstractRendererOwl');
 const RendererWrapper = require('web.RendererWrapper');
+const { nextTick } = require('web.test_utils');
 
-const { xml } = owl;
+const { xml, onMounted, onWillUnmount, onWillDestroy } = owl;
 
 function getHtmlRenderer(html) {
     return BasicRenderer.extend({
@@ -101,9 +102,10 @@ QUnit.module("Views", {
         assert.expect(2);
 
         class Renderer extends AbstractRenderer {
-            __destroy() {
-                assert.step("destroy");
-                super.__destroy();
+            setup() {
+                onWillDestroy(() => {
+                    assert.step("destroy");
+                });
             }
         }
         Renderer.template = xml`<div>Test</div>`;
@@ -142,11 +144,13 @@ QUnit.module("Views", {
         assert.expect(3);
 
         class Renderer extends AbstractRenderer {
-            mounted() {
-                assert.step("mounted");
-            }
-            willUnmount() {
-                assert.step("unmounted");
+            setup() {
+                onMounted(() => {
+                    assert.step("mounted");
+                });
+                onWillUnmount(() => {
+                    assert.step("unmounted");
+                });
             }
         }
         Renderer.template = xml`<div>Test</div>`;
diff --git a/addons/web/static/tests/legacy/views/calendar_tests.js b/addons/web/static/tests/legacy/views/calendar_tests.js
index 6fd3466febc..09610bff8bb 100644
--- a/addons/web/static/tests/legacy/views/calendar_tests.js
+++ b/addons/web/static/tests/legacy/views/calendar_tests.js
@@ -15,7 +15,7 @@ var testUtils = require('web.test_utils');
 var session = require('web.session');
 const Widget = require('web.Widget');
 
-const { patchWithCleanup } = require("@web/../tests/helpers/utils");
+const { getFixture, patchWithCleanup } = require("@web/../tests/helpers/utils");
 
 const { createWebClient, doAction } = require('@web/../tests/webclient/helpers');
 let serverData;
@@ -2905,10 +2905,11 @@ QUnit.module('Views', {
             },
         };
 
+        const target = getFixture();
         const webClient = await createWebClient({ serverData });
 
         await doAction(webClient, 1);
-        assert.containsNone($(webClient.el).find('.o_control_panel .o_search_options span.fa.fa-bars'),
+        assert.containsNone(target, ".o_control_panel .o_search_options .o_group_by_menu",
             "the control panel has no groupBy menu");
     });
 
diff --git a/addons/web/static/tests/legacy/views/form_tests.js b/addons/web/static/tests/legacy/views/form_tests.js
index 95bb3643c7c..813ae361f93 100644
--- a/addons/web/static/tests/legacy/views/form_tests.js
+++ b/addons/web/static/tests/legacy/views/form_tests.js
@@ -8,6 +8,7 @@ var concurrency = require('web.concurrency');
 var core = require('web.core');
 var fieldRegistry = require('web.field_registry');
 const fieldRegistryOwl = require('web.field_registry_owl');
+const { FieldBoolean } = require("web.basic_fields_owl");
 const FormRenderer = require('web.FormRenderer');
 var FormView = require('web.FormView');
 var mixins = require('web.mixins');
@@ -22,7 +23,6 @@ var Widget = require('web.Widget');
 var _t = core._t;
 var createView = testUtils.createView;
 
-const { registerCleanup } = require("@web/../tests/helpers/cleanup");
 const { getFixture, legacyExtraNextTick, patchWithCleanup } = require("@web/../tests/helpers/utils");
 const { createWebClient, doAction } = require('@web/../tests/webclient/helpers');
 const { makeTestEnv } = require("@web/../tests/helpers/mock_env");
@@ -31,13 +31,16 @@ const { mapLegacyEnvToWowlEnv } = require("@web/legacy/utils");
 const { registry } = require("@web/core/registry");
 const { scrollerService } = require("@web/core/scroller_service");
 
-const { Component, xml } = owl;
+const { Component, onMounted, onWillUnmount, xml } = owl;
 
 let serverData;
+let target;
 QUnit.module('Views', {
     beforeEach: async function () {
         registry.category("services").add("scroller", scrollerService);
-        
+
+        target = getFixture();
+
         this.data = {
             partner: {
                 fields: {
@@ -561,7 +564,7 @@ QUnit.module('Views', {
             }
         };
 
-        const webClient = await createWebClient({serverData, mockRPC});
+        const webClient = await createWebClient({ serverData, mockRPC});
         await doAction(webClient, {
             res_id: 1,
             type: 'ir.actions.act_window',
@@ -571,7 +574,7 @@ QUnit.module('Views', {
             'views': [[false, 'form']],
         });
 
-        await testUtils.dom.click(webClient.el.querySelector('.o_field_widget[name="product_id"]'));
+        await testUtils.dom.click(target.querySelector('.o_field_widget[name="product_id"]'));
     });
 
     QUnit.test('invisible fields are properly hidden', async function (assert) {
@@ -1216,21 +1219,21 @@ QUnit.module('Views', {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 1);
 
-        await testUtils.dom.click(webClient.el.querySelector('.o_list_button_add'));
+        await testUtils.dom.click(target.querySelector('.o_list_button_add'));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_form_view');
+        assert.containsOnce(target, '.o_form_view');
 
         // click on second page tab
-        await testUtils.dom.click($(webClient.el).find('.o_notebook .nav-link:eq(1)'));
+        await testUtils.dom.click($(target).find('.o_notebook .nav-link:eq(1)'));
 
         await testUtils.dom.click('.o_control_panel .o_form_button_cancel');
         await legacyExtraNextTick();
-        assert.containsNone(webClient, '.o_form_view');
+        assert.containsNone(target, '.o_form_view');
 
-        await testUtils.dom.click(webClient.el.querySelector('.o_list_button_add'));
+        await testUtils.dom.click(target.querySelector('.o_list_button_add'));
         await legacyExtraNextTick();
         // check notebook active page is 0th page
-        assert.hasClass($(webClient.el).find('.o_notebook .nav-link:eq(0)'), 'active');
+        assert.hasClass($(target).find('.o_notebook .nav-link:eq(0)'), 'active');
 
     });
 
@@ -7296,19 +7299,19 @@ QUnit.module('Views', {
             multi_lang: true,
         });
         await doAction(webClient, 1);
-        $(webClient.el).find('input[name="foo"]').val("test").trigger("input");
+        $(target).find('input[name="foo"]').val("test").trigger("input");
 
-        await testUtils.dom.click(webClient.el.querySelector('.o_form_button_save'));
+        await testUtils.dom.click(target.querySelector('.o_form_button_save'));
         await legacyExtraNextTick();
 
-        assert.containsOnce(webClient, '.o_form_view .alert > div',
+        assert.containsOnce(target, '.o_form_view .alert > div',
             "should have a translation alert");
 
         await doAction(webClient, 2);
 
         await testUtils.dom.click($('.o_control_panel .breadcrumb a:first'));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_form_view .alert > div',
+        assert.containsOnce(target, '.o_form_view .alert > div',
             "should have a translation alert");
     });
 
@@ -9300,8 +9303,8 @@ QUnit.module('Views', {
         await legacyExtraNextTick();
         await testUtils.dom.click('.o_control_panel .o_form_button_cancel');
         await legacyExtraNextTick();
-        assert.containsNone(webClient, '.o_form_view');
-        assert.containsOnce(webClient, '.o_kanban_view');
+        assert.containsNone(target, '.o_form_view');
+        assert.containsOnce(target, '.o_kanban_view');
     });
 
     QUnit.test("one2many create record dialog shouldn't have a 'remove' button", async function (assert) {
@@ -10161,14 +10164,14 @@ QUnit.module('Views', {
     QUnit.test('do not call mounted twice on children', async function (assert) {
         assert.expect(3);
 
-        class CustomFieldComponent extends fieldRegistryOwl.get('boolean') {
-            mounted() {
-                super.mounted(...arguments);
-                assert.step('mounted');
-            }
-            willUnmount() {
-                super.willUnmount(...arguments);
-                assert.step('willUnmount');
+        class CustomFieldComponent extends FieldBoolean {
+            setup() {
+                onMounted(() => {
+                    assert.step('mounted');
+                });
+                onWillUnmount(() => {
+                    assert.step('willUnmount');
+                });
             }
         }
         fieldRegistryOwl.add('custom', CustomFieldComponent);
@@ -10226,28 +10229,28 @@ QUnit.module('Views', {
 
         await doAction(webClient, 1);
 
-        await testUtils.dom.click($(webClient.el).find('.o_data_row:first'));
+        await testUtils.dom.click($(target).find('.o_data_row:first'));
         await legacyExtraNextTick();
-        assert.strictEqual($(webClient.el).find('.breadcrumb').text(), 'Partnerfirst record');
+        assert.strictEqual($(target).find('.breadcrumb').text(), 'Partnerfirst record');
 
-        await testUtils.dom.click($(webClient.el).find('.o_form_button_edit'));
-        await testUtils.fields.editInput($(webClient.el).find('.o_field_widget[name="name"]'), 'aaa');
+        await testUtils.dom.click($(target).find('.o_form_button_edit'));
+        await testUtils.fields.editInput($(target).find('.o_field_widget[name="name"]'), 'aaa');
 
-        await testUtils.controlPanel.pagerNext(webClient);
+        await testUtils.controlPanel.pagerNext(target);
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_form_editable');
-        assert.strictEqual($(webClient.el).find('.breadcrumb').text(), 'Partnersecond record');
-        assert.strictEqual($(webClient.el).find('.o_field_widget[name="name"]').val(), 'name');
+        assert.containsOnce(target, '.o_form_editable');
+        assert.strictEqual($(target).find('.breadcrumb').text(), 'Partnersecond record');
+        assert.strictEqual($(target).find('.o_field_widget[name="name"]').val(), 'name');
 
-        await testUtils.dom.click($(webClient.el).find('.o_form_button_cancel'));
-        assert.strictEqual($(webClient.el).find('.breadcrumb').text(), 'Partnersecond record');
-        assert.strictEqual($(webClient.el).find('.o_field_widget[name="name"]').text(), 'name');
+        await testUtils.dom.click($(target).find('.o_form_button_cancel'));
+        assert.strictEqual($(target).find('.breadcrumb').text(), 'Partnersecond record');
+        assert.strictEqual($(target).find('.o_field_widget[name="name"]').text(), 'name');
 
-        await testUtils.controlPanel.pagerPrevious(webClient);
+        await testUtils.controlPanel.pagerPrevious(target);
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_form_readonly');
-        assert.strictEqual($(webClient.el).find('.breadcrumb').text(), 'Partnerfirst record');
-        assert.strictEqual($(webClient.el).find('.o_field_widget[name="name"]').text(), 'aaa');
+        assert.containsOnce(target, '.o_form_readonly');
+        assert.strictEqual($(target).find('.breadcrumb').text(), 'Partnerfirst record');
+        assert.strictEqual($(target).find('.o_field_widget[name="name"]').text(), 'aaa');
     });
 
     QUnit.test('Auto save: save when breadcrumb clicked', async function (assert) {
@@ -10290,24 +10293,24 @@ QUnit.module('Views', {
 
         await doAction(webClient, 1);
 
-        await testUtils.dom.click($(webClient.el).find('.o_data_row:first'));
+        await testUtils.dom.click($(target).find('.o_data_row:first'));
         await legacyExtraNextTick();
-        assert.strictEqual($(webClient.el).find('.breadcrumb').text(), 'Partnerfirst record');
+        assert.strictEqual($(target).find('.breadcrumb').text(), 'Partnerfirst record');
 
-        await testUtils.dom.click($(webClient.el).find('.o_form_button_edit'));
-        await testUtils.fields.editInput($(webClient.el).find('.o_field_widget[name="name"]'), 'aaa');
+        await testUtils.dom.click($(target).find('.o_form_button_edit'));
+        await testUtils.fields.editInput($(target).find('.o_field_widget[name="name"]'), 'aaa');
 
-        await testUtils.dom.click($(webClient.el).find('.breadcrumb-item.o_back_button'));
+        await testUtils.dom.click($(target).find('.breadcrumb-item.o_back_button'));
         await legacyExtraNextTick();
 
-        assert.strictEqual($(webClient.el).find('.breadcrumb').text(), 'Partner');
-        assert.strictEqual($(webClient.el).find('.o_field_cell[name="name"]:first').text(), 'aaa');
+        assert.strictEqual($(target).find('.breadcrumb').text(), 'Partner');
+        assert.strictEqual($(target).find('.o_field_cell[name="name"]:first').text(), 'aaa');
 
-        await testUtils.dom.click($(webClient.el).find('.o_data_row:first'));
+        await testUtils.dom.click($(target).find('.o_data_row:first'));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_form_readonly');
-        assert.strictEqual($(webClient.el).find('.breadcrumb').text(), 'Partnerfirst record');
-        assert.strictEqual($(webClient.el).find('.o_field_widget[name="name"]').text(), 'aaa');
+        assert.containsOnce(target, '.o_form_readonly');
+        assert.strictEqual($(target).find('.breadcrumb').text(), 'Partnerfirst record');
+        assert.strictEqual($(target).find('.o_field_widget[name="name"]').text(), 'aaa');
     });
 
     QUnit.test('Auto save: save when action changed', async function (assert) {
@@ -10368,24 +10371,24 @@ QUnit.module('Views', {
 
         await doAction(webClient, 1);
 
-        await testUtils.dom.click($(webClient.el).find('.o_data_row:first'));
+        await testUtils.dom.click($(target).find('.o_data_row:first'));
         await legacyExtraNextTick();
-        assert.strictEqual($(webClient.el).find('.breadcrumb').text(), 'Partnerfirst record');
+        assert.strictEqual($(target).find('.breadcrumb').text(), 'Partnerfirst record');
 
-        await testUtils.dom.click($(webClient.el).find('.o_form_button_edit'));
-        await testUtils.fields.editInput($(webClient.el).find('.o_field_widget[name="name"]'), 'aaa');
+        await testUtils.dom.click($(target).find('.o_form_button_edit'));
+        await testUtils.fields.editInput($(target).find('.o_field_widget[name="name"]'), 'aaa');
 
         await doAction(webClient, 2, { clearBreadcrumbs: true });
 
-        assert.strictEqual($(webClient.el).find('.breadcrumb').text(), 'Other action');
+        assert.strictEqual($(target).find('.breadcrumb').text(), 'Other action');
 
         await doAction(webClient, 1, { clearBreadcrumbs: true });
 
-        await testUtils.dom.click($(webClient.el).find('.o_data_row:first'));
+        await testUtils.dom.click($(target).find('.o_data_row:first'));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_form_readonly');
-        assert.strictEqual($(webClient.el).find('.breadcrumb').text(), 'Partnerfirst record');
-        assert.strictEqual($(webClient.el).find('.o_field_widget[name="name"]').text(), 'aaa');
+        assert.containsOnce(target, '.o_form_readonly');
+        assert.strictEqual($(target).find('.breadcrumb').text(), 'Partnerfirst record');
+        assert.strictEqual($(target).find('.o_field_widget[name="name"]').text(), 'aaa');
     });
 
     QUnit.test('Auto save: save on closing tab/browser', async function (assert) {
@@ -10525,14 +10528,14 @@ QUnit.module('Views', {
         await doAction(webClient, 1);
 
         // Click on a row to open a record
-        await testUtils.dom.click($(webClient.el).find('.o_data_row:first'));
+        await testUtils.dom.click($(target).find('.o_data_row:first'));
         await legacyExtraNextTick();
-        assert.strictEqual($(webClient.el).find('.breadcrumb').text(), 'Partnerfirst record');
+        assert.strictEqual($(target).find('.breadcrumb').text(), 'Partnerfirst record');
 
         // Return in the list view to detach the form view
-        await testUtils.dom.click($(webClient.el).find('.o_back_button'));
+        await testUtils.dom.click($(target).find('.o_back_button'));
         await legacyExtraNextTick();
-        assert.strictEqual($(webClient.el).find('.breadcrumb').text(), 'Partner');
+        assert.strictEqual($(target).find('.breadcrumb').text(), 'Partner');
 
         // Simulate tab/browser close in the list
         window.dispatchEvent(new Event("beforeunload"));
diff --git a/addons/web/static/tests/legacy/views/graph_tests.js b/addons/web/static/tests/legacy/views/graph_tests.js
index fbb0862578f..11b05a6357b 100644
--- a/addons/web/static/tests/legacy/views/graph_tests.js
+++ b/addons/web/static/tests/legacy/views/graph_tests.js
@@ -6,7 +6,7 @@ const GraphView = require('web.GraphView');
 const testUtils = require('web.test_utils');
 const { sortBy } = require('web.utils');
 const { browser } = require('@web/core/browser/browser');
-const { legacyExtraNextTick, patchWithCleanup } = require("@web/../tests/helpers/utils");
+const { getFixture, legacyExtraNextTick, patchWithCleanup } = require("@web/../tests/helpers/utils");
 const { createWebClient, doAction } = require('@web/../tests/webclient/helpers');
 const legacyViewRegistry = require("web.view_registry");
 const { registry } = require("@web/core/registry");
@@ -20,6 +20,8 @@ const viewRegistry = registry.category("views");
 const { INTERVAL_OPTIONS, PERIOD_OPTIONS, COMPARISON_OPTIONS } = searchUtils;
 const INTERVAL_OPTION_IDS = Object.keys(INTERVAL_OPTIONS);
 
+const { markup } = owl;
+
 const yearIds = [];
 const otherIds = [];
 for (const id of Object.keys(PERIOD_OPTIONS)) {
@@ -355,7 +357,7 @@ QUnit.module('Views', {
                 </graph>`,
             viewOptions: {
                 action: {
-                    help: '<p class="abc">This helper should not be displayed in graph views</p>'
+                    help: markup('<p class="abc">This helper should not be displayed in graph views</p>'),
                 }
             },
         });
@@ -381,7 +383,7 @@ QUnit.module('Views', {
                 </graph>`,
             viewOptions: {
                 action: {
-                    help: '<p class="abc">This helper should not be displayed in graph views</p>'
+                    help: markup('<p class="abc">This helper should not be displayed in graph views</p>'),
                 }
             },
         });
@@ -509,7 +511,7 @@ QUnit.module('Views', {
                 </graph>`,
             viewOptions: {
                 action: {
-                    help: '<p class="abc">This helper should not be displayed in graph views</p>'
+                    help: markup('<p class="abc">This helper should not be displayed in graph views</p>'),
                 }
             },
         });
@@ -911,6 +913,8 @@ QUnit.module('Views', {
         legacyViewRegistry.add("graph", GraphView); // We want to test the legacy view that was not added to viewRegistry!
         // (see end of registerView in legacy_views.js)
 
+        const target = getFixture();
+
         const webClient = await createWebClient({ serverData });
 
         await doAction(webClient, {
@@ -924,16 +928,16 @@ QUnit.module('Views', {
             },
         });
 
-        assert.containsOnce(webClient, '.o_control_panel .o_graph_measures_list',
+        assert.containsOnce(target, '.o_control_panel .o_graph_measures_list',
             "Measures dropdown is present at init"
         );
 
-        await cpHelpers.switchView(webClient, 'kanban');
+        await cpHelpers.switchView(target, 'kanban');
         await legacyExtraNextTick();
-        await cpHelpers.switchView(webClient, 'graph');
+        await cpHelpers.switchView(target, 'graph');
         await legacyExtraNextTick();
 
-        assert.containsOnce(webClient, '.o_control_panel .o_graph_measures_list',
+        assert.containsOnce(target, '.o_control_panel .o_graph_measures_list',
             "Measures dropdown is present after reload"
         );
     });
@@ -1604,7 +1608,7 @@ QUnit.module('Views', {
             domain: [['id', '<', 0]],
             viewOptions: {
                 action: {
-                    help: '<p class="abc">click to add a foo</p>'
+                    help: "click to add a foo",
                 }
             },
         });
@@ -1638,7 +1642,7 @@ QUnit.module('Views', {
                 </graph>`,
             viewOptions: {
                 action: {
-                    help: '<p class="abc">click to add a foo</p>'
+                    help: "click to add a foo",
                 }
             },
         })
diff --git a/addons/web/static/tests/legacy/views/kanban_tests.js b/addons/web/static/tests/legacy/views/kanban_tests.js
index 9c637ee51de..91f6a9c1b28 100644
--- a/addons/web/static/tests/legacy/views/kanban_tests.js
+++ b/addons/web/static/tests/legacy/views/kanban_tests.js
@@ -13,14 +13,14 @@ var testUtils = require('web.test_utils');
 var Widget = require('web.Widget');
 var widgetRegistry = require('web.widget_registry');
 const widgetRegistryOwl = require('web.widgetRegistry');
-const {Markup} = require('web.utils');
 
 var makeTestPromise = testUtils.makeTestPromise;
 var nextTick = testUtils.nextTick;
- const cpHelpers = require('@web/../tests/search/helpers');
+const cpHelpers = require('@web/../tests/search/helpers');
 var createView = testUtils.createView;
 
- const { Component, xml } = owl;
+const { Markup } = require("web.utils");
+const { Component, markup, xml } = owl;
 
 QUnit.module('Views', {
     before: function () {
@@ -4441,7 +4441,7 @@ QUnit.module('Views', {
                     </kanban>`,
             viewOptions: {
                 action: {
-                    help: '<p class="hello">click to add a partner</p>'
+                    help: "click to add a partner",
                 }
             },
             groupBy: ['bar'],
@@ -4492,7 +4492,7 @@ QUnit.module('Views', {
                 '</t></templates></kanban>',
             viewOptions: {
                 action: {
-                    help: '<p class="hello">click to add a partner</p>'
+                    help: markup('<p class="hello">click to add a partner</p>'),
                 }
             },
         });
@@ -5476,7 +5476,7 @@ QUnit.module('Views', {
                 </t></templates></kanban>`,
             viewOptions: {
                 action: {
-                    help: '<p class="hello">click to add a partner</p>'
+                    help: "click to add a partner",
                 }
             },
         });
diff --git a/addons/web/static/tests/legacy/views/list_tests.js b/addons/web/static/tests/legacy/views/list_tests.js
index 1dfb107d356..b7ccff6f298 100644
--- a/addons/web/static/tests/legacy/views/list_tests.js
+++ b/addons/web/static/tests/legacy/views/list_tests.js
@@ -22,15 +22,16 @@ const Widget = require('web.Widget');
 const ControlPanel = require('web.ControlPanel');
 const ListController = require('web.ListController');
 const cpHelpers = require('@web/../tests/search/helpers');
-const { click, legacyExtraNextTick } = require("@web/../tests/helpers/utils");
+var createView = testUtils.createView;
+
+const { getFixture, click, legacyExtraNextTick } = require("@web/../tests/helpers/utils");
 const { createWebClient, doAction, loadState } = require('@web/../tests/webclient/helpers');
 
-const { Component, xml } = owl;
-const createView = testUtils.createView;
-const _t = core._t;
+const { _t } = core;
+const { Component, markup, onMounted, onWillUnmount, xml } = owl;
 
 let serverData;
-
+let target;
 QUnit.module('Views', {
     beforeEach: function () {
         this.data = {
@@ -134,6 +135,7 @@ QUnit.module('Views', {
         };
 
         serverData = { models: this.data };
+        target = getFixture();
     }
 }, function () {
 
@@ -2002,17 +2004,17 @@ QUnit.module('Views', {
         const webClient = await createWebClient({ serverData });
 
         await doAction(webClient, 11);
-        await testUtils.dom.click($(webClient.el).find('.o_list_button_add'));
+        await testUtils.dom.click($(target).find('.o_list_button_add'));
 
-        assert.isNotVisible($(webClient.el).find('.o_list_button_add'),
+        assert.isNotVisible($(target).find('.o_list_button_add'),
             "create button should be invisible");
-        assert.isVisible($(webClient.el).find('.o_list_button_save'), "save button should be visible");
+        assert.isVisible($(target).find('.o_list_button_save'), "save button should be visible");
 
-        await testUtils.dom.click($(webClient.el).find('.dropdown-toggle:contains("Group By")'));
-        await testUtils.dom.click($(webClient.el).find('.o_group_by_menu .o_menu_item:contains("candle")'));
+        await testUtils.dom.click($(target).find('.dropdown-toggle:contains("Group By")'));
+        await testUtils.dom.click($(target).find('.o_group_by_menu .o_menu_item:contains("candle")'));
 
-        assert.isNotVisible($(webClient.el).find('.o_list_button_add'), "create button should be invisible");
-        assert.isNotVisible($(webClient.el).find('.o_list_button_save'),
+        assert.isNotVisible($(target).find('.o_list_button_add'), "create button should be invisible");
+        assert.isNotVisible($(target).find('.o_list_button_save'),
             "save button should be invisible after applying groupby");
     });
 
@@ -2822,7 +2824,7 @@ QUnit.module('Views', {
                 </tree>`,
             viewOptions: {
                 action: {
-                    help: '<p class="hello">click to add a foo</p>'
+                    help: 'click to add a foo',
                 }
             },
         });
@@ -4012,14 +4014,14 @@ QUnit.module('Views', {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 11);
 
-        assert.containsNone(webClient, '.o_cp_action_menus', 'sidebar should be invisible');
-        assert.containsN(webClient, 'tbody td.o_list_record_selector', 4, "should have 4 records");
+        assert.containsNone(target, '.o_cp_action_menus', 'sidebar should be invisible');
+        assert.containsN(target, 'tbody td.o_list_record_selector', 4, "should have 4 records");
 
-        await click(webClient.el.querySelector('tbody td.o_list_record_selector input'));
-        assert.containsOnce(webClient, '.o_cp_action_menus', 'sidebar should be visible');
+        await click(target.querySelector('tbody td.o_list_record_selector input'));
+        assert.containsOnce(target, '.o_cp_action_menus', 'sidebar should be visible');
 
-        await click(webClient.el.querySelector('.o_cp_action_menus .dropdown-toggle'));
-        const archiveItem = [...webClient.el.querySelectorAll('.o_cp_action_menus .dropdown-menu li > a')]
+        await click(target.querySelector('.o_cp_action_menus .dropdown-toggle'));
+        const archiveItem = [...target.querySelectorAll('.o_cp_action_menus .dropdown-menu li > a')]
             .filter((elem) => elem.textContent === 'Archive');
         await click(archiveItem[0]);
         assert.strictEqual(document.querySelectorAll('.modal').length, 1,
@@ -4535,7 +4537,7 @@ QUnit.module('Views', {
             arch: '<tree><field name="foo"/></tree>',
             viewOptions: {
                 action: {
-                    help: '<p class="hello">click to add a record</p>'
+                    help: 'click to add a record',
                 }
             },
         });
@@ -4565,7 +4567,7 @@ QUnit.module('Views', {
             arch: '<tree><field name="foo"/></tree>',
             viewOptions: {
                 action: {
-                    help: '<p class="hello">click to add a partner</p>'
+                    help: markup('<p class="hello">click to add a partner</p>'),
                 }
             },
         });
@@ -4629,7 +4631,7 @@ QUnit.module('Views', {
             domain: [['id', '<', 0]], // such that no record matches the domain
             viewOptions: {
                 action: {
-                    help: '<p class="hello">click to add a partner</p>'
+                    help: markup('<p class="hello">click to add a partner</p>'),
                 }
             },
         });
@@ -4862,7 +4864,7 @@ QUnit.module('Views', {
             View: ListView,
             viewOptions: {
                 action: {
-                    help: '<p class="hello">click to add a partner</p>'
+                    help: "click to add a partner",
                 },
                 hasActionMenus: true,
             },
@@ -4904,7 +4906,7 @@ QUnit.module('Views', {
             View: ListView,
             viewOptions: {
                 action: {
-                    help: '<p class="hello">click to add a partner</p>'
+                    help: "click to add a partner",
                 },
             },
         });
@@ -4949,7 +4951,7 @@ QUnit.module('Views', {
             View: ListView,
             viewOptions: {
                 action: {
-                    help: '<p class="hello">click to add a partner</p>'
+                    help: "click to add a partner",
                 },
                 hasActionMenus: true,
             },
@@ -4988,31 +4990,6 @@ QUnit.module('Views', {
         list.destroy();
     });
 
-    QUnit.test('Do not display nocontent when it is an empty html tag', async function (assert) {
-        assert.expect(2);
-
-        this.data.foo.records = [];
-
-        var list = await createView({
-            View: ListView,
-            model: 'foo',
-            data: this.data,
-            arch: '<tree><field name="foo"/></tree>',
-            viewOptions: {
-                action: {
-                    help: '<p class="hello"></p>'
-                }
-            },
-        });
-
-        assert.containsNone(list, '.o_view_nocontent',
-            "should not display the no content helper");
-
-        assert.containsOnce(list, 'table', "should have a table in the dom");
-
-        list.destroy();
-    });
-
     QUnit.test('groupby node with a button', async function (assert) {
         assert.expect(14);
 
@@ -5322,7 +5299,7 @@ QUnit.module('Views', {
                 '</tree>',
             viewOptions: {
                 action: {
-                    help: '<p class="hello">click to add a partner</p>'
+                    help: "click to add a partner",
                 }
             },
             mockRPC: function (route, args) {
@@ -10057,25 +10034,25 @@ QUnit.module('Views', {
             }
         };
 
-        const webClient = await createWebClient({serverData, mockRPC});
+        const webClient = await createWebClient({ serverData, mockRPC});
         await doAction(webClient, 11);
 
-        assert.containsOnce(webClient, '.o_list_view');
-        assert.strictEqual($(webClient.el).find('.o_pager_counter').text().trim(), '1-3 / 4');
-        assert.containsN(webClient, '.o_group_header', 3); // page 1
+        assert.containsOnce(target, '.o_list_view');
+        assert.strictEqual($(target).find('.o_pager_counter').text().trim(), '1-3 / 4');
+        assert.containsN(target, '.o_group_header', 3); // page 1
 
-        await testUtils.dom.click($(webClient.el).find('.o_pager_next')); // switch to page 2
+        await testUtils.dom.click($(target).find('.o_pager_next')); // switch to page 2
         await legacyExtraNextTick();
 
-        assert.strictEqual($(webClient.el).find('.o_pager_counter').text().trim(), '4-4 / 4');
-        assert.containsN(webClient, '.o_group_header', 1); // page 2
+        assert.strictEqual($(target).find('.o_pager_counter').text().trim(), '4-4 / 4');
+        assert.containsN(target, '.o_group_header', 1); // page 2
 
         // toggle a filter -> there should be only one group left (on page 1)
-        await cpHelpers.toggleFilterMenu(webClient);
-        await cpHelpers.toggleMenuItem(webClient, 0);
+        await cpHelpers.toggleFilterMenu(target);
+        await cpHelpers.toggleMenuItem(target, 0);
 
-        assert.strictEqual($(webClient.el).find('.o_pager_counter').text().trim(), '1-1 / 1');
-        assert.containsN(webClient, '.o_group_header', 1); // page 1
+        assert.strictEqual($(target).find('.o_pager_counter').text().trim(), '1-1 / 1');
+        assert.containsN(target, '.o_group_header', 1); // page 1
 
         assert.verifySteps([
             '[], undefined',
@@ -11722,18 +11699,18 @@ QUnit.module('Views', {
 
         await doAction(webClient, 2);
 
-        assert.containsOnce(webClient, '.o_list_view',
+        assert.containsOnce(target, '.o_list_view',
             "should have rendered a list view");
 
-        assert.containsN(webClient, 'th', 3, "should display 3 th (selector + 2 fields)");
+        assert.containsN(target, 'th', 3, "should display 3 th (selector + 2 fields)");
 
         // enable optional field
-        await testUtils.dom.click($(webClient.el).find('table .o_optional_columns_dropdown_toggle'));
-        assert.notOk($(webClient.el).find('div.o_optional_columns div.dropdown-item [name="m2o"]').is(":checked"));
-        assert.ok($(webClient.el).find('div.o_optional_columns div.dropdown-item [name="o2m"]').is(":checked"));
-        await testUtils.dom.click($(webClient.el).find('div.o_optional_columns div.dropdown-item:first'));
-        assert.containsN(webClient, 'th', 4, "should display 4 th (selector + 3 fields)");
-        assert.ok($(webClient.el).find('th:contains(M2O field)').is(':visible'),
+        await testUtils.dom.click($(target).find('table .o_optional_columns_dropdown_toggle'));
+        assert.notOk($(target).find('div.o_optional_columns div.dropdown-item [name="m2o"]').is(":checked"));
+        assert.ok($(target).find('div.o_optional_columns div.dropdown-item [name="o2m"]').is(":checked"));
+        await testUtils.dom.click($(target).find('div.o_optional_columns div.dropdown-item:first'));
+        assert.containsN(target, 'th', 4, "should display 4 th (selector + 3 fields)");
+        assert.ok($(target).find('th:contains(M2O field)').is(':visible'),
             "should have a visible m2o field"); //m2o field
 
         // switch to kanban view
@@ -11742,9 +11719,9 @@ QUnit.module('Views', {
             view_type: 'kanban',
         });
 
-        assert.containsNone(webClient, '.o_list_view',
+        assert.containsNone(target, '.o_list_view',
             "should not display the list view anymore");
-        assert.containsOnce(webClient, '.o_kanban_view',
+        assert.containsOnce(target, '.o_kanban_view',
             "should have switched to the kanban view");
 
         // switch back to list view
@@ -11753,46 +11730,46 @@ QUnit.module('Views', {
             view_type: 'list',
         });
 
-        assert.containsNone(webClient, '.o_kanban_view',
+        assert.containsNone(target, '.o_kanban_view',
             "should not display the kanban view anymoe");
-        assert.containsOnce(webClient, '.o_list_view',
+        assert.containsOnce(target, '.o_list_view',
             "should display the list view");
 
-        assert.containsN(webClient, 'th', 4, "should display 4 th");
-        assert.ok($(webClient.el).find('th:contains(M2O field)').is(':visible'),
+        assert.containsN(target, 'th', 4, "should display 4 th");
+        assert.ok($(target).find('th:contains(M2O field)').is(':visible'),
             "should have a visible m2o field"); //m2o field
-        assert.ok($(webClient.el).find('th:contains(O2M field)').is(':visible'),
+        assert.ok($(target).find('th:contains(O2M field)').is(':visible'),
             "should have a visible o2m field"); //m2o field
 
         // disable optional field
-        await testUtils.dom.click($(webClient.el).find('table .o_optional_columns_dropdown_toggle'));
-        assert.ok($(webClient.el).find('div.o_optional_columns div.dropdown-item [name="m2o"]').is(":checked"));
-        assert.ok($(webClient.el).find('div.o_optional_columns div.dropdown-item [name="o2m"]').is(":checked"));
-        await testUtils.dom.click($(webClient.el).find('div.o_optional_columns div.dropdown-item:last input'));
-        assert.ok($(webClient.el).find('th:contains(M2O field)').is(':visible'),
+        await testUtils.dom.click($(target).find('table .o_optional_columns_dropdown_toggle'));
+        assert.ok($(target).find('div.o_optional_columns div.dropdown-item [name="m2o"]').is(":checked"));
+        assert.ok($(target).find('div.o_optional_columns div.dropdown-item [name="o2m"]').is(":checked"));
+        await testUtils.dom.click($(target).find('div.o_optional_columns div.dropdown-item:last input'));
+        assert.ok($(target).find('th:contains(M2O field)').is(':visible'),
             "should have a visible m2o field"); //m2o field
-        assert.notOk($(webClient.el).find('th:contains(O2M field)').is(':visible'),
+        assert.notOk($(target).find('th:contains(O2M field)').is(':visible'),
             "should have a visible o2m field"); //m2o field
-        assert.containsN(webClient, 'th', 3, "should display 3 th");
+        assert.containsN(target, 'th', 3, "should display 3 th");
 
         await doAction(webClient, 1);
 
-        assert.containsNone(webClient, '.o_list_view',
+        assert.containsNone(target, '.o_list_view',
             "should not display the list view anymore");
-        assert.containsOnce(webClient, '.o_kanban_view',
+        assert.containsOnce(target, '.o_kanban_view',
             "should have switched to the kanban view");
 
         await doAction(webClient, 2);
 
-        assert.containsNone(webClient, '.o_kanban_view',
+        assert.containsNone(target, '.o_kanban_view',
             "should not havethe kanban view anymoe");
-        assert.containsOnce(webClient, '.o_list_view',
+        assert.containsOnce(target, '.o_list_view',
             "should display the list view");
 
-        assert.containsN(webClient, 'th', 3, "should display 3 th");
-        assert.ok($(webClient.el).find('th:contains(M2O field)').is(':visible'),
+        assert.containsN(target, 'th', 3, "should display 3 th");
+        assert.ok($(target).find('th:contains(M2O field)').is(':visible'),
             "should have a visible m2o field"); //m2o field
-        assert.notOk($(webClient.el).find('th:contains(O2M field)').is(':visible'),
+        assert.notOk($(target).find('th:contains(O2M field)').is(':visible'),
             "should have a visible o2m field"); //m2o field
     });
 
@@ -12151,11 +12128,9 @@ QUnit.module('Views', {
         let mountedCalls = 0;
         let willUnmountCalls = 0;
         class MyField extends AbstractFieldOwl {
-            mounted() {
-                mountedCalls++;
-            }
-            willUnmount() {
-                willUnmountCalls++;
+            setup() {
+                onMounted(() => mountedCalls++);
+                onWillUnmount(() => willUnmountCalls++);
             }
         }
         MyField.template = xml`<span>Hello World</span>`;
@@ -12303,10 +12278,12 @@ QUnit.module('Views', {
         let mountedCounterCall = 0;
 
         patch(ControlPanel.prototype, 'test.ControlPanel', {
-            mounted() {
-                mountedCounterCall = mountedCounterCall + 1;
-                assert.step(`mountedCounterCall-${mountedCounterCall}`);
-                this._super(...arguments);
+            setup() {
+                this._super();
+                onMounted(() => {
+                    mountedCounterCall = mountedCounterCall + 1;
+                    assert.step(`mountedCounterCall-${mountedCounterCall}`);
+                });
             },
         });
 
@@ -12369,18 +12346,18 @@ QUnit.module('Views', {
 
         await doAction(webClient, 1);
 
-        assert.strictEqual($(webClient.el).find('.o_field_cell[name="foo"]').text(), "yopblipgnapblip");
-        assert.containsN(webClient, '.o_data_row', 4);
+        assert.strictEqual($(target).find('.o_field_cell[name="foo"]').text(), "yopblipgnapblip");
+        assert.containsN(target, '.o_data_row', 4);
 
-        await testUtils.dom.click($(webClient.el).find('.o_list_button_add'));
-        await testUtils.fields.editInput($(webClient.el).find('.o_field_widget[name="foo"]'), "test");
+        await testUtils.dom.click($(target).find('.o_list_button_add'));
+        await testUtils.fields.editInput($(target).find('.o_field_widget[name="foo"]'), "test");
 
         // change action and come back
         await doAction(webClient, 2);
         await doAction(webClient, 1, { clearBreadcrumbs: true });
 
-        assert.strictEqual($(webClient.el).find('.o_field_cell[name="foo"]').text(), "yopblipgnapbliptest");
-        assert.containsN(webClient, '.o_data_row', 5);
+        assert.strictEqual($(target).find('.o_field_cell[name="foo"]').text(), "yopblipgnapbliptest");
+        assert.containsN(target, '.o_data_row', 5);
     });
 
     QUnit.test("Auto save: modify a record and leave action", async function (assert) {
@@ -12413,16 +12390,16 @@ QUnit.module('Views', {
 
         await doAction(webClient, 1);
 
-        assert.strictEqual($(webClient.el).find('.o_field_cell[name="foo"]').text(), "yopblipgnapblip");
+        assert.strictEqual($(target).find('.o_field_cell[name="foo"]').text(), "yopblipgnapblip");
 
-        await testUtils.dom.click($(webClient.el).find('.o_field_cell[name="foo"]:first'));
-        await testUtils.fields.editInput($(webClient.el).find('.o_field_widget[name="foo"]'), "test");
+        await testUtils.dom.click($(target).find('.o_field_cell[name="foo"]:first'));
+        await testUtils.fields.editInput($(target).find('.o_field_widget[name="foo"]'), "test");
 
         // change action and come back
         await doAction(webClient, 2);
         await doAction(webClient, 1, { clearBreadcrumbs: true });
 
-        assert.strictEqual($(webClient.el).find('.o_field_cell[name="foo"]').text(), "testblipgnapblip");
+        assert.strictEqual($(target).find('.o_field_cell[name="foo"]').text(), "testblipgnapblip");
     });
 
     QUnit.test("Auto save: modify a record and leave action (reject)", async function (assert) {
@@ -12455,16 +12432,16 @@ QUnit.module('Views', {
 
         await doAction(webClient, 1);
 
-        assert.strictEqual($(webClient.el).find('.o_field_cell[name="foo"]').text(), "yopblipgnapblip");
+        assert.strictEqual($(target).find('.o_field_cell[name="foo"]').text(), "yopblipgnapblip");
 
-        await testUtils.dom.click($(webClient.el).find('.o_field_cell[name="foo"]:first'));
-        await testUtils.fields.editInput($(webClient.el).find('.o_field_widget[name="foo"]'), "");
+        await testUtils.dom.click($(target).find('.o_field_cell[name="foo"]:first'));
+        await testUtils.fields.editInput($(target).find('.o_field_widget[name="foo"]'), "");
 
         await assert.rejects(doAction(webClient, 2));
 
-        assert.strictEqual($(webClient.el).find('.o_field_cell[name="foo"]').text(), "blipgnapblip");
-        assert.hasClass($(webClient.el).find('.o_field_widget[name="foo"]:first'), 'o_field_invalid');
-        assert.containsN(webClient, '.o_data_row', 4);
+        assert.strictEqual($(target).find('.o_field_cell[name="foo"]').text(), "blipgnapblip");
+        assert.hasClass($(target).find('.o_field_widget[name="foo"]:first'), 'o_field_invalid');
+        assert.containsN(target, '.o_data_row', 4);
     });
 
     QUnit.test("Auto save: add a record and change page", async function (assert) {
diff --git a/addons/web/static/tests/legacy/views/pivot_tests.js b/addons/web/static/tests/legacy/views/pivot_tests.js
index 36ecf32b5b8..c6bfcbe2877 100644
--- a/addons/web/static/tests/legacy/views/pivot_tests.js
+++ b/addons/web/static/tests/legacy/views/pivot_tests.js
@@ -7,7 +7,7 @@ const PivotController = require("web.PivotController");
 var testUtils = require('web.test_utils');
 var testUtilsDom = require('web.test_utils_dom');
 const { browser } = require('@web/core/browser/browser');
-const { patchWithCleanup } = require('@web/../tests/helpers/utils');
+const { getFixture, patchWithCleanup } = require('@web/../tests/helpers/utils');
 const { registry } = require('@web/core/registry');
 const legacyViewRegistry = require('web.view_registry');
 
@@ -18,6 +18,8 @@ const cpHelpers = require('@web/../tests/search/helpers');
 var createView = testUtils.createView;
 var patchDate = testUtils.mock.patchDate;
 
+const { markup } = owl;
+
 /**
  * Helper function that returns, given a pivot instance, the values of the
  * table, separated by ','.
@@ -32,6 +34,7 @@ var getCurrentValues = function (pivot) {
 
 
 let serverData;
+let target;
 
 QUnit.module('Views', {
     beforeEach: function () {
@@ -122,6 +125,7 @@ QUnit.module('Views', {
         };
 
         serverData = { models: this.data };
+        target = getFixture();
         patchWithCleanup(browser, { setTimeout: (fn) => fn() });
     },
 }, function () {
@@ -850,7 +854,7 @@ QUnit.module('Views', {
         await testUtils.dom.click(pivot.$('.o_pivot_field_menu .o_add_custom_group_menu .dropdown-menu button'));
         // click on closed header to open groupby selection dropdown
         await testUtils.dom.click(pivot.el.querySelector('tbody tr:last-child .o_pivot_header_cell_closed'));
-        assert.containsN(pivot, '.o_pivot_field_menu .o_menu_item', 4,
+        assert.containsN(pivot, '.o_pivot_field_menu .o_menu_item', 3,
             "should have 4 dropdown items pivot groupby dropdown");
 
         // applying custom groupby in pivot groupby dropdown will not update search dropdown
@@ -902,7 +906,7 @@ QUnit.module('Views', {
             "pivot groupby menu should have two separators"
         );
         assert.hasClass(
-            items[items.length - 1].nextSibling,
+            items[items.length - 1].nextElementSibling,
             "dropdown-divider",
             "pivot groupby menu separator is placed after all menu items"
         );
@@ -1920,7 +1924,7 @@ QUnit.module('Views', {
         });
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map(e => e.innerText),
+            [...target.querySelectorAll("tbody th")].map(e => e.innerText),
             [
                 "Total",
                     "xphone",
@@ -1929,23 +1933,23 @@ QUnit.module('Views', {
         );
 
         // flip axis
-        await testUtils.dom.click(webClient.el.querySelector('.o_cp_buttons .o_pivot_flip_button'));
+        await testUtils.dom.click(target.querySelector('.o_cp_buttons .o_pivot_flip_button'));
         await testUtils.nextTick();
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map(e => e.innerText),
+            [...target.querySelectorAll("tbody th")].map(e => e.innerText),
             [
                 "Total",
             ]
         );
 
         // select filter "Bayou" in control panel
-        await cpHelpers.toggleFilterMenu(webClient);
-        await cpHelpers.toggleMenuItem(webClient, "Bayou");
+        await cpHelpers.toggleFilterMenu(target);
+        await cpHelpers.toggleMenuItem(target, "Bayou");
         await testUtils.nextTick();
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map(e => e.innerText),
+            [...target.querySelectorAll("tbody th")].map(e => e.innerText),
             [
                 "Total",
                     "xphone",
@@ -1954,17 +1958,15 @@ QUnit.module('Views', {
         );
 
         // close row header "Total"
-        await testUtils.dom.click(webClient.el.querySelector('tbody .o_pivot_header_cell_opened'));
+        await testUtils.dom.click(target.querySelector('tbody .o_pivot_header_cell_opened'));
         await testUtils.nextTick();
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map(e => e.innerText),
+            [...target.querySelectorAll("tbody th")].map(e => e.innerText),
             [
                 "Total"
             ]
         );
-
-        webClient.destroy();
     });
 
     QUnit.test('correctly group data after flip (2)', async function (assert) {
@@ -1987,7 +1989,7 @@ QUnit.module('Views', {
         });
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map(e => e.innerText),
+            [...target.querySelectorAll("tbody th")].map(e => e.innerText),
             [
                 "Total",
                     "xphone",
@@ -1996,11 +1998,11 @@ QUnit.module('Views', {
         );
 
         // select filter "Bayou" in control panel
-        await cpHelpers.toggleFilterMenu(webClient);
-        await cpHelpers.toggleMenuItem(webClient, "Bayou");
+        await cpHelpers.toggleFilterMenu(target);
+        await cpHelpers.toggleMenuItem(target, "Bayou");
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map(e => e.innerText),
+            [...target.querySelectorAll("tbody th")].map(e => e.innerText),
             [
                 "Total",
                     "xphone",
@@ -2009,23 +2011,23 @@ QUnit.module('Views', {
         );
 
         // flip axis
-        await testUtils.dom.click(webClient.el.querySelector('.o_cp_buttons .o_pivot_flip_button'));
+        await testUtils.dom.click(target.querySelector('.o_cp_buttons .o_pivot_flip_button'));
         await testUtils.nextTick();
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map(e => e.innerText),
+            [...target.querySelectorAll("tbody th")].map(e => e.innerText),
             [
                 "Total"
             ]
         );
 
         // unselect filter "Bayou" in control panel
-        await cpHelpers.toggleFilterMenu(webClient);
-        await cpHelpers.toggleMenuItem(webClient, "Bayou");
+        await cpHelpers.toggleFilterMenu(target);
+        await cpHelpers.toggleMenuItem(target, "Bayou");
         await testUtils.nextTick();
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map(e => e.innerText),
+            [...target.querySelectorAll("tbody th")].map(e => e.innerText),
             [
                 "Total",
                     "xphone",
@@ -2034,17 +2036,15 @@ QUnit.module('Views', {
         );
 
         // close row header "Total"
-        await testUtils.dom.click(webClient.el.querySelector('tbody .o_pivot_header_cell_opened'));
+        await testUtils.dom.click(target.querySelector('tbody .o_pivot_header_cell_opened'));
         await testUtils.nextTick();
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map(e => e.innerText),
+            [...target.querySelectorAll("tbody th")].map(e => e.innerText),
             [
                 "Total"
             ]
         );
-
-        webClient.destroy();
     });
 
     QUnit.test('correctly group data after flip (3))', async function (assert) {
@@ -3569,7 +3569,7 @@ QUnit.module('Views', {
             domain: [['id', '<', 0]],
             viewOptions: {
                 action: {
-                    help: '<p class="abc">click to add a foo</p>'
+                    help: markup('<p class="abc">click to add a foo</p>'),
                 }
             },
         });
@@ -3600,7 +3600,7 @@ QUnit.module('Views', {
             domain: [['id', '<', 0]],
             viewOptions: {
                 action: {
-                    help: '<p class="abc">click to add a foo</p>'
+                    help: markup('<p class="abc">click to add a foo</p>'),
                 }
             },
         });
@@ -3633,7 +3633,7 @@ QUnit.module('Views', {
                 </pivot>`,
             viewOptions: {
                 action: {
-                    help: '<p class="abc">click to add a foo</p>'
+                    help: markup('<p class="abc">click to add a foo</p>'),
                 }
             },
         });
diff --git a/addons/web/static/tests/legacy/views/qweb_tests.js b/addons/web/static/tests/legacy/views/qweb_tests.js
index ce8da82a36d..2c5a6195541 100644
--- a/addons/web/static/tests/legacy/views/qweb_tests.js
+++ b/addons/web/static/tests/legacy/views/qweb_tests.js
@@ -3,6 +3,7 @@ odoo.define('web.qweb_view_tests', function (require) {
 
 const utils = require('web.test_utils');
 const { createWebClient, doAction } = require('@web/../tests/webclient/helpers');
+const { getFixture } = require("@web/../tests/helpers/utils");
 
 QUnit.module("Views", {
 
@@ -46,7 +47,8 @@ QUnit.module("Views", {
             }
         };
 
-        const webClient = await createWebClient({serverData, mockRPC});
+        const target = getFixture();
+        const webClient = await createWebClient({ serverData, mockRPC});
 
         let resolved = false;
         const doActionProm = doAction(webClient, {
@@ -59,7 +61,7 @@ QUnit.module("Views", {
         await doActionProm;
         assert.ok(resolved, "Action is resolved asynchronously");
 
-        const content = webClient.el.querySelector('.o_content');
+        const content = target.querySelector('.o_content');
         assert.ok(/^\s*foo/.test(content.textContent));
         await utils.dom.click(content.querySelector('[type=toggle]'));
         assert.equal(content.querySelector('div#sub').textContent, 'ok', 'should have unfolded the sub-item');
diff --git a/addons/web/static/tests/legacy/views/search_panel_tests.js b/addons/web/static/tests/legacy/views/search_panel_tests.js
index 0651674572d..653f44074c9 100644
--- a/addons/web/static/tests/legacy/views/search_panel_tests.js
+++ b/addons/web/static/tests/legacy/views/search_panel_tests.js
@@ -11,7 +11,7 @@ const createView = testUtils.createView;
 
 const { makeFakeUserService } = require("@web/../tests/helpers/mock_services");
 const { createWebClient, doAction } = require('@web/../tests/webclient/helpers');
-const { legacyExtraNextTick } = require("@web/../tests/helpers/utils");
+const { getFixture, legacyExtraNextTick } = require("@web/../tests/helpers/utils");
 const { registry } = require("@web/core/registry");
 const { PivotView } = require("@web/views/pivot/pivot_view");
 
@@ -47,6 +47,7 @@ function toggleFold(widget, text) {
 }
 
 let serverData;
+let target;
 
 QUnit.module('Views', {
     beforeEach: function () {
@@ -139,6 +140,8 @@ QUnit.module('Views', {
             models: this.data,
             views: this.archs,
         };
+
+        target = getFixture();
     },
 }, function () {
 
@@ -2349,23 +2352,23 @@ QUnit.module('Views', {
 
         await doAction(webClient, 1);
 
-        assert.containsOnce(webClient, '.o_content.o_controller_with_searchpanel .o_kanban_view');
-        assert.containsOnce(webClient, '.o_content.o_controller_with_searchpanel .o_search_panel');
+        assert.containsOnce(target, '.o_content.o_controller_with_searchpanel .o_kanban_view');
+        assert.containsOnce(target, '.o_content.o_controller_with_searchpanel .o_search_panel');
 
-        await switchView(webClient, 'pivot');
+        await switchView(target, 'pivot');
         await testUtils.nextTick();
-        assert.containsOnce(webClient, '.o_content .o_pivot');
-        assert.containsNone(webClient, '.o_content .o_search_panel');
+        assert.containsOnce(target, '.o_content .o_pivot');
+        assert.containsNone(target, '.o_content .o_search_panel');
 
-        await switchView(webClient, 'list');
+        await switchView(target, 'list');
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_content.o_controller_with_searchpanel .o_list_view');
-        assert.containsOnce(webClient, '.o_content.o_controller_with_searchpanel .o_search_panel');
+        assert.containsOnce(target, '.o_content.o_controller_with_searchpanel .o_list_view');
+        assert.containsOnce(target, '.o_content.o_controller_with_searchpanel .o_search_panel');
 
-        await testUtils.dom.click($(webClient.el).find('.o_data_row .o_data_cell:first'));
+        await testUtils.dom.click($(target).find('.o_data_row .o_data_cell:first'));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_content .o_form_view');
-        assert.containsNone(webClient, '.o_content .o_search_panel');
+        assert.containsOnce(target, '.o_content .o_form_view');
+        assert.containsNone(target, '.o_content .o_search_panel');
     });
 
     QUnit.skip('search panel with view_types attribute', async function (assert) {
@@ -2410,30 +2413,30 @@ QUnit.module('Views', {
 
         await doAction(webClient, 1);
 
-        assert.hasClass($(webClient.el).find('.o_search_panel_category_value:first header'), 'active');
-        assert.containsN(webClient, '.o_kanban_record:not(.o_kanban_ghost)', 4);
+        assert.hasClass($(target).find('.o_search_panel_category_value:first header'), 'active');
+        assert.containsN(target, '.o_kanban_record:not(.o_kanban_ghost)', 4);
 
         // select 'asustek' company
-        await testUtils.dom.click($(webClient.el).find('.o_search_panel_category_value:nth(1) header'));
+        await testUtils.dom.click($(target).find('.o_search_panel_category_value:nth(1) header'));
         await legacyExtraNextTick();
-        assert.hasClass($(webClient.el).find('.o_search_panel_category_value:nth(1) header'), 'active');
-        assert.containsN(webClient, '.o_kanban_record:not(.o_kanban_ghost)', 2);
+        assert.hasClass($(target).find('.o_search_panel_category_value:nth(1) header'), 'active');
+        assert.containsN(target, '.o_kanban_record:not(.o_kanban_ghost)', 2);
 
-        await switchView(webClient, 'list');
+        await switchView(target, 'list');
         await legacyExtraNextTick();
-        assert.hasClass($(webClient.el).find('.o_search_panel_category_value:nth(1) header'), 'active');
-        assert.containsN(webClient, '.o_data_row', 2);
+        assert.hasClass($(target).find('.o_search_panel_category_value:nth(1) header'), 'active');
+        assert.containsN(target, '.o_data_row', 2);
 
         // select 'agrolait' company
-        await testUtils.dom.click($(webClient.el).find('.o_search_panel_category_value:nth(2) header'));
+        await testUtils.dom.click($(target).find('.o_search_panel_category_value:nth(2) header'));
         await legacyExtraNextTick();
-        assert.hasClass($(webClient.el).find('.o_search_panel_category_value:nth(2) header'), 'active');
-        assert.containsN(webClient, '.o_data_row', 2);
+        assert.hasClass($(target).find('.o_search_panel_category_value:nth(2) header'), 'active');
+        assert.containsN(target, '.o_data_row', 2);
 
-        await switchView(webClient, 'kanban');
+        await switchView(target, 'kanban');
         await legacyExtraNextTick();
-        assert.hasClass($(webClient.el).find('.o_search_panel_category_value:nth(2) header'), 'active');
-        assert.containsN(webClient, '.o_kanban_record:not(.o_kanban_ghost)', 2);
+        assert.hasClass($(target).find('.o_search_panel_category_value:nth(2) header'), 'active');
+        assert.containsN(target, '.o_kanban_record:not(.o_kanban_ghost)', 2);
 
         assert.verifySteps([
             '[]', // initial search_read
@@ -2456,34 +2459,34 @@ QUnit.module('Views', {
         const webClient = await createWebClient({ serverData , mockRPC });
         await doAction(webClient, 1);
 
-        assert.containsNone(webClient, '.o_search_panel_filter_value input:checked');
-        assert.containsN(webClient, '.o_kanban_record:not(.o_kanban_ghost)', 4);
+        assert.containsNone(target, '.o_search_panel_filter_value input:checked');
+        assert.containsN(target, '.o_kanban_record:not(.o_kanban_ghost)', 4);
 
         // select gold filter
-        await testUtils.dom.click($(webClient.el).find('.o_search_panel_filter input[type="checkbox"]:nth(0)'));
+        await testUtils.dom.click($(target).find('.o_search_panel_filter input[type="checkbox"]:nth(0)'));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_search_panel_filter_value input:checked');
-        assert.containsN(webClient, '.o_kanban_record:not(.o_kanban_ghost)', 1);
+        assert.containsOnce(target, '.o_search_panel_filter_value input:checked');
+        assert.containsN(target, '.o_kanban_record:not(.o_kanban_ghost)', 1);
 
-        await switchView(webClient, 'list');
+        await switchView(target, 'list');
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_search_panel_filter_value input:checked');
-        assert.containsN(webClient, '.o_data_row', 1);
+        assert.containsOnce(target, '.o_search_panel_filter_value input:checked');
+        assert.containsN(target, '.o_data_row', 1);
 
         // select silver filter
-        await testUtils.dom.click($(webClient.el).find('.o_search_panel_filter input[type="checkbox"]:nth(1)'));
+        await testUtils.dom.click($(target).find('.o_search_panel_filter input[type="checkbox"]:nth(1)'));
         await legacyExtraNextTick();
-        assert.containsN(webClient, '.o_search_panel_filter_value input:checked', 2);
-        assert.containsN(webClient, '.o_data_row', 4);
+        assert.containsN(target, '.o_search_panel_filter_value input:checked', 2);
+        assert.containsN(target, '.o_data_row', 4);
 
-        await switchView(webClient, 'kanban');
+        await switchView(target, 'kanban');
         await legacyExtraNextTick();
-        assert.containsN(webClient, '.o_search_panel_filter_value input:checked', 2);
-        assert.containsN(webClient, '.o_kanban_record:not(.o_kanban_ghost)', 4);
+        assert.containsN(target, '.o_search_panel_filter_value input:checked', 2);
+        assert.containsN(target, '.o_kanban_record:not(.o_kanban_ghost)', 4);
 
-        await testUtils.dom.click($(webClient.el).find(".o_kanban_record:nth(0)"));
+        await testUtils.dom.click($(target).find(".o_kanban_record:nth(0)"));
         await legacyExtraNextTick();
-        await testUtils.dom.click($(webClient.el).find(".breadcrumb-item:nth(0)"));
+        await testUtils.dom.click($(target).find(".breadcrumb-item:nth(0)"));
         await legacyExtraNextTick();
 
         assert.verifySteps([
@@ -2536,12 +2539,12 @@ QUnit.module('Views', {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 2);
 
-        await testUtils.dom.click($(webClient.el).find('.o_form_view button:contains("multi view")'));
+        await testUtils.dom.click($(target).find('.o_form_view button:contains("multi view")'));
         await legacyExtraNextTick();
 
-        assert.containsOnce(webClient, '.o_kanban_view');
-        assert.containsOnce(webClient, '.o_search_panel');
-        assert.containsOnce(webClient, '.o_search_panel_category_value:first .active');
+        assert.containsOnce(target, '.o_kanban_view');
+        assert.containsOnce(target, '.o_search_panel');
+        assert.containsOnce(target, '.o_search_panel_category_value:first .active');
 
         assert.verifySteps([]); // should not communicate with localStorage
     });
@@ -2553,11 +2556,11 @@ QUnit.module('Views', {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 2);
 
-        await testUtils.dom.click($(webClient.el).find('.o_form_view button:contains("multi view")'));
+        await testUtils.dom.click($(target).find('.o_form_view button:contains("multi view")'));
         await legacyExtraNextTick();
 
-        assert.containsOnce(webClient, '.o_kanban_view');
-        assert.containsNone(webClient, '.o_search_panel');
+        assert.containsOnce(target, '.o_kanban_view');
+        assert.containsNone(target, '.o_search_panel');
     });
 
     QUnit.test('categories and filters are not reloaded when switching between views', async function (assert) {
@@ -2572,9 +2575,9 @@ QUnit.module('Views', {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 1);
 
-        await switchView(webClient, 'list');
+        await switchView(target, 'list');
         await legacyExtraNextTick();
-        await switchView(webClient, 'kanban');
+        await switchView(target, 'kanban');
         await legacyExtraNextTick();
 
         assert.verifySteps([
@@ -2593,32 +2596,35 @@ QUnit.module('Views', {
             serverData.models.category.records.push({id: i, name: "Cat " + i});
         }
 
-        const webClient = await createWebClient({ serverData });
-        webClient.el.querySelector('.o_action_manager').style.maxHeight = "300px";
+        const container = document.createElement("div");
+        container.classList.add("o_web_client");
+        container.style = "max-height: 300px";
+        target.appendChild(container);
+        const webClient = await createWebClient({ target: container, serverData });
 
         await doAction(webClient, 1);
 
         async function scroll(top) {
-            webClient.el.querySelector(".o_search_panel").scrollTop = top;
+            target.querySelector(".o_search_panel").scrollTop = top;
             await testUtils.nextTick();
         }
 
-        assert.containsOnce(webClient, '.o_content .o_kanban_view');
-        assert.strictEqual($(webClient.el).find('.o_search_panel').scrollTop(), 0);
+        assert.containsOnce(target, '.o_content .o_kanban_view');
+        assert.strictEqual($(target).find('.o_search_panel').scrollTop(), 0);
 
         // simulate a scroll in the search panel and switch into list
         await scroll(50);
-        await switchView(webClient, 'list');
+        await switchView(target, 'list');
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_content .o_list_view');
-        assert.strictEqual($(webClient.el).find('.o_search_panel').scrollTop(), 50);
+        assert.containsOnce(target, '.o_content .o_list_view');
+        assert.strictEqual($(target).find('.o_search_panel').scrollTop(), 50);
 
         // simulate another scroll and switch back to kanban
         await scroll(30);
-        await switchView(webClient, 'kanban');
+        await switchView(target, 'kanban');
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_content .o_kanban_view');
-        assert.strictEqual($(webClient.el).find('.o_search_panel').scrollTop(), 30);
+        assert.containsOnce(target, '.o_content .o_kanban_view');
+        assert.strictEqual($(target).find('.o_search_panel').scrollTop(), 30);
         SearchPanel.scrollDebounce = originalDebounce;
     });
 
diff --git a/addons/web/static/tests/legacy/views/state_mapping_tests.js b/addons/web/static/tests/legacy/views/state_mapping_tests.js
index 8e8734e8d22..6bf6a567f9e 100644
--- a/addons/web/static/tests/legacy/views/state_mapping_tests.js
+++ b/addons/web/static/tests/legacy/views/state_mapping_tests.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { legacyExtraNextTick, patchWithCleanup } from "@web/../tests/helpers/utils";
+import { getFixture, legacyExtraNextTick, patchWithCleanup } from "@web/../tests/helpers/utils";
 import {
     getFacetTexts,
     removeFacet,
@@ -28,11 +28,13 @@ import { browser } from "@web/core/browser/browser";
 const { Component, xml } = owl;
 const serviceRegistry = registry.category("services");
 const viewRegistry = registry.category("views");
-const searchModelRegistry = registry.category("search_models");
 
 let serverData;
+let target;
 QUnit.module("Views", (hooks) => {
     hooks.beforeEach(async () => {
+        target = getFixture();
+
         serverData = {
             models: {
                 foo: {
@@ -129,9 +131,9 @@ QUnit.module("Views", (hooks) => {
                 },
             });
 
-            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
+            assert.containsOnce(target, ".o_switch_view.o_toy.active");
             assert.deepEqual(
-                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                getFacetTexts(target).map((s) => s.replace(/\s/, "")),
                 [
                     "FooABC",
                     "TrueDomainorDate Filter: July 2021",
@@ -139,11 +141,11 @@ QUnit.module("Views", (hooks) => {
                 ]
             );
 
-            await toggleMenu(webClient, "Comparison");
-            await toggleMenuItem(webClient, "Date Filter: Previous Period");
+            await toggleMenu(target, "Comparison");
+            await toggleMenuItem(target, "Date Filter: Previous Period");
 
             assert.deepEqual(
-                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                getFacetTexts(target).map((s) => s.replace(/\s/, "")),
                 [
                     "FooABC",
                     "TrueDomainorDate Filter: July 2021",
@@ -152,12 +154,12 @@ QUnit.module("Views", (hooks) => {
                 ]
             );
 
-            await switchView(webClient, "legacy_toy");
+            await switchView(target, "legacy_toy");
             await legacyExtraNextTick();
 
-            assert.containsOnce(webClient, ".o_switch_view.o_legacy_toy.active");
+            assert.containsOnce(target, ".o_switch_view.o_legacy_toy.active");
             assert.deepEqual(
-                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                getFacetTexts(target).map((s) => s.replace(/\s/, "")),
                 [
                     "FooABC",
                     "TrueDomainorDate Filter: July 2021",
@@ -166,21 +168,21 @@ QUnit.module("Views", (hooks) => {
                 ]
             );
 
-            await removeFacet(webClient, 1);
+            await removeFacet(target, 1);
 
             assert.deepEqual(
-                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                getFacetTexts(target).map((s) => s.replace(/\s/, "")),
                 [
                     "FooABC",
                     "DateGroupBy: Month>Bar",
                 ]
             );
 
-            await switchView(webClient, "toy");
+            await switchView(target, "toy");
 
-            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
+            assert.containsOnce(target, ".o_switch_view.o_toy.active");
             assert.deepEqual(
-                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                getFacetTexts(target).map((s) => s.replace(/\s/, "")),
                 [
                     "FooABC",
                     "DateGroupBy: Month>Bar",
@@ -188,19 +190,19 @@ QUnit.module("Views", (hooks) => {
             );
 
             // Check if update works
-            await removeFacet(webClient, 1);
+            await removeFacet(target, 1);
 
             assert.deepEqual(
-                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                getFacetTexts(target).map((s) => s.replace(/\s/, "")),
                 [
                     "FooABC",
                 ]
             );
 
-            await switchView(webClient, "legacy_toy");
+            await switchView(target, "legacy_toy");
 
             assert.deepEqual(
-                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                getFacetTexts(target).map((s) => s.replace(/\s/, "")),
                 [
                     "FooABC",
                 ]
@@ -239,19 +241,19 @@ QUnit.module("Views", (hooks) => {
                 ],
             });
 
-            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
-            assert.deepEqual(getFacetTexts(webClient), ["My favorite"]);
+            assert.containsOnce(target, ".o_switch_view.o_toy.active");
+            assert.deepEqual(getFacetTexts(target), ["My favorite"]);
 
-            await switchView(webClient, "legacy_toy");
+            await switchView(target, "legacy_toy");
             await legacyExtraNextTick();
 
-            assert.containsOnce(webClient, ".o_switch_view.o_legacy_toy.active");
-            assert.deepEqual(getFacetTexts(webClient), ["My favorite"]);
+            assert.containsOnce(target, ".o_switch_view.o_legacy_toy.active");
+            assert.deepEqual(getFacetTexts(target), ["My favorite"]);
 
-            await switchView(webClient, "toy");
+            await switchView(target, "toy");
 
-            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
-            assert.deepEqual(getFacetTexts(webClient), ["My favorite"]);
+            assert.containsOnce(target, ".o_switch_view.o_toy.active");
+            assert.deepEqual(getFacetTexts(target), ["My favorite"]);
         }
     );
 
@@ -282,19 +284,19 @@ QUnit.module("Views", (hooks) => {
                 ],
             });
 
-            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
+            assert.containsOnce(target, ".o_switch_view.o_toy.active");
 
-            await toggleFavoriteMenu(webClient);
-            await toggleSaveFavorite(webClient);
-            await saveFavorite(webClient);
+            await toggleFavoriteMenu(target);
+            await toggleSaveFavorite(target);
+            await saveFavorite(target);
 
-            assert.deepEqual(getFacetTexts(webClient), ["Action name"]);
+            assert.deepEqual(getFacetTexts(target), ["Action name"]);
 
-            await switchView(webClient, "legacy_toy");
+            await switchView(target, "legacy_toy");
             await legacyExtraNextTick();
 
-            assert.containsOnce(webClient, ".o_switch_view.o_legacy_toy.active");
-            assert.deepEqual(getFacetTexts(webClient), ["Action name"]);
+            assert.containsOnce(target, ".o_switch_view.o_legacy_toy.active");
+            assert.deepEqual(getFacetTexts(target), ["Action name"]);
         }
     );
 
@@ -364,17 +366,17 @@ QUnit.module("Views", (hooks) => {
                 ],
             });
 
-            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
+            assert.containsOnce(target, ".o_switch_view.o_toy.active");
 
-            await switchView(webClient, "legacy_toy");
+            await switchView(target, "legacy_toy");
             await legacyExtraNextTick();
 
-            assert.containsOnce(webClient, ".o_switch_view.o_legacy_toy.active");
+            assert.containsOnce(target, ".o_switch_view.o_legacy_toy.active");
             assert.verifySteps([`{"locationId":"Grand-Rosière"}`]);
 
-            await switchView(webClient, "toy");
+            await switchView(target, "toy");
 
-            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
+            assert.containsOnce(target, ".o_switch_view.o_toy.active");
             assert.verifySteps([`{"locationId":"Grand-Rosière"}`]);
 
             await doAction(webClient, {
@@ -388,18 +390,18 @@ QUnit.module("Views", (hooks) => {
             });
             await legacyExtraNextTick();
 
-            assert.containsOnce(webClient, ".o_switch_view.o_legacy_toy.active");
+            assert.containsOnce(target, ".o_switch_view.o_legacy_toy.active");
             assert.verifySteps([`no state`]);
 
-            await switchView(webClient, "toy");
+            await switchView(target, "toy");
 
-            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
+            assert.containsOnce(target, ".o_switch_view.o_toy.active");
             assert.verifySteps([`{"locationId":"The place to be"}`]);
 
-            await switchView(webClient, "legacy_toy");
+            await switchView(target, "legacy_toy");
             await legacyExtraNextTick();
 
-            assert.containsOnce(webClient, ".o_switch_view.o_legacy_toy.active");
+            assert.containsOnce(target, ".o_switch_view.o_legacy_toy.active");
             assert.verifySteps([`{"locationId":"The place to be"}`]);
         }
     );
diff --git a/addons/web/static/tests/owl2_compatibility_app.js b/addons/web/static/tests/owl2_compatibility_app.js
new file mode 100644
index 00000000000..ffb56496ade
--- /dev/null
+++ b/addons/web/static/tests/owl2_compatibility_app.js
@@ -0,0 +1,83 @@
+(function () {
+    const App = owl.App;
+
+    const stopPromises = [];
+    const schedulers = new Set();
+
+    function hookIntoScheduler(scheduler) {
+        const { stop: originalStop } = scheduler;
+        scheduler.stop = function stop() {
+            const wasRunning = this.isRunning;
+            originalStop.call(this);
+            if (wasRunning) {
+                while (stopPromises.length) {
+                    stopPromises.pop().resolve();
+                }
+            }
+        };
+    }
+
+    owl.App = class extends App {
+        constructor() {
+            super(...arguments);
+            this.setup();
+            hookIntoScheduler(this.scheduler);
+            schedulers.add(this.scheduler);
+        }
+        destroy() {
+            schedulers.delete(this.scheduler);
+            super.destroy();
+        }
+        setup() {}
+    };
+
+    /**
+     * Returns a promise resolved the next time OWL stops rendering.
+     *
+     * @param {function} func function which, when called, is
+     *   expected to trigger OWL render(s).
+     * @param {number} [timeoutDelay=5000] in ms
+     * @returns {Promise}
+     */
+    owl.App.afterNextRender = async function afterNextRender(func, timeoutDelay = 5000) {
+        // Define the potential errors outside of the promise to get a proper
+        // trace if they happen.
+        const startError = new Error("Timeout: the render didn't start.");
+        const stopError = new Error("Timeout: the render didn't stop.");
+        // Set up the timeout to reject if no render happens.
+        let timeoutNoRender;
+        const timeoutProm = new Promise((resolve, reject) => {
+            timeoutNoRender = setTimeout(() => {
+                let error = startError;
+                if ([...schedulers].some(({ isRunning }) => isRunning)) {
+                    error = stopError;
+                }
+                console.error(error);
+                reject(error);
+            }, timeoutDelay);
+        });
+        // Set up the promise to resolve if a render happens.
+        let resolve;
+        const prom = new Promise((res) => {
+            resolve = res;
+        });
+        prom.resolve = resolve;
+        stopPromises.push(prom);
+        // Start the function expected to trigger a render after the promise
+        // has been registered to not miss any potential render.
+        const funcRes = func();
+        // Make them race (first to resolve/reject wins).
+        await Promise.race([prom, timeoutProm]);
+        clearTimeout(timeoutNoRender);
+        // Wait the end of the function to ensure all potential effects are
+        // taken into account during the following verification step.
+        await funcRes;
+        // Wait one more frame to make sure no new render has been queued.
+        await new Promise(function (resolve) {
+            setTimeout(() => window.requestAnimationFrame(() => resolve()));
+        });
+        if ([...schedulers].some(({ isRunning }) => isRunning)) {
+            await afterNextRender(() => {}, timeoutDelay);
+        }
+    };
+})();
diff --git a/addons/web/static/tests/search/favorite_menu_tests.js b/addons/web/static/tests/search/favorite_menu_tests.js
index 8fa646f7b09..c437ca3c36d 100644
--- a/addons/web/static/tests/search/favorite_menu_tests.js
+++ b/addons/web/static/tests/search/favorite_menu_tests.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { click, patchDate } from "@web/../tests/helpers/utils";
+import { click, getFixture, patchDate } from "@web/../tests/helpers/utils";
 import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
 import { dialogService } from "@web/core/dialog/dialog_service";
 import { registry } from "@web/core/registry";
@@ -19,7 +19,7 @@ import {
     toggleMenuItem,
 } from "./helpers";
 
-const { Component, xml } = owl;
+const { Component, onWillUpdateProps, xml } = owl;
 const serviceRegistry = registry.category("services");
 const viewRegistry = registry.category("views");
 const favoriteMenuRegistry = registry.category("favoriteMenu");
@@ -29,8 +29,10 @@ function getDomain(comp) {
 }
 
 let serverData;
+let target;
 QUnit.module("Search", (hooks) => {
     hooks.beforeEach(async () => {
+        target = getFixture();
         serverData = {
             models: {
                 foo: {
@@ -133,9 +135,9 @@ QUnit.module("Search", (hooks) => {
             class ToyView extends Component {
                 setup() {
                     assert.deepEqual(this.props.domain, [["foo", "=", "qsdf"]]);
-                }
-                willUpdateProps(nextProps) {
-                    assert.deepEqual(nextProps.domain, []);
+                    onWillUpdateProps((nextProps) => {
+                        assert.deepEqual(nextProps.domain, []);
+                    });
                 }
             }
             ToyView.components = { FavoriteMenu, SearchBar };
@@ -179,21 +181,18 @@ QUnit.module("Search", (hooks) => {
                 views: [[false, "toy"]],
             });
 
-            await toggleFavoriteMenu(webClient);
+            await toggleFavoriteMenu(target);
 
-            assert.deepEqual(getFacetTexts(webClient), ["My favorite"]);
-            assert.hasClass(
-                webClient.el.querySelector(".o_favorite_menu .o_menu_item"),
-                "selected"
-            );
+            assert.deepEqual(getFacetTexts(target), ["My favorite"]);
+            assert.hasClass(target.querySelector(".o_favorite_menu .o_menu_item"), "selected");
 
-            await deleteFavorite(webClient, 0);
+            await deleteFavorite(target, 0);
 
             await click(document.querySelector("div.o_dialog footer button"));
 
-            assert.deepEqual(getFacetTexts(webClient), []);
-            assert.containsNone(webClient, ".o_favorite_menu .o_menu_item");
-            assert.containsOnce(webClient, ".o_favorite_menu .o_add_favorite");
+            assert.deepEqual(getFacetTexts(target), []);
+            assert.containsNone(target, ".o_favorite_menu .o_menu_item");
+            assert.containsOnce(target, ".o_favorite_menu .o_add_favorite");
         }
     );
 
diff --git a/addons/web/static/tests/search/helpers.js b/addons/web/static/tests/search/helpers.js
index 26b92c07617..516d229aa2a 100644
--- a/addons/web/static/tests/search/helpers.js
+++ b/addons/web/static/tests/search/helpers.js
@@ -9,11 +9,10 @@ import { WithSearch } from "@web/search/with_search/with_search";
 import { getDefaultConfig } from "@web/views/view";
 import { viewService } from "@web/views/view_service";
 import { actionService } from "@web/webclient/actions/action_service";
-import { registerCleanup } from "../helpers/cleanup";
 import { makeTestEnv } from "../helpers/mock_env";
-import { click, getFixture, mouseEnter, triggerEvent } from "../helpers/utils";
+import { click, getFixture, mount, mouseEnter, triggerEvent } from "../helpers/utils";
 
-const { Component, mount } = owl;
+const { Component } = owl;
 const serviceRegistry = registry.category("services");
 const favoriteMenuRegistry = registry.category("favoriteMenu");
 
@@ -48,13 +47,10 @@ export const makeWithSearch = async (params) => {
     delete props.config;
 
     const env = await makeTestEnv({ serverData, mockRPC, config });
-
-    const target = getFixture();
-    const withSearch = await mount(WithSearch, { env, props, target });
-
-    registerCleanup(() => withSearch.destroy());
-
-    const component = Object.values(withSearch.__owl__.children)[0];
+    const withSearch = await mount(WithSearch, getFixture(), { env, props });
+    const withSearchNode = withSearch.__owl__;
+    const componentNode = Object.values(withSearchNode.children)[0];
+    const component = componentNode.component;
 
     return component;
 };
diff --git a/addons/web/static/tests/search/search_bar_tests.js b/addons/web/static/tests/search/search_bar_tests.js
index c3d901c3564..fb6c0123ecb 100644
--- a/addons/web/static/tests/search/search_bar_tests.js
+++ b/addons/web/static/tests/search/search_bar_tests.js
@@ -16,6 +16,8 @@ function getDomain(controlPanel) {
     return controlPanel.env.searchModel.domain;
 }
 
+const { onWillUpdateProps } = owl;
+
 let serverData;
 QUnit.module("Search", (hooks) => {
     hooks.beforeEach(async () => {
@@ -294,9 +296,11 @@ QUnit.module("Search", (hooks) => {
 
         let updateCount = 0;
         patchWithCleanup(ControlPanel.prototype, {
-            async willUpdateProps() {
-                updateCount++;
-                await this._super(...arguments);
+            setup() {
+                this._super();
+                onWillUpdateProps(() => {
+                    updateCount++;
+                });
             },
         });
 
@@ -350,9 +354,11 @@ QUnit.module("Search", (hooks) => {
 
         let updateCount = 0;
         patchWithCleanup(ControlPanel.prototype, {
-            async willUpdateProps() {
-                updateCount++;
-                await this._super(...arguments);
+            setup() {
+                this._super();
+                onWillUpdateProps(() => {
+                    updateCount++;
+                });
             },
         });
 
diff --git a/addons/web/static/tests/search/search_panel_tests.js b/addons/web/static/tests/search/search_panel_tests.js
index 6a08c5c0fc3..4fde3c6eca3 100644
--- a/addons/web/static/tests/search/search_panel_tests.js
+++ b/addons/web/static/tests/search/search_panel_tests.js
@@ -1,7 +1,13 @@
 /** @odoo-module **/
 
 import { makeFakeUserService } from "@web/../tests/helpers/mock_services";
-import { click, legacyExtraNextTick, makeDeferred, nextTick } from "@web/../tests/helpers/utils";
+import {
+    click,
+    getFixture,
+    legacyExtraNextTick,
+    makeDeferred,
+    nextTick,
+} from "@web/../tests/helpers/utils";
 import {
     makeWithSearch,
     setupControlPanelServiceRegistry,
@@ -83,17 +89,19 @@ const getCounters = (v) => (isNaN(v[1]) ? null : Number(v[1]));
 const makeTestComponent = ({ onWillStart, onWillUpdateProps } = {}) => {
     let domain;
     class TestComponent extends Component {
-        async willStart() {
-            if (onWillStart) {
-                await onWillStart();
-            }
-            domain = this.props.domain;
-        }
-        async willUpdateProps(nextProps) {
-            if (onWillUpdateProps) {
-                await onWillUpdateProps();
-            }
-            domain = nextProps.domain;
+        setup() {
+            owl.onWillStart(async () => {
+                if (onWillStart) {
+                    await onWillStart();
+                }
+                domain = this.props.domain;
+            });
+            owl.onWillUpdateProps(async (nextProps) => {
+                if (onWillUpdateProps) {
+                    await onWillUpdateProps();
+                }
+                domain = nextProps.domain;
+            });
         }
     }
 
@@ -109,6 +117,7 @@ const makeTestComponent = ({ onWillStart, onWillUpdateProps } = {}) => {
 };
 
 let serverData;
+let target;
 
 QUnit.module("Search", (hooks) => {
     hooks.beforeEach(() => {
@@ -259,6 +268,7 @@ QUnit.module("Search", (hooks) => {
                     </search>`,
             },
         };
+        target = getFixture();
         setupControlPanelServiceRegistry();
         serviceRegistry.add("user", makeFakeUserService());
     });
@@ -1980,25 +1990,25 @@ QUnit.module("Search", (hooks) => {
 
         await doAction(webclient, 1);
 
-        assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_kanban_view");
-        assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_search_panel");
+        assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_kanban_view");
+        assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_search_panel");
 
-        await switchView(webclient, "pivot");
+        await switchView(target, "pivot");
 
-        assert.containsOnce(webclient, ".o_content .o_pivot");
-        assert.containsNone(webclient, ".o_content .o_search_panel");
+        assert.containsOnce(target, ".o_content .o_pivot");
+        assert.containsNone(target, ".o_content .o_search_panel");
 
-        await switchView(webclient, "list");
+        await switchView(target, "list");
         await legacyExtraNextTick();
 
-        assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_list_view");
-        assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_search_panel");
+        assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_list_view");
+        assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_search_panel");
 
-        await click(webclient.el.querySelector(".o_data_row .o_data_cell"));
+        await click(target.querySelector(".o_data_row .o_data_cell"));
         await legacyExtraNextTick();
 
-        assert.containsOnce(webclient, ".o_content .o_form_view");
-        assert.containsNone(webclient, ".o_content .o_search_panel");
+        assert.containsOnce(target, ".o_content .o_form_view");
+        assert.containsNone(target, ".o_content .o_search_panel");
     });
 
     QUnit.test("search panel with view_types attribute", async (assert) => {
@@ -2020,19 +2030,19 @@ QUnit.module("Search", (hooks) => {
 
         await doAction(webclient, 1);
 
-        assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_kanban_view");
-        assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_search_panel");
+        assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_kanban_view");
+        assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_search_panel");
 
-        await switchView(webclient, "list");
+        await switchView(target, "list");
         await legacyExtraNextTick();
 
-        assert.containsOnce(webclient, ".o_content .o_list_view");
-        assert.containsNone(webclient, ".o_content .o_search_panel");
+        assert.containsOnce(target, ".o_content .o_list_view");
+        assert.containsNone(target, ".o_content .o_search_panel");
 
-        await switchView(webclient, "pivot");
+        await switchView(target, "pivot");
 
-        assert.containsOnce(webclient, ".o_content.o_component_with_search_panel .o_pivot");
-        assert.containsOnce(webclient, ".o_content.o_component_with_search_panel .o_search_panel");
+        assert.containsOnce(target, ".o_content.o_component_with_search_panel .o_pivot");
+        assert.containsOnce(target, ".o_content.o_component_with_search_panel .o_search_panel");
     });
 
     QUnit.test("search panel state is shared between views", async (assert) => {
@@ -2049,32 +2059,32 @@ QUnit.module("Search", (hooks) => {
 
         await doAction(webclient, 1);
 
-        assert.hasClass(getCategory(webclient, 0), "active");
-        assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 4);
+        assert.hasClass(getCategory(target, 0), "active");
+        assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
 
         // select 'asustek' company
-        await click(getCategory(webclient, 1));
+        await click(getCategory(target, 1));
 
-        assert.hasClass(getCategory(webclient, 1), "active");
-        assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 2);
+        assert.hasClass(getCategory(target, 1), "active");
+        assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 2);
 
-        await switchView(webclient, "list");
+        await switchView(target, "list");
         await legacyExtraNextTick();
 
-        assert.hasClass(getCategory(webclient, 1), "active");
-        assert.containsN(webclient, ".o_data_row", 2);
+        assert.hasClass(getCategory(target, 1), "active");
+        assert.containsN(target, ".o_data_row", 2);
 
         // select 'agrolait' company
-        await click(getCategory(webclient, 2));
+        await click(getCategory(target, 2));
 
-        assert.hasClass(getCategory(webclient, 2), "active");
-        assert.containsN(webclient, ".o_data_row", 2);
+        assert.hasClass(getCategory(target, 2), "active");
+        assert.containsN(target, ".o_data_row", 2);
 
-        await switchView(webclient, "kanban");
+        await switchView(target, "kanban");
         await legacyExtraNextTick();
 
-        assert.hasClass(getCategory(webclient, 2), "active");
-        assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 2);
+        assert.hasClass(getCategory(target, 2), "active");
+        assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 2);
 
         assert.verifySteps([
             "[]", // initial search_read
@@ -2099,36 +2109,36 @@ QUnit.module("Search", (hooks) => {
 
         await doAction(webclient, 1);
 
-        assert.containsNone(webclient, ".o_search_panel_filter_value input:checked");
-        assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 4);
+        assert.containsNone(target, ".o_search_panel_filter_value input:checked");
+        assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
 
         // select gold filter
-        await click(getFilter(webclient, 0, "input"));
+        await click(getFilter(target, 0, "input"));
 
-        assert.containsOnce(webclient, ".o_search_panel_filter_value input:checked");
-        assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 1);
+        assert.containsOnce(target, ".o_search_panel_filter_value input:checked");
+        assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 1);
 
-        await switchView(webclient, "list");
+        await switchView(target, "list");
         await legacyExtraNextTick();
 
-        assert.containsOnce(webclient, ".o_search_panel_filter_value input:checked");
-        assert.containsN(webclient, ".o_data_row", 1);
+        assert.containsOnce(target, ".o_search_panel_filter_value input:checked");
+        assert.containsN(target, ".o_data_row", 1);
 
         // select silver filter
-        await click(getFilter(webclient, 1, "input"));
+        await click(getFilter(target, 1, "input"));
 
-        assert.containsN(webclient, ".o_search_panel_filter_value input:checked", 2);
-        assert.containsN(webclient, ".o_data_row", 4);
+        assert.containsN(target, ".o_search_panel_filter_value input:checked", 2);
+        assert.containsN(target, ".o_data_row", 4);
 
-        await switchView(webclient, "kanban");
+        await switchView(target, "kanban");
         await legacyExtraNextTick();
 
-        assert.containsN(webclient, ".o_search_panel_filter_value input:checked", 2);
-        assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 4);
+        assert.containsN(target, ".o_search_panel_filter_value input:checked", 2);
+        assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
 
-        await click(webclient.el.querySelector(".o_kanban_record"));
+        await click(target.querySelector(".o_kanban_record"));
         await legacyExtraNextTick();
-        await click(webclient.el.querySelector(".breadcrumb-item"));
+        await click(target.querySelector(".breadcrumb-item"));
         await legacyExtraNextTick();
 
         assert.verifySteps([
@@ -2150,44 +2160,32 @@ QUnit.module("Search", (hooks) => {
 
             await doAction(webclient, 1);
 
-            assert.containsOnce(
-                webclient,
-                ".o_content.o_controller_with_searchpanel .o_kanban_view"
-            );
-            assert.containsOnce(
-                webclient,
-                ".o_content.o_controller_with_searchpanel .o_search_panel"
-            );
-            assert.containsNone(webclient, ".o_search_panel_filter_value input:checked");
-            assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 4);
+            assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_kanban_view");
+            assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_search_panel");
+            assert.containsNone(target, ".o_search_panel_filter_value input:checked");
+            assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
 
             // select gold filter
-            await click(getFilter(webclient, 0, "input"));
+            await click(getFilter(target, 0, "input"));
 
-            assert.containsOnce(webclient, ".o_search_panel_filter_value input:checked");
-            assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 1);
+            assert.containsOnce(target, ".o_search_panel_filter_value input:checked");
+            assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 1);
 
             // switch to pivot
-            await switchView(webclient, "pivot");
+            await switchView(target, "pivot");
 
-            assert.containsOnce(webclient, ".o_content .o_pivot");
-            assert.containsNone(webclient, ".o_content .o_search_panel");
-            assert.strictEqual(
-                webclient.el.querySelector(".o_pivot_cell_value").innerText.trim(),
-                "15"
-            );
+            assert.containsOnce(target, ".o_content .o_pivot");
+            assert.containsNone(target, ".o_content .o_search_panel");
+            assert.strictEqual(target.querySelector(".o_pivot_cell_value").innerText.trim(), "15");
 
             // switch to list
-            await switchView(webclient, "list");
+            await switchView(target, "list");
             await legacyExtraNextTick();
 
-            assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_list_view");
-            assert.containsOnce(
-                webclient,
-                ".o_content.o_controller_with_searchpanel .o_search_panel"
-            );
-            assert.containsOnce(webclient, ".o_search_panel_filter_value input:checked");
-            assert.containsN(webclient, ".o_data_row", 1);
+            assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_list_view");
+            assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_search_panel");
+            assert.containsOnce(target, ".o_search_panel_filter_value input:checked");
+            assert.containsN(target, ".o_data_row", 1);
         }
     );
 
@@ -2197,12 +2195,12 @@ QUnit.module("Search", (hooks) => {
         const webclient = await createWebClient({ serverData });
 
         await doAction(webclient, 1, { viewType: "form" });
-        await click(webclient.el.querySelector(".o_form_view button"));
+        await click(target.querySelector(".o_form_view button"));
         await legacyExtraNextTick();
 
-        assert.containsOnce(webclient, ".o_kanban_view");
-        assert.containsOnce(webclient, ".o_search_panel");
-        assert.containsOnce(webclient, ".o_search_panel_category_value:first .active");
+        assert.containsOnce(target, ".o_kanban_view");
+        assert.containsOnce(target, ".o_search_panel");
+        assert.containsOnce(target, ".o_search_panel_category_value:first .active");
     });
 
     QUnit.test(
@@ -2221,9 +2219,9 @@ QUnit.module("Search", (hooks) => {
 
             await doAction(webclient, 1);
 
-            await switchView(webclient, "list");
+            await switchView(target, "list");
             await legacyExtraNextTick();
-            await switchView(webclient, "kanban");
+            await switchView(target, "kanban");
             await legacyExtraNextTick();
 
             assert.verifySteps([
@@ -2240,31 +2238,33 @@ QUnit.module("Search", (hooks) => {
             serverData.models.category.records.push({ id: i, name: "Cat " + i });
         }
 
-        const webclient = await createWebClient({ serverData });
+        const container = document.createElement("div");
+        container.classList.add("o_web_client");
+        container.style = "max-height: 300px";
+        target.appendChild(container);
+        const webclient = await createWebClient({ target: container, serverData });
 
         await doAction(webclient, 1);
 
-        webclient.el.style = "max-height: 300px";
+        const getSearchPanel = () => target.querySelector(".o_search_panel");
 
-        const getSearchPanel = () => webclient.el.querySelector(".o_search_panel");
-
-        assert.containsOnce(webclient, ".o_content .o_kanban_view");
+        assert.containsOnce(target, ".o_content .o_kanban_view");
         assert.strictEqual(getSearchPanel().scrollTop, 0);
 
         // simulate a scroll in the search panel and switch into list
         getSearchPanel().scrollTo(0, 100);
-        await switchView(webclient, "list");
+        await switchView(target, "list");
         await legacyExtraNextTick();
 
-        assert.containsOnce(webclient, ".o_content .o_list_view");
+        assert.containsOnce(target, ".o_content .o_list_view");
         assert.strictEqual(getSearchPanel().scrollTop, 100);
 
         // simulate another scroll and switch back to kanban
         getSearchPanel().scrollTo(0, 25);
-        await switchView(webclient, "kanban");
+        await switchView(target, "kanban");
         await legacyExtraNextTick();
 
-        assert.containsOnce(webclient, ".o_content .o_kanban_view");
+        assert.containsOnce(target, ".o_content .o_kanban_view");
         assert.strictEqual(getSearchPanel().scrollTop, 25);
     });
 
@@ -2288,8 +2288,8 @@ QUnit.module("Search", (hooks) => {
 
         await doAction(webclient, 1, { viewType: "form" });
 
-        await click(webclient.el, "[name=company_id] .o_input");
-        await click(webclient.el, "[name=company_id] .o_input");
+        await click(target, "[name=company_id] .o_input");
+        await click(target, "[name=company_id] .o_input");
         await click(document, ".o_m2o_dropdown_option");
         await legacyExtraNextTick();
 
diff --git a/addons/web/static/tests/search/with_search_tests.js b/addons/web/static/tests/search/with_search_tests.js
index a832e4304db..94467e154ec 100644
--- a/addons/web/static/tests/search/with_search_tests.js
+++ b/addons/web/static/tests/search/with_search_tests.js
@@ -9,6 +9,7 @@ import { FilterMenu } from "@web/search/filter_menu/filter_menu";
 import { GroupByMenu } from "@web/search/group_by_menu/group_by_menu";
 import { WithSearch } from "@web/search/with_search/with_search";
 import { viewService } from "@web/views/view_service";
+import { mount } from "../helpers/utils";
 import {
     getMenuItemTexts,
     makeWithSearch,
@@ -17,7 +18,7 @@ import {
     toggleMenuItem,
 } from "./helpers";
 
-const { Component, mount, useState, xml } = owl;
+const { Component, onWillUpdateProps, onWillStart, useState, xml } = owl;
 
 const serviceRegistry = registry.category("services");
 
@@ -269,11 +270,13 @@ QUnit.module("Search", (hooks) => {
             assert.expect(2);
 
             class TestComponent extends Component {
-                async willStart() {
-                    assert.deepEqual(this.props.domain, []);
-                }
-                async willUpdateProps(nextProps) {
-                    assert.deepEqual(nextProps.domain, [[1, "=", 1]]);
+                setup() {
+                    owl.onWillStart(() => {
+                        assert.deepEqual(this.props.domain, []);
+                    });
+                    owl.onWillUpdateProps((nextProps) => {
+                        assert.deepEqual(nextProps.domain, [[1, "=", 1]]);
+                    });
                 }
             }
             TestComponent.components = { FilterMenu };
@@ -298,11 +301,13 @@ QUnit.module("Search", (hooks) => {
         assert.expect(2);
 
         class TestComponent extends Component {
-            willStart() {
-                assert.deepEqual(this.props.domain, [["type", "=", "carnivorous"]]);
-            }
-            willUpdateProps(nextProps) {
-                assert.deepEqual(nextProps.domain, [["type", "=", "herbivorous"]]);
+            setup() {
+                onWillStart(() => {
+                    assert.deepEqual(this.props.domain, [["type", "=", "carnivorous"]]);
+                });
+                onWillUpdateProps((nextProps) => {
+                    assert.deepEqual(nextProps.domain, [["type", "=", "herbivorous"]]);
+                });
             }
         }
         TestComponent.template = xml`<div class="o_test_component">Test component content</div>`;
@@ -322,12 +327,9 @@ QUnit.module("Search", (hooks) => {
         Parent.template = xml`<WithSearch t-props="state"/>`;
         Parent.components = { WithSearch };
 
-        const parent = await mount(Parent, { env, target });
-
+        const parent = await mount(Parent, target, { env });
         parent.state.domain = [["type", "=", "herbivorous"]];
 
         await nextTick();
-
-        parent.destroy();
     });
 });
diff --git a/addons/web/static/tests/setup.js b/addons/web/static/tests/setup.js
index bee413f6323..cfde1b13602 100644
--- a/addons/web/static/tests/setup.js
+++ b/addons/web/static/tests/setup.js
@@ -10,11 +10,28 @@ import { registerCleanup } from "./helpers/cleanup";
 import { prepareRegistriesWithCleanup } from "./helpers/mock_env";
 import { session as sessionInfo } from "@web/session";
 import { prepareLegacyRegistriesWithCleanup } from "./helpers/legacy_env_utils";
+import { config as transitionConfig } from "@web/core/transition";
 
-const { QWeb, config, loadFile, whenReady } = owl;
+transitionConfig.disabled = true;
 
-config.enableTransitions = false;
-QWeb.dev = true;
+import { patch } from "@web/core/utils/patch";
+import { processTemplates } from "@web/core/assets";
+const { App, whenReady, loadFile } = owl;
+
+patch(App.prototype, "TestOwlApp", {
+    destroy() {
+        if (!this.destroyed) {
+            this._super(...arguments);
+            this.destroyed = true;
+        }
+    },
+    addTemplate(name) {
+        registerCleanup(() => {
+            delete this.constructor.sharedTemplates[name];
+        });
+        return this._super(...arguments);
+    },
+});
 
 function stringifyObjectValues(obj, properties) {
     let res = "";
@@ -203,21 +220,7 @@ export async function setupTests() {
     });
 
     const templatesUrl = `/web/webclient/qweb/${new Date().getTime()}?bundle=web.assets_qweb`;
-    // TODO replace by `processTemplates` when the legacy system is removed
-    let templates = await loadFile(templatesUrl);
-    // as we currently have two qweb engines (owl and legacy), owl templates are
-    // flagged with attribute `owl="1"`. The following lines removes the 'owl'
-    // attribute from the templates, so that it doesn't appear in the DOM. For now,
-    // we make the assumption that 'templates' only contains owl templates. We
-    // might need at some point to handle the case where we have both owl and
-    // legacy templates. At the end, we'll get rid of all this.
-    const doc = new DOMParser().parseFromString(templates, "text/xml");
-    const owlTemplates = [];
-    for (let child of doc.querySelectorAll("templates > [owl]")) {
-        child.removeAttribute("owl");
-        owlTemplates.push(child.outerHTML);
-    }
-    templates = `<templates> ${owlTemplates.join("\n")} </templates>`;
-    window.__ODOO_TEMPLATES__ = templates;
+    const templates = await loadFile(templatesUrl);
+    window.__OWL_TEMPLATES__ = processTemplates(templates);
     await Promise.all([whenReady(), legacyProm]);
 }
diff --git a/addons/web/static/tests/views/graph_view_tests.js b/addons/web/static/tests/views/graph_view_tests.js
index d826cfa56e1..c2a02b22b3b 100644
--- a/addons/web/static/tests/views/graph_view_tests.js
+++ b/addons/web/static/tests/views/graph_view_tests.js
@@ -1,7 +1,15 @@
 /** @odoo-module **/
 
 import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
-import { click, makeDeferred, nextTick, patchDate, triggerEvent } from "@web/../tests/helpers/utils";
+import {
+    click,
+    getFixture,
+    makeDeferred,
+    nextTick,
+    patchDate,
+    triggerEvent,
+    findChildren,
+} from "@web/../tests/helpers/utils";
 import {
     editFavoriteName,
     saveFavorite,
@@ -33,8 +41,10 @@ function getGraphModelMetaData(graph) {
 }
 
 export function getGraphRenderer(graph) {
-    const layout = Object.values(graph.__owl__.children)[0];
-    return Object.values(layout.__owl__.children).find((c) => c.chart);
+    const layoutNode = findChildren(graph);
+    return Object.values(layoutNode.children)
+        .map((c) => c.component)
+        .find((c) => c.chart);
 }
 
 function getChart(graph) {
@@ -111,18 +121,18 @@ function checkTooltip(assert, graph, expectedTooltipContent, index, datasetIndex
     );
 }
 
-function getModeButton(comp, mode) {
-    return comp.el.querySelector(`.o_graph_button[data-mode="${mode}"`);
+function getModeButton(el, mode) {
+    return el.querySelector(`.o_graph_button[data-mode="${mode}"`);
 }
 
-async function selectMode(comp, mode) {
-    await click(getModeButton(comp, mode));
+async function selectMode(el, mode) {
+    await click(getModeButton(el, mode));
 }
 
 function checkModeIs(assert, graph, mode) {
     assert.strictEqual(getGraphModelMetaData(graph).mode, mode);
     assert.strictEqual(getChart(graph).config.type, mode);
-    assert.hasClass(getModeButton(graph, mode), "active");
+    assert.hasClass(getModeButton(graph.el, mode), "active");
 }
 
 function getXAxeLabel(graph) {
@@ -286,9 +296,9 @@ QUnit.module("Views", (hooks) => {
     QUnit.module("GraphView");
 
     QUnit.test("simple bar chart rendering", async function (assert) {
-        assert.expect(12);
         const graph = await makeView({ serverData, type: "graph", resModel: "foo" });
         const { measure, mode, order, stacked } = getGraphModelMetaData(graph);
+        assert.hasClass(graph.el, "o_action o_view_controller");
         assert.containsOnce(graph, "div.o_graph_canvas_container canvas");
         assert.strictEqual(measure, "__count", `the active measure should be "__count" by default`);
         assert.strictEqual(mode, "bar", "should be in bar chart mode by default");
@@ -1879,7 +1889,7 @@ QUnit.module("Views", (hooks) => {
         checkModeIs(assert, graph, "bar");
         assert.strictEqual(getXAxeLabel(graph), "bar");
         assert.strictEqual(getYAxeLabel(graph), "Count");
-        await selectMode(graph, "line");
+        await selectMode(graph.el, "line");
         checkModeIs(assert, graph, "line");
         assert.strictEqual(getXAxeLabel(graph), "bar");
         await toggleMenu(graph, "Measures");
@@ -1897,11 +1907,11 @@ QUnit.module("Views", (hooks) => {
         assert.expect(12);
         const graph = await makeView({ serverData, type: "graph", resModel: "foo" });
         checkModeIs(assert, graph, "bar");
-        await selectMode(graph, "bar"); // click on the active mode does not change anything
+        await selectMode(graph.el, "bar"); // click on the active mode does not change anything
         checkModeIs(assert, graph, "bar");
-        await selectMode(graph, "line");
+        await selectMode(graph.el, "line");
         checkModeIs(assert, graph, "line");
-        await selectMode(graph, "pie");
+        await selectMode(graph.el, "pie");
         checkModeIs(assert, graph, "pie");
     });
 
@@ -2004,12 +2014,12 @@ QUnit.module("Views", (hooks) => {
         checkLabels(assert, graph, ["xphone", "xpad"]);
         checkLegend(assert, graph, ["true / Undefined", "true / red", "false / Undefined"]);
 
-        await selectMode(graph, "line");
+        await selectMode(graph.el, "line");
 
         checkLabels(assert, graph, ["xphone", "xpad"]);
         checkLegend(assert, graph, ["true / Undefined", "true / red", "false / Undefined"]);
 
-        await selectMode(graph, "pie");
+        await selectMode(graph.el, "pie");
 
         checkLabels(assert, graph, [
             "xphone / true / Undefined",
@@ -2157,7 +2167,7 @@ QUnit.module("Views", (hooks) => {
         await editFavoriteName(graph, "Second Favorite");
         await saveFavorite(graph);
 
-        await selectMode(graph, "line");
+        await selectMode(graph.el, "line");
 
         await toggleFavoriteMenu(graph);
         await toggleSaveFavorite(graph);
@@ -2645,12 +2655,12 @@ QUnit.module("Views", (hooks) => {
                 return getChart(graph).data.labels.some((l) => /Undefined/.test(l));
             }
             assert.notOk(someUndefined());
-            await selectMode(graph, "bar");
+            await selectMode(graph.el, "bar");
             assert.ok(someUndefined());
-            await selectMode(graph, "pie");
+            await selectMode(graph.el, "pie");
             assert.ok(someUndefined());
             // Undefined should not appear after switching back to line chart
-            await selectMode(graph, "line");
+            await selectMode(graph.el, "line");
             assert.notOk(someUndefined());
         }
     );
@@ -2743,6 +2753,7 @@ QUnit.module("Views", (hooks) => {
     );
 
     QUnit.test("action name is displayed in breadcrumbs", async function (assert) {
+        const target = getFixture();
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, {
             name: "Glou glou",
@@ -2751,7 +2762,7 @@ QUnit.module("Views", (hooks) => {
             views: [[false, "graph"]],
         });
         assert.strictEqual(
-            webClient.el.querySelector(".o_control_panel .breadcrumb-item.active").innerText,
+            target.querySelector(".o_control_panel .breadcrumb-item.active").innerText,
             "Glou glou"
         );
     });
@@ -2805,55 +2816,58 @@ QUnit.module("Views", (hooks) => {
         await clickOnDataset(graph);
     });
 
-    QUnit.test("Clicking on bar charts removes group_by and search_default_* context keys", async function(assert) {
-        assert.expect(2);
+    QUnit.test(
+        "Clicking on bar charts removes group_by and search_default_* context keys",
+        async function (assert) {
+            assert.expect(2);
 
-        serviceRegistry.add(
-            "action",
-            {
-                start() {
-                    return {
-                        doAction(actionRequest, options) {
-                            assert.deepEqual(actionRequest, {
-                                context: {
-                                    lang: "en",
-                                    tz: "taht",
-                                    uid: 7,
-                                },
-                                domain: [["bar", "=", true]],
-                                name: "Foo Analysis",
-                                res_model: "foo",
-                                target: "current",
-                                type: "ir.actions.act_window",
-                                views: [
-                                    [false, "list"],
-                                    [false, "form"],
-                                ],
-                            });
-                            assert.deepEqual(options, { viewType: "list" });
-                        },
-                    };
+            serviceRegistry.add(
+                "action",
+                {
+                    start() {
+                        return {
+                            doAction(actionRequest, options) {
+                                assert.deepEqual(actionRequest, {
+                                    context: {
+                                        lang: "en",
+                                        tz: "taht",
+                                        uid: 7,
+                                    },
+                                    domain: [["bar", "=", true]],
+                                    name: "Foo Analysis",
+                                    res_model: "foo",
+                                    target: "current",
+                                    type: "ir.actions.act_window",
+                                    views: [
+                                        [false, "list"],
+                                        [false, "form"],
+                                    ],
+                                });
+                                assert.deepEqual(options, { viewType: "list" });
+                            },
+                        };
+                    },
                 },
-            },
-            { force: true }
-        );
-        const graph = await makeView({
-            serverData,
-            type: "graph",
-            resModel: "foo",
-            arch: `
+                { force: true }
+            );
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
                 <graph string="Foo Analysis">
                     <field name="bar"/>
                 </graph>
             `,
-            context: {
-                search_default_user: 1,
-                group_by: 'bar',
-            },
-        });
+                context: {
+                    search_default_user: 1,
+                    group_by: "bar",
+                },
+            });
 
-        await clickOnDataset(graph);
-    });
+            await clickOnDataset(graph);
+        }
+    );
 
     QUnit.test(
         "clicking on a pie chart trigger a do_action with correct views",
@@ -3048,7 +3062,7 @@ QUnit.module("Views", (hooks) => {
         checkDatasets(assert, graph, "data", { data: [4, 3, 1] });
 
         // set line mode
-        await selectMode(graph, "line");
+        await selectMode(graph.el, "line");
         assert.containsOnce(graph, "button.oi-sort--ascending");
         assert.containsOnce(graph, "button.oi-sort--descending");
 
@@ -3274,6 +3288,7 @@ QUnit.module("Views", (hooks) => {
     QUnit.test("reload chart with switchView button keep internal state", async function (assert) {
         assert.expect(3);
         serverData.views["foo,false,list"] = `<list/>`;
+        const target = getFixture();
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, {
             name: "Foo Action 1",
@@ -3284,11 +3299,11 @@ QUnit.module("Views", (hooks) => {
                 [false, "list"],
             ],
         });
-        assert.hasClass(getModeButton(webClient, "bar"), "active");
-        await selectMode(webClient, "line");
-        assert.hasClass(getModeButton(webClient, "line"), "active");
-        await switchView(webClient, "graph");
-        assert.hasClass(getModeButton(webClient, "line"), "active");
+        assert.hasClass(getModeButton(target, "bar"), "active");
+        await selectMode(target, "line");
+        assert.hasClass(getModeButton(target, "line"), "active");
+        await switchView(target, "graph");
+        assert.hasClass(getModeButton(target, "line"), "active");
     });
 
     QUnit.test(
@@ -3342,7 +3357,7 @@ QUnit.module("Views", (hooks) => {
 
             checkModeIs(assert, graph, "line");
 
-            await selectMode(graph, "bar");
+            await selectMode(graph.el, "bar");
 
             checkModeIs(assert, graph, "bar");
             assert.hasClass(graph.el.querySelector(`[data-tooltip="Stacked"]`), "active");
@@ -3462,7 +3477,7 @@ QUnit.module("Views", (hooks) => {
         checkModeIs(assert, graph, "line");
 
         // Change graph mode
-        await selectMode(graph, "bar");
+        await selectMode(graph.el, "bar");
 
         checkDatasets(assert, graph, ["data", "label"], {
             data: [4, 4],
@@ -3534,7 +3549,7 @@ QUnit.module("Views", (hooks) => {
     QUnit.test("fill_temporal is true by default", async function (assert) {
         assert.expect(1);
 
-        const graph = await makeView({
+        await makeView({
             serverData,
             type: "graph",
             resModel: "foo",
@@ -3553,7 +3568,7 @@ QUnit.module("Views", (hooks) => {
     QUnit.test("fill_temporal can be changed throught the context", async function (assert) {
         assert.expect(1);
 
-        const graph = await makeView({
+        await makeView({
             serverData,
             type: "graph",
             resModel: "foo",
@@ -3570,7 +3585,7 @@ QUnit.module("Views", (hooks) => {
         });
     });
 
-    QUnit.test('fake data in line chart', async function (assert) {
+    QUnit.test("fake data in line chart", async function (assert) {
         assert.expect(1);
 
         patchDate(2020, 4, 19, 1, 0, 0);
@@ -3581,13 +3596,13 @@ QUnit.module("Views", (hooks) => {
             type: "graph",
             resModel: "foo",
             serverData,
-            context: { search_default_date_filter: 1, },
+            context: { search_default_date_filter: 1 },
             arch: `
                 <graph type="line">
                     <field name="date"/>
                 </graph>
             `,
-            searchViewArch:`
+            searchViewArch: `
                 <search>
                     <filter name="date_filter" domain="[]" date="date" default_period="third_quarter"/>
                 </search>
@@ -3595,12 +3610,12 @@ QUnit.module("Views", (hooks) => {
         });
 
         await toggleComparisonMenu(graph);
-        await toggleMenuItem(graph, 'Date: Previous period');
+        await toggleMenuItem(graph, "Date: Previous period");
 
-        checkLabels(assert, graph, ['', '']);
+        checkLabels(assert, graph, ["", ""]);
     });
 
-    QUnit.test('no filling color for period of comparison', async function (assert) {
+    QUnit.test("no filling color for period of comparison", async function (assert) {
         assert.expect(1);
 
         patchDate(2020, 4, 19, 1, 0, 0);
@@ -3615,7 +3630,7 @@ QUnit.module("Views", (hooks) => {
             type: "graph",
             resModel: "foo",
             serverData,
-            context: { search_default_date_filter: 1, },
+            context: { search_default_date_filter: 1 },
             arch: `
                 <graph type="line">
                     <field name="product_id"/>
@@ -3629,10 +3644,10 @@ QUnit.module("Views", (hooks) => {
         });
 
         await toggleComparisonMenu(graph);
-        await toggleMenuItem(graph, 'Date: Previous period');
+        await toggleMenuItem(graph, "Date: Previous period");
 
         checkDatasets(assert, graph, "backgroundColor", {
-            "backgroundColor": undefined,
+            backgroundColor: undefined,
         });
     });
 });
diff --git a/addons/web/static/tests/views/helpers.js b/addons/web/static/tests/views/helpers.js
index 33cb0012951..fa8d0a4271a 100644
--- a/addons/web/static/tests/views/helpers.js
+++ b/addons/web/static/tests/views/helpers.js
@@ -1,14 +1,11 @@
 /** @odoo-module **/
 
-import { registerCleanup } from "@web/../tests/helpers/cleanup";
 import { makeTestEnv } from "@web/../tests/helpers/mock_env";
-import { getFixture } from "@web/../tests/helpers/utils";
+import { getFixture, mount } from "@web/../tests/helpers/utils";
 import { getDefaultConfig, View } from "@web/views/view";
 import { _fieldsViewGet } from "../helpers/mock_server";
 import { addLegacyMockEnvironment } from "../webclient/helpers";
 
-const { Component, mount } = owl;
-
 /**
  * @typedef {{
  *  serverData: Object,
@@ -77,15 +74,12 @@ export const makeView = async (params) => {
         });
     }
     addLegacyMockEnvironment(env, legacyParams);
-    //
 
-    const target = getFixture();
-    const view = await mount(View, { env, props, target });
-
-    registerCleanup(() => view.destroy());
-
-    const withSearch = Object.values(view.__owl__.children)[0];
-    const concreteView = Object.values(withSearch.__owl__.children)[0];
+    const view = await mount(View, getFixture(), { env, props });
+    const viewNode = view.__owl__;
+    const withSearchNode = Object.values(viewNode.children)[0];
+    const concreteViewNode = Object.values(withSearchNode.children)[0];
+    const concreteView = concreteViewNode.component;
 
     return concreteView;
 };
diff --git a/addons/web/static/tests/views/layout_tests.js b/addons/web/static/tests/views/layout_tests.js
index b6efb810ef8..b08b848ceda 100644
--- a/addons/web/static/tests/views/layout_tests.js
+++ b/addons/web/static/tests/views/layout_tests.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { getFixture } from "@web/../tests/helpers/utils";
+import { getFixture, mount } from "@web/../tests/helpers/utils";
 import { makeWithSearch, setupControlPanelServiceRegistry } from "@web/../tests/search/helpers";
 import { dialogService } from "@web/core/dialog/dialog_service";
 import { registry } from "@web/core/registry";
@@ -8,7 +8,7 @@ import { Layout } from "@web/views/layout";
 import { getDefaultConfig } from "@web/views/view";
 import { makeTestEnv } from "@web/../tests/helpers/mock_env";
 
-const { Component, mount, useSubEnv, xml } = owl;
+const { Component, xml, useChildSubEnv } = owl;
 
 const serviceRegistry = registry.category("services");
 
@@ -58,7 +58,7 @@ QUnit.module("Views", (hooks) => {
         ToyComponent.components = { Layout };
 
         const env = await makeTestEnv({ config: {} });
-        const comp = await mount(ToyComponent, { target: getFixture(), env });
+        const comp = await mount(ToyComponent, getFixture(), { env });
 
         assert.hasClass(comp.el, "o_toy_view o_view_sample_data");
         assert.containsNone(comp, ".o_control_panel");
@@ -102,7 +102,7 @@ QUnit.module("Views", (hooks) => {
 
         class ToyC extends Component {
             setup() {
-                useSubEnv({
+                useChildSubEnv({
                     searchModel: {
                         display: {
                             controlPanel: false,
@@ -125,7 +125,7 @@ QUnit.module("Views", (hooks) => {
 
         class ToyB extends Component {
             setup() {
-                useSubEnv({
+                useChildSubEnv({
                     config: {
                         ...getDefaultConfig(),
                         SearchPanel,
diff --git a/addons/web/static/tests/views/pivot_view_tests.js b/addons/web/static/tests/views/pivot_view_tests.js
index 73a5ea14baa..56ba89aae2b 100644
--- a/addons/web/static/tests/views/pivot_view_tests.js
+++ b/addons/web/static/tests/views/pivot_view_tests.js
@@ -6,6 +6,7 @@ import { session } from "@web/session";
 import { makeFakeLocalizationService, makeFakeUserService } from "../helpers/mock_services";
 import {
     click,
+    getFixture,
     legacyExtraNextTick,
     makeDeferred,
     mockDownload,
@@ -40,21 +41,23 @@ import { browser } from "@web/core/browser/browser";
 
 const serviceRegistry = registry.category("services");
 
+const { markup } = owl;
+
 /**
  * Helper function that returns, given a pivot instance, the values of the
  * table, separated by ','.
  *
  * @returns {string}
  */
-function getCurrentValues(pivot) {
-    return [...pivot.el.querySelectorAll(".o_pivot_cell_value div")]
-        .map((el) => el.innerText)
-        .join();
+function getCurrentValues(el) {
+    return [...el.querySelectorAll(".o_pivot_cell_value div")].map((el) => el.innerText).join();
 }
 
 let serverData;
+let target;
 QUnit.module("Views", (hooks) => {
     hooks.beforeEach(() => {
+        target = getFixture();
         serverData = {
             models: {
                 partner: {
@@ -197,7 +200,7 @@ QUnit.module("Views", (hooks) => {
     QUnit.module("PivotView");
 
     QUnit.test("simple pivot rendering", async function (assert) {
-        assert.expect(3);
+        assert.expect(4);
 
         const pivot = await makeView({
             type: "pivot",
@@ -216,6 +219,7 @@ QUnit.module("Views", (hooks) => {
             },
         });
 
+        assert.hasClass(pivot.el, "o_action o_view_controller");
         assert.hasClass(pivot.el.querySelector("table"), "o_enable_linking");
         assert.containsOnce(
             pivot,
@@ -976,14 +980,14 @@ QUnit.module("Views", (hooks) => {
 
         assert.containsN(pivot, "thead tr", 3);
         let values = ["12", "20", "32"];
-        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), values.join(","));
 
         // unfold it
         await click(pivot.el.querySelector("thead .o_pivot_header_cell_closed:last-child"));
         await click(pivot.el.querySelector(".dropdown-menu span:nth-child(1)"));
         assert.containsN(pivot, "thead tr", 4);
         values = ["12", "3", "17", "32"];
-        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), values.join(","));
     });
 
     QUnit.test(
@@ -1184,7 +1188,7 @@ QUnit.module("Views", (hooks) => {
                 "pivot groupby menu should only have one separator"
             );
             assert.hasClass(
-                items[items.length - 1].nextSibling,
+                items[items.length - 1].nextElementSibling,
                 "dropdown-divider",
                 "pivot groupby menu separator is placed after all menu items"
             );
@@ -1212,12 +1216,12 @@ QUnit.module("Views", (hooks) => {
                 "pivot groupby menu should now have two separators"
             );
             assert.hasClass(
-                items[items.length - 1].previousSibling,
+                items[items.length - 1].previousElementSibling,
                 "dropdown-divider",
                 "last pivot groupby menu item is placed after a separator"
             );
             assert.hasClass(
-                items[items.length - 1].nextSibling,
+                items[items.length - 1].nextElementSibling,
                 "dropdown-divider",
                 "a pivot groupby menu separator is placed after all menu items"
             );
@@ -1675,7 +1679,7 @@ QUnit.module("Views", (hooks) => {
 
         let values = ["32", "12", "20"];
         assert.strictEqual(
-            getCurrentValues(pivot),
+            getCurrentValues(pivot.el),
             values.join(","),
             "should have proper values in cells (total, result 1, result 2)"
         );
@@ -1684,7 +1688,7 @@ QUnit.module("Views", (hooks) => {
 
         values = ["32", "12", "20"];
         assert.strictEqual(
-            getCurrentValues(pivot),
+            getCurrentValues(pivot.el),
             values.join(","),
             "should have proper values in cells (total, result 1, result 2)"
         );
@@ -1693,7 +1697,7 @@ QUnit.module("Views", (hooks) => {
 
         values = ["32", "20", "12"];
         assert.strictEqual(
-            getCurrentValues(pivot),
+            getCurrentValues(pivot.el),
             values.join(","),
             "should have proper values in cells (total, result 1, result 2)"
         );
@@ -1726,7 +1730,7 @@ QUnit.module("Views", (hooks) => {
 
         assert.strictEqual(nbReadGroups, 2, "should have done 2 read_group RPCS");
         assert.strictEqual(
-            getCurrentValues(pivot),
+            getCurrentValues(pivot.el),
             "32,12,20",
             "should have proper values in cells (total, result 1, result 2)"
         );
@@ -1881,10 +1885,8 @@ QUnit.module("Views", (hooks) => {
                 </pivot>`,
         });
 
-        assert.hasAttrValue(
-            pivot.el.querySelector(".o_pivot_download"),
-            "disabled",
-            "disabled",
+        assert.ok(
+            pivot.el.querySelector(".o_pivot_download").disabled,
             "download button should be disabled"
         );
     });
@@ -2087,29 +2089,29 @@ QUnit.module("Views", (hooks) => {
         });
 
         assert.strictEqual(
-            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
             "First"
         );
 
         // Apply both groupbys
-        await toggleGroupByMenu(webClient);
-        await toggleMenuItem(webClient, "Product");
+        await toggleGroupByMenu(target);
+        await toggleMenuItem(target, "Product");
         assert.strictEqual(
-            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
             "xphone"
         );
 
-        await toggleMenuItem(webClient, "Bar");
+        await toggleMenuItem(target, "Bar");
         assert.strictEqual(
-            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
             "Yes"
         );
 
         // remove filter
-        await removeFacet(webClient);
+        await removeFacet(target);
 
         assert.strictEqual(
-            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
             "Yes"
         );
     });
@@ -2146,30 +2148,30 @@ QUnit.module("Views", (hooks) => {
         });
 
         assert.strictEqual(
-            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
             "December 2016"
         );
 
         // Apply BAR groupbys
-        await toggleGroupByMenu(webClient);
-        await toggleMenuItem(webClient, "Bar");
+        await toggleGroupByMenu(target);
+        await toggleMenuItem(target, "Bar");
         assert.strictEqual(
-            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
             "Yes"
         );
 
         // remove groupBy
-        await toggleMenuItem(webClient, "Bar");
+        await toggleMenuItem(target, "Bar");
         assert.strictEqual(
-            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
             "December 2016"
         );
 
         // remove all facets
-        await removeFacet(webClient);
+        await removeFacet(target);
 
         assert.strictEqual(
-            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
             "December 2016"
         );
     });
@@ -2196,32 +2198,32 @@ QUnit.module("Views", (hooks) => {
         });
 
         assert.strictEqual(
-            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
             "Company"
         );
 
         // Let's get rid of the rows groupBy
-        await click(webClient.el, "tbody .o_pivot_header_cell_opened");
+        await click(target, "tbody .o_pivot_header_cell_opened");
 
         assert.strictEqual(
-            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
             "Total"
         );
 
         // Group row by product_id
-        await click(webClient.el, "tbody .o_pivot_header_cell_closed");
-        await click(webClient.el, ".dropdown-menu span:nth-child(5)");
+        await click(target, "tbody .o_pivot_header_cell_closed");
+        await click(target, ".dropdown-menu span:nth-child(5)");
 
         assert.strictEqual(
-            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
             "xphone"
         );
 
         // remove filter
-        await removeFacet(webClient);
+        await removeFacet(target);
 
         assert.strictEqual(
-            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
             "xphone"
         );
     });
@@ -2260,67 +2262,67 @@ QUnit.module("Views", (hooks) => {
             });
 
             assert.strictEqual(
-                webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+                target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
                 "First"
             );
 
             assert.strictEqual(
-                webClient.el.querySelector("thead .o_pivot_header_cell_closed").textContent,
+                target.querySelector("thead .o_pivot_header_cell_closed").textContent,
                 "December 2016"
             );
 
             // activate the unique existing favorite
-            await toggleFavoriteMenu(webClient);
-            await toggleMenuItem(webClient, 0);
+            await toggleFavoriteMenu(target);
+            await toggleMenuItem(target, 0);
 
             assert.strictEqual(
-                webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+                target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
                 "xphone"
             );
 
             assert.strictEqual(
-                webClient.el.querySelector("thead .o_pivot_header_cell_closed").textContent,
+                target.querySelector("thead .o_pivot_header_cell_closed").textContent,
                 "Yes"
             );
 
             // desactivate the unique existing favorite
-            await toggleMenuItem(webClient, 0);
+            await toggleMenuItem(target, 0);
 
             assert.strictEqual(
-                webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+                target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
                 "xphone"
             );
 
             assert.strictEqual(
-                webClient.el.querySelector("thead .o_pivot_header_cell_closed").textContent,
+                target.querySelector("thead .o_pivot_header_cell_closed").textContent,
                 "Yes"
             );
 
             // Let's get rid of the rows and columns groupBy
-            await click(webClient.el, "tbody .o_pivot_header_cell_opened");
-            await click(webClient.el, "thead .o_pivot_header_cell_opened");
+            await click(target, "tbody .o_pivot_header_cell_opened");
+            await click(target, "thead .o_pivot_header_cell_opened");
 
             assert.strictEqual(
-                webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+                target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
                 "Total"
             );
 
             assert.strictEqual(
-                webClient.el.querySelector("thead .o_pivot_header_cell_closed").textContent,
+                target.querySelector("thead .o_pivot_header_cell_closed").textContent,
                 "Total"
             );
 
             // activate AGAIN the unique existing favorite
-            await toggleFavoriteMenu(webClient);
-            await toggleMenuItem(webClient, 0);
+            await toggleFavoriteMenu(target);
+            await toggleMenuItem(target, 0);
 
             assert.strictEqual(
-                webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+                target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
                 "xphone"
             );
 
             assert.strictEqual(
-                webClient.el.querySelector("thead .o_pivot_header_cell_closed").textContent,
+                target.querySelector("thead .o_pivot_header_cell_closed").textContent,
                 "Yes"
             );
         }
@@ -2562,27 +2564,27 @@ QUnit.module("Views", (hooks) => {
         });
 
         let values = ["29", "3", "32", "12", "12", "17", "3", "20"];
-        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), values.join(","));
 
         // expand a col group
         await click(pivot.el.querySelectorAll("thead .o_pivot_header_cell_closed")[1]);
         await click(pivot.el.querySelectorAll("thead .dropdown-menu .dropdown-item")[1]);
 
         values = ["29", "1", "2", "32", "12", "12", "17", "1", "2", "20"];
-        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), values.join(","));
 
         // expand a row group
         await click(pivot.el.querySelectorAll("tbody .o_pivot_header_cell_closed")[1]);
         await click(pivot.el.querySelectorAll("tbody .dropdown-menu .dropdown-item")[3]);
 
         values = ["29", "1", "2", "32", "12", "12", "17", "1", "2", "20", "17", "1", "2", "20"];
-        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), values.join(","));
 
         // reload (should keep folded groups folded as col/row groupbys didn't change)
         await toggleFilterMenu(pivot);
         await toggleMenuItem(pivot, "Dummy Filter");
 
-        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), values.join(","));
 
         await click(pivot.el.querySelector(".o_pivot_expand_button"));
 
@@ -2607,7 +2609,7 @@ QUnit.module("Views", (hooks) => {
             "2",
             "20",
         ];
-        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), values.join(","));
     });
 
     QUnit.test("Empty results keep groupbys", async function (assert) {
@@ -2787,32 +2789,32 @@ QUnit.module("Views", (hooks) => {
         });
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            [...target.querySelectorAll("tbody th")].map((e) => e.innerText),
             ["Total", "xphone", "xpad"]
         );
 
         // flip axis
-        await click(webClient.el.querySelector(".o_pivot_flip_button"));
+        await click(target.querySelector(".o_pivot_flip_button"));
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            [...target.querySelectorAll("tbody th")].map((e) => e.innerText),
             ["Total"]
         );
 
         // select filter "Bayou" in control panel
-        await toggleFilterMenu(webClient);
-        await toggleMenuItem(webClient, "Bayou");
+        await toggleFilterMenu(target);
+        await toggleMenuItem(target, "Bayou");
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            [...target.querySelectorAll("tbody th")].map((e) => e.innerText),
             ["Total", "xphone", "xpad"]
         );
 
         // close row header "Total"
-        await click(webClient.el.querySelector("tbody .o_pivot_header_cell_opened"));
+        await click(target.querySelector("tbody .o_pivot_header_cell_opened"));
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            [...target.querySelectorAll("tbody th")].map((e) => e.innerText),
             ["Total"]
         );
     });
@@ -2837,41 +2839,41 @@ QUnit.module("Views", (hooks) => {
         });
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            [...target.querySelectorAll("tbody th")].map((e) => e.innerText),
             ["Total", "xphone", "xpad"]
         );
 
         // select filter "Bayou" in control panel
-        await toggleFilterMenu(webClient);
-        await toggleMenuItem(webClient, "Bayou");
+        await toggleFilterMenu(target);
+        await toggleMenuItem(target, "Bayou");
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            [...target.querySelectorAll("tbody th")].map((e) => e.innerText),
             ["Total", "xphone", "xpad"]
         );
 
         // flip axis
-        await click(webClient.el.querySelector(".o_pivot_flip_button"));
+        await click(target.querySelector(".o_pivot_flip_button"));
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            [...target.querySelectorAll("tbody th")].map((e) => e.innerText),
             ["Total"]
         );
 
         // unselect filter "Bayou" in control panel
-        await toggleFilterMenu(webClient);
-        await toggleMenuItem(webClient, "Bayou");
+        await toggleFilterMenu(target);
+        await toggleMenuItem(target, "Bayou");
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            [...target.querySelectorAll("tbody th")].map((e) => e.innerText),
             ["Total", "xphone", "xpad"]
         );
 
         // close row header "Total"
-        await click(webClient.el.querySelector("tbody .o_pivot_header_cell_opened"));
+        await click(target.querySelector("tbody .o_pivot_header_cell_opened"));
 
         assert.deepEqual(
-            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            [...target.querySelectorAll("tbody th")].map((e) => e.innerText),
             ["Total"]
         );
     });
@@ -3453,7 +3455,7 @@ QUnit.module("Views", (hooks) => {
             "should have 3 rows: 1 for the open header, and 2 for data"
         );
         let values = ["4", "1", "3"];
-        assert.strictEqual(getCurrentValues(pivot), values.join());
+        assert.strictEqual(getCurrentValues(pivot.el), values.join());
 
         rpcCount = 0;
         await click(pivot.el.querySelector(".o_pivot_flip_button"));
@@ -3462,7 +3464,7 @@ QUnit.module("Views", (hooks) => {
         assert.containsOnce(pivot, "tbody tr", "should have 1 rows: 1 for the main header");
 
         values = ["1", "3", "4"];
-        assert.strictEqual(getCurrentValues(pivot), values.join());
+        assert.strictEqual(getCurrentValues(pivot.el), values.join());
     });
 
     QUnit.test("rendering of pivot view with comparison", async function (assert) {
@@ -3539,7 +3541,7 @@ QUnit.module("Views", (hooks) => {
             "last header row should contains 9 cells (3*[December 2016, November 2016, Variation]"
         );
         let values = ["19", "0", "-100%", "0", "13", "100%", "19", "13", "-31.58%"];
-        assert.strictEqual(getCurrentValues(pivot), values.join());
+        assert.strictEqual(getCurrentValues(pivot.el), values.join());
 
         // with data, with row groupby
         await click(pivot.el.querySelector("tbody .o_pivot_header_cell_closed"));
@@ -3570,7 +3572,7 @@ QUnit.module("Views", (hooks) => {
             "12",
             "100%",
         ];
-        assert.strictEqual(getCurrentValues(pivot), values.join());
+        assert.strictEqual(getCurrentValues(pivot.el), values.join());
 
         await click(pivot.el.querySelector(".o_cp_bottom_left button.dropdown-toggle"));
         await click(
@@ -3605,7 +3607,7 @@ QUnit.module("Views", (hooks) => {
             "1",
             "100%",
         ];
-        assert.strictEqual(getCurrentValues(pivot), values.join());
+        assert.strictEqual(getCurrentValues(pivot.el), values.join());
 
         await click(
             pivot.el.querySelectorAll(".o_cp_bottom_left .dropdown-menu .dropdown-item")[2]
@@ -3639,11 +3641,11 @@ QUnit.module("Views", (hooks) => {
             "1",
             "100%",
         ];
-        assert.strictEqual(getCurrentValues(pivot), values.join());
+        assert.strictEqual(getCurrentValues(pivot.el), values.join());
 
         await click(pivot.el.querySelector("thead .o_pivot_header_cell_opened"));
         values = ["2", "2", "0%", "2", "1", "-50%", "0", "1", "100%"];
-        assert.strictEqual(getCurrentValues(pivot), values.join());
+        assert.strictEqual(getCurrentValues(pivot.el), values.join());
 
         await toggleFavoriteMenu(pivot);
         await toggleSaveFavorite(pivot);
@@ -3708,21 +3710,13 @@ QUnit.module("Views", (hooks) => {
         assert.containsOnce(pivot, "p.o_view_nocontent_empty_folder", "there should be no data");
         // export data should be impossible since the pivot buttons
         // are deactivated (exception: the 'Measures' button).
-        assert.ok(
-            pivot.el
-                .querySelector(".o_control_panel button.o_pivot_download")
-                .getAttribute("disabled")
-        );
+        assert.ok(pivot.el.querySelector(".o_control_panel button.o_pivot_download").disabled);
 
         await toggleFilterMenu(pivot);
         await toggleMenuItem(pivot, "Date");
         await toggleMenuItemOption(pivot, "Date", "December");
         await toggleMenuItemOption(pivot, "Date", "October");
-        assert.notOk(
-            pivot.el
-                .querySelector(".o_control_panel button.o_pivot_download")
-                .getAttribute("disabled")
-        );
+        assert.notOk(pivot.el.querySelector(".o_control_panel button.o_pivot_download").disabled);
 
         // With the data above, the time ranges contain some records.
         // export data. Should execute 'get_file'
@@ -3789,7 +3783,7 @@ QUnit.module("Views", (hooks) => {
         await toggleMenuItem(pivot, "Date: Previous period");
 
         const values = ["0", "4", "100%", "0", "2", "100%", "0", "2", "100%"];
-        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), values.join(","));
         assert.containsN(
             pivot,
             ".o_pivot_header_cell_closed",
@@ -3867,7 +3861,7 @@ QUnit.module("Views", (hooks) => {
                 "1",
                 "100%",
             ];
-            assert.strictEqual(getCurrentValues(pivot), values.join());
+            assert.strictEqual(getCurrentValues(pivot.el), values.join());
 
             // click on 'Foo' in column Total/Company (should sort by the period of interest, ASC)
             await click(pivot.el.querySelector(".o_pivot_measure_row"));
@@ -3906,7 +3900,7 @@ QUnit.module("Views", (hooks) => {
                 "0",
                 "-100%",
             ];
-            assert.strictEqual(getCurrentValues(pivot), values.join());
+            assert.strictEqual(getCurrentValues(pivot.el), values.join());
 
             // click again on 'Foo' in column Total/Company (should sort by the period of interest, DESC)
             await click(pivot.el.querySelector(".o_pivot_measure_row"));
@@ -3945,7 +3939,7 @@ QUnit.module("Views", (hooks) => {
                 "1",
                 "100%",
             ];
-            assert.strictEqual(getCurrentValues(pivot), values.join());
+            assert.strictEqual(getCurrentValues(pivot.el), values.join());
 
             // click on 'This Month' in column Total/Individual/Foo
             await click(pivot.el.querySelectorAll(".o_pivot_origin_row")[3]);
@@ -3984,7 +3978,7 @@ QUnit.module("Views", (hooks) => {
                 "0",
                 "-100%",
             ];
-            assert.strictEqual(getCurrentValues(pivot), values.join());
+            assert.strictEqual(getCurrentValues(pivot.el), values.join());
 
             // click on 'Previous Period' in column Total/Individual/Foo
             await click(pivot.el.querySelectorAll(".o_pivot_origin_row")[4]);
@@ -4023,7 +4017,7 @@ QUnit.module("Views", (hooks) => {
                 "1",
                 "100%",
             ];
-            assert.strictEqual(getCurrentValues(pivot), values.join());
+            assert.strictEqual(getCurrentValues(pivot.el), values.join());
 
             // click on 'Variation' in column Total/Foo
             await click(pivot.el.querySelectorAll(".o_pivot_origin_row")[8]);
@@ -4062,7 +4056,7 @@ QUnit.module("Views", (hooks) => {
                 "1",
                 "100%",
             ];
-            assert.strictEqual(getCurrentValues(pivot), values.join());
+            assert.strictEqual(getCurrentValues(pivot.el), values.join());
         }
     );
 
@@ -4151,18 +4145,16 @@ QUnit.module("Views", (hooks) => {
                 views: [[false, "pivot"]],
             });
 
-            await toggleFilterMenu(webClient);
-            await toggleMenuItem(webClient, 0);
+            await toggleFilterMenu(target);
+            await toggleMenuItem(target, 0);
             await nextTick();
 
-            await click(webClient.el.querySelectorAll(".o_pivot_cell_value")[1]);
+            await click(target.querySelectorAll(".o_pivot_cell_value")[1]);
             await legacyExtraNextTick();
 
-            assert.containsOnce(webClient, ".o_list_view");
+            assert.containsOnce(target, ".o_list_view");
 
-            await click(
-                webClient.el.querySelector(".o_control_panel ol.breadcrumb li.breadcrumb-item")
-            );
+            await click(target.querySelector(".o_control_panel ol.breadcrumb li.breadcrumb-item"));
 
             assert.verifySteps([
                 "read_group",
@@ -4245,7 +4237,7 @@ QUnit.module("Views", (hooks) => {
                 "1",
                 "100%",
             ];
-            assert.strictEqual(getCurrentValues(pivot), values.join());
+            assert.strictEqual(getCurrentValues(pivot.el), values.join());
 
             // flip table
             await click(pivot.el.querySelector(".o_pivot_flip_button"));
@@ -4285,7 +4277,7 @@ QUnit.module("Views", (hooks) => {
                 "1",
                 "-50%",
             ];
-            assert.strictEqual(getCurrentValues(pivot), values.join());
+            assert.strictEqual(getCurrentValues(pivot.el), values.join());
         }
     );
 
@@ -4619,7 +4611,7 @@ QUnit.module("Views", (hooks) => {
             "18", // Second
             "14", // First
         ];
-        assert.strictEqual(getCurrentValues(pivot), values.join());
+        assert.strictEqual(getCurrentValues(pivot.el), values.join());
     });
 
     QUnit.test("pivot rendering with boolean field", async function (assert) {
@@ -4686,7 +4678,7 @@ QUnit.module("Views", (hooks) => {
             resModel: "partner",
             serverData,
             context: { search_default_small_than_0: true },
-            noContentHelp: '<p class="abc">click to add a foo</p>',
+            noContentHelp: markup('<p class="abc">click to add a foo</p>'),
             config: {
                 views: [[false, "search"]],
             },
@@ -4719,7 +4711,7 @@ QUnit.module("Views", (hooks) => {
             resModel: "partner",
             serverData,
             context: { search_default_small_than_0: true },
-            noContentHelp: '<p class="abc">click to add a foo</p>',
+            noContentHelp: markup('<p class="abc">click to add a foo</p>'),
             config: {
                 views: [[false, "search"]],
             },
@@ -4754,7 +4746,7 @@ QUnit.module("Views", (hooks) => {
             type: "pivot",
             resModel: "partner",
             serverData,
-            noContentHelp: '<p class="abc">click to add a foo</p>',
+            noContentHelp: markup('<p class="abc">click to add a foo</p>'),
             config: {
                 views: [[false, "search"]],
             },
@@ -4797,23 +4789,23 @@ QUnit.module("Views", (hooks) => {
             ],
         });
 
-        assert.containsOnce(webClient, ".o_pivot_view");
-        assert.strictEqual(getCurrentValues(webClient), ["4", "2", "2"].join(","));
+        assert.containsOnce(target, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(target), ["4", "2", "2"].join(","));
 
         assert.verifySteps(["/web/webclient/load_menus", "load_views", "read_group", "read_group"]);
 
         // switch to list view
-        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_list"));
+        await click(target.querySelector(".o_control_panel .o_switch_view.o_list"));
         await legacyExtraNextTick();
 
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
         assert.verifySteps(["/web/dataset/search_read"]);
 
         // switch back to pivot
-        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_pivot"));
+        await click(target.querySelector(".o_control_panel .o_switch_view.o_pivot"));
 
-        assert.containsOnce(webClient, ".o_pivot_view");
-        assert.strictEqual(getCurrentValues(webClient), ["4", "2", "2"].join(","));
+        assert.containsOnce(target, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(target), ["4", "2", "2"].join(","));
 
         assert.verifySteps(["read_group", "read_group"]);
     });
@@ -4839,26 +4831,26 @@ QUnit.module("Views", (hooks) => {
             ],
         });
 
-        assert.containsOnce(webClient, ".o_pivot_view");
-        assert.strictEqual(getCurrentValues(webClient), ["4", "2", "2"].join(","));
+        assert.containsOnce(target, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(target), ["4", "2", "2"].join(","));
 
         // drill down first row group (group by company_type)
-        await click(webClient.el.querySelector("tbody .o_pivot_header_cell_closed"));
-        await click(webClient.el.querySelector(".o_pivot .dropdown-menu .dropdown-item"));
+        await click(target.querySelector("tbody .o_pivot_header_cell_closed"));
+        await click(target.querySelector(".o_pivot .dropdown-menu .dropdown-item"));
 
-        assert.strictEqual(getCurrentValues(webClient), ["4", "2", "1", "1", "2"].join(","));
+        assert.strictEqual(getCurrentValues(target), ["4", "2", "1", "1", "2"].join(","));
 
         // switch to list view
-        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_list"));
+        await click(target.querySelector(".o_control_panel .o_switch_view.o_list"));
         await legacyExtraNextTick();
 
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
 
         // switch back to pivot
-        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_pivot"));
+        await click(target.querySelector(".o_control_panel .o_switch_view.o_pivot"));
 
-        assert.containsOnce(webClient, ".o_pivot_view");
-        assert.strictEqual(getCurrentValues(webClient), ["4", "2", "1", "1", "2"].join(","));
+        assert.containsOnce(target, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(target), ["4", "2", "1", "1", "2"].join(","));
     });
 
     QUnit.test("sorted rows are kept when leaving and coming back", async function (assert) {
@@ -4883,26 +4875,26 @@ QUnit.module("Views", (hooks) => {
             ],
         });
 
-        assert.containsOnce(webClient, ".o_pivot_view");
-        assert.strictEqual(getCurrentValues(webClient), ["32", "12", "20"].join(","));
+        assert.containsOnce(target, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(target), ["32", "12", "20"].join(","));
 
         // sort the first group
-        await click(webClient.el.querySelector("th.o_pivot_measure_row"));
-        await click(webClient.el.querySelector("th.o_pivot_measure_row"));
+        await click(target.querySelector("th.o_pivot_measure_row"));
+        await click(target.querySelector("th.o_pivot_measure_row"));
 
-        assert.strictEqual(getCurrentValues(webClient), ["32", "20", "12"].join(","));
+        assert.strictEqual(getCurrentValues(target), ["32", "20", "12"].join(","));
 
         // switch to list view
-        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_list"));
+        await click(target.querySelector(".o_control_panel .o_switch_view.o_list"));
         await legacyExtraNextTick();
 
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
 
         // switch back to pivot
-        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_pivot"));
+        await click(target.querySelector(".o_control_panel .o_switch_view.o_pivot"));
 
-        assert.containsOnce(webClient, ".o_pivot_view");
-        assert.strictEqual(getCurrentValues(webClient), ["32", "20", "12"].join(","));
+        assert.containsOnce(target, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(target), ["32", "20", "12"].join(","));
     });
 
     QUnit.test("correctly handle concurrent reloads", async function (assert) {
@@ -4938,24 +4930,24 @@ QUnit.module("Views", (hooks) => {
             ],
         });
 
-        assert.containsOnce(webClient, ".o_pivot_view");
-        assert.strictEqual(getCurrentValues(webClient), ["32", "12", "20"].join(","));
+        assert.containsOnce(target, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(target), ["32", "12", "20"].join(","));
 
         // drill down first row group (group by company_type)
-        await click(webClient.el.querySelector("tbody .o_pivot_header_cell_closed"));
-        await click(webClient.el.querySelector(".o_pivot .dropdown-menu .dropdown-item"));
+        await click(target.querySelector("tbody .o_pivot_header_cell_closed"));
+        await click(target.querySelector(".o_pivot .dropdown-menu .dropdown-item"));
 
-        assert.strictEqual(getCurrentValues(webClient), ["32", "12", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(target), ["32", "12", "12", "20"].join(","));
 
         // reload twice by clicking on pivot view switcher
         def = makeDeferred();
-        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_pivot"));
-        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_pivot"));
+        await click(target.querySelector(".o_control_panel .o_switch_view.o_pivot"));
+        await click(target.querySelector(".o_control_panel .o_switch_view.o_pivot"));
 
         def.resolve();
         await nextTick();
 
-        assert.strictEqual(getCurrentValues(webClient), ["32", "12", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(target), ["32", "12", "12", "20"].join(","));
     });
 
     QUnit.test("consecutively toggle several measures", async function (assert) {
@@ -4977,22 +4969,22 @@ QUnit.module("Views", (hooks) => {
             },
         });
 
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
         // Toggle several measures (the reload is blocked, so all measures should be toggled in once)
         def = makeDeferred();
         await toggleMenu(pivot, "Measures");
         await toggleMenuItem(pivot, "Product"); // add product
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
         await toggleMenuItem(pivot, "Foo"); // remove foo
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
         await toggleMenuItem(pivot, "Count"); // add count
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
         def.resolve();
         await nextTick();
 
-        assert.strictEqual(getCurrentValues(pivot), ["2", "4", "1", "1", "1", "3"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["2", "4", "1", "1", "1", "3"].join(","));
     });
 
     QUnit.test("flip axis while loading a filter", async function (assert) {
@@ -5019,22 +5011,22 @@ QUnit.module("Views", (hooks) => {
         });
 
         const values = ["29", "1", "2", "32", "12", "12", "17", "1", "2", "20"];
-        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), values.join(","));
 
         // Set a domain (this reload is delayed)
         def = makeDeferred();
         await toggleFilterMenu(pivot);
         await toggleMenuItem(pivot, "My Filter");
-        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), values.join(","));
 
         // Flip axis
         await click(pivot.el.querySelector(".o_pivot_flip_button"));
-        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), values.join(","));
 
         def.resolve();
         await nextTick();
 
-        assert.strictEqual(getCurrentValues(pivot), ["20", "1", "17", "2"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["20", "1", "17", "2"].join(","));
     });
 
     QUnit.test("sort rows while loading a filter", async function (assert) {
@@ -5059,23 +5051,23 @@ QUnit.module("Views", (hooks) => {
             },
         });
 
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
         // Set a domain (this reload is delayed)
         def = makeDeferred();
         await toggleFilterMenu(pivot);
         await toggleMenuItem(pivot, "My Filter");
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
         // Sort rows (this operation should be ignored as it concerns the old
         // table, which will be replaced soon)
         await click(pivot.el.querySelector("th.o_pivot_measure_row"));
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
         def.resolve();
         await nextTick();
 
-        assert.strictEqual(getCurrentValues(pivot), ["20", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["20", "20"].join(","));
     });
 
     QUnit.test("close a group while loading a filter", async function (assert) {
@@ -5100,23 +5092,23 @@ QUnit.module("Views", (hooks) => {
             },
         });
 
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
         // Set a domain (this reload is delayed)
         def = makeDeferred();
         await toggleFilterMenu(pivot);
         await toggleMenuItem(pivot, "My Filter");
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
         // Close a group (this operation should be ignored as it concerns the old
         // table, which will be replaced soon)
         await click(pivot.el.querySelector("tbody .o_pivot_header_cell_opened"));
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
         def.resolve();
         await nextTick();
 
-        assert.strictEqual(getCurrentValues(pivot), ["20", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["20", "20"].join(","));
     });
 
     QUnit.test("add a groupby while loading a filter", async function (assert) {
@@ -5141,24 +5133,24 @@ QUnit.module("Views", (hooks) => {
             },
         });
 
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
         // Set a domain (this reload is delayed)
         def = makeDeferred();
         await toggleFilterMenu(pivot);
         await toggleMenuItem(pivot, "My Filter");
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
         // Add a groupby (this operation should be ignored as it concerns the old
         // table, which will be replaced soon)
         await click(pivot.el.querySelector("thead .o_pivot_header_cell_closed"));
         await click(pivot.el.querySelector("thead .dropdown-menu .dropdown-item"));
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
         def.resolve();
         await nextTick();
 
-        assert.strictEqual(getCurrentValues(pivot), ["20", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["20", "20"].join(","));
     });
 
     QUnit.test("expand a group while loading a filter", async function (assert) {
@@ -5187,23 +5179,23 @@ QUnit.module("Views", (hooks) => {
         await click(pivot.el.querySelector("tbody .o_pivot_header_cell_closed"));
         await click(pivot.el.querySelector("tbody .dropdown-menu .dropdown-item"));
 
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "12", "20"].join(","));
 
         // Set a domain (this reload is delayed)
         def = makeDeferred();
         await toggleFilterMenu(pivot);
         await toggleMenuItem(pivot, "My Filter");
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "12", "20"].join(","));
 
         // Expand a group (this operation should be ignored as it concerns the old
         // table, which will be replaced soon)
         await click(pivot.el.querySelectorAll("tbody .o_pivot_header_cell_closed")[1]);
-        assert.strictEqual(getCurrentValues(pivot), ["32", "12", "12", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "12", "20"].join(","));
 
         def.resolve();
         await nextTick();
 
-        assert.strictEqual(getCurrentValues(pivot), ["20", "20"].join(","));
+        assert.strictEqual(getCurrentValues(pivot.el), ["20", "20"].join(","));
     });
 
     QUnit.test(
@@ -5230,25 +5222,25 @@ QUnit.module("Views", (hooks) => {
                 },
             });
 
-            assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+            assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
             // Set a domain (this reload is delayed)
             def = makeDeferred();
             await toggleFilterMenu(pivot);
             await toggleMenuItem(pivot, "My Filter");
 
-            assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+            assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
             // Toggle a measure
             await toggleMenu(pivot, "Measures");
             await toggleMenuItem(pivot, "Count");
 
-            assert.strictEqual(getCurrentValues(pivot), ["32", "12", "20"].join(","));
+            assert.strictEqual(getCurrentValues(pivot.el), ["32", "12", "20"].join(","));
 
             def.resolve();
             await nextTick();
 
-            assert.strictEqual(getCurrentValues(pivot), ["12", "1", "12", "1"].join(","));
+            assert.strictEqual(getCurrentValues(pivot.el), ["12", "1", "12", "1"].join(","));
         }
     );
 
@@ -5388,7 +5380,7 @@ QUnit.module("Views", (hooks) => {
             );
 
             const values = ["1", "1", "0%", "1", "1", "0%", "1", "0", "-100%", "0", "1", "100%"];
-            assert.strictEqual(getCurrentValues(pivot), values.join());
+            assert.strictEqual(getCurrentValues(pivot.el), values.join());
         }
     );
 });
diff --git a/addons/web/static/tests/views/view_tests.js b/addons/web/static/tests/views/view_tests.js
index 761d3641b22..bb919b3a0d3 100644
--- a/addons/web/static/tests/views/view_tests.js
+++ b/addons/web/static/tests/views/view_tests.js
@@ -5,6 +5,7 @@ import {
     click,
     getFixture,
     makeDeferred,
+    mount,
     nextTick,
     patchWithCleanup,
 } from "@web/../tests/helpers/utils";
@@ -15,7 +16,7 @@ import { OnboardingBanner } from "@web/views/onboarding_banner";
 import { View } from "@web/views/view";
 import { actionService } from "@web/webclient/actions/action_service";
 
-const { Component, mount, useState, xml } = owl;
+const { Component, useState, xml } = owl;
 
 const serviceRegistry = registry.category("services");
 const viewRegistry = registry.category("views");
@@ -110,14 +111,15 @@ QUnit.module("Views", (hooks) => {
     ////////////////////////////////////////////////////////////////////////////
 
     QUnit.test("simple rendering", async function (assert) {
-        assert.expect(10);
+        assert.expect(11);
 
         const ToyView = viewRegistry.get("toy");
         patchWithCleanup(ToyView.prototype, {
             setup() {
                 this._super();
-                const { arch, fields, info } = this.props;
+                const { arch, fields, info, className } = this.props;
                 assert.strictEqual(arch, serverData.views["animal,false,toy"]);
+                assert.strictEqual(className, "o_action o_view_controller");
                 assert.deepEqual(fields, serverData.models.animal.fields);
                 assert.strictEqual(info.actionMenus, undefined);
                 assert.strictEqual(this.env.config.viewId, false);
@@ -139,7 +141,7 @@ QUnit.module("Views", (hooks) => {
             resModel: "animal",
             type: "toy",
         });
-        assert.hasClass(view.el, "o_action o_view_controller o_toy_view");
+        assert.hasClass(view.el, "o_toy_view");
         assert.strictEqual(view.el.innerHTML, serverData.views["animal,false,toy"]);
     });
 
@@ -1280,7 +1282,7 @@ QUnit.module("Views", (hooks) => {
         const target = getFixture();
         const props = { resModel: "animal", type: "toy", arch: "<toy/>" };
         try {
-            await mount(View, { env, props, target });
+            await mount(View, target, { env, props });
         } catch (error) {
             assert.step(error.message);
         }
@@ -1366,21 +1368,6 @@ QUnit.module("Views", (hooks) => {
         }
     );
 
-    QUnit.test("empty prop 'noContentHelp'", async function (assert) {
-        assert.expect(1);
-
-        class ToyView extends Component {
-            setup() {
-                assert.strictEqual(this.props.info.noContentHelp, undefined);
-            }
-        }
-        ToyView.template = xml`<div/>`;
-        ToyView.type = "toy";
-        viewRegistry.add("toy", ToyView, { force: true });
-
-        await makeView({ serverData, resModel: "animal", type: "toy", noContentHelp: "  " });
-    });
-
     QUnit.test("non empty prop 'noContentHelp'", async function (assert) {
         assert.expect(1);
 
@@ -1559,11 +1546,13 @@ QUnit.module("Views", (hooks) => {
         assert.expect(2);
 
         class ToyView extends Component {
-            willStart() {
-                assert.deepEqual(this.props.domain, [["type", "=", "carnivorous"]]);
-            }
-            willUpdateProps(nextProps) {
-                assert.deepEqual(nextProps.domain, [["type", "=", "herbivorous"]]);
+            setup() {
+                owl.onWillStart(() => {
+                    assert.deepEqual(this.props.domain, [["type", "=", "carnivorous"]]);
+                });
+                owl.onWillUpdateProps((nextProps) => {
+                    assert.deepEqual(nextProps.domain, [["type", "=", "herbivorous"]]);
+                });
             }
         }
         ToyView.template = xml`<div/>`;
@@ -1571,7 +1560,6 @@ QUnit.module("Views", (hooks) => {
         viewRegistry.add("toy", ToyView, { force: true });
 
         const env = await makeTestEnv({ serverData });
-        const target = getFixture();
 
         class Parent extends Component {
             setup() {
@@ -1585,12 +1573,11 @@ QUnit.module("Views", (hooks) => {
         Parent.template = xml`<View t-props="state"/>`;
         Parent.components = { View };
 
-        const parent = await mount(Parent, { env, target });
+        const target = getFixture();
+        const parent = await mount(Parent, target, { env });
 
         parent.state.domain = [["type", "=", "herbivorous"]];
 
         await nextTick();
-
-        parent.destroy();
     });
 });
diff --git a/addons/web/static/tests/webclient/actions/client_action_tests.js b/addons/web/static/tests/webclient/actions/client_action_tests.js
index 149160eccd7..cf2abfb8583 100644
--- a/addons/web/static/tests/webclient/actions/client_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/client_action_tests.js
@@ -6,17 +6,19 @@ import core from "web.core";
 import AbstractAction from "web.AbstractAction";
 import testUtils from "web.test_utils";
 import { registerCleanup } from "../../helpers/cleanup";
-import { click, legacyExtraNextTick, patchWithCleanup } from "../../helpers/utils";
+import { click, getFixture, legacyExtraNextTick, patchWithCleanup } from "../../helpers/utils";
 import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
 
 const { Component, xml } = owl;
 
 let serverData;
+let target;
 const actionRegistry = registry.category("actions");
 
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
         serverData = getActionManagerServerData();
+        target = getFixture();
     });
 
     QUnit.module("Client Actions");
@@ -30,22 +32,22 @@ QUnit.module("ActionManager", (hooks) => {
             tag: "__test__client__action__",
             type: "ir.actions.client",
         });
-        assert.containsOnce(webClient, ".modal .test_client_action");
-        assert.strictEqual(webClient.el.querySelector(".modal-title").textContent, "Dialog Test");
+        assert.containsOnce(target, ".modal .test_client_action");
+        assert.strictEqual(target.querySelector(".modal-title").textContent, "Dialog Test");
     });
 
     QUnit.test("can display client actions as main, then in Dialog", async function (assert) {
         assert.expect(3);
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, "__test__client__action__");
-        assert.containsOnce(webClient, ".o_action_manager .test_client_action");
+        assert.containsOnce(target, ".o_action_manager .test_client_action");
         await doAction(webClient, {
             target: "new",
             tag: "__test__client__action__",
             type: "ir.actions.client",
         });
-        assert.containsOnce(webClient, ".o_action_manager .test_client_action");
-        assert.containsOnce(webClient, ".modal .test_client_action");
+        assert.containsOnce(target, ".o_action_manager .test_client_action");
+        assert.containsOnce(target, ".modal .test_client_action");
     });
 
     QUnit.test(
@@ -58,11 +60,11 @@ QUnit.module("ActionManager", (hooks) => {
                 tag: "__test__client__action__",
                 type: "ir.actions.client",
             });
-            assert.containsOnce(webClient, ".test_client_action");
-            assert.containsOnce(webClient, ".modal .test_client_action");
+            assert.containsOnce(target, ".test_client_action");
+            assert.containsOnce(target, ".modal .test_client_action");
             await doAction(webClient, "__test__client__action__");
-            assert.containsOnce(webClient, ".test_client_action");
-            assert.containsNone(webClient, ".modal .test_client_action");
+            assert.containsOnce(target, ".test_client_action");
+            assert.containsNone(target, ".modal .test_client_action");
         }
     );
 
@@ -88,7 +90,7 @@ QUnit.module("ActionManager", (hooks) => {
             "shouldn't have rendered a control panel"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_client_action_test").text(),
+            $(target).find(".o_client_action_test").text(),
             "Hello World",
             "should have correctly rendered the client action"
         );
@@ -112,7 +114,7 @@ QUnit.module("ActionManager", (hooks) => {
             "shouldn't have rendered a control panel"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_client_action_test").text(),
+            $(target).find(".o_client_action_test").text(),
             "Hello World",
             "should have correctly rendered the client action"
         );
@@ -128,7 +130,7 @@ QUnit.module("ActionManager", (hooks) => {
         });
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, "my_action");
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsOnce(target, ".o_kanban_view");
     });
 
     QUnit.test(
@@ -141,7 +143,7 @@ QUnit.module("ActionManager", (hooks) => {
             });
 
             const webClient = await createWebClient({ serverData });
-            webClient.env.bus.on("CLEAR-UNCOMMITTED-CHANGES", webClient, () => {
+            webClient.env.bus.addEventListener("CLEAR-UNCOMMITTED-CHANGES", () => {
                 assert.step("CLEAR-UNCOMMITTED-CHANGES");
             });
 
@@ -172,7 +174,7 @@ QUnit.module("ActionManager", (hooks) => {
             "should have rendered a control panel"
         );
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             1,
             "there should be one controller in the breadcrumbs"
@@ -183,7 +185,7 @@ QUnit.module("ActionManager", (hooks) => {
             "breadcrumbs should still display the title of the controller"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_client_action_test .o_content").text(),
+            $(target).find(".o_client_action_test .o_content").text(),
             "Hello World",
             "should have correctly rendered the client action"
         );
@@ -243,11 +245,7 @@ QUnit.module("ActionManager", (hooks) => {
         registerCleanup(() => delete core.action_registry.map.HelloWorldTest);
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, "HelloWorldTest");
-        assert.containsOnce(
-            webClient.el,
-            ".custom-control-panel",
-            "should have a custom control panel"
-        );
+        assert.containsOnce(target, ".custom-control-panel", "should have a custom control panel");
     });
 
     QUnit.test("breadcrumb is updated on title change (legacy)", async function (assert) {
@@ -275,7 +273,7 @@ QUnit.module("ActionManager", (hooks) => {
             "initial title",
             "should have initial title as breadcrumb content"
         );
-        await testUtils.dom.click($(webClient.el).find(".o_client_action_test"));
+        await testUtils.dom.click($(target).find(".o_client_action_test"));
         await legacyExtraNextTick();
         assert.strictEqual(
             $("ol.breadcrumb").text(),
@@ -312,15 +310,15 @@ QUnit.module("ActionManager", (hooks) => {
         core.action_registry.add("ClientAction2", ClientAction2);
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, "ClientAction");
-        assert.containsOnce(webClient.el, ".breadcrumb-item");
+        assert.containsOnce(target, ".breadcrumb-item");
         assert.strictEqual(
-            webClient.el.querySelector(".breadcrumb-item.active").textContent,
+            target.querySelector(".breadcrumb-item.active").textContent,
             "Goldeneye"
         );
         await doAction(webClient, "ClientAction2", { clearBreadcrumbs: false });
-        assert.containsN(webClient.el, ".breadcrumb-item", 2);
+        assert.containsN(target, ".breadcrumb-item", 2);
         assert.strictEqual(
-            webClient.el.querySelector(".breadcrumb-item.active").textContent,
+            target.querySelector(".breadcrumb-item.active").textContent,
             "No time for sweetness"
         );
         delete core.action_registry.map.ClientAction;
@@ -335,9 +333,9 @@ QUnit.module("ActionManager", (hooks) => {
                 const { breadcrumbs } = this.env.config;
                 assert.strictEqual(breadcrumbs.length, 2);
                 assert.strictEqual(breadcrumbs[0].name, "Favorite Ponies");
-            }
-            mounted() {
-                this.env.config.setDisplayName(this.breadcrumbTitle);
+                owl.onMounted(() => {
+                    this.env.config.setDisplayName(this.breadcrumbTitle);
+                });
             }
             onClick() {
                 this.breadcrumbTitle = "newOwlTitle";
@@ -349,11 +347,11 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 8);
         await doAction(webClient, "OwlClientAction");
-        assert.containsOnce(webClient.el, ".my_owl_action");
-        await click(webClient.el, ".my_owl_action");
+        assert.containsOnce(target, ".my_owl_action");
+        await click(target, ".my_owl_action");
         await doAction(webClient, 3);
         assert.strictEqual(
-            webClient.el.querySelector(".breadcrumb").textContent,
+            target.querySelector(".breadcrumb").textContent,
             "Favorite PoniesnewOwlTitlePartners"
         );
     });
@@ -393,7 +391,7 @@ QUnit.module("ActionManager", (hooks) => {
         assert.expect(6);
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 1);
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsOnce(target, ".o_kanban_view");
         await doAction(webClient, {
             type: "ir.actions.client",
             tag: "display_notification",
@@ -420,7 +418,7 @@ QUnit.module("ActionManager", (hooks) => {
             "message",
             "the notification should have the correct message"
         );
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsOnce(target, ".o_kanban_view");
         await testUtils.dom.click(notificationElement.querySelector(".o_notification_close"));
         assert.containsNone(
             document.body,
@@ -433,7 +431,7 @@ QUnit.module("ActionManager", (hooks) => {
         assert.expect(8);
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 1);
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsOnce(target, ".o_kanban_view");
         await doAction(webClient, {
             type: "ir.actions.client",
             tag: "display_notification",
@@ -466,7 +464,7 @@ QUnit.module("ActionManager", (hooks) => {
             "message test <R&D> <R&D>",
             "the notification should have the correct message"
         );
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsOnce(target, ".o_kanban_view");
         await testUtils.dom.click(notificationElement.querySelector(".o_notification_close"));
         assert.containsNone(
             document.body,
diff --git a/addons/web/static/tests/webclient/actions/close_action_tests.js b/addons/web/static/tests/webclient/actions/close_action_tests.js
index 0437384464e..77d38da3fd4 100644
--- a/addons/web/static/tests/webclient/actions/close_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/close_action_tests.js
@@ -1,7 +1,13 @@
 /** @odoo-module **/
 
 import testUtils from "web.test_utils";
-import { click, legacyExtraNextTick, nextTick, patchWithCleanup } from "../../helpers/utils";
+import {
+    click,
+    getFixture,
+    legacyExtraNextTick,
+    nextTick,
+    patchWithCleanup,
+} from "../../helpers/utils";
 import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
 import FormController from "web.FormController";
 import { makeFakeUserService } from "@web/../tests/helpers/mock_services";
@@ -12,10 +18,11 @@ import { registry } from "@web/core/registry";
 const serviceRegistry = registry.category("services");
 
 let serverData;
-
+let target;
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
         serverData = getActionManagerServerData();
+        target = getFixture();
     });
 
     QUnit.module('"ir.actions.act_window_close" actions');
@@ -45,11 +52,9 @@ QUnit.module("ActionManager", (hooks) => {
             assert.step("on_close");
         }
         await doAction(webClient, 5, { onClose });
-        assert.containsOnce(webClient.el, ".o_dialog_container .o_dialog");
-        await click(
-            webClient.el.querySelector(".o_dialog_container .o_dialog .modal-header button")
-        );
-        assert.containsNone(webClient.el, ".o_dialog_container .o_dialog");
+        assert.containsOnce(target, ".o_dialog_container .o_dialog");
+        await click(target.querySelector(".o_dialog_container .o_dialog .modal-header button"));
+        assert.containsNone(target, ".o_dialog_container .o_dialog");
         assert.verifySteps(["on_close"]);
 
         // execute an 'ir.actions.act_window_close' action
@@ -114,11 +119,11 @@ QUnit.module("ActionManager", (hooks) => {
         }
         // open a new dialog form
         await doAction(webClient, 5, { onClose });
-        assert.containsOnce(webClient.el, ".modal");
+        assert.containsOnce(target, ".modal");
         controller.trigger_up("history_back");
         assert.verifySteps(["on_close"], "should have called the on_close handler");
         await nextTick();
-        assert.containsNone(webClient.el, ".modal");
+        assert.containsNone(target, ".modal");
     });
 
     QUnit.test("history back called within on_close", async function (assert) {
@@ -133,9 +138,9 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
 
         await doAction(webClient, 1);
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsOnce(target, ".o_kanban_view");
         await doAction(webClient, 3);
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
 
         function onClose() {
             controller.trigger_up("history_back");
@@ -144,12 +149,12 @@ QUnit.module("ActionManager", (hooks) => {
         // open a new dialog form
         await doAction(webClient, 5, { onClose });
 
-        await click(webClient.el, ".modal-header button.close");
+        await click(target, ".modal-header button.close");
         await nextTick();
         await legacyExtraNextTick();
-        assert.containsNone(webClient, ".modal");
-        assert.containsNone(webClient, ".o_list_view");
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsNone(target, ".modal");
+        assert.containsNone(target, ".o_list_view");
+        assert.containsOnce(target, ".o_kanban_view");
         assert.verifySteps(["on_close"]);
     });
 
@@ -167,20 +172,20 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 1); // kanban
             await doAction(webClient, 3); // list
-            assert.containsOnce(webClient.el, ".o_list_view");
+            assert.containsOnce(target, ".o_list_view");
             function onClose() {
                 assert.step("on_close");
             }
             // open a new dialog form
             await doAction(webClient, 5, { onClose });
-            assert.containsOnce(webClient.el, ".modal");
-            assert.containsOnce(webClient.el, ".o_list_view");
+            assert.containsOnce(target, ".modal");
+            assert.containsOnce(target, ".o_list_view");
             controller.trigger_up("history_back");
             assert.verifySteps(["on_close"], "should have called the on_close handler");
             await nextTick();
             await legacyExtraNextTick();
-            assert.containsOnce(webClient.el, ".o_list_view");
-            assert.containsNone(webClient.el, ".modal");
+            assert.containsOnce(target, ".o_list_view");
+            assert.containsNone(target, ".modal");
         }
     );
 
@@ -207,20 +212,20 @@ QUnit.module("ActionManager", (hooks) => {
                 type: "ir.actions.act_window",
                 views: [[false, "pivot"]],
             }); // pivot
-            assert.containsOnce(webClient.el, ".o_pivot_view");
+            assert.containsOnce(target, ".o_pivot_view");
             function onClose() {
                 assert.step("on_close");
             }
             // open a new dialog form
             await doAction(webClient, 5, { onClose });
-            assert.containsOnce(webClient.el, ".modal");
-            assert.containsOnce(webClient.el, ".o_pivot_view");
+            assert.containsOnce(target, ".modal");
+            assert.containsOnce(target, ".o_pivot_view");
             pivot.env.config.historyBack();
             assert.verifySteps(["on_close"], "should have called the on_close handler");
             await nextTick();
             await legacyExtraNextTick();
-            assert.containsOnce(webClient.el, ".o_pivot_view");
-            assert.containsNone(webClient.el, ".modal");
+            assert.containsOnce(target, ".o_pivot_view");
+            assert.containsNone(target, ".modal");
         }
     );
 
@@ -236,15 +241,15 @@ QUnit.module("ActionManager", (hooks) => {
         await doAction(webClient, 3);
         // open first record in form view. this will crash and will not
         // display a form view
-        await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
         await legacyExtraNextTick();
         readOnFirstRecordDef.reject("not working as intended");
         await nextTick();
-        assert.containsOnce(webClient, ".o_list_view", "there should still be a list view in dom");
+        assert.containsOnce(target, ".o_list_view", "there should still be a list view in dom");
         // open another record, the read will not crash
-        await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:eq(2)"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:eq(2)"));
         await legacyExtraNextTick();
-        assert.containsNone(webClient, ".o_list_view", "there should not be a list view in dom");
-        assert.containsOnce(webClient, ".o_form_view", "there should be a form view in dom");
+        assert.containsNone(target, ".o_list_view", "there should not be a list view in dom");
+        assert.containsOnce(target, ".o_form_view", "there should be a form view in dom");
     });
 });
diff --git a/addons/web/static/tests/webclient/actions/concurrency_tests.js b/addons/web/static/tests/webclient/actions/concurrency_tests.js
index 0ce2508781a..cff525efdec 100644
--- a/addons/web/static/tests/webclient/actions/concurrency_tests.js
+++ b/addons/web/static/tests/webclient/actions/concurrency_tests.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { click, makeDeferred } from "@web/../tests/helpers/utils";
+import { click, getFixture, makeDeferred } from "@web/../tests/helpers/utils";
 import { ControlPanel } from "@web/search/control_panel/control_panel";
 import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
 import { isItemSelected, toggleFilterMenu, toggleMenuItem } from "@web/../tests/search/helpers";
@@ -14,10 +14,12 @@ const { Component, xml } = owl;
 const actionRegistry = registry.category("actions");
 
 let serverData;
+let target;
 
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
         serverData = getActionManagerServerData();
+        target = getFixture();
     });
 
     QUnit.module("Concurrency management");
@@ -38,7 +40,7 @@ QUnit.module("ActionManager", (hooks) => {
         await testUtils.nextTick();
         await legacyExtraNextTick();
         // action 4 loads a kanban view first, 6 loads a list view. We want a list
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -64,11 +66,11 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 4);
         // kanban view is loaded, switch to list view
-        await cpHelpers.switchView(webClient.el, "list");
+        await cpHelpers.switchView(target, "list");
         await legacyExtraNextTick();
         // here, list view is not ready yet, because def is not resolved
         // switch back to kanban view
-        await cpHelpers.switchView(webClient.el, "kanban");
+        await cpHelpers.switchView(target, "kanban");
         await legacyExtraNextTick();
         // here, we want the kanban view to reload itself, regardless of list view
         assert.verifySteps([
@@ -82,8 +84,8 @@ QUnit.module("ActionManager", (hooks) => {
         // we resolve def => list view is now ready (but we want to ignore it)
         def.resolve();
         await testUtils.nextTick();
-        assert.containsOnce(webClient, ".o_kanban_view", "there should be a kanban view in dom");
-        assert.containsNone(webClient, ".o_list_view", "there should not be a list view in dom");
+        assert.containsOnce(target, ".o_kanban_view", "there should be a kanban view in dom");
+        assert.containsNone(target, ".o_list_view", "there should not be a list view in dom");
     });
 
     QUnit.test("when an server action takes too much time...", async function (assert) {
@@ -102,7 +104,7 @@ QUnit.module("ActionManager", (hooks) => {
         await testUtils.nextTick();
         await legacyExtraNextTick();
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item.active").text(),
+            $(target).find(".o_control_panel .breadcrumb-item.active").text(),
             "Partners Action 4",
             "action 4 should be loaded"
         );
@@ -119,7 +121,7 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         // create a situation with 3 breadcrumbs: kanban/form/list
         await doAction(webClient, 4);
-        await testUtils.dom.click($(webClient.el).find(".o_kanban_record:first"));
+        await testUtils.dom.click($(target).find(".o_kanban_record:first"));
         await legacyExtraNextTick();
         await doAction(webClient, 8);
         await legacyExtraNextTick();
@@ -128,16 +130,16 @@ QUnit.module("ActionManager", (hooks) => {
         def = testUtils.makeTestPromise();
         // click on the breadcrumbs for the form view, then on the kanban view
         // before the form view is fully reloaded
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb-item:eq(1)"));
+        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item:eq(1)"));
         await legacyExtraNextTick();
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb-item:eq(0)"));
+        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item:eq(0)"));
         await legacyExtraNextTick();
         // resolve the form view read
         def.resolve();
         await testUtils.nextTick();
         await legacyExtraNextTick();
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item.active").text(),
+            $(target).find(".o_control_panel .breadcrumb-item.active").text(),
             "Partners Action 4",
             "action 4 should be loaded and visible"
         );
@@ -162,30 +164,22 @@ QUnit.module("ActionManager", (hooks) => {
             });
             await testUtils.nextTick();
             await legacyExtraNextTick();
-            assert.containsOnce(
-                webClient.el,
-                ".o_form_view",
-                "should display the form view of action 4"
-            );
+            assert.containsOnce(target, ".o_form_view", "should display the form view of action 4");
             // click to go back to Kanban (this request is blocked)
             def = testUtils.makeTestPromise();
             await testUtils.nextTick();
             await legacyExtraNextTick();
-            await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb a"));
+            await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a"));
             await legacyExtraNextTick();
             assert.containsOnce(
-                webClient.el,
+                target,
                 ".o_form_view",
                 "should still display the form view of action 4"
             );
             // execute another action meanwhile (don't block this request)
             await doAction(webClient, 8, { clearBreadcrumbs: true });
-            assert.containsOnce(webClient, ".o_list_view", "should display action 8");
-            assert.containsNone(
-                webClient,
-                ".o_form_view",
-                "should no longer display the form view"
-            );
+            assert.containsOnce(target, ".o_list_view", "should display action 8");
+            assert.containsNone(target, ".o_form_view", "should no longer display the form view");
             assert.verifySteps([
                 "/web/webclient/load_menus",
                 "/web/action/load",
@@ -200,9 +194,9 @@ QUnit.module("ActionManager", (hooks) => {
             def.resolve();
             await testUtils.nextTick();
             await legacyExtraNextTick();
-            assert.containsOnce(webClient, ".o_list_view", "should still display action 8");
+            assert.containsOnce(target, ".o_list_view", "should still display action 8");
             assert.containsNone(
-                webClient.el,
+                target,
                 ".o_kanban_view",
                 "should not display the kanban view of action 4"
             );
@@ -223,22 +217,20 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         // execute action 3 and open a record in form view
         await doAction(webClient, 3);
-        await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_form_view", "should display the form view of action 3");
+        assert.containsOnce(target, ".o_form_view", "should display the form view of action 3");
         // click on 'Call method' button (this request is blocked)
-        await testUtils.dom.click(
-            $(webClient.el).find(".o_form_view button:contains(Call method)")
-        );
+        await testUtils.dom.click($(target).find(".o_form_view button:contains(Call method)"));
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_form_view",
             "should still display the form view of action 3"
         );
         // execute another action
         await doAction(webClient, 8, { clearBreadcrumbs: true });
-        assert.containsOnce(webClient, ".o_list_view", "should display the list view of action 8");
-        assert.containsNone(webClient, ".o_form_view", "should no longer display the form view");
+        assert.containsOnce(target, ".o_list_view", "should display the list view of action 8");
+        assert.containsNone(target, ".o_form_view", "should no longer display the form view");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -255,11 +247,11 @@ QUnit.module("ActionManager", (hooks) => {
         await testUtils.nextTick();
         await legacyExtraNextTick();
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_list_view",
             "should still display the list view of action 8"
         );
-        assert.containsNone(webClient, ".o_kanban_view", "should not display action 1");
+        assert.containsNone(target, ".o_kanban_view", "should not display action 1");
         assert.verifySteps([]);
     });
 
@@ -284,33 +276,25 @@ QUnit.module("ActionManager", (hooks) => {
             };
             const webClient = await createWebClient({ serverData, mockRPC });
             await doAction(webClient, 3);
-            assert.containsOnce(
-                webClient,
-                ".o_list_view",
-                "should display the list view of action 3"
-            );
+            assert.containsOnce(target, ".o_list_view", "should display the list view of action 3");
             // switch to the form view (this request is blocked)
             def = testUtils.makeTestPromise();
-            testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+            testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
             await testUtils.nextTick();
             await legacyExtraNextTick();
             assert.containsOnce(
-                webClient.el,
+                target,
                 ".o_list_view",
                 "should still display the list view of action 3"
             );
             // execute another action meanwhile (don't block this request)
             await doAction(webClient, 4, { clearBreadcrumbs: true });
             assert.containsOnce(
-                webClient.el,
+                target,
                 ".o_kanban_view",
                 "should display the kanban view of action 8"
             );
-            assert.containsNone(
-                webClient,
-                ".o_list_view",
-                "should no longer display the list view"
-            );
+            assert.containsNone(target, ".o_list_view", "should no longer display the list view");
             assert.verifySteps([
                 "/web/webclient/load_menus",
                 "/web/action/load",
@@ -326,12 +310,12 @@ QUnit.module("ActionManager", (hooks) => {
             await testUtils.nextTick();
             await legacyExtraNextTick();
             assert.containsOnce(
-                webClient.el,
+                target,
                 ".o_kanban_view",
                 "should still display the kanban view of action 8"
             );
             assert.containsNone(
-                webClient.el,
+                target,
                 ".o_form_view",
                 "should not display the form view of action 3"
             );
@@ -353,29 +337,17 @@ QUnit.module("ActionManager", (hooks) => {
         doAction(webClient, 3);
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsNone(
-            webClient.el,
-            ".o_list_view",
-            "should not display the list view of action 3"
-        );
+        assert.containsNone(target, ".o_list_view", "should not display the list view of action 3");
         // execute another action meanwhile (and unlock the RPC)
         doAction(webClient, 4);
         await testUtils.nextTick();
         def.resolve();
         await testUtils.nextTick();
         await legacyExtraNextTick();
+        assert.containsOnce(target, ".o_kanban_view", "should display the kanban view of action 4");
+        assert.containsNone(target, ".o_list_view", "should not display the list view of action 3");
         assert.containsOnce(
-            webClient.el,
-            ".o_kanban_view",
-            "should display the kanban view of action 4"
-        );
-        assert.containsNone(
-            webClient.el,
-            ".o_list_view",
-            "should not display the list view of action 3"
-        );
-        assert.containsOnce(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             "there should be one controller in the breadcrumbs"
         );
@@ -403,28 +375,16 @@ QUnit.module("ActionManager", (hooks) => {
         doAction(webClient, 3);
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsNone(
-            webClient.el,
-            ".o_list_view",
-            "should not display the list view of action 3"
-        );
+        assert.containsNone(target, ".o_list_view", "should not display the list view of action 3");
         // execute another action meanwhile (and unlock the RPC)
         doAction(webClient, 4);
         def.resolve();
         await testUtils.nextTick();
         await legacyExtraNextTick();
+        assert.containsOnce(target, ".o_kanban_view", "should display the kanban view of action 4");
+        assert.containsNone(target, ".o_list_view", "should not display the list view of action 3");
         assert.containsOnce(
-            webClient.el,
-            ".o_kanban_view",
-            "should display the kanban view of action 4"
-        );
-        assert.containsNone(
-            webClient.el,
-            ".o_list_view",
-            "should not display the list view of action 3"
-        );
-        assert.containsOnce(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             "there should be one controller in the breadcrumbs"
         );
@@ -449,29 +409,29 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
-        assert.containsOnce(webClient, ".o_list_view");
-        assert.containsN(webClient, ".o_list_view .o_data_row", 5);
-        assert.containsOnce(webClient, ".o_control_panel .o_list_buttons");
+        assert.containsOnce(target, ".o_list_view");
+        assert.containsN(target, ".o_list_view .o_data_row", 5);
+        assert.containsOnce(target, ".o_control_panel .o_list_buttons");
         // reload (the search_read RPC will be blocked)
         def = testUtils.makeTestPromise();
-        await cpHelpers.switchView(webClient.el, "list");
+        await cpHelpers.switchView(target, "list");
         await legacyExtraNextTick();
-        assert.containsN(webClient, ".o_list_view .o_data_row", 5);
-        assert.containsOnce(webClient, ".o_control_panel .o_list_buttons");
+        assert.containsN(target, ".o_list_view .o_data_row", 5);
+        assert.containsOnce(target, ".o_control_panel .o_list_buttons");
         // open a record in form view
-        await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_form_view");
-        assert.containsNone(webClient, ".o_control_panel .o_list_buttons");
-        assert.containsOnce(webClient, ".o_control_panel .o_form_buttons_view");
+        assert.containsOnce(target, ".o_form_view");
+        assert.containsNone(target, ".o_control_panel .o_list_buttons");
+        assert.containsOnce(target, ".o_control_panel .o_form_buttons_view");
         // unblock the search_read RPC
         def.resolve();
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_form_view");
-        assert.containsNone(webClient, ".o_list_view");
-        assert.containsNone(webClient, ".o_control_panel .o_list_buttons");
-        assert.containsOnce(webClient, ".o_control_panel .o_form_buttons_view");
+        assert.containsOnce(target, ".o_form_view");
+        assert.containsNone(target, ".o_list_view");
+        assert.containsNone(target, ".o_control_panel .o_list_buttons");
+        assert.containsOnce(target, ".o_control_panel .o_form_buttons_view");
     });
 
     QUnit.test(
@@ -480,8 +440,8 @@ QUnit.module("ActionManager", (hooks) => {
             assert.expect(3);
             const slowWillStartDef = testUtils.makeTestPromise();
             class ClientAction extends Component {
-                willStart() {
-                    return slowWillStartDef;
+                setup() {
+                    owl.onWillStart(() => slowWillStartDef);
                 }
             }
             ClientAction.template = xml`<div class="client_action">ClientAction</div>`;
@@ -490,19 +450,15 @@ QUnit.module("ActionManager", (hooks) => {
             doAction(webClient, "slowAction");
             await nextTick();
             await legacyExtraNextTick();
-            assert.containsNone(webClient, ".client_action", "client action isn't ready yet");
+            assert.containsNone(target, ".client_action", "client action isn't ready yet");
             doAction(webClient, 4);
             await nextTick();
             await legacyExtraNextTick();
-            assert.containsOnce(webClient, ".o_kanban_view", "should have loaded a kanban view");
+            assert.containsOnce(target, ".o_kanban_view", "should have loaded a kanban view");
             slowWillStartDef.resolve();
             await testUtils.nextTick();
             await legacyExtraNextTick();
-            assert.containsOnce(
-                webClient,
-                ".o_kanban_view",
-                "should still display the kanban view"
-            );
+            assert.containsOnce(target, ".o_kanban_view", "should still display the kanban view");
         }
     );
 
@@ -517,22 +473,22 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
         def = testUtils.makeTestPromise();
         doAction(webClient, 4, { clearBreadcrumbs: true });
         await nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_list_view", "should still contain the list view");
-        await cpHelpers.switchView(webClient, "kanban");
+        assert.containsOnce(target, ".o_list_view", "should still contain the list view");
+        await cpHelpers.switchView(target, "kanban");
         def.resolve();
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsOnce(target, ".o_kanban_view");
         assert.strictEqual(
-            webClient.el.querySelector(".o_control_panel .breadcrumb-item").textContent,
+            target.querySelector(".o_control_panel .breadcrumb-item").textContent,
             "Partners"
         );
-        assert.containsNone(webClient, ".o_list_view");
+        assert.containsNone(target, ".o_list_view");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -556,20 +512,20 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
         doAction(webClient, 4, { clearBreadcrumbs: true });
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        await cpHelpers.switchView(webClient, "kanban");
+        await cpHelpers.switchView(target, "kanban");
         def.resolve();
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsOnce(target, ".o_kanban_view");
         assert.strictEqual(
-            webClient.el.querySelector(".o_control_panel .breadcrumb-item").textContent,
+            target.querySelector(".o_control_panel .breadcrumb-item").textContent,
             "Partners"
         );
-        assert.containsNone(webClient, ".o_list_view");
+        assert.containsNone(target, ".o_list_view");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -595,26 +551,26 @@ QUnit.module("ActionManager", (hooks) => {
 
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
 
-        await testUtils.dom.click(webClient.el.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_form_view");
+        assert.containsOnce(target, ".o_form_view");
 
-        await testUtils.dom.click(webClient.el.querySelector(".o_back_button"));
+        await testUtils.dom.click(target.querySelector(".o_back_button"));
         await legacyExtraNextTick();
 
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
 
-        await testUtils.dom.click(webClient.el.querySelector(".o_list_view .o_data_row"));
-        await testUtils.dom.click(webClient.el.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
 
         def.resolve();
         await nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_form_view");
+        assert.containsOnce(target, ".o_form_view");
     });
 
     QUnit.test("local state, global state, and race conditions", async function (assert) {
@@ -640,9 +596,7 @@ QUnit.module("ActionManager", (hooks) => {
                         return { fromId: this.id };
                     },
                 });
-            }
-            async willStart() {
-                await def;
+                owl.onWillStart(() => def);
             }
         }
         ToyView.components = { ControlPanel };
@@ -670,20 +624,20 @@ QUnit.module("ActionManager", (hooks) => {
             ],
         });
 
-        await toggleFilterMenu(webClient);
-        await toggleMenuItem(webClient, "Foo");
-        assert.ok(isItemSelected(webClient, "Foo"));
+        await toggleFilterMenu(target);
+        await toggleMenuItem(target, "Foo");
+        assert.ok(isItemSelected(target, "Foo"));
 
         // reload twice by clicking on toy view switcher
         def = makeDeferred();
-        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_toy"));
-        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_toy"));
+        await click(target.querySelector(".o_control_panel .o_switch_view.o_toy"));
+        await click(target.querySelector(".o_control_panel .o_switch_view.o_toy"));
 
         def.resolve();
         await nextTick();
 
-        await toggleFilterMenu(webClient);
-        assert.ok(isItemSelected(webClient, "Foo"));
+        await toggleFilterMenu(target);
+        assert.ok(isItemSelected(target, "Foo"));
         // this test is not able to detect that getGlobalState is put on the right place:
         // currentController.action.globalState contains in any case the search state
         // of the first instantiated toy view.
diff --git a/addons/web/static/tests/webclient/actions/effects_tests.js b/addons/web/static/tests/webclient/actions/effects_tests.js
index cba1f3ad678..97a180ed128 100644
--- a/addons/web/static/tests/webclient/actions/effects_tests.js
+++ b/addons/web/static/tests/webclient/actions/effects_tests.js
@@ -3,17 +3,25 @@
 import { registry } from "@web/core/registry";
 import testUtils from "web.test_utils";
 import { clearRegistryWithCleanup } from "../../helpers/mock_env";
-import { click, legacyExtraNextTick, nextTick, patchWithCleanup } from "../../helpers/utils";
+import {
+    click,
+    getFixture,
+    legacyExtraNextTick,
+    nextTick,
+    patchWithCleanup,
+} from "../../helpers/utils";
 import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
 import { session } from "@web/session";
 
 let serverData;
+let target;
 
 const mainComponentRegistry = registry.category("main_components");
 
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
         serverData = getActionManagerServerData();
+        target = getFixture();
     });
 
     QUnit.module("Effects");
@@ -25,27 +33,27 @@ QUnit.module("ActionManager", (hooks) => {
 
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 1);
-        assert.containsOnce(webClient.el, ".o_kanban_view");
-        assert.containsNone(webClient.el, ".o_reward");
+        assert.containsOnce(target, ".o_kanban_view");
+        assert.containsNone(target, ".o_reward");
         webClient.env.services.effect.add({ type: "rainbow_man", message: "", fadeout: "no" });
         await nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient.el, ".o_reward");
-        assert.containsOnce(webClient.el, ".o_kanban_view");
-        await testUtils.dom.click(webClient.el.querySelector(".o_kanban_record"));
+        assert.containsOnce(target, ".o_reward");
+        assert.containsOnce(target, ".o_kanban_view");
+        await testUtils.dom.click(target.querySelector(".o_kanban_record"));
         await legacyExtraNextTick();
-        assert.containsNone(webClient.el, ".o_reward");
-        assert.containsOnce(webClient.el, ".o_kanban_view");
+        assert.containsNone(target, ".o_reward");
+        assert.containsOnce(target, ".o_kanban_view");
         webClient.env.services.effect.add({ type: "rainbow_man", message: "", fadeout: "no" });
         await nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient.el, ".o_reward");
-        assert.containsOnce(webClient.el, ".o_kanban_view");
+        assert.containsOnce(target, ".o_reward");
+        assert.containsOnce(target, ".o_kanban_view");
         // Do not force rainbow man to destroy on doAction
         // we let it die either after its animation or on user click
         await doAction(webClient, 3);
-        assert.containsOnce(webClient.el, ".o_reward");
-        assert.containsOnce(webClient.el, ".o_list_view");
+        assert.containsOnce(target, ".o_reward");
+        assert.containsOnce(target, ".o_list_view");
     });
 
     QUnit.test("on close with effect from server", async function (assert) {
@@ -66,8 +74,8 @@ QUnit.module("ActionManager", (hooks) => {
 
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 6);
-        await click(webClient.el.querySelector('button[name="object"]'));
-        assert.containsOnce(webClient, ".o_reward");
+        await click(target.querySelector('button[name="object"]'));
+        assert.containsOnce(target, ".o_reward");
     });
 
     QUnit.test("on close with effect in xml", async function (assert) {
@@ -91,11 +99,11 @@ QUnit.module("ActionManager", (hooks) => {
 
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 6);
-        await click(webClient.el.querySelector('button[name="object"]'));
+        await click(target.querySelector('button[name="object"]'));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient.el, ".o_reward");
+        assert.containsOnce(target, ".o_reward");
         assert.strictEqual(
-            webClient.el.querySelector(".o_reward .o_reward_msg_content").textContent,
+            target.querySelector(".o_reward .o_reward_msg_content").textContent,
             "rainBowInXML"
         );
     });
diff --git a/addons/web/static/tests/webclient/actions/error_handling_tests.js b/addons/web/static/tests/webclient/actions/error_handling_tests.js
index a7f96f8602e..18cd2e1d168 100644
--- a/addons/web/static/tests/webclient/actions/error_handling_tests.js
+++ b/addons/web/static/tests/webclient/actions/error_handling_tests.js
@@ -3,17 +3,19 @@
 import { registry } from "@web/core/registry";
 import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
 import { registerCleanup } from "../../helpers/cleanup";
-import { click, nextTick, patchWithCleanup } from "../../helpers/utils";
+import { click, getFixture, nextTick, patchWithCleanup } from "../../helpers/utils";
 import { errorService } from "@web/core/errors/error_service";
 
 const { Component, xml } = owl;
 
 let serverData;
+let target;
 const actionRegistry = registry.category("actions");
 
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
         serverData = getActionManagerServerData();
+        target = getFixture();
     });
 
     QUnit.module("Error handling");
@@ -25,16 +27,16 @@ QUnit.module("ActionManager", (hooks) => {
         actionRegistry.add("Boom", Boom);
 
         const webClient = await createWebClient({ serverData });
-        assert.strictEqual(webClient.el.querySelector(".o_action_manager").innerHTML, "");
+        assert.strictEqual(target.querySelector(".o_action_manager").innerHTML, "");
         await doAction(webClient, "1");
-        const contents = webClient.el.querySelector(".o_action_manager").innerHTML;
+        const contents = target.querySelector(".o_action_manager").innerHTML;
         assert.ok(contents !== "");
         try {
             await doAction(webClient, "Boom");
         } catch (e) {
             assert.ok(e instanceof TypeError);
         }
-        assert.strictEqual(webClient.el.querySelector(".o_action_manager").innerHTML, contents);
+        assert.strictEqual(target.querySelector(".o_action_manager").innerHTML, contents);
     });
 
     QUnit.test("error in a client action (after the first rendering)", async function (assert) {
@@ -69,11 +71,11 @@ QUnit.module("ActionManager", (hooks) => {
 
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, "Boom");
-        assert.containsOnce(webClient, ".my_button");
+        assert.containsOnce(target, ".my_button");
 
         await click(document.querySelector(".my_button"));
         await nextTick();
-        assert.containsOnce(webClient, ".my_button");
-        assert.containsOnce(webClient, ".o_dialog_error");
+        assert.containsOnce(target, ".my_button");
+        assert.containsOnce(target, ".o_dialog_error");
     });
 });
diff --git a/addons/web/static/tests/webclient/actions/legacy_tests.js b/addons/web/static/tests/webclient/actions/legacy_tests.js
index c0520d95d0f..6105dfcc2ed 100644
--- a/addons/web/static/tests/webclient/actions/legacy_tests.js
+++ b/addons/web/static/tests/webclient/actions/legacy_tests.js
@@ -4,7 +4,13 @@ import { registry } from "@web/core/registry";
 import testUtils from "web.test_utils";
 import ListController from "web.ListController";
 import ListView from "web.ListView";
-import { click, legacyExtraNextTick, patchWithCleanup } from "../../helpers/utils";
+import {
+    click,
+    destroy,
+    getFixture,
+    legacyExtraNextTick,
+    patchWithCleanup,
+} from "../../helpers/utils";
 import { registerCleanup } from "../../helpers/cleanup";
 import { makeTestEnv } from "../../helpers/mock_env";
 import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
@@ -22,10 +28,12 @@ import Widget from "web.Widget";
 import SystrayMenu from "web.SystrayMenu";
 
 let serverData;
+let target;
 
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
         serverData = getActionManagerServerData();
+        target = getFixture();
     });
 
     QUnit.module("Legacy tests (to eventually drop)");
@@ -43,14 +51,14 @@ QUnit.module("ActionManager", (hooks) => {
 
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
         list.trigger_up("warning", {
             title: "Warning!!!",
             message: "This is a warning...",
         });
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
         assert.containsOnce(document.body, ".o_notification.bg-warning");
         assert.strictEqual($(".o_notification_title").text(), "Warning!!!");
         assert.strictEqual($(".o_notification_content").text(), "This is a warning...");
@@ -69,7 +77,7 @@ QUnit.module("ActionManager", (hooks) => {
 
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
         list.trigger_up("warning", {
             title: "Warning!!!",
             message: "This is a warning...",
@@ -77,7 +85,7 @@ QUnit.module("ActionManager", (hooks) => {
         });
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
         assert.containsOnce(document.body, ".modal");
         assert.strictEqual($(".modal-title").text(), "Warning!!!");
         assert.strictEqual($(".modal-body").text(), "This is a warning...");
@@ -147,22 +155,22 @@ QUnit.module("ActionManager", (hooks) => {
 
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, "customLegacy");
-        assert.containsOnce(webClient, ".custom-action");
+        assert.containsOnce(target, ".custom-action");
         assert.verifySteps([]);
 
-        await click(webClient.el, ".o_debug_manager button");
+        await click(target, ".o_debug_manager button");
         assert.verifySteps(["debugItems executed"]);
 
         await doAction(webClient, 5); // action in Dialog
-        await click(webClient.el, ".modal .o_form_button_cancel");
-        assert.containsNone(webClient, ".modal");
-        assert.containsOnce(webClient, ".custom-action");
+        await click(target, ".modal .o_form_button_cancel");
+        assert.containsNone(target, ".modal");
+        assert.containsOnce(target, ".custom-action");
         assert.verifySteps([]);
 
         // close debug menu
-        await click(webClient.el, ".o_debug_manager button");
+        await click(target, ".o_debug_manager button");
         // open debug menu
-        await click(webClient.el, ".o_debug_manager button");
+        await click(target, ".o_debug_manager button");
         assert.verifySteps(["debugItems executed"]);
         delete core.action_registry.map.customLegacy;
     });
@@ -172,15 +180,16 @@ QUnit.module("ActionManager", (hooks) => {
 
         let mountCount = 0;
         patchWithCleanup(ControlPanel.prototype, {
-            mounted() {
-                mountCount = mountCount + 1;
-                this.__uniqueId = mountCount;
-                assert.step(`mounted ${this.__uniqueId}`);
-                this._super(...arguments);
-            },
-            willUnmount() {
-                assert.step(`willUnmount ${this.__uniqueId}`);
-                this._super(...arguments);
+            setup() {
+                this._super();
+                owl.onMounted(() => {
+                    mountCount = mountCount + 1;
+                    this.__uniqueId = mountCount;
+                    assert.step(`mounted ${this.__uniqueId}`);
+                });
+                owl.onWillUnmount(() => {
+                    assert.step(`willUnmount ${this.__uniqueId}`);
+                });
             },
         });
 
@@ -199,10 +208,10 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 1);
         await doAction(webClient, "customLegacy");
-        await click(webClient.el.querySelectorAll(".breadcrumb-item")[0]);
+        await click(target.querySelectorAll(".breadcrumb-item")[0]);
         await legacyExtraNextTick();
 
-        webClient.destroy();
+        destroy(webClient);
 
         assert.verifySteps([
             "mounted 1",
@@ -279,9 +288,7 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const serverData = { models, views };
 
-        const webClient = await createWebClient({
-            serverData,
-        });
+        const webClient = await createWebClient({ serverData });
 
         await doAction(webClient, {
             id: 1,
@@ -373,7 +380,7 @@ QUnit.module("ActionManager", (hooks) => {
             doctor: "quackson",
         });
 
-        await click(webClient.el, ".tommy");
+        await click(target, ".tommy");
         assert.deepEqual(webClient.env.services.router.current.hash, {
             action: "clientAction",
             pinball: "wizard",
@@ -494,14 +501,14 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
 
         await doAction(webClient, 3);
-        assert.containsOnce(webClient, ".o_list_view");
-        assert.strictEqual($(webClient.el).find(".breadcrumb-item").text(), "Partners");
+        assert.containsOnce(target, ".o_list_view");
+        assert.strictEqual($(target).find(".breadcrumb-item").text(), "Partners");
 
         await doAction(webClient, {
             type: "ir.actions.client",
             tag: "clientAction",
         });
-        assert.containsOnce(webClient, ".client_action");
-        assert.strictEqual($(webClient.el).find(".breadcrumb-item").text(), "PartnersBlabla");
+        assert.containsOnce(target, ".client_action");
+        assert.strictEqual($(target).find(".breadcrumb-item").text(), "PartnersBlabla");
     });
 });
diff --git a/addons/web/static/tests/webclient/actions/load_state_tests.js b/addons/web/static/tests/webclient/actions/load_state_tests.js
index 31d9ee36a75..fc9233372ae 100644
--- a/addons/web/static/tests/webclient/actions/load_state_tests.js
+++ b/addons/web/static/tests/webclient/actions/load_state_tests.js
@@ -13,6 +13,7 @@ import {
     getFixture,
     legacyExtraNextTick,
     patchWithCleanup,
+    mount,
     nextTick,
 } from "../../helpers/utils";
 import { toggleFilterMenu, toggleMenuItem } from "@web/../tests/search/helpers";
@@ -26,15 +27,17 @@ import {
 } from "./../helpers";
 import { errorService } from "@web/core/errors/error_service";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 
 let serverData;
+let target;
 
 const actionRegistry = registry.category("actions");
 
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
         serverData = getActionManagerServerData();
+        target = getFixture();
     });
 
     QUnit.module("Load State");
@@ -43,8 +46,8 @@ QUnit.module("ActionManager", (hooks) => {
         assert.expect(2);
         const webClient = await createWebClient({ serverData });
         await loadState(webClient, { action: 1001 });
-        assert.containsOnce(webClient, ".test_client_action");
-        assert.strictEqual(webClient.el.querySelector(".o_menu_brand").textContent, "App1");
+        assert.containsOnce(target, ".test_client_action");
+        assert.strictEqual(target.querySelector(".o_menu_brand").textContent, "App1");
     });
 
     QUnit.test("menu loading", async (assert) => {
@@ -52,10 +55,10 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await loadState(webClient, { menu_id: 2 });
         assert.strictEqual(
-            webClient.el.querySelector(".test_client_action").textContent.trim(),
+            target.querySelector(".test_client_action").textContent.trim(),
             "ClientAction_Id 2"
         );
-        assert.strictEqual(webClient.el.querySelector(".o_menu_brand").textContent, "App2");
+        assert.strictEqual(target.querySelector(".o_menu_brand").textContent, "App2");
     });
 
     QUnit.test("action and menu loading", async (assert) => {
@@ -66,10 +69,10 @@ QUnit.module("ActionManager", (hooks) => {
             menu_id: 2,
         });
         assert.strictEqual(
-            webClient.el.querySelector(".test_client_action").textContent.trim(),
+            target.querySelector(".test_client_action").textContent.trim(),
             "ClientAction_Id 1"
         );
-        assert.strictEqual(webClient.el.querySelector(".o_menu_brand").textContent, "App2");
+        assert.strictEqual(target.querySelector(".o_menu_brand").textContent, "App2");
         assert.deepEqual(webClient.env.services.router.current.hash, {
             action: 1001,
             menu_id: 2,
@@ -87,8 +90,7 @@ QUnit.module("ActionManager", (hooks) => {
 
         assert.verifySteps(["/web/action/load", "/web/webclient/load_menus"]);
 
-        const wc = await mount(WebClient, { env, target: getFixture() });
-        registerCleanup(() => wc.destroy());
+        await mount(WebClient, getFixture(), { env });
 
         assert.verifySteps([]);
     });
@@ -104,8 +106,7 @@ QUnit.module("ActionManager", (hooks) => {
 
         assert.verifySteps(["/web/webclient/load_menus"]);
 
-        const wc = await mount(WebClient, { env, target: getFixture() });
-        registerCleanup(() => wc.destroy());
+        await mount(WebClient, getFixture(), { env });
 
         assert.verifySteps([]);
     });
@@ -114,11 +115,11 @@ QUnit.module("ActionManager", (hooks) => {
         assert.expect(2);
         patchWithCleanup(session, { home_action_id: 1001 });
 
-        const wc = await createWebClient({ serverData });
+        await createWebClient({ serverData });
         await testUtils.nextTick(); // wait for the navbar to be updated
 
-        assert.containsOnce(wc, ".test_client_action");
-        assert.strictEqual(wc.el.querySelector(".o_menu_brand").innerText, "App1");
+        assert.containsOnce(target, ".test_client_action");
+        assert.strictEqual(target.querySelector(".o_menu_brand").innerText, "App1");
     });
 
     QUnit.test("correctly sends additional context", async (assert) => {
@@ -147,10 +148,10 @@ QUnit.module("ActionManager", (hooks) => {
             action: "wowl.client_action",
         });
         assert.strictEqual(
-            webClient.el.querySelector(".test_client_action").textContent.trim(),
+            target.querySelector(".test_client_action").textContent.trim(),
             "ClientAction_xmlId"
         );
-        assert.containsNone(webClient, ".o_menu_brand");
+        assert.containsNone(target, ".o_menu_brand");
     });
 
     QUnit.test("supports opening action in dialog", async (assert) => {
@@ -160,9 +161,9 @@ QUnit.module("ActionManager", (hooks) => {
         await loadState(webClient, {
             action: "wowl.client_action",
         });
-        assert.containsOnce(webClient, ".test_client_action");
-        assert.containsOnce(webClient, ".modal .test_client_action");
-        assert.containsNone(webClient, ".o_menu_brand");
+        assert.containsOnce(target, ".test_client_action");
+        assert.containsOnce(target, ".modal .test_client_action");
+        assert.containsNone(target, ".o_menu_brand");
     });
 
     QUnit.test("should not crash on invalid state", async function (assert) {
@@ -174,7 +175,7 @@ QUnit.module("ActionManager", (hooks) => {
         await loadState(webClient, {
             res_model: "partner",
         });
-        assert.strictEqual($(webClient.el).text(), "", "should display nothing");
+        assert.strictEqual($(target).text(), "", "should display nothing");
         assert.verifySteps(["/web/webclient/load_menus"]);
     });
 
@@ -192,7 +193,7 @@ QUnit.module("ActionManager", (hooks) => {
         });
         await testUtils.nextTick();
         assert.strictEqual(
-            $(webClient.el).find(".o_client_action_test").text(),
+            $(target).find(".o_client_action_test").text(),
             "Hello World",
             "should have correctly rendered the client action"
         );
@@ -210,8 +211,8 @@ QUnit.module("ActionManager", (hooks) => {
         });
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_control_panel");
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsOnce(target, ".o_control_panel");
+        assert.containsOnce(target, ".o_kanban_view");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -232,9 +233,9 @@ QUnit.module("ActionManager", (hooks) => {
         });
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_form_view");
+        assert.containsOnce(target, ".o_form_view");
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Second record",
             "should have opened the second record"
         );
@@ -255,16 +256,16 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const hash = "#id=2&model=partner";
         Object.assign(browser.location, { hash });
-        const webClient = await createWebClient({ serverData, mockRPC });
+        await createWebClient({ serverData, mockRPC });
 
         await testUtils.nextTick();
-        assert.containsOnce(webClient, ".o_form_view");
+        assert.containsOnce(target, ".o_form_view");
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Second record",
             "should have opened the second record"
         );
-        assert.containsNone(webClient.el, ".o_menu_brand");
+        assert.containsNone(target, ".o_menu_brand");
         assert.verifySteps(["/web/webclient/load_menus", "load_views", "read"]);
     });
 
@@ -282,7 +283,7 @@ QUnit.module("ActionManager", (hooks) => {
         });
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_form_view");
+        assert.containsOnce(target, ".o_form_view");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -303,8 +304,8 @@ QUnit.module("ActionManager", (hooks) => {
         });
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsNone(webClient, ".o_list_view");
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsNone(target, ".o_list_view");
+        assert.containsOnce(target, ".o_kanban_view");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -328,19 +329,19 @@ QUnit.module("ActionManager", (hooks) => {
             });
             await testUtils.nextTick();
             await legacyExtraNextTick();
-            assert.containsNone(webClient, ".o_list_view");
-            assert.containsOnce(webClient, ".o_form_view");
-            assert.containsN(webClient, ".o_control_panel .breadcrumb-item", 2);
+            assert.containsNone(target, ".o_list_view");
+            assert.containsOnce(target, ".o_form_view");
+            assert.containsN(target, ".o_control_panel .breadcrumb-item", 2);
             assert.strictEqual(
-                $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+                $(target).find(".o_control_panel .breadcrumb-item:last").text(),
                 "Second record",
                 "breadcrumbs should contain the display_name of the opened record"
             );
             // go back to List
-            await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb a"));
+            await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient, ".o_list_view");
-            assert.containsNone(webClient, ".o_form_view");
+            assert.containsOnce(target, ".o_list_view");
+            assert.containsNone(target, ".o_form_view");
             assert.verifySteps([
                 "/web/webclient/load_menus",
                 "/web/action/load",
@@ -356,12 +357,12 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 4);
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb li",
             "there should be one controller in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb li").text(),
+            $(target).find(".o_control_panel .breadcrumb li").text(),
             "Partners Action 4",
             "breadcrumbs should contain the display_name of the opened record"
         );
@@ -370,27 +371,27 @@ QUnit.module("ActionManager", (hooks) => {
             viewType: "form",
         });
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb li",
             3,
             "there should be three controllers in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb li").text(),
+            $(target).find(".o_control_panel .breadcrumb li").text(),
             "Partners Action 4PartnersSecond record",
             "the breadcrumb elements should be correctly ordered"
         );
         // go back to List
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb a:last"));
+        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a:last"));
         await legacyExtraNextTick();
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb li",
             2,
             "there should be two controllers in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb li").text(),
+            $(target).find(".o_control_panel .breadcrumb li").text(),
             "Partners Action 4Partners",
             "the breadcrumb elements should be correctly ordered"
         );
@@ -411,10 +412,10 @@ QUnit.module("ActionManager", (hooks) => {
                 id: 2,
                 view_type: "form",
             });
-            assert.containsNone(webClient, ".o_form_view");
-            assert.containsNone(webClient, ".o_list_view");
+            assert.containsNone(target, ".o_form_view");
+            assert.containsNone(target, ".o_list_view");
             await doAction(webClient, 1);
-            assert.containsOnce(webClient, ".o_kanban_view");
+            assert.containsOnce(target, ".o_kanban_view");
         }
     );
 
@@ -425,7 +426,7 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
         // switch to kanban view
         webClient.env.bus.trigger("test:hashchange", {
             action: 3,
@@ -433,8 +434,8 @@ QUnit.module("ActionManager", (hooks) => {
         });
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsNone(webClient, ".o_list_view");
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsNone(target, ".o_list_view");
+        assert.containsOnce(target, ".o_kanban_view");
         // switch to form view, open record 4
         webClient.env.bus.trigger("test:hashchange", {
             action: 3,
@@ -443,16 +444,16 @@ QUnit.module("ActionManager", (hooks) => {
         });
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsNone(webClient, ".o_kanban_view");
-        assert.containsOnce(webClient, ".o_form_view");
+        assert.containsNone(target, ".o_kanban_view");
+        assert.containsOnce(target, ".o_form_view");
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             2,
             "there should be two controllers in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "Fourth record",
             "should have opened the requested record"
         );
@@ -477,11 +478,11 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         // execute action 3 and open the first record in a form view
         await doAction(webClient, 3);
-        await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_form_view");
+        assert.containsOnce(target, ".o_form_view");
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "First record",
             "should have opened the first record"
         );
@@ -493,15 +494,15 @@ QUnit.module("ActionManager", (hooks) => {
         });
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_form_view");
+        assert.containsOnce(target, ".o_form_view");
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             2,
             "there should be two controllers in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "Fourth record",
             "should have switched to the requested record"
         );
@@ -541,7 +542,7 @@ QUnit.module("ActionManager", (hooks) => {
             view_type: "list",
         });
         assert.verifySteps(["push_state"], "should have pushed the final state");
-        await testUtils.dom.click($(webClient.el).find("tr.o_data_row:first"));
+        await testUtils.dom.click($(target).find("tr.o_data_row:first"));
         await legacyExtraNextTick();
         currentHash = webClient.env.services.router.current.hash;
         assert.deepEqual(currentHash, {
@@ -591,7 +592,7 @@ QUnit.module("ActionManager", (hooks) => {
             action: 9,
         });
         assert.verifySteps([], "should not push the loaded state");
-        await testUtils.dom.click($(webClient.el).find("#client_action_button"));
+        await testUtils.dom.click($(target).find("#client_action_button"));
         await legacyExtraNextTick();
         assert.verifySteps(["push_state"], "should push the state of it changes afterwards");
         currentHash = webClient.env.services.router.current.hash;
@@ -644,12 +645,12 @@ QUnit.module("ActionManager", (hooks) => {
             a: "default value",
         });
         assert.strictEqual(
-            $(webClient.el).find(".o_client_action .o_content").text(),
+            $(target).find(".o_client_action .o_content").text(),
             "default value",
             "should have rendered the client action"
         );
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             1,
             "there should be one controller in the breadcrumbs"
@@ -666,12 +667,12 @@ QUnit.module("ActionManager", (hooks) => {
             a: "new value",
         });
         assert.strictEqual(
-            $(webClient.el).find(".o_client_action .o_content").text(),
+            $(target).find(".o_client_action .o_content").text(),
             "new value",
             "should have rerendered the client action with the correct param"
         );
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             1,
             "there should still be one controller in the breadcrumbs"
@@ -696,9 +697,9 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 4);
-        assert.containsOnce(webClient, ".o_kanban_view", "should display a kanban view");
+        assert.containsOnce(target, ".o_kanban_view", "should display a kanban view");
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Partners Action 4",
             "breadcrumbs should display the display_name of the action"
         );
@@ -707,12 +708,12 @@ QUnit.module("ActionManager", (hooks) => {
             view_type: "list",
         });
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Partners Action 4",
             "should still be in the same action"
         );
-        assert.containsNone(webClient, ".o_kanban_view", "should no longer display a kanban view");
-        assert.containsOnce(webClient, ".o_list_view", "should display a list view");
+        assert.containsNone(target, ".o_kanban_view", "should no longer display a kanban view");
+        assert.containsOnce(target, ".o_list_view", "should display a list view");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -739,9 +740,9 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await loadState(webClient, { menu_id: 666 });
-        assert.containsOnce(webClient, ".o_kanban_view", "should display a kanban view");
+        assert.containsOnce(target, ".o_kanban_view", "should display a kanban view");
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Partners Action 1",
             "breadcrumbs should display the display_name of the action"
         );
@@ -761,21 +762,18 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData });
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_kanban_view"); // action 1 (default app)
+        assert.containsOnce(target, ".o_kanban_view"); // action 1 (default app)
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Partners Action 1"
         );
         await loadState(webClient, { action: 3 });
-        assert.containsOnce(webClient, ".o_list_view"); // action 3
-        assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
-            "Partners"
-        );
+        assert.containsOnce(target, ".o_list_view"); // action 3
+        assert.strictEqual($(target).find(".o_control_panel .breadcrumb-item").text(), "Partners");
         await loadState(webClient, { home: 1 });
-        assert.containsOnce(webClient, ".o_kanban_view"); // action 1 (default app)
+        assert.containsOnce(target, ".o_kanban_view"); // action 1 (default app)
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Partners Action 1"
         );
     });
@@ -791,11 +789,11 @@ QUnit.module("ActionManager", (hooks) => {
         const mockRPC = async function (route) {
             assert.step(route);
         };
-        const webClient = await createWebClient({ serverData, mockRPC });
+        await createWebClient({ serverData, mockRPC });
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_kanban_view", "should display a kanban view");
+        assert.containsOnce(target, ".o_kanban_view", "should display a kanban view");
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Partners Action 1"
         );
         assert.verifySteps([
@@ -823,10 +821,10 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 999, { viewType: "form", props: { resId: 2 } });
-        assert.containsOnce(webClient, ".o_form_view");
-        assert.containsN(webClient, ".breadcrumb-item", 2);
+        assert.containsOnce(target, ".o_form_view");
+        assert.containsN(target, ".breadcrumb-item", 2);
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item.active").text(),
+            $(target).find(".o_control_panel .breadcrumb-item.active").text(),
             "Second record"
         );
         assert.verifySteps([
@@ -841,10 +839,10 @@ QUnit.module("ActionManager", (hooks) => {
             id: "",
         });
         assert.verifySteps(["/web/dataset/call_kw/partner/onchange"]);
-        assert.containsOnce(webClient, ".o_form_view.o_form_editable");
-        assert.containsN(webClient, ".breadcrumb-item", 2);
+        assert.containsOnce(target, ".o_form_view.o_form_editable");
+        assert.containsN(target, ".breadcrumb-item", 2);
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item.active").text(),
+            $(target).find(".o_control_panel .breadcrumb-item.active").text(),
             "New"
         );
     });
@@ -886,10 +884,10 @@ QUnit.module("ActionManager", (hooks) => {
         assert.verifySteps([]);
         await doAction(webClient, 9);
         assert.verifySteps(["hashSet"]);
-        assert.containsOnce(webClient.el, ".o_client_action_test");
+        assert.containsOnce(target, ".o_client_action_test");
         assert.verifySteps([]);
         await doAction(webClient, "ClientAction2");
-        assert.containsOnce(webClient.el, ".o_client_action_test_2");
+        assert.containsOnce(target, ".o_client_action_test_2");
         assert.verifySteps(["canBeRemoved", "hashSet"]);
         delete core.action_registry.map.ClientAction;
         delete core.action_registry.map.ClientAction2;
@@ -918,17 +916,17 @@ QUnit.module("ActionManager", (hooks) => {
             assert.expect(3);
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 3);
-            assert.containsOnce(webClient, ".o_list_view", "should now display the list view");
+            assert.containsOnce(target, ".o_list_view", "should now display the list view");
 
-            await testUtils.controlPanel.switchView(webClient, "kanban");
+            await testUtils.controlPanel.switchView(target, "kanban");
             await legacyExtraNextTick();
-            assert.containsOnce(webClient, ".o_kanban_view", "should now display the kanban view");
+            assert.containsOnce(target, ".o_kanban_view", "should now display the kanban view");
 
             const hash = webClient.env.services.router.current.hash;
             hash.view_type = "form";
             await loadState(webClient.env, hash);
             assert.containsOnce(
-                webClient,
+                target,
                 ".o_form_view.o_form_editable",
                 "should now display the form view in edit mode"
             );
@@ -957,15 +955,15 @@ QUnit.module("ActionManager", (hooks) => {
                 view_type: "form",
             });
 
-            await click(webClient.el.querySelector(".o_control_panel .breadcrumb-item"));
+            await click(target.querySelector(".o_control_panel .breadcrumb-item"));
             await legacyExtraNextTick();
 
-            assert.containsN(webClient, ".o_list_view .o_data_row", 5);
+            assert.containsN(target, ".o_list_view .o_data_row", 5);
 
-            await toggleFilterMenu(webClient);
-            await toggleMenuItem(webClient, "Filter");
+            await toggleFilterMenu(target);
+            await toggleMenuItem(target, "Filter");
 
-            assert.containsN(webClient, ".o_list_view .o_data_row", 1);
+            assert.containsN(target, ".o_list_view .o_data_row", 1);
         }
     );
 
@@ -999,13 +997,13 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         assert.verifySteps(["clientAction setup"]);
         await nextTick();
-        assert.containsOnce(webClient, ".o_dialog_error");
-        await click(webClient.el, ".modal-header .close");
-        assert.containsNone(webClient, ".o_dialog_error");
-        await click(webClient.el, "nav .o_navbar_apps_menu .dropdown-toggle ");
-        assert.containsN(webClient, ".dropdown-item.o_app", 3);
-        assert.containsNone(webClient, ".o_menu_brand");
-        assert.strictEqual(webClient.el.querySelector(".o_action_manager").innerHTML, "");
+        assert.containsOnce(target, ".o_dialog_error");
+        await click(target, ".modal-header .close");
+        assert.containsNone(target, ".o_dialog_error");
+        await click(target, "nav .o_navbar_apps_menu .dropdown-toggle ");
+        assert.containsN(target, ".dropdown-item.o_app", 3);
+        assert.containsNone(target, ".o_menu_brand");
+        assert.strictEqual(target.querySelector(".o_action_manager").innerHTML, "");
         assert.deepEqual(webClient.env.services.router.current.hash, {
             action: "__test__client__action__",
             menu_id: 1,
@@ -1016,9 +1014,11 @@ QUnit.module("ActionManager", (hooks) => {
         assert.expect(5);
 
         class MyAction extends Component {
-            mounted() {
-                assert.step("myAction mounted");
-                browser.location.hash = "#action=__test__client__action__&menu_id=1";
+            setup() {
+                owl.onMounted(() => {
+                    assert.step("myAction mounted");
+                    browser.location.hash = "#action=__test__client__action__&menu_id=1";
+                });
             }
         }
         MyAction.template = xml`<div class="not-here" />`;
@@ -1030,8 +1030,8 @@ QUnit.module("ActionManager", (hooks) => {
         assert.verifySteps(["myAction mounted"]);
 
         await nextTick();
-        assert.containsNone(webClient, ".not-here");
-        assert.containsOnce(webClient, ".test_client_action");
+        assert.containsNone(target, ".not-here");
+        assert.containsOnce(target, ".test_client_action");
 
         assert.deepEqual(webClient.env.services.router.current.hash, {
             action: "__test__client__action__",
@@ -1045,11 +1045,13 @@ QUnit.module("ActionManager", (hooks) => {
         const baseURL = new URL(browser.location.href).toString();
 
         class MyAction extends Component {
-            mounted() {
-                assert.step("myAction mounted");
-                const newURL = baseURL + "#action=__test__client__action__&menu_id=1";
-                // immediate triggering
-                window.dispatchEvent(new HashChangeEvent("hashchange", { newURL }));
+            setup() {
+                owl.onMounted(() => {
+                    assert.step("myAction mounted");
+                    const newURL = baseURL + "#action=__test__client__action__&menu_id=1";
+                    // immediate triggering
+                    window.dispatchEvent(new HashChangeEvent("hashchange", { newURL }));
+                });
             }
         }
         MyAction.template = xml`<div class="not-here" />`;
@@ -1060,8 +1062,8 @@ QUnit.module("ActionManager", (hooks) => {
         assert.verifySteps(["myAction mounted"]);
 
         await nextTick();
-        assert.containsNone(webClient, ".not-here");
-        assert.containsOnce(webClient, ".test_client_action");
+        assert.containsNone(target, ".not-here");
+        assert.containsOnce(target, ".test_client_action");
 
         assert.deepEqual(webClient.env.services.router.current.hash, {
             action: "__test__client__action__",
diff --git a/addons/web/static/tests/webclient/actions/misc_tests.js b/addons/web/static/tests/webclient/actions/misc_tests.js
index bb74b579762..0cf598d2e7e 100644
--- a/addons/web/static/tests/webclient/actions/misc_tests.js
+++ b/addons/web/static/tests/webclient/actions/misc_tests.js
@@ -8,6 +8,7 @@ import Widget from "web.Widget";
 import { makeTestEnv } from "../../helpers/mock_env";
 import {
     click,
+    getFixture,
     hushConsole,
     legacyExtraNextTick,
     makeDeferred,
@@ -24,6 +25,7 @@ import * as cpHelpers from "@web/../tests/search/helpers";
 import ListController from "web.ListController";
 
 let serverData;
+let target;
 // legacy stuff
 const actionRegistry = registry.category("actions");
 const actionHandlersRegistry = registry.category("action_handlers");
@@ -31,6 +33,7 @@ const actionHandlersRegistry = registry.category("action_handlers");
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
         serverData = getActionManagerServerData();
+        target = getFixture();
     });
 
     QUnit.module("Misc");
@@ -108,7 +111,7 @@ QUnit.module("ActionManager", (hooks) => {
             },
         });
         await doAction(webClient, 4448);
-        assert.containsOnce(webClient.el, "div.o_invalid_action");
+        assert.containsOnce(target, "div.o_invalid_action");
     });
 
     QUnit.test("actions can be cached", async function (assert) {
@@ -218,13 +221,13 @@ QUnit.module("ActionManager", (hooks) => {
         const n = delta;
         await doAction(webClient, 4);
         // kanban view is loaded, switch to list view
-        await cpHelpers.switchView(webClient.el, "list");
+        await cpHelpers.switchView(target, "list");
         await legacyExtraNextTick();
         // open a record in form view
-        await testUtils.dom.click(webClient.el.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
         await legacyExtraNextTick();
         // go back to action 7 in breadcrumbs
-        await testUtils.dom.click(webClient.el.querySelector(".o_control_panel .breadcrumb a"));
+        await testUtils.dom.click(target.querySelector(".o_control_panel .breadcrumb a"));
         await legacyExtraNextTick();
         assert.strictEqual(delta, n, "should have properly destroyed all other widgets");
         testUtils.mock.unpatch(Widget);
@@ -280,7 +283,7 @@ QUnit.module("ActionManager", (hooks) => {
             await doAction(webClient, 3, { clearBreadcrumbs: true });
             // switch to the form view (this request is blocked)
             def = testUtils.makeTestPromise();
-            await testUtils.dom.click(webClient.el.querySelector(".o_list_view .o_data_row"));
+            await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
             // execute another action meanwhile (don't block this request)
             await doAction(webClient, 4, { clearBreadcrumbs: true });
             // unblock the switch to the form view in action 3
@@ -374,14 +377,12 @@ QUnit.module("ActionManager", (hooks) => {
     QUnit.test('action with "no_breadcrumbs" set to true', async function (assert) {
         assert.expect(2);
         serverData.actions[4].context = { no_breadcrumbs: true };
-        const webClient = await createWebClient({
-            serverData,
-        });
+        const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
-        assert.containsOnce(webClient, ".o_control_panel .breadcrumb-item");
+        assert.containsOnce(target, ".o_control_panel .breadcrumb-item");
         // push another action flagged with 'no_breadcrumbs=true'
         await doAction(webClient, 4);
-        assert.containsNone(webClient, ".o_control_panel .breadcrumb-item");
+        assert.containsNone(target, ".o_control_panel .breadcrumb-item");
     });
 
     QUnit.test("document's title is updated when an action is executed", async function (assert) {
@@ -408,7 +409,7 @@ QUnit.module("ActionManager", (hooks) => {
         });
         currentHash = webClient.env.services.router.current.hash;
         assert.deepEqual(currentHash, { action: 8, model: "pony", view_type: "list" });
-        await testUtils.dom.click($(webClient.el).find("tr.o_data_row:first"));
+        await testUtils.dom.click($(target).find("tr.o_data_row:first"));
         await legacyExtraNextTick();
         currentTitle = webClient.env.services.title.getParts();
         assert.deepEqual(currentTitle, {
@@ -443,13 +444,13 @@ QUnit.module("ActionManager", (hooks) => {
             core.action_registry.add("ClientAction", ClientAction);
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, "ClientAction");
-            assert.containsOnce(webClient, ".my_button");
-            await testUtils.dom.click(webClient.el.querySelector(".my_button"));
+            assert.containsOnce(target, ".my_button");
+            await testUtils.dom.click(target.querySelector(".my_button"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient, ".o_kanban_view");
-            await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb a:first"));
+            assert.containsOnce(target, ".o_kanban_view");
+            await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a:first"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient, ".my_button");
+            assert.containsOnce(target, ".my_button");
             assert.verifySteps(["on_reverse_breadcrumb"]);
             delete core.action_registry.map.ClientAction;
         }
@@ -467,13 +468,13 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 4);
         await doAction(webClient, 3);
-        assert.containsN(webClient, ".o_control_panel .breadcrumb-item", 2);
+        assert.containsN(target, ".o_control_panel .breadcrumb-item", 2);
         controller.trigger_up("history_back");
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_control_panel .breadcrumb-item");
+        assert.containsOnce(target, ".o_control_panel .breadcrumb-item");
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Partners Action 4",
             "breadcrumbs should display the display_name of the action"
         );
@@ -484,20 +485,23 @@ QUnit.module("ActionManager", (hooks) => {
         for (let i = 0; i < 60; i++) {
             serverData.models.partner.records.push({ id: 100 + i, foo: `Record ${i}` });
         }
-        const webClient = await createWebClient({ serverData });
-        webClient.el.style.height = "250px";
+        const container = document.createElement("div");
+        container.classList.add("o_web_client");
+        container.style.height = "250px";
+        target.appendChild(container);
+        const webClient = await createWebClient({ target: container, serverData });
         // execute a first action
         await doAction(webClient, 3);
-        assert.strictEqual(webClient.el.querySelector(".o_content").scrollTop, 0);
+        assert.strictEqual(target.querySelector(".o_content").scrollTop, 0);
         // simulate a scroll
-        webClient.el.querySelector(".o_content").scrollTop = 100;
+        target.querySelector(".o_content").scrollTop = 100;
         // execute a second action (in which we don't scroll)
         await doAction(webClient, 4);
-        assert.strictEqual(webClient.el.querySelector(".o_content").scrollTop, 0);
+        assert.strictEqual(target.querySelector(".o_content").scrollTop, 0);
         // go back using the breadcrumbs
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb a"));
+        await click(target.querySelector(".o_control_panel .breadcrumb a"));
         await legacyExtraNextTick();
-        assert.strictEqual(webClient.el.querySelector(".o_content").scrollTop, 100);
+        assert.strictEqual(target.querySelector(".o_content").scrollTop, 100);
     });
 
     QUnit.test(
@@ -513,11 +517,11 @@ QUnit.module("ActionManager", (hooks) => {
       </form>`;
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 3);
-            assert.containsOnce(webClient, ".o_list_view");
-            await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+            assert.containsOnce(target, ".o_list_view");
+            await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient, ".o_form_view");
-            await testUtils.dom.click($(webClient.el).find(".o_form_view .o_data_row:first"));
+            assert.containsOnce(target, ".o_form_view");
+            await testUtils.dom.click(target.querySelector(".o_form_view .o_data_row"));
             await legacyExtraNextTick();
             assert.containsOnce(document.body, ".modal .o_form_view");
             await doAction(webClient, 1); // target != 'new'
@@ -538,11 +542,11 @@ QUnit.module("ActionManager", (hooks) => {
       </form>`;
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 3);
-            assert.containsOnce(webClient, ".o_list_view");
-            await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+            assert.containsOnce(target, ".o_list_view");
+            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient, ".o_form_view");
-            await testUtils.dom.click($(webClient.el).find(".o_form_view .o_data_row:first"));
+            assert.containsOnce(target, ".o_form_view");
+            await testUtils.dom.click($(target).find(".o_form_view .o_data_row:first"));
             await legacyExtraNextTick();
             assert.containsOnce(document.body, ".modal .o_form_view");
             await doAction(webClient, 5); // target 'new'
@@ -572,14 +576,14 @@ QUnit.module("ActionManager", (hooks) => {
         await doAction(webClient, 25);
 
         const tooltipProm = makeDeferred();
-        $(webClient.el).one("shown.bs.tooltip", () => {
+        $(target).one("shown.bs.tooltip", () => {
             tooltipProm.resolve();
         });
 
-        triggerEvents(webClient.el, ".modal footer button", ["mouseover", "focusin"]);
+        triggerEvents(target, ".modal footer button", ["mouseover", "focusin"]);
         await tooltipProm;
         // check on webClient dom
-        assert.containsOnce(webClient.el, ".tooltip");
+        assert.containsOnce(document.body, ".tooltip");
         await doAction(webClient, {
             type: "ir.actions.act_window_close",
         });
@@ -609,15 +613,15 @@ QUnit.module("ActionManager", (hooks) => {
         await doAction(webClient, 24);
 
         const tooltipProm = makeDeferred();
-        $(webClient.el).one("shown.bs.tooltip", () => {
+        $(target).one("shown.bs.tooltip", () => {
             tooltipProm.resolve();
         });
 
-        triggerEvents(webClient.el, ".o_form_statusbar button", ["mouseover", "focusin"]);
+        triggerEvents(target, ".o_form_statusbar button", ["mouseover", "focusin"]);
         await tooltipProm;
         // check on webClient DOM
-        assert.containsOnce(webClient.el, ".tooltip");
-        await click(webClient.el, ".o_content");
+        assert.containsOnce(document.body, ".tooltip");
+        await click(target, ".o_content");
         // check on the whole DOM
         assert.containsNone(document.body, ".tooltip");
     });
diff --git a/addons/web/static/tests/webclient/actions/push_state_tests.js b/addons/web/static/tests/webclient/actions/push_state_tests.js
index f8ae67bd364..73c85a55645 100644
--- a/addons/web/static/tests/webclient/actions/push_state_tests.js
+++ b/addons/web/static/tests/webclient/actions/push_state_tests.js
@@ -4,17 +4,25 @@ import { browser } from "@web/core/browser/browser";
 import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
 import testUtils from "web.test_utils";
-import { click, legacyExtraNextTick, nextTick, patchWithCleanup } from "../../helpers/utils";
+import {
+    click,
+    getFixture,
+    legacyExtraNextTick,
+    nextTick,
+    patchWithCleanup,
+} from "../../helpers/utils";
 import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
 
 const { Component, xml } = owl;
 
 let serverData;
+let target;
 const actionRegistry = registry.category("actions");
 
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
         serverData = getActionManagerServerData();
+        target = getFixture();
     });
 
     QUnit.module("Push State");
@@ -24,18 +32,18 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         let urlState = webClient.env.services.router.current;
         assert.deepEqual(urlState.hash, {});
-        await click(webClient.el, ".o_navbar_apps_menu button");
-        await click(webClient.el, ".o_navbar_apps_menu .dropdown-item:nth-child(3)");
+        await click(target, ".o_navbar_apps_menu button");
+        await click(target, ".o_navbar_apps_menu .dropdown-item:nth-child(3)");
         await nextTick();
         await nextTick();
         urlState = webClient.env.services.router.current;
         assert.strictEqual(urlState.hash.action, 1002);
         assert.strictEqual(urlState.hash.menu_id, 2);
         assert.strictEqual(
-            webClient.el.querySelector(".test_client_action").textContent.trim(),
+            target.querySelector(".test_client_action").textContent.trim(),
             "ClientAction_Id 2"
         );
-        assert.strictEqual(webClient.el.querySelector(".o_menu_brand").textContent, "App2");
+        assert.strictEqual(target.querySelector(".o_menu_brand").textContent, "App2");
     });
 
     QUnit.test("do action keeps menu in url", async (assert) => {
@@ -43,34 +51,33 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         let urlState = webClient.env.services.router.current;
         assert.deepEqual(urlState.hash, {});
-        await click(webClient.el, ".o_navbar_apps_menu button");
-        await click(webClient.el, ".o_navbar_apps_menu .dropdown-item:nth-child(3)");
+        await click(target, ".o_navbar_apps_menu button");
+        await click(target, ".o_navbar_apps_menu .dropdown-item:nth-child(3)");
         await nextTick();
         await nextTick();
         urlState = webClient.env.services.router.current;
         assert.strictEqual(urlState.hash.action, 1002);
         assert.strictEqual(urlState.hash.menu_id, 2);
         assert.strictEqual(
-            webClient.el.querySelector(".test_client_action").textContent.trim(),
+            target.querySelector(".test_client_action").textContent.trim(),
             "ClientAction_Id 2"
         );
-        assert.strictEqual(webClient.el.querySelector(".o_menu_brand").textContent, "App2");
+        assert.strictEqual(target.querySelector(".o_menu_brand").textContent, "App2");
         await doAction(webClient, 1001, { clearBreadcrumbs: true });
         urlState = webClient.env.services.router.current;
         assert.strictEqual(urlState.hash.action, 1001);
         assert.strictEqual(urlState.hash.menu_id, 2);
         assert.strictEqual(
-            webClient.el.querySelector(".test_client_action").textContent.trim(),
+            target.querySelector(".test_client_action").textContent.trim(),
             "ClientAction_Id 1"
         );
-        assert.strictEqual(webClient.el.querySelector(".o_menu_brand").textContent, "App2");
+        assert.strictEqual(target.querySelector(".o_menu_brand").textContent, "App2");
     });
 
     QUnit.test("actions can push state", async (assert) => {
         assert.expect(5);
         class ClientActionPushes extends Component {
-            constructor() {
-                super(...arguments);
+            setup() {
                 this.router = useService("router");
             }
             _actionPushState() {
@@ -89,7 +96,7 @@ QUnit.module("ActionManager", (hooks) => {
         urlState = webClient.env.services.router.current;
         assert.strictEqual(urlState.hash.action, "client_action_pushes");
         assert.strictEqual(urlState.hash.menu_id, undefined);
-        await click(webClient.el, ".test_client_action");
+        await click(target, ".test_client_action");
         urlState = webClient.env.services.router.current;
         assert.strictEqual(urlState.hash.action, "client_action_pushes");
         assert.strictEqual(urlState.hash.arbitrary, "actionPushed");
@@ -98,8 +105,7 @@ QUnit.module("ActionManager", (hooks) => {
     QUnit.test("actions override previous state", async (assert) => {
         assert.expect(5);
         class ClientActionPushes extends Component {
-            constructor() {
-                super(...arguments);
+            setup() {
                 this.router = useService("router");
             }
             _actionPushState() {
@@ -115,7 +121,7 @@ QUnit.module("ActionManager", (hooks) => {
         let urlState = webClient.env.services.router.current;
         assert.deepEqual(urlState.hash, {});
         await doAction(webClient, "client_action_pushes");
-        await click(webClient.el, ".test_client_action");
+        await click(target, ".test_client_action");
         urlState = webClient.env.services.router.current;
         assert.strictEqual(urlState.hash.action, "client_action_pushes");
         assert.strictEqual(urlState.hash.arbitrary, "actionPushed");
@@ -128,8 +134,7 @@ QUnit.module("ActionManager", (hooks) => {
     QUnit.test("actions override previous state from menu click", async (assert) => {
         assert.expect(3);
         class ClientActionPushes extends Component {
-            constructor() {
-                super(...arguments);
+            setup() {
                 this.router = useService("router");
             }
             _actionPushState() {
@@ -145,9 +150,9 @@ QUnit.module("ActionManager", (hooks) => {
         let urlState = webClient.env.services.router.current;
         assert.deepEqual(urlState.hash, {});
         await doAction(webClient, "client_action_pushes");
-        await click(webClient.el, ".test_client_action");
-        await click(webClient.el, ".o_navbar_apps_menu button");
-        await click(webClient.el, ".o_navbar_apps_menu .dropdown-item:nth-child(3)");
+        await click(target, ".test_client_action");
+        await click(target, ".o_navbar_apps_menu button");
+        await click(target, ".o_navbar_apps_menu .dropdown-item:nth-child(3)");
         await nextTick();
         await nextTick();
         urlState = webClient.env.services.router.current;
@@ -167,7 +172,7 @@ QUnit.module("ActionManager", (hooks) => {
         });
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 1001);
-        assert.containsOnce(webClient, ".modal .test_client_action");
+        assert.containsOnce(target, ".modal .test_client_action");
     });
 
     QUnit.test("properly push state", async function (assert) {
@@ -185,7 +190,7 @@ QUnit.module("ActionManager", (hooks) => {
             model: "pony",
             view_type: "list",
         });
-        await testUtils.dom.click($(webClient.el).find("tr.o_data_row:first"));
+        await testUtils.dom.click($(target).find("tr.o_data_row:first"));
         await legacyExtraNextTick();
         assert.deepEqual(webClient.env.services.router.current.hash, {
             action: 8,
@@ -232,10 +237,10 @@ QUnit.module("ActionManager", (hooks) => {
             model: "pony",
             view_type: "list",
         });
-        await testUtils.dom.click($(webClient.el).find("tr.o_data_row:first"));
+        await testUtils.dom.click($(target).find("tr.o_data_row:first"));
         await legacyExtraNextTick();
         // we make sure here that the list view is still in the dom
-        assert.containsOnce(webClient, ".o_list_view", "there should still be a list view in dom");
+        assert.containsOnce(target, ".o_list_view", "there should still be a list view in dom");
         assert.deepEqual(webClient.env.services.router.current.hash, {
             action: 8,
             model: "pony",
diff --git a/addons/web/static/tests/webclient/actions/report_action_tests.js b/addons/web/static/tests/webclient/actions/report_action_tests.js
index cc4d38bd7c0..42901b832fb 100644
--- a/addons/web/static/tests/webclient/actions/report_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/report_action_tests.js
@@ -5,19 +5,21 @@ import { uiService } from "@web/core/ui/ui_service";
 import testUtils from "web.test_utils";
 import ReportClientAction from "report.client_action";
 import { makeFakeNotificationService } from "../../helpers/mock_services";
-import { patchWithCleanup, click } from "../../helpers/utils";
+import { patchWithCleanup, getFixture, click } from "../../helpers/utils";
 import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
 import { mockDownload } from "@web/../tests/helpers/utils";
 import { clearRegistryWithCleanup } from "../../helpers/mock_env";
 import { session } from "@web/session";
 
 let serverData;
+let target;
 
 const serviceRegistry = registry.category("services");
 
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
         serverData = getActionManagerServerData();
+        target = getFixture();
         clearRegistryWithCleanup(registry.category("main_components"));
     });
 
@@ -153,11 +155,11 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData, mockRPC });
             await doAction(webClient, 7);
             assert.containsOnce(
-                webClient,
+                target,
                 ".o_report_iframe",
                 "should have opened the report client action"
             );
-            assert.containsOnce(webClient, ".o_cp_buttons .o_report_buttons .o_report_print");
+            assert.containsOnce(target, ".o_cp_buttons .o_report_buttons .o_report_print");
             assert.verifySteps([
                 "/web/webclient/load_menus",
                 "/web/action/load",
@@ -206,7 +208,7 @@ QUnit.module("ActionManager", (hooks) => {
         });
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 12);
-        assert.containsOnce(webClient, ".o_report_iframe", "should have opened the client action");
+        assert.containsOnce(target, ".o_report_iframe", "should have opened the client action");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -240,12 +242,14 @@ QUnit.module("ActionManager", (hooks) => {
             };
             const webClient = await createWebClient({ serverData, mockRPC });
             const ui = webClient.env.services.ui;
-            ui.bus.on("BLOCK", webClient, () => {
+            const onBlock = () => {
                 assert.step("block");
-            });
-            ui.bus.on("UNBLOCK", webClient, () => {
+            };
+            const onUnblock = () => {
                 assert.step("unblock");
-            });
+            };
+            ui.bus.addEventListener("BLOCK", onBlock);
+            ui.bus.addEventListener("UNBLOCK", onUnblock);
             await doAction(webClient, 7);
             try {
                 await doAction(webClient, 7);
@@ -261,8 +265,8 @@ QUnit.module("ActionManager", (hooks) => {
                 "unblock",
                 "error caught",
             ]);
-            ui.bus.off("BLOCK", webClient);
-            ui.bus.off("UNBLOCK", webClient);
+            ui.bus.removeEventListener("BLOCK", onBlock);
+            ui.bus.removeEventListener("UNBLOCK", onUnblock);
         }
     );
 
@@ -350,7 +354,7 @@ QUnit.module("ActionManager", (hooks) => {
         assert.verifySteps([
             "/report/html/ennio.morricone/99?context=%7B%22lang%22%3A%22en%22%2C%22uid%22%3A7%2C%22tz%22%3A%22taht%22%7D",
         ]);
-        await click(webClient.el.querySelector(".o_report_print"));
+        await click(target.querySelector(".o_report_print"));
         assert.verifySteps(["/report/check_wkhtmltopdf", "/report/download"]);
         testUtils.mock.unpatch(ReportClientAction);
     });
diff --git a/addons/web/static/tests/webclient/actions/server_action_tests.js b/addons/web/static/tests/webclient/actions/server_action_tests.js
index 7421d18b1b7..205b298e3f7 100644
--- a/addons/web/static/tests/webclient/actions/server_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/server_action_tests.js
@@ -1,12 +1,15 @@
 /** @odoo-module **/
 
 import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
+import { getFixture } from "../../helpers/utils";
 
 let serverData;
+let target;
 
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
         serverData = getActionManagerServerData();
+        target = getFixture();
     });
 
     QUnit.module("Server actions");
@@ -22,8 +25,8 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 2);
-        assert.containsOnce(webClient, ".o_control_panel", "should have rendered a control panel");
-        assert.containsOnce(webClient, ".o_kanban_view", "should have rendered a kanban view");
+        assert.containsOnce(target, ".o_control_panel", "should have rendered a control panel");
+        assert.containsOnce(target, ".o_kanban_view", "should have rendered a kanban view");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
diff --git a/addons/web/static/tests/webclient/actions/target_tests.js b/addons/web/static/tests/webclient/actions/target_tests.js
index 4c72e67331e..c45abca63db 100644
--- a/addons/web/static/tests/webclient/actions/target_tests.js
+++ b/addons/web/static/tests/webclient/actions/target_tests.js
@@ -4,20 +4,29 @@ import testUtils from "web.test_utils";
 import core from "web.core";
 import AbstractAction from "web.AbstractAction";
 import { registry } from "@web/core/registry";
-import { click, legacyExtraNextTick, patchWithCleanup, makeDeferred } from "../../helpers/utils";
+import {
+    click,
+    getFixture,
+    legacyExtraNextTick,
+    patchWithCleanup,
+    makeDeferred,
+    nextTick,
+} from "../../helpers/utils";
 import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
 import { registerCleanup } from "../../helpers/cleanup";
 import { errorService } from "@web/core/errors/error_service";
 import { useService } from "@web/core/utils/hooks";
 import { ClientErrorDialog } from "@web/core/errors/error_dialogs";
 
-const { Component, xml } = owl;
+const { Component, onMounted, xml } = owl;
 
 let serverData;
+let target;
 
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
         serverData = getActionManagerServerData();
+        target = getFixture();
     });
 
     QUnit.module('Actions in target="new"');
@@ -197,7 +206,6 @@ QUnit.module("ActionManager", (hooks) => {
     QUnit.test(
         'footer buttons are updated when having another action in target "new"',
         async function (assert) {
-            assert.expect(9);
             serverData.views["partner,false,form"] =
                 "<form>" +
                 '<field name="display_name"/>' +
@@ -207,32 +215,22 @@ QUnit.module("ActionManager", (hooks) => {
                 "</form>";
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 5);
-            assert.containsNone(
-                webClient.el,
-                '.o_technical_modal .modal-body button[special="save"]'
-            );
-            assert.containsNone(webClient.el, ".o_technical_modal .modal-body button.infooter");
-            assert.containsOnce(webClient.el, ".o_technical_modal .modal-footer button.infooter");
-            assert.containsOnce(webClient.el, ".o_technical_modal .modal-footer button");
+            assert.containsNone(target, '.o_technical_modal .modal-body button[special="save"]');
+            assert.containsNone(target, ".o_technical_modal .modal-body button.infooter");
+            assert.containsOnce(target, ".o_technical_modal .modal-footer button.infooter");
+            assert.containsOnce(target, ".o_technical_modal .modal-footer button");
             await doAction(webClient, 25);
-            assert.containsNone(webClient.el, ".o_technical_modal .modal-body button.infooter");
-            assert.containsNone(webClient.el, ".o_technical_modal .modal-footer button.infooter");
-            assert.containsNone(
-                webClient.el,
-                '.o_technical_modal .modal-body button[special="save"]'
-            );
-            assert.containsOnce(
-                webClient.el,
-                '.o_technical_modal .modal-footer button[special="save"]'
-            );
-            assert.containsOnce(webClient.el, ".o_technical_modal .modal-footer button");
+            assert.containsNone(target, ".o_technical_modal .modal-body button.infooter");
+            assert.containsNone(target, ".o_technical_modal .modal-footer button.infooter");
+            assert.containsNone(target, '.o_technical_modal .modal-body button[special="save"]');
+            assert.containsOnce(target, '.o_technical_modal .modal-footer button[special="save"]');
+            assert.containsOnce(target, ".o_technical_modal .modal-footer button");
         }
     );
 
     QUnit.test(
         'buttons of client action in target="new" and transition to MVC action',
         async function (assert) {
-            assert.expect(4);
             const ClientAction = AbstractAction.extend({
                 renderButtons($target) {
                     const button = document.createElement("button");
@@ -247,11 +245,11 @@ QUnit.module("ActionManager", (hooks) => {
                 target: "new",
                 type: "ir.actions.client",
             });
-            assert.containsOnce(webClient.el, ".modal footer button.o_stagger_lee");
-            assert.containsNone(webClient.el, '.modal footer button[special="save"]');
+            assert.containsOnce(target, ".modal footer button.o_stagger_lee");
+            assert.containsNone(target, '.modal footer button[special="save"]');
             await doAction(webClient, 25);
-            assert.containsNone(webClient.el, ".modal footer button.o_stagger_lee");
-            assert.containsOnce(webClient.el, '.modal footer button[special="save"]');
+            assert.containsNone(target, ".modal footer button.o_stagger_lee");
+            assert.containsOnce(target, '.modal footer button[special="save"]');
             delete core.action_registry.map.test;
         }
     );
@@ -259,8 +257,6 @@ QUnit.module("ActionManager", (hooks) => {
     QUnit.test(
         'button with confirm attribute in act_window action in target="new"',
         async function (assert) {
-            assert.expect(5);
-
             serverData.actions[999] = {
                 id: 999,
                 name: "A window action",
@@ -374,9 +370,9 @@ QUnit.module("ActionManager", (hooks) => {
 
         const errorDialogOpened = makeDeferred();
         patchWithCleanup(ClientErrorDialog.prototype, {
-            mounted() {
+            setup() {
                 this._super(...arguments);
-                errorDialogOpened.resolve();
+                onMounted(() => errorDialogOpened.resolve());
             },
         });
 
@@ -384,26 +380,24 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({});
 
         await doAction(webClient, { type: "ir.actions.client", tag: "clientAction" });
-        await click(webClient.el, ".my_action");
+        await click(target, ".my_action");
         await errorDialogOpened;
 
-        assert.containsOnce(webClient, ".modal");
-        await click(webClient.el, ".modal-body button.btn-link");
+        assert.containsOnce(target, ".modal");
+        await click(target, ".modal-body button.btn-link");
         assert.ok(
-            webClient.el
-                .querySelector(".modal-body .o_error_detail")
-                .textContent.includes("my error")
+            target.querySelector(".modal-body .o_error_detail").textContent.includes("my error")
         );
 
-        await click(webClient.el, ".modal-footer button");
-        assert.containsNone(webClient, ".modal");
+        await click(target, ".modal-footer button");
+        assert.containsNone(target, ".modal");
 
         await doAction(webClient, {
             type: "ir.actions.client",
             tag: "clientActionNew",
             target: "new",
         });
-        assert.containsOnce(webClient, ".modal .my_action_new");
+        assert.containsOnce(target, ".modal .my_action_new");
 
         assert.verifySteps([]);
     });
@@ -412,14 +406,13 @@ QUnit.module("ActionManager", (hooks) => {
     QUnit.test(
         'form views for actions in target="inline" open in edit mode',
         async function (assert) {
-            assert.expect(6);
             const mockRPC = async (route, args) => {
                 assert.step(args.method || route);
             };
             const webClient = await createWebClient({ serverData, mockRPC });
             await doAction(webClient, 6);
             assert.containsOnce(
-                webClient,
+                target,
                 ".o_form_view.o_form_editable",
                 "should have rendered a form view in edit mode"
             );
@@ -433,78 +426,76 @@ QUnit.module("ActionManager", (hooks) => {
     );
 
     QUnit.test("breadcrumbs and actions with target inline", async function (assert) {
-        assert.expect(4);
         serverData.actions[4].views = [[false, "form"]];
         serverData.actions[4].target = "inline";
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 4);
-        assert.containsNone(webClient, ".o_control_panel");
+        assert.containsNone(target, ".o_control_panel");
         await doAction(webClient, 1, { clearBreadcrumbs: true });
-        assert.containsOnce(webClient, ".o_control_panel");
-        assert.isVisible(webClient.el.querySelector(".o_control_panel"));
+        assert.containsOnce(target, ".o_control_panel");
+        assert.isVisible(target.querySelector(".o_control_panel"));
         assert.strictEqual(
-            webClient.el.querySelector(".o_control_panel .breadcrumb").textContent,
+            target.querySelector(".o_control_panel .breadcrumb").textContent,
             "Partners Action 1",
             "should have only one current action visible in breadcrumbs"
         );
     });
 
     QUnit.module('Actions in target="fullscreen"');
+
     QUnit.test(
         'correctly execute act_window actions in target="fullscreen"',
         async function (assert) {
-            assert.expect(3);
             serverData.actions[1].target = "fullscreen";
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 1);
-            assert.containsOnce(
-                webClient.el,
-                ".o_control_panel",
-                "should have rendered a control panel"
-            );
-            assert.containsOnce(webClient, ".o_kanban_view", "should have rendered a kanban view");
-            assert.isNotVisible(webClient.el.querySelector(".o_main_navbar"));
+            await nextTick(); // wait for the webclient template to be re-rendered
+            assert.containsOnce(target, ".o_control_panel", "should have rendered a control panel");
+            assert.containsOnce(target, ".o_kanban_view", "should have rendered a kanban view");
+            assert.containsNone(target, ".o_main_navbar");
         }
     );
 
     QUnit.test('fullscreen on action change: back to a "current" action', async function (assert) {
-        assert.expect(3);
         serverData.actions[1].target = "fullscreen";
         serverData.views[
             "partner,false,form"
         ] = `<form><button name="1" type="action" class="oe_stat_button" /></form>`;
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 6);
-        assert.isVisible(webClient.el.querySelector(".o_main_navbar"));
-        await testUtils.dom.click($(webClient.el).find("button[name=1]"));
         await legacyExtraNextTick();
-        assert.isNotVisible(webClient.el.querySelector(".o_main_navbar"));
-        await testUtils.dom.click($(webClient.el).find(".breadcrumb li a:first"));
+        assert.containsOnce(target, ".o_main_navbar");
+        await testUtils.dom.click($(target).find("button[name=1]"));
+        await nextTick(); // wait for the webclient template to be re-rendered
         await legacyExtraNextTick();
-        assert.isVisible(webClient.el.querySelector(".o_main_navbar"));
+        assert.containsNone(target, ".o_main_navbar");
+        await testUtils.dom.click(target.querySelector(".breadcrumb li a"));
+        await nextTick(); // wait for the webclient template to be re-rendered
+        await legacyExtraNextTick();
+        assert.containsOnce(target, ".o_main_navbar");
     });
 
     QUnit.test('fullscreen on action change: all "fullscreen" actions', async function (assert) {
-        assert.expect(3);
         serverData.actions[6].target = "fullscreen";
         serverData.views[
             "partner,false,form"
         ] = `<form><button name="1" type="action" class="oe_stat_button" /></form>`;
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 6);
-        assert.isNotVisible(webClient.el.querySelector(".o_main_navbar"));
-        await testUtils.dom.click($(webClient.el).find("button[name=1]"));
+        assert.containsNone(target, ".o_main_navbar");
+        await testUtils.dom.click($(target).find("button[name=1]"));
+        await nextTick(); // wait for the webclient template to be re-rendered
         await legacyExtraNextTick();
-        assert.isNotVisible(webClient.el.querySelector(".o_main_navbar"));
-        await testUtils.dom.click($(webClient.el).find(".breadcrumb li a:first"));
+        assert.containsNone(target, ".o_main_navbar");
+        await testUtils.dom.click($(target).find(".breadcrumb li a:first"));
+        await nextTick(); // wait for the webclient template to be re-rendered
         await legacyExtraNextTick();
-        assert.isNotVisible(webClient.el.querySelector(".o_main_navbar"));
+        assert.containsNone(target, ".o_main_navbar");
     });
 
     QUnit.test(
         'fullscreen on action change: back to another "current" action',
         async function (assert) {
-            assert.expect(8);
             serverData.menus = {
                 root: { id: "root", children: [1], name: "root", appID: "root" },
                 1: { id: 1, children: [], name: "MAIN APP", appID: 1, actionID: 6 },
@@ -512,23 +503,24 @@ QUnit.module("ActionManager", (hooks) => {
             serverData.actions[1].target = "fullscreen";
             serverData.views["partner,false,form"] =
                 '<form><button name="24" type="action" class="oe_stat_button"/></form>';
-            const webClient = await createWebClient({ serverData });
-            await testUtils.nextTick(); // wait for the load state (default app)
+            await createWebClient({ serverData });
+            await nextTick(); // wait for the load state (default app)
             await legacyExtraNextTick();
-            assert.containsOnce(webClient, "nav .o_menu_brand");
-            assert.strictEqual($(webClient.el).find("nav .o_menu_brand").text(), "MAIN APP");
-            assert.doesNotHaveClass(webClient.el, "o_fullscreen");
-            await testUtils.dom.click($(webClient.el).find('button[name="24"]'));
+            assert.containsOnce(target, "nav .o_menu_brand");
+            assert.strictEqual($(target).find("nav .o_menu_brand").text(), "MAIN APP");
+            await testUtils.dom.click($(target).find('button[name="24"]'));
+            await nextTick(); // wait for the webclient template to be re-rendered
             await legacyExtraNextTick();
-            assert.doesNotHaveClass(webClient.el, "o_fullscreen");
-            await testUtils.dom.click($(webClient.el).find('button[name="1"]'));
+            assert.containsOnce(target, "nav .o_menu_brand");
+            await testUtils.dom.click($(target).find('button[name="1"]'));
+            await nextTick(); // wait for the webclient template to be re-rendered
             await legacyExtraNextTick();
-            assert.hasClass(webClient.el, "o_fullscreen");
-            await testUtils.dom.click($(webClient.el).find(".breadcrumb li a")[1]);
+            assert.containsNone(target, "nav.o_main_navbar");
+            await testUtils.dom.click($(target).find(".breadcrumb li a")[1]);
+            await nextTick(); // wait for the webclient template to be re-rendered
             await legacyExtraNextTick();
-            assert.doesNotHaveClass(webClient.el, "o_fullscreen");
-            assert.containsOnce(webClient, "nav .o_menu_brand");
-            assert.strictEqual($(webClient.el).find("nav .o_menu_brand").text(), "MAIN APP");
+            assert.containsOnce(target, "nav .o_menu_brand");
+            assert.strictEqual($(target).find("nav .o_menu_brand").text(), "MAIN APP");
         }
     );
 });
diff --git a/addons/web/static/tests/webclient/actions/window_action_tests.js b/addons/web/static/tests/webclient/actions/window_action_tests.js
index cedb74f320a..f6b2539c057 100644
--- a/addons/web/static/tests/webclient/actions/window_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/window_action_tests.js
@@ -12,6 +12,7 @@ import legacyViewRegistry from "web.view_registry";
 import { session } from "@web/session";
 import {
     click,
+    getFixture,
     legacyExtraNextTick,
     makeDeferred,
     nextTick,
@@ -25,14 +26,15 @@ import { WarningDialog } from "@web/core/errors/error_dialogs";
 import { makeFakeUserService } from "@web/../tests/helpers/mock_services";
 import * as cpHelpers from "@web/../tests/search/helpers";
 
-const { onMounted } = owl;
-
+const { markup, onMounted } = owl;
 let serverData;
+let target;
 const serviceRegistry = registry.category("services");
 
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
         serverData = getActionManagerServerData();
+        target = getFixture();
     });
 
     QUnit.module("Window Actions");
@@ -49,7 +51,7 @@ QUnit.module("ActionManager", (hooks) => {
             ".o_control_panel",
             "should have rendered a control panel"
         );
-        assert.containsOnce(webClient, ".o_kanban_view", "should have rendered a kanban view");
+        assert.containsOnce(target, ".o_kanban_view", "should have rendered a kanban view");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -74,13 +76,13 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
-        assert.containsNone(webClient, ".o_cp_action_menus");
-        await testUtils.dom.clickFirst($(webClient.el).find("input.custom-control-input"));
+        assert.containsNone(target, ".o_cp_action_menus");
+        await testUtils.dom.clickFirst($(target).find("input.custom-control-input"));
         assert.isVisible(
-            $(webClient.el).find('.o_cp_action_menus button.dropdown-toggle:contains("Print")')[0]
+            $(target).find('.o_cp_action_menus button.dropdown-toggle:contains("Print")')[0]
         );
         assert.isVisible(
-            $(webClient.el).find('.o_cp_action_menus button.dropdown-toggle:contains("Action")')[0]
+            $(target).find('.o_cp_action_menus button.dropdown-toggle:contains("Action")')[0]
         );
     });
 
@@ -91,36 +93,32 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
-        assert.containsOnce(webClient, ".o_list_view", "should display the list view");
+        assert.containsOnce(target, ".o_list_view", "should display the list view");
         // switch to kanban view
-        await cpHelpers.switchView(webClient.el, "kanban");
+        await cpHelpers.switchView(target, "kanban");
         await legacyExtraNextTick();
-        assert.containsNone(webClient, ".o_list_view", "should no longer display the list view");
-        assert.containsOnce(webClient, ".o_kanban_view", "should display the kanban view");
+        assert.containsNone(target, ".o_list_view", "should no longer display the list view");
+        assert.containsOnce(target, ".o_kanban_view", "should display the kanban view");
         // switch back to list view
-        await cpHelpers.switchView(webClient.el, "list");
+        await cpHelpers.switchView(target, "list");
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_list_view", "should display the list view");
-        assert.containsNone(
-            webClient.el,
-            ".o_kanban_view",
-            "should no longer display the kanban view"
-        );
+        assert.containsOnce(target, ".o_list_view", "should display the list view");
+        assert.containsNone(target, ".o_kanban_view", "should no longer display the kanban view");
         // open a record in form view
-        await testUtils.dom.click(webClient.el.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
         await legacyExtraNextTick();
-        assert.containsNone(webClient, ".o_list_view", "should no longer display the list view");
-        assert.containsOnce(webClient, ".o_form_view", "should display the form view");
+        assert.containsNone(target, ".o_list_view", "should no longer display the list view");
+        assert.containsOnce(target, ".o_form_view", "should display the form view");
         assert.strictEqual(
-            $(webClient.el).find(".o_field_widget[name=foo]").text(),
+            $(target).find(".o_field_widget[name=foo]").text(),
             "yop",
             "should have opened the correct record"
         );
         // go back to list view using the breadcrumbs
-        await testUtils.dom.click(webClient.el.querySelector(".o_control_panel .breadcrumb a"));
+        await testUtils.dom.click(target.querySelector(".o_control_panel .breadcrumb a"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_list_view", "should display the list view");
-        assert.containsNone(webClient, ".o_form_view", "should no longer display the form view");
+        assert.containsOnce(target, ".o_list_view", "should display the list view");
+        assert.containsNone(target, ".o_form_view", "should no longer display the form view");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -160,18 +158,18 @@ QUnit.module("ActionManager", (hooks) => {
         assert.expect(14);
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 1);
-        assert.containsOnce(webClient, ".o_kanban_view", "should display the kanban view");
+        assert.containsOnce(target, ".o_kanban_view", "should display the kanban view");
         // quick create record
-        await testUtils.dom.click(webClient.el.querySelector(".o-kanban-button-new"));
+        await testUtils.dom.click(target.querySelector(".o-kanban-button-new"));
         await testUtils.fields.editInput(
-            webClient.el.querySelector(".o_field_widget[name=display_name]"),
+            target.querySelector(".o_field_widget[name=display_name]"),
             "New name"
         );
         await legacyExtraNextTick();
         // edit quick-created record
-        await testUtils.dom.click(webClient.el.querySelector(".o_kanban_edit"));
+        await testUtils.dom.click(target.querySelector(".o_kanban_edit"));
         assert.containsOnce(
-            webClient,
+            target,
             ".o_form_view.o_form_editable",
             "should display the form view in edit mode"
         );
@@ -233,13 +231,13 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData, mockRPC });
             await doAction(webClient, 3);
             // Sort records
-            await testUtils.dom.click($(webClient.el).find(".o_list_view th.o_column_sortable"));
+            await testUtils.dom.click($(target).find(".o_list_view th.o_column_sortable"));
             await legacyExtraNextTick();
             // Get to the form view of the model, on the first record
-            await testUtils.dom.click($(webClient.el).find(".o_data_cell:first"));
+            await testUtils.dom.click($(target).find(".o_data_cell:first"));
             await legacyExtraNextTick();
             // Execute another action by clicking on the button within the form
-            await testUtils.dom.click($(webClient.el).find("button[name=8]"));
+            await testUtils.dom.click($(target).find("button[name=8]"));
             await legacyExtraNextTick();
         }
     );
@@ -249,91 +247,91 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             "there should be one controller in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Partners",
             "breadcrumbs should display the display_name of the action"
         );
         // switch to kanban view
-        await cpHelpers.switchView(webClient.el, "kanban");
+        await cpHelpers.switchView(target, "kanban");
         await legacyExtraNextTick();
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             "there should still be one controller in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Partners",
             "breadcrumbs should still display the display_name of the action"
         );
         // open a record in form view
-        await testUtils.dom.click(webClient.el.querySelector(".o_kanban_view .o_kanban_record"));
+        await testUtils.dom.click(target.querySelector(".o_kanban_view .o_kanban_record"));
         await legacyExtraNextTick();
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             2,
             "there should be two controllers in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "First record"
         );
         // go back to kanban view using the breadcrumbs
-        await testUtils.dom.click(webClient.el.querySelector(".o_control_panel .breadcrumb a"));
+        await testUtils.dom.click(target.querySelector(".o_control_panel .breadcrumb a"));
         await legacyExtraNextTick();
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             "there should be one controller in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Partners",
             "breadcrumbs should display the display_name of the action"
         );
         // switch back to list view
-        await cpHelpers.switchView(webClient.el, "list");
+        await cpHelpers.switchView(target, "list");
         await legacyExtraNextTick();
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             "there should still be one controller in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Partners",
             "breadcrumbs should still display the display_name of the action"
         );
         // open a record in form view
-        await testUtils.dom.click(webClient.el.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
         await legacyExtraNextTick();
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             2,
             "there should be two controllers in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "First record"
         );
         // go back to list view using the breadcrumbs
-        await testUtils.dom.click(webClient.el.querySelector(".o_control_panel .breadcrumb a"));
+        await testUtils.dom.click(target.querySelector(".o_control_panel .breadcrumb a"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_list_view", "should be back on list view");
+        assert.containsOnce(target, ".o_list_view", "should be back on list view");
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             "there should be one controller in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Partners",
             "breadcrumbs should display the display_name of the action"
         );
@@ -344,83 +342,83 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel button.o_switch_view",
             2,
             "should have two switch buttons (list and kanban)"
         );
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_control_panel button.o_switch_view.active",
             "should have only one active button"
         );
         assert.hasClass(
-            webClient.el.querySelector(".o_control_panel .o_switch_view"),
+            target.querySelector(".o_control_panel .o_switch_view"),
             "o_list",
             "list switch button should be the first one"
         );
         assert.hasClass(
-            webClient.el.querySelector(".o_control_panel .o_switch_view.o_list"),
+            target.querySelector(".o_control_panel .o_switch_view.o_list"),
             "active",
             "list should be the active view"
         );
         // switch to kanban view
-        await cpHelpers.switchView(webClient.el, "kanban");
+        await cpHelpers.switchView(target, "kanban");
         await legacyExtraNextTick();
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .o_switch_view",
             2,
             "should still have two switch buttons (list and kanban)"
         );
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_control_panel .o_switch_view.active",
             "should still have only one active button"
         );
         assert.hasClass(
-            webClient.el.querySelector(".o_control_panel .o_switch_view"),
+            target.querySelector(".o_control_panel .o_switch_view"),
             "o_list",
             "list switch button should still be the first one"
         );
         assert.hasClass(
-            webClient.el.querySelector(".o_control_panel .o_switch_view.o_kanban"),
+            target.querySelector(".o_control_panel .o_switch_view.o_kanban"),
             "active",
             "kanban should now be the active view"
         );
         // switch back to list view
-        await cpHelpers.switchView(webClient.el, "list");
+        await cpHelpers.switchView(target, "list");
         await legacyExtraNextTick();
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .o_switch_view",
             2,
             "should still have two switch buttons (list and kanban)"
         );
         assert.hasClass(
-            webClient.el.querySelector(".o_control_panel .o_switch_view.o_list"),
+            target.querySelector(".o_control_panel .o_switch_view.o_list"),
             "active",
             "list should now be the active view"
         );
         // open a record in form view
-        await testUtils.dom.click(webClient.el.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
         await legacyExtraNextTick();
         assert.containsNone(
-            webClient.el,
+            target,
             ".o_control_panel .o_switch_view",
             "should not have any switch buttons"
         );
         // go back to list view using the breadcrumbs
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb a"));
+        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a"));
         await legacyExtraNextTick();
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .o_switch_view",
             2,
             "should have two switch buttons (list and kanban)"
         );
         assert.hasClass(
-            webClient.el.querySelector(".o_control_panel .o_switch_view.o_list"),
+            target.querySelector(".o_control_panel .o_switch_view.o_list"),
             "active",
             "list should be the active view"
         );
@@ -430,64 +428,64 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 4);
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .o_pager_value").text(),
+            $(target).find(".o_control_panel .o_pager_value").text(),
             "1-5",
             "value should be correct for kanban"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .o_pager_limit").text(),
+            $(target).find(".o_control_panel .o_pager_limit").text(),
             "5",
             "limit should be correct for kanban"
         );
         // switch to list view
-        await cpHelpers.switchView(webClient.el, "list");
+        await cpHelpers.switchView(target, "list");
         await legacyExtraNextTick();
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .o_pager_value").text(),
+            $(target).find(".o_control_panel .o_pager_value").text(),
             "1-3",
             "value should be correct for list"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .o_pager_limit").text(),
+            $(target).find(".o_control_panel .o_pager_limit").text(),
             "5",
             "limit should be correct for list"
         );
         // open a record in form view
-        await testUtils.dom.click(webClient.el.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
         await legacyExtraNextTick();
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .o_pager_value").text(),
+            $(target).find(".o_control_panel .o_pager_value").text(),
             "1",
             "value should be correct for form"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .o_pager_limit").text(),
+            $(target).find(".o_control_panel .o_pager_limit").text(),
             "3",
             "limit should be correct for form"
         );
         // go back to list view using the breadcrumbs
-        await testUtils.dom.click(webClient.el.querySelector(".o_control_panel .breadcrumb a"));
+        await testUtils.dom.click(target.querySelector(".o_control_panel .breadcrumb a"));
         await legacyExtraNextTick();
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .o_pager_value").text(),
+            $(target).find(".o_control_panel .o_pager_value").text(),
             "1-3",
             "value should be correct for list"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .o_pager_limit").text(),
+            $(target).find(".o_control_panel .o_pager_limit").text(),
             "5",
             "limit should be correct for list"
         );
         // switch back to kanban view
-        await cpHelpers.switchView(webClient.el, "kanban");
+        await cpHelpers.switchView(target, "kanban");
         await legacyExtraNextTick();
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .o_pager_value").text(),
+            $(target).find(".o_control_panel .o_pager_value").text(),
             "1-5",
             "value should be correct for kanban"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .o_pager_limit").text(),
+            $(target).find(".o_control_panel .o_pager_limit").text(),
             "5",
             "limit should be correct for kanban"
         );
@@ -498,24 +496,24 @@ QUnit.module("ActionManager", (hooks) => {
         serverData.actions[3].search_view_id = [4, "a custom search view"];
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
-        assert.containsN(webClient, ".o_data_row", 5);
+        assert.containsN(target, ".o_data_row", 5);
         // activate a domain
-        await cpHelpers.toggleFilterMenu(webClient.el);
-        await cpHelpers.toggleMenuItem(webClient.el, "Bar");
+        await cpHelpers.toggleFilterMenu(target);
+        await cpHelpers.toggleMenuItem(target, "Bar");
         await legacyExtraNextTick();
-        assert.containsN(webClient, ".o_data_row", 2);
+        assert.containsN(target, ".o_data_row", 2);
         // switch to kanban
-        await cpHelpers.switchView(webClient.el, "kanban");
+        await cpHelpers.switchView(target, "kanban");
         await legacyExtraNextTick();
-        assert.containsN(webClient, ".o_kanban_record:not(.o_kanban_ghost)", 2);
+        assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 2);
         // remove the domain
-        await testUtils.dom.click(webClient.el.querySelector(".o_searchview .o_facet_remove"));
+        await testUtils.dom.click(target.querySelector(".o_searchview .o_facet_remove"));
         await legacyExtraNextTick();
-        assert.containsN(webClient, ".o_kanban_record:not(.o_kanban_ghost)", 5);
+        assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 5);
         // switch back to list
-        await cpHelpers.switchView(webClient.el, "list");
+        await cpHelpers.switchView(target, "list");
         await legacyExtraNextTick();
-        assert.containsN(webClient, ".o_data_row", 5);
+        assert.containsN(target, ".o_data_row", 5);
     });
 
     QUnit.test("there is no flickering when switching between views", async function (assert) {
@@ -528,60 +526,56 @@ QUnit.module("ActionManager", (hooks) => {
         await doAction(webClient, 3);
         // switch to kanban view
         def = testUtils.makeTestPromise();
-        await cpHelpers.switchView(webClient.el, "kanban");
+        await cpHelpers.switchView(target, "kanban");
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_list_view", "should still display the list view");
-        assert.containsNone(webClient, ".o_kanban_view", "shouldn't display the kanban view yet");
+        assert.containsOnce(target, ".o_list_view", "should still display the list view");
+        assert.containsNone(target, ".o_kanban_view", "shouldn't display the kanban view yet");
         def.resolve();
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsNone(webClient, ".o_list_view", "shouldn't display the list view anymore");
-        assert.containsOnce(webClient, ".o_kanban_view", "should now display the kanban view");
+        assert.containsNone(target, ".o_list_view", "shouldn't display the list view anymore");
+        assert.containsOnce(target, ".o_kanban_view", "should now display the kanban view");
         // switch back to list view
         def = testUtils.makeTestPromise();
-        await cpHelpers.switchView(webClient.el, "list");
+        await cpHelpers.switchView(target, "list");
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_kanban_view", "should still display the kanban view");
-        assert.containsNone(webClient, ".o_list_view", "shouldn't display the list view yet");
+        assert.containsOnce(target, ".o_kanban_view", "should still display the kanban view");
+        assert.containsNone(target, ".o_list_view", "shouldn't display the list view yet");
         def.resolve();
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsNone(
-            webClient.el,
-            ".o_kanban_view",
-            "shouldn't display the kanban view anymore"
-        );
-        assert.containsOnce(webClient, ".o_list_view", "should now display the list view");
+        assert.containsNone(target, ".o_kanban_view", "shouldn't display the kanban view anymore");
+        assert.containsOnce(target, ".o_list_view", "should now display the list view");
         // open a record in form view
         def = testUtils.makeTestPromise();
-        await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_list_view", "should still display the list view");
-        assert.containsNone(webClient, ".o_form_view", "shouldn't display the form view yet");
+        assert.containsOnce(target, ".o_list_view", "should still display the list view");
+        assert.containsNone(target, ".o_form_view", "shouldn't display the form view yet");
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             "there should still be one controller in the breadcrumbs"
         );
         def.resolve();
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsNone(webClient, ".o_list_view", "should no longer display the list view");
-        assert.containsOnce(webClient, ".o_form_view", "should display the form view");
+        assert.containsNone(target, ".o_list_view", "should no longer display the list view");
+        assert.containsOnce(target, ".o_form_view", "should display the form view");
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             2,
             "there should be two controllers in the breadcrumbs"
         );
         // go back to list view using the breadcrumbs
         def = testUtils.makeTestPromise();
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb a"));
+        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_form_view", "should still display the form view");
-        assert.containsNone(webClient, ".o_list_view", "shouldn't display the list view yet");
+        assert.containsOnce(target, ".o_form_view", "should still display the form view");
+        assert.containsNone(target, ".o_list_view", "shouldn't display the list view yet");
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             2,
             "there should still be two controllers in the breadcrumbs"
@@ -589,10 +583,10 @@ QUnit.module("ActionManager", (hooks) => {
         def.resolve();
         await testUtils.nextTick();
         await legacyExtraNextTick();
-        assert.containsNone(webClient, ".o_form_view", "should no longer display the form view");
-        assert.containsOnce(webClient, ".o_list_view", "should display the list view");
+        assert.containsNone(target, ".o_form_view", "should no longer display the form view");
+        assert.containsOnce(target, ".o_list_view", "should display the list view");
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             "there should be one controller in the breadcrumbs"
         );
@@ -603,36 +597,34 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
         // open a record in form view
-        await testUtils.dom.click(webClient.el.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
         await legacyExtraNextTick();
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             2,
             "there should be two controllers in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "First record",
             "breadcrumbs should contain the display_name of the opened record"
         );
         // switch to edit mode and change the display_name
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .o_form_button_edit"));
+        await testUtils.dom.click($(target).find(".o_control_panel .o_form_button_edit"));
         await testUtils.fields.editInput(
-            webClient.el.querySelector(".o_field_widget[name=display_name]"),
+            target.querySelector(".o_field_widget[name=display_name]"),
             "New name"
         );
-        await testUtils.dom.click(
-            webClient.el.querySelector(".o_control_panel .o_form_button_save")
-        );
+        await testUtils.dom.click(target.querySelector(".o_control_panel .o_form_button_save"));
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             2,
             "there should still be two controllers in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "New name",
             "breadcrumbs should contain the display_name of the opened record"
         );
@@ -643,16 +635,12 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
         // open a record in form view
-        await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
         await legacyExtraNextTick();
-        await testUtils.dom.click(
-            $(webClient.el).find(".o_form_view button:contains(Execute action)")
-        );
+        await testUtils.dom.click($(target).find(".o_form_view button:contains(Execute action)"));
         await legacyExtraNextTick();
-        assert.containsN(webClient, ".o_control_panel .breadcrumb li", 3);
-        var $previousBreadcrumb = $(webClient.el)
-            .find(".o_control_panel .breadcrumb li.active")
-            .prev();
+        assert.containsN(target, ".o_control_panel .breadcrumb li", 3);
+        var $previousBreadcrumb = $(target).find(".o_control_panel .breadcrumb li.active").prev();
         assert.strictEqual(
             $previousBreadcrumb.attr("accesskey"),
             "b",
@@ -660,10 +648,8 @@ QUnit.module("ActionManager", (hooks) => {
         );
         await testUtils.dom.click($previousBreadcrumb);
         await legacyExtraNextTick();
-        assert.containsN(webClient, ".o_control_panel .breadcrumb li", 2);
-        var $previousBreadcrumb = $(webClient.el)
-            .find(".o_control_panel .breadcrumb li.active")
-            .prev();
+        assert.containsN(target, ".o_control_panel .breadcrumb li", 2);
+        var $previousBreadcrumb = $(target).find(".o_control_panel .breadcrumb li.active").prev();
         assert.strictEqual(
             $previousBreadcrumb.attr("accesskey"),
             "b",
@@ -679,21 +665,17 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         // create a new record
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .o_list_button_add"));
+        await testUtils.dom.click($(target).find(".o_control_panel .o_list_button_add"));
         await legacyExtraNextTick();
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_form_view.o_form_editable",
             "should have opened the form view in edit mode"
         );
         // discard
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .o_form_button_cancel"));
+        await testUtils.dom.click($(target).find(".o_control_panel .o_form_button_cancel"));
         await legacyExtraNextTick();
-        assert.containsOnce(
-            webClient.el,
-            ".o_list_view",
-            "should have switched back to the list view"
-        );
+        assert.containsOnce(target, ".o_list_view", "should have switched back to the list view");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -737,20 +719,18 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         // open a record in form view
-        await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
         await legacyExtraNextTick();
         assert.strictEqual(
-            $(webClient.el).find(".o_field_widget[name=foo]").text(),
+            $(target).find(".o_field_widget[name=foo]").text(),
             "yop",
             "check initial value of 'yop' field"
         );
         // click on 'Call method' button (should call an Object method)
-        await testUtils.dom.click(
-            $(webClient.el).find(".o_form_view button:contains(Call method)")
-        );
+        await testUtils.dom.click($(target).find(".o_form_view button:contains(Call method)"));
         await legacyExtraNextTick();
         assert.strictEqual(
-            $(webClient.el).find(".o_field_widget[name=foo]").text(),
+            $(target).find(".o_field_widget[name=foo]").text(),
             "value changed",
             "'yop' has been changed by the server, and should be updated in the UI"
         );
@@ -791,30 +771,30 @@ QUnit.module("ActionManager", (hooks) => {
             };
             const webClient = await createWebClient({ serverData, mockRPC });
             await doAction(webClient, 3);
-            assert.containsOnce(webClient.el, ".o_list_view");
+            assert.containsOnce(target, ".o_list_view");
             // open first record in form view
-            await testUtils.dom.click(webClient.el.querySelector(".o_list_view .o_data_row"));
+            await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient.el, ".o_form_view");
+            assert.containsOnce(target, ".o_form_view");
             // click on 'Execute action', to execute action 4 in a dialog
-            await testUtils.dom.click(webClient.el.querySelector('.o_form_view button[name="4"]'));
+            await testUtils.dom.click(target.querySelector('.o_form_view button[name="4"]'));
             await legacyExtraNextTick();
             assert.ok(
-                webClient.el.querySelector(".o_cp_buttons .o_form_button_edit").disabled,
+                target.querySelector(".o_cp_buttons .o_form_button_edit").disabled,
                 "control panel buttons should be disabled"
             );
             def.resolve();
             await nextTick();
             await legacyExtraNextTick();
-            assert.containsOnce(webClient.el, ".modal .o_form_view");
+            assert.containsOnce(target, ".modal .o_form_view");
             assert.notOk(
-                webClient.el.querySelector(".o_cp_buttons .o_form_button_edit").disabled,
+                target.querySelector(".o_cp_buttons .o_form_button_edit").disabled,
                 "control panel buttons should have been re-enabled"
             );
-            await testUtils.dom.click(webClient.el.querySelector(".modal .cancel-btn"));
+            await testUtils.dom.click(target.querySelector(".modal .cancel-btn"));
             await legacyExtraNextTick();
             assert.notOk(
-                webClient.el.querySelector(".o_cp_buttons .o_form_button_edit").disabled,
+                target.querySelector(".o_cp_buttons .o_form_button_edit").disabled,
                 "control panel buttons should still be enabled"
             );
         }
@@ -831,13 +811,13 @@ QUnit.module("ActionManager", (hooks) => {
             };
             const webClient = await createWebClient({ serverData, mockRPC });
             await doAction(webClient, 3, { viewType: "form" });
-            assert.containsOnce(webClient.el, ".o_form_view");
+            assert.containsOnce(target, ".o_form_view");
             // click on 'Execute action', to execute action 4 in a dialog
-            testUtils.dom.click(webClient.el.querySelector('.o_form_view button[name="object"]'));
-            assert.ok(webClient.el.querySelector(".o_cp_buttons button").disabled);
+            testUtils.dom.click(target.querySelector('.o_form_view button[name="object"]'));
+            assert.ok(target.querySelector(".o_cp_buttons button").disabled);
             await nextTick();
             await legacyExtraNextTick();
-            assert.notOk(webClient.el.querySelector(".o_cp_buttons button").disabled);
+            assert.notOk(target.querySelector(".o_cp_buttons button").disabled);
         }
     );
 
@@ -860,14 +840,14 @@ QUnit.module("ActionManager", (hooks) => {
             };
             const webClient = await createWebClient({ serverData, mockRPC });
             await doAction(webClient, 5);
-            assert.containsOnce(webClient.el, ".modal .o_form_view");
-            testUtils.dom.click(webClient.el.querySelector('.modal footer button[name="object"]'));
-            assert.containsOnce(webClient.el, ".modal .o_form_view");
-            assert.ok(webClient.el.querySelector(".modal footer button").disabled);
+            assert.containsOnce(target, ".modal .o_form_view");
+            testUtils.dom.click(target.querySelector('.modal footer button[name="object"]'));
+            assert.containsOnce(target, ".modal .o_form_view");
+            assert.ok(target.querySelector(".modal footer button").disabled);
             await testUtils.nextTick();
             await legacyExtraNextTick();
-            assert.containsOnce(webClient.el, ".modal .o_form_view");
-            assert.notOk(webClient.el.querySelector(".modal footer button").disabled);
+            assert.containsOnce(target, ".modal .o_form_view");
+            assert.notOk(target.querySelector(".modal footer button").disabled);
         }
     );
 
@@ -879,27 +859,25 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         // open a record in form view
-        await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
         await legacyExtraNextTick();
         // click on 'Execute action' button (should execute an action)
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             2,
             "there should be two parts in the breadcrumbs"
         );
-        await testUtils.dom.click(
-            $(webClient.el).find(".o_form_view button:contains(Execute action)")
-        );
+        await testUtils.dom.click($(target).find(".o_form_view button:contains(Execute action)"));
         await legacyExtraNextTick();
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             3,
             "the returned action should have been stacked over the previous one"
         );
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_kanban_view",
             "the returned action should have been executed"
         );
@@ -927,15 +905,15 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 24);
-        assert.containsOnce(webClient.el, ".o_form_view");
-        assert.containsN(webClient.el, ".o_form_buttons_view button:not([disabled])", 2);
-        await testUtils.dom.click(webClient.el.querySelector(".oe_stat_button"));
+        assert.containsOnce(target, ".o_form_view");
+        assert.containsN(target, ".o_form_buttons_view button:not([disabled])", 2);
+        await testUtils.dom.click(target.querySelector(".oe_stat_button"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient.el, ".o_kanban_view");
-        await testUtils.dom.click(webClient.el.querySelector(".breadcrumb-item"));
+        assert.containsOnce(target, ".o_kanban_view");
+        await testUtils.dom.click(target.querySelector(".breadcrumb-item"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient.el, ".o_form_view");
-        assert.containsN(webClient.el, ".o_form_buttons_view button:not([disabled])", 2);
+        assert.containsOnce(target, ".o_form_view");
+        assert.containsN(target, ".o_form_buttons_view button:not([disabled])", 2);
     });
 
     QUnit.test("execute smart button and fails", async function (assert) {
@@ -948,12 +926,12 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 24);
-        assert.containsOnce(webClient.el, ".o_form_view");
-        assert.containsN(webClient.el, ".o_form_buttons_view button:not([disabled])", 2);
-        await testUtils.dom.click(webClient.el.querySelector(".oe_stat_button"));
+        assert.containsOnce(target, ".o_form_view");
+        assert.containsN(target, ".o_form_buttons_view button:not([disabled])", 2);
+        await testUtils.dom.click(target.querySelector(".oe_stat_button"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient.el, ".o_form_view");
-        assert.containsN(webClient.el, ".o_form_buttons_view button:not([disabled])", 2);
+        assert.containsOnce(target, ".o_form_view");
+        assert.containsN(target, ".o_form_buttons_view button:not([disabled])", 2);
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -980,17 +958,15 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData, mockRPC });
             await doAction(webClient, 3);
             // open a record in form view
-            await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
             await legacyExtraNextTick();
             // click on 'Call method' button (should call an Object method)
             def = testUtils.makeTestPromise();
-            await testUtils.dom.click(
-                $(webClient.el).find(".o_form_view button:contains(Call method)")
-            );
+            await testUtils.dom.click($(target).find(".o_form_view button:contains(Call method)"));
             await legacyExtraNextTick();
             // Buttons should be disabled
             assert.strictEqual(
-                $(webClient.el).find(".o_form_view button:contains(Call method)").attr("disabled"),
+                $(target).find(".o_form_view button:contains(Call method)").attr("disabled"),
                 "disabled",
                 "buttons should be disabled"
             );
@@ -1000,7 +976,7 @@ QUnit.module("ActionManager", (hooks) => {
             await legacyExtraNextTick();
             // Buttons should be enabled after the reload
             assert.strictEqual(
-                $(webClient.el).find(".o_form_view button:contains(Call method)").attr("disabled"),
+                $(target).find(".o_form_view button:contains(Call method)").attr("disabled"),
                 undefined,
                 "buttons should not be disabled anymore"
             );
@@ -1015,31 +991,31 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         // open the first record in form view
-        await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
         await legacyExtraNextTick();
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "First record",
             "breadcrumbs should contain the display_name of the opened record"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_field_widget[name=foo]").text(),
+            $(target).find(".o_field_widget[name=foo]").text(),
             "yop",
             "should have opened the correct record"
         );
         // go back to list view using the breadcrumbs
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb a"));
+        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a"));
         await legacyExtraNextTick();
         // open the second record in form view
-        await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:nth(1)"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:nth(1)"));
         await legacyExtraNextTick();
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "Second record",
             "breadcrumbs should contain the display_name of the opened record"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_field_widget[name=foo]").text(),
+            $(target).find(".o_field_widget[name=foo]").text(),
             "blip",
             "should have opened the correct record"
         );
@@ -1061,35 +1037,35 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
         assert.hasClass(
-            $(webClient.el).find(".o_control_panel [data-mode='bar']")[0],
+            $(target).find(".o_control_panel [data-mode='bar']")[0],
             "active",
             "bar chart button is active"
         );
         assert.doesNotHaveClass(
-            $(webClient.el).find(".o_control_panel [data-mode='line']")[0],
+            $(target).find(".o_control_panel [data-mode='line']")[0],
             "active",
             "line chart button is not active"
         );
         // display line chart
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel [data-mode='line']"));
+        await testUtils.dom.click($(target).find(".o_control_panel [data-mode='line']"));
         await legacyExtraNextTick();
         assert.hasClass(
-            $(webClient.el).find(".o_control_panel [data-mode='line']")[0],
+            $(target).find(".o_control_panel [data-mode='line']")[0],
             "active",
             "line chart button is now active"
         );
         // switch to kanban and back to graph view
-        await cpHelpers.switchView(webClient.el, "kanban");
+        await cpHelpers.switchView(target, "kanban");
         await legacyExtraNextTick();
         assert.containsNone(
-            webClient.el,
+            target,
             ".o_control_panel [data-mode='line']",
             "graph buttons are no longer in control panel"
         );
-        await cpHelpers.switchView(webClient.el, "graph");
+        await cpHelpers.switchView(target, "graph");
         await legacyExtraNextTick();
         assert.hasClass(
-            $(webClient.el).find(".o_control_panel [data-mode='line']")[0],
+            $(target).find(".o_control_panel [data-mode='line']")[0],
             "active",
             "line chart button is still active"
         );
@@ -1102,25 +1078,25 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
         assert.hasClass(
-            $(webClient.el).find(".o_control_panel .o_switch_view.o_list")[0],
+            $(target).find(".o_control_panel .o_switch_view.o_list")[0],
             "active",
             "list button in control panel is active"
         );
         assert.doesNotHaveClass(
-            $(webClient.el).find(".o_control_panel .o_switch_view.o_graph")[0],
+            $(target).find(".o_control_panel .o_switch_view.o_graph")[0],
             "active",
             "graph button in control panel is not active"
         );
         // switch to graph view
-        await cpHelpers.switchView(webClient.el, "graph");
+        await cpHelpers.switchView(target, "graph");
         await legacyExtraNextTick();
         assert.doesNotHaveClass(
-            $(webClient.el).find(".o_control_panel .o_switch_view.o_list")[0],
+            $(target).find(".o_control_panel .o_switch_view.o_list")[0],
             "active",
             "list button in control panel is not active"
         );
         assert.hasClass(
-            $(webClient.el).find(".o_control_panel .o_switch_view.o_graph")[0],
+            $(target).find(".o_control_panel .o_switch_view.o_graph")[0],
             "active",
             "graph button in control panel is active"
         );
@@ -1137,17 +1113,17 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
         assert.doesNotHaveClass(
-            $(webClient.el).find(".o_list_table")[0],
+            $(target).find(".o_list_table")[0],
             "o_list_table_grouped",
             "list view is not grouped"
         );
         // open group by dropdown
-        await cpHelpers.toggleGroupByMenu(webClient);
+        await cpHelpers.toggleGroupByMenu(target);
         // click on foo link
-        await cpHelpers.toggleMenuItem(webClient.el, "foo");
+        await cpHelpers.toggleMenuItem(target, "foo");
         await legacyExtraNextTick();
         assert.hasClass(
-            $(webClient.el).find(".o_list_table")[0],
+            $(target).find(".o_list_table")[0],
             "o_list_table_grouped",
             "list view is now grouped"
         );
@@ -1176,13 +1152,13 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         // open first record in form view
-        await testUtils.dom.click($(webClient.el).find(".o_data_row:first"));
+        await testUtils.dom.click($(target).find(".o_data_row:first"));
         await legacyExtraNextTick();
         // click on edit
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .o_form_button_edit"));
+        await testUtils.dom.click($(target).find(".o_control_panel .o_form_button_edit"));
         await legacyExtraNextTick();
         // click on external button for m2o
-        await testUtils.dom.click($(webClient.el).find(".o_external_button"));
+        await testUtils.dom.click($(target).find(".o_external_button"));
         await legacyExtraNextTick();
         assert.verifySteps([
             "/web/webclient/load_menus",
@@ -1206,21 +1182,17 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 4);
         // open record in form view
-        await testUtils.dom.click($(webClient.el).find(".o_kanban_record:first")[0]);
+        await testUtils.dom.click($(target).find(".o_kanban_record:first")[0]);
         await legacyExtraNextTick();
         // edit record
-        await testUtils.dom.click(
-            $(webClient.el).find(".o_control_panel button.o_form_button_edit")
-        );
-        await testUtils.fields.editInput($(webClient.el).find('input[name="foo"]'), "pinkypie");
+        await testUtils.dom.click($(target).find(".o_control_panel button.o_form_button_edit"));
+        await testUtils.fields.editInput($(target).find('input[name="foo"]'), "pinkypie");
         // go back to kanban view
-        await testUtils.dom.click(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:first a")
-        );
+        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item:first a"));
         await legacyExtraNextTick();
         assert.containsNone(document.body, ".modal", "should not display a modal dialog");
-        assert.containsNone(webClient, ".o_form_view", "should no longer be in form view");
-        assert.containsOnce(webClient, ".o_kanban_view", "should be in kanban view");
+        assert.containsNone(target, ".o_form_view", "should no longer be in form view");
+        assert.containsOnce(target, ".o_kanban_view", "should be in kanban view");
     });
 
     QUnit.test("limit set in action is passed to each created controller", async function (assert) {
@@ -1228,11 +1200,11 @@ QUnit.module("ActionManager", (hooks) => {
         serverData.actions[3].limit = 2;
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
-        assert.containsN(webClient, ".o_data_row", 2);
+        assert.containsN(target, ".o_data_row", 2);
         // switch to kanban view
-        await cpHelpers.switchView(webClient.el, "kanban");
+        await cpHelpers.switchView(target, "kanban");
         await legacyExtraNextTick();
-        assert.containsN(webClient, ".o_kanban_record:not(.o_kanban_ghost)", 2);
+        assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 2);
     });
 
     QUnit.test("go back to a previous action using the breadcrumbs", async function (assert) {
@@ -1240,70 +1212,70 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
         // open a record in form view
-        await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
         await legacyExtraNextTick();
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             2,
             "there should be two controllers in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "First record",
             "breadcrumbs should contain the display_name of the opened record"
         );
         // push another action on top of the first one, and come back to the form view
         await doAction(webClient, 4);
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             3,
             "there should be three controllers in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "Partners Action 4",
             "breadcrumbs should contain the name of the current action"
         );
         // go back using the breadcrumbs
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb a:nth(1)"));
+        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a:nth(1)"));
         await legacyExtraNextTick();
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             2,
             "there should be two controllers in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "First record",
             "breadcrumbs should contain the display_name of the opened record"
         );
         // push again the other action on top of the first one, and come back to the list view
         await doAction(webClient, 4);
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             3,
             "there should be three controllers in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "Partners Action 4",
             "breadcrumbs should contain the name of the current action"
         );
         // go back using the breadcrumbs
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb a:first"));
+        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a:first"));
         await legacyExtraNextTick();
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             1,
             "there should be one controller in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "Partners",
             "breadcrumbs should contain the name of the current action"
         );
@@ -1316,18 +1288,18 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 3);
             // open a record in form view
-            await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
             await legacyExtraNextTick();
             // switch to edit mode
-            await testUtils.dom.click($(webClient.el).find(".o_control_panel .o_form_button_edit"));
+            await testUtils.dom.click($(target).find(".o_control_panel .o_form_button_edit"));
             await legacyExtraNextTick();
-            assert.hasClass($(webClient.el).find(".o_form_view")[0], "o_form_editable");
+            assert.hasClass($(target).find(".o_form_view")[0], "o_form_editable");
             // do some other action
             await doAction(webClient, 4);
             // go back to form view
-            await testUtils.dom.clickLast($(webClient.el).find(".o_control_panel .breadcrumb a"));
+            await testUtils.dom.clickLast($(target).find(".o_control_panel .breadcrumb a"));
             await legacyExtraNextTick();
-            assert.hasClass($(webClient.el).find(".o_form_view")[0], "o_form_readonly");
+            assert.hasClass($(target).find(".o_form_view")[0], "o_form_readonly");
         }
     );
 
@@ -1338,14 +1310,14 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 3);
             // open a record in form view
-            await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
             await legacyExtraNextTick();
             assert.strictEqual(webClient.env.services.router.current.hash.id, 1);
             // do some other action
             await doAction(webClient, 4);
             assert.notOk(webClient.env.services.router.current.hash.id);
             // go back to form view
-            await testUtils.dom.clickLast($(webClient.el).find(".o_control_panel .breadcrumb a"));
+            await testUtils.dom.clickLast($(target).find(".o_control_panel .breadcrumb a"));
             await legacyExtraNextTick();
             assert.strictEqual(webClient.env.services.router.current.hash.id, 1);
         }
@@ -1362,35 +1334,28 @@ QUnit.module("ActionManager", (hooks) => {
       </search>`;
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
-        assert.containsOnce(webClient, ".o_list_table_grouped", "should be grouped");
+        assert.containsOnce(target, ".o_list_table_grouped", "should be grouped");
         assert.containsN(
-            webClient.el,
+            target,
             ".o_group_header",
             2,
             "should be grouped by 'bar' (two groups) at first load"
         );
         // groupby 'bar' using the searchview
         await testUtils.dom.click(
-            $(webClient.el).find(".o_control_panel .o_cp_bottom_right button:contains(Group By)")
+            $(target).find(".o_control_panel .o_cp_bottom_right button:contains(Group By)")
         );
         await testUtils.dom.click(
-            $(webClient.el).find(".o_control_panel .o_group_by_menu .o_menu_item:first")
+            $(target).find(".o_control_panel .o_group_by_menu .o_menu_item:first")
         );
         await legacyExtraNextTick();
-        assert.containsN(
-            webClient.el,
-            ".o_group_header",
-            5,
-            "should be grouped by 'foo' (five groups)"
-        );
+        assert.containsN(target, ".o_group_header", 5, "should be grouped by 'foo' (five groups)");
         // remove the groupby in the searchview
-        await testUtils.dom.click(
-            $(webClient.el).find(".o_control_panel .o_searchview .o_facet_remove")
-        );
+        await testUtils.dom.click($(target).find(".o_control_panel .o_searchview .o_facet_remove"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_list_table_grouped", "should still be grouped");
+        assert.containsOnce(target, ".o_list_table_grouped", "should still be grouped");
         assert.containsN(
-            webClient.el,
+            target,
             ".o_group_header",
             2,
             "should be grouped by 'bar' (two groups) at reload"
@@ -1414,12 +1379,12 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 33);
-        assert.containsOnce(webClient, ".o_list_view", "should display the list view");
+        assert.containsOnce(target, ".o_list_view", "should display the list view");
         // try to open a record in a form view
-        testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+        testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_list_view", "should still display the list view");
-        assert.containsNone(webClient, ".o_form_view", "should not display the form view");
+        assert.containsOnce(target, ".o_list_view", "should still display the list view");
+        assert.containsNone(target, ".o_form_view", "should not display the form view");
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
@@ -1446,7 +1411,7 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 44);
-        assert.containsOnce(webClient, ".o_form_view", "should display the form view");
+        assert.containsOnce(target, ".o_form_view", "should display the form view");
         assert.containsNone(
             document.body,
             ".o_control_panel",
@@ -1506,16 +1471,16 @@ QUnit.module("ActionManager", (hooks) => {
         patchWithCleanup(browser, { setTimeout: (fn) => fn() });
         const webClient = await createWebClient({ serverData, legacyParams });
         await doAction(webClient, 33);
-        assert.containsN(webClient, ".o_data_row", 5, "should contain 5 records");
+        assert.containsN(target, ".o_data_row", 5, "should contain 5 records");
         // filter on bar
-        await cpHelpers.toggleFilterMenu(webClient.el);
-        await cpHelpers.toggleMenuItem(webClient.el, "Bar");
-        assert.containsN(webClient, ".o_data_row", 2);
+        await cpHelpers.toggleFilterMenu(target);
+        await cpHelpers.toggleMenuItem(target, "Bar");
+        assert.containsN(target, ".o_data_row", 2);
         // save filter
-        await cpHelpers.toggleFavoriteMenu(webClient.el);
-        await cpHelpers.toggleSaveFavorite(webClient.el);
-        await cpHelpers.editFavoriteName(webClient.el, "some name");
-        await cpHelpers.saveFavorite(webClient.el);
+        await cpHelpers.toggleFavoriteMenu(target);
+        await cpHelpers.toggleSaveFavorite(target);
+        await cpHelpers.editFavoriteName(target, "some name");
+        await cpHelpers.saveFavorite(target);
         await legacyExtraNextTick();
         testUtils.mock.unpatch(ListController);
     });
@@ -1549,38 +1514,38 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 100);
             assert.strictEqual(
-                $(webClient.el).find(".o_list_view tr.o_data_row .o_data_cell").text(),
+                $(target).find(".o_list_view tr.o_data_row .o_data_cell").text(),
                 "zoupyopplopgnapblip",
                 "record should be in descending order as default_order applies"
             );
-            await cpHelpers.toggleFavoriteMenu(webClient.el);
-            await cpHelpers.toggleMenuItem(webClient.el, "favorite filter");
+            await cpHelpers.toggleFavoriteMenu(target);
+            await cpHelpers.toggleMenuItem(target, "favorite filter");
             await legacyExtraNextTick();
             assert.strictEqual(
-                $(webClient.el).find(".o_control_panel .o_facet_values").text().trim(),
+                $(target).find(".o_control_panel .o_facet_values").text().trim(),
                 "favorite filter",
                 "favorite filter should be applied"
             );
             assert.strictEqual(
-                $(webClient.el).find(".o_list_view tr.o_data_row .o_data_cell").text(),
+                $(target).find(".o_list_view tr.o_data_row .o_data_cell").text(),
                 "gnapblip",
                 "record should still be in descending order after default_order applied"
             );
             // go to formview and come back to listview
-            await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
             await legacyExtraNextTick();
-            await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb a:eq(0)"));
+            await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a:eq(0)"));
             await legacyExtraNextTick();
             assert.strictEqual(
-                $(webClient.el).find(".o_list_view tr.o_data_row .o_data_cell").text(),
+                $(target).find(".o_list_view tr.o_data_row .o_data_cell").text(),
                 "gnapblip",
                 "order of records should not be changed, while coming back through breadcrumb"
             );
             // remove filter
-            await cpHelpers.removeFacet(webClient.el, 0);
+            await cpHelpers.removeFacet(target, 0);
             await legacyExtraNextTick();
             assert.strictEqual(
-                $(webClient.el).find(".o_list_view tr.o_data_row .o_data_cell").text(),
+                $(target).find(".o_list_view tr.o_data_row .o_data_cell").text(),
                 "zoupyopplopgnapblip",
                 "order of records should not be changed, after removing current filter"
             );
@@ -1594,19 +1559,19 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 1);
             assert.isVisible(
-                webClient.el.querySelector(".o_search_options .dropdown.o_filter_menu"),
+                target.querySelector(".o_search_options .dropdown.o_filter_menu"),
                 "the search options should be available"
             );
             await doAction(webClient, 3);
             assert.isVisible(
-                webClient.el.querySelector(".o_search_options .dropdown.o_filter_menu"),
+                target.querySelector(".o_search_options .dropdown.o_filter_menu"),
                 "the search options should be available"
             );
             // go back using the breadcrumbs
-            await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb a:first"));
+            await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a:first"));
             await legacyExtraNextTick();
             assert.isVisible(
-                webClient.el.querySelector(".o_search_options .dropdown.o_filter_menu"),
+                target.querySelector(".o_search_options .dropdown.o_filter_menu"),
                 "the search options should be available"
             );
         }
@@ -1638,22 +1603,22 @@ QUnit.module("ActionManager", (hooks) => {
             id: 2,
             view_type: "form",
         });
-        assert.containsNone(webClient, ".o_list_view");
-        assert.containsOnce(webClient, ".o_form_view");
+        assert.containsNone(target, ".o_list_view");
+        assert.containsOnce(target, ".o_form_view");
         assert.containsN(
-            webClient.el,
+            target,
             ".o_control_panel .breadcrumb-item",
             2,
             "there should be two controllers in the breadcrumbs"
         );
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:last").text(),
+            $(target).find(".o_control_panel .breadcrumb-item:last").text(),
             "Second record",
             "breadcrumbs should contain the display_name of the opened record"
         );
         await doAction(webClient, 1, { clearBreadcrumbs: true });
-        assert.containsNone(webClient, ".o_form_view");
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsNone(target, ".o_form_view");
+        assert.containsOnce(target, ".o_kanban_view");
     });
 
     QUnit.test("execute action from dirty, new record, and come back", async function (assert) {
@@ -1679,36 +1644,31 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         // execute an action and create a new record
         await doAction(webClient, 3);
-        await testUtils.dom.click($(webClient.el).find(".o_list_button_add"));
+        await testUtils.dom.click($(target).find(".o_list_button_add"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_form_view.o_form_editable");
-        assert.containsOnce(webClient, ".o_form_uri:contains(First record)");
+        assert.containsOnce(target, ".o_form_view.o_form_editable");
+        assert.containsOnce(target, ".o_form_uri:contains(First record)");
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "PartnersNew"
         );
         // set form view dirty and open m2o record
-        await testUtils.fields.editInput(
-            $(webClient.el).find('input[name="display_name"]'),
-            "test"
-        );
-        await testUtils.fields.editInput($(webClient.el).find("input[name=foo]"), "val");
-        await testUtils.dom.click($(webClient.el).find(".o_form_uri:contains(First record)"));
+        await testUtils.fields.editInput($(target).find('input[name="display_name"]'), "test");
+        await testUtils.fields.editInput($(target).find("input[name=foo]"), "val");
+        await testUtils.dom.click($(target).find(".o_form_uri:contains(First record)"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_form_view.o_form_readonly");
+        assert.containsOnce(target, ".o_form_view.o_form_readonly");
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "PartnerstestFirst record"
         );
         // go back to test using the breadcrumbs
-        await testUtils.dom.click(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item:nth(1) a")
-        );
+        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item:nth(1) a"));
         await legacyExtraNextTick();
         // should be readonly and so saved
-        assert.containsOnce(webClient, ".o_form_view.o_form_readonly");
+        assert.containsOnce(target, ".o_form_view.o_form_readonly");
         assert.strictEqual(
-            $(webClient.el).find(".o_control_panel .breadcrumb-item").text(),
+            $(target).find(".o_control_panel .breadcrumb-item").text(),
             "Partnerstest"
         );
         assert.verifySteps([
@@ -1745,15 +1705,15 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         // execute an action and open a record
         await doAction(webClient, 3);
-        assert.containsOnce(webClient, ".o_list_view");
-        await testUtils.dom.click($(webClient.el).find(".o_data_row:first"));
+        assert.containsOnce(target, ".o_list_view");
+        await testUtils.dom.click($(target).find(".o_data_row:first"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_form_view");
+        assert.containsOnce(target, ".o_form_view");
         // execute the custom action from the action menu
-        await testUtils.controlPanel.toggleActionMenu(webClient.el);
-        await testUtils.controlPanel.toggleMenuItem(webClient.el, "Favorite Ponies");
+        await testUtils.controlPanel.toggleActionMenu(target);
+        await testUtils.controlPanel.toggleMenuItem(target, "Favorite Ponies");
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
     });
 
     QUnit.test(
@@ -1781,26 +1741,26 @@ QUnit.module("ActionManager", (hooks) => {
             };
             const webClient = await createWebClient({ serverData, mockRPC });
             await doAction(webClient, 999);
-            assert.containsOnce(webClient.el, ".o_form_view");
-            assert.hasClass(webClient.el.querySelector(".o_form_view"), "o_form_readonly");
+            assert.containsOnce(target, ".o_form_view");
+            assert.hasClass(target.querySelector(".o_form_view"), "o_form_readonly");
             assert.strictEqual(
-                webClient.el.querySelector(".o_control_panel .breadcrumb").textContent,
+                target.querySelector(".o_control_panel .breadcrumb").textContent,
                 "Second record"
             );
             // push another action in the breadcrumb
-            await testUtils.dom.click($(webClient.el).find(".o_form_uri:contains(Third record)"));
+            await testUtils.dom.click($(target).find(".o_form_uri:contains(Third record)"));
             await legacyExtraNextTick();
             assert.strictEqual(
-                webClient.el.querySelector(".o_control_panel .breadcrumb").textContent,
+                target.querySelector(".o_control_panel .breadcrumb").textContent,
                 "Second recordThird record"
             );
             // go back to the form view
-            await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb a:first"));
+            await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a:first"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient.el, ".o_form_view");
-            assert.hasClass(webClient.el.querySelector(".o_form_view"), "o_form_readonly");
+            assert.containsOnce(target, ".o_form_view");
+            assert.hasClass(target.querySelector(".o_form_view"), "o_form_readonly");
             assert.strictEqual(
-                webClient.el.querySelector(".o_control_panel .breadcrumb-item").textContent,
+                target.querySelector(".o_control_panel .breadcrumb-item").textContent,
                 "Second record"
             );
         }
@@ -1811,21 +1771,21 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         // execute an action and open a record
         await doAction(webClient, 3);
-        assert.containsOnce(webClient.el, ".o_list_view");
-        assert.containsN(webClient.el, ".o_list_view .o_data_row", 5);
-        await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+        assert.containsOnce(target, ".o_list_view");
+        assert.containsN(target, ".o_list_view .o_data_row", 5);
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient.el, ".o_form_view");
-        assert.hasClass(webClient.el.querySelector(".o_form_view"), "o_form_readonly");
+        assert.containsOnce(target, ".o_form_view");
+        assert.hasClass(target.querySelector(".o_form_view"), "o_form_readonly");
         // go back using the breadcrumbs
-        await testUtils.dom.click($(webClient.el).find(".o_control_panel .breadcrumb-item a"));
+        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item a"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient.el, ".o_list_view");
+        assert.containsOnce(target, ".o_list_view");
         // create a new record
-        await testUtils.dom.click($(webClient.el).find(".o_list_button_add"));
+        await testUtils.dom.click($(target).find(".o_list_button_add"));
         await legacyExtraNextTick();
-        assert.containsOnce(webClient.el, ".o_form_view");
-        assert.hasClass(webClient.el.querySelector(".o_form_view"), "o_form_editable");
+        assert.containsOnce(target, ".o_form_view");
+        assert.hasClass(target.querySelector(".o_form_view"), "o_form_editable");
     });
 
     QUnit.test(
@@ -1835,33 +1795,31 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData });
             // execute an action and open a record
             await doAction(webClient, 3);
-            assert.containsOnce(webClient.el, ".o_list_view");
-            assert.containsN(webClient.el, ".o_list_view .o_data_row", 5);
-            await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+            assert.containsOnce(target, ".o_list_view");
+            assert.containsN(target, ".o_list_view .o_data_row", 5);
+            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient.el, ".o_form_view");
+            assert.containsOnce(target, ".o_form_view");
             assert.strictEqual(
-                $(webClient.el).find(".o_field_widget[name=display_name]").text(),
+                $(target).find(".o_field_widget[name=display_name]").text(),
                 "First record"
             );
             // switch to second record
-            await testUtils.dom.click($(webClient.el).find(".o_pager_next"));
+            await testUtils.dom.click($(target).find(".o_pager_next"));
             assert.strictEqual(
-                $(webClient.el).find(".o_field_widget[name=display_name]").text(),
+                $(target).find(".o_field_widget[name=display_name]").text(),
                 "Second record"
             );
             // execute an action from the second record
-            await testUtils.dom.click($(webClient.el).find(".o_statusbar_buttons button[name=4]"));
+            await testUtils.dom.click($(target).find(".o_statusbar_buttons button[name=4]"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient.el, ".o_kanban_view");
+            assert.containsOnce(target, ".o_kanban_view");
             // go back using the breadcrumbs
-            await testUtils.dom.click(
-                $(webClient.el).find(".o_control_panel .breadcrumb-item:nth(1) a")
-            );
+            await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item:nth(1) a"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient.el, ".o_form_view");
+            assert.containsOnce(target, ".o_form_view");
             assert.strictEqual(
-                $(webClient.el).find(".o_field_widget[name=display_name]").text(),
+                $(target).find(".o_field_widget[name=display_name]").text(),
                 "Second record"
             );
         }
@@ -1874,30 +1832,28 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData });
             // execute an action and create a new record
             await doAction(webClient, 3);
-            assert.containsOnce(webClient.el, ".o_list_view");
-            await testUtils.dom.click($(webClient.el).find(".o_list_button_add"));
+            assert.containsOnce(target, ".o_list_view");
+            await testUtils.dom.click($(target).find(".o_list_button_add"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient.el, ".o_form_view");
-            assert.hasClass($(webClient.el).find(".o_form_view")[0], "o_form_editable");
+            assert.containsOnce(target, ".o_form_view");
+            assert.hasClass($(target).find(".o_form_view")[0], "o_form_editable");
             await testUtils.fields.editInput(
-                $(webClient.el).find(".o_field_widget[name=display_name]"),
+                $(target).find(".o_field_widget[name=display_name]"),
                 "another record"
             );
-            await testUtils.dom.click($(webClient.el).find(".o_form_button_save"));
-            assert.hasClass($(webClient.el).find(".o_form_view")[0], "o_form_readonly");
+            await testUtils.dom.click($(target).find(".o_form_button_save"));
+            assert.hasClass($(target).find(".o_form_view")[0], "o_form_readonly");
             // execute an action from the second record
-            await testUtils.dom.click($(webClient.el).find(".o_statusbar_buttons button[name=4]"));
+            await testUtils.dom.click($(target).find(".o_statusbar_buttons button[name=4]"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient.el, ".o_kanban_view");
+            assert.containsOnce(target, ".o_kanban_view");
             // go back using the breadcrumbs
-            await testUtils.dom.click(
-                $(webClient.el).find(".o_control_panel .breadcrumb-item:nth(1) a")
-            );
+            await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item:nth(1) a"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient.el, ".o_form_view");
-            assert.hasClass($(webClient.el).find(".o_form_view")[0], "o_form_readonly");
+            assert.containsOnce(target, ".o_form_view");
+            assert.hasClass($(target).find(".o_form_view")[0], "o_form_readonly");
             assert.strictEqual(
-                $(webClient.el).find(".o_field_widget[name=display_name]").text(),
+                $(target).find(".o_field_widget[name=display_name]").text(),
                 "another record"
             );
         }
@@ -1975,11 +1931,11 @@ QUnit.module("ActionManager", (hooks) => {
             });
             // Close dialog by clicking on save button
             await testUtils.dom.click(
-                webClient.el.querySelector(".o_dialog .modal-footer button[special=save]")
+                target.querySelector(".o_dialog .modal-footer button[special=save]")
             );
             assert.verifySteps(["onClose"]);
             await legacyExtraNextTick();
-            assert.containsNone(webClient.el, ".modal");
+            assert.containsNone(target, ".modal");
             delete legacyViewRegistry.map.test_view;
         }
     );
@@ -2011,8 +1967,8 @@ QUnit.module("ActionManager", (hooks) => {
                 "/web/dataset/call_kw/partner/load_views",
                 "/web/dataset/call_kw/partner/read",
             ]);
-            assert.containsN(webClient.el, ".o_form_buttons_view button:not([disabled])", 2);
-            const actionButton = webClient.el.querySelector("button[name=object]");
+            assert.containsN(target, ".o_form_buttons_view button:not([disabled])", 2);
+            const actionButton = target.querySelector("button[name=object]");
             const tooltipProm = new Promise((resolve) => {
                 $(document.body).one("shown.bs.tooltip", () => {
                     $(actionButton).mouseleave();
@@ -2021,12 +1977,12 @@ QUnit.module("ActionManager", (hooks) => {
             });
             $(actionButton).mouseenter();
             await tooltipProm;
-            assert.containsN(document.body, ".tooltip", 2);
+            assert.containsN(document.body, ".tooltip", 1);
             await click(actionButton);
             await legacyExtraNextTick();
             assert.verifySteps(["/web/dataset/call_button", "/web/dataset/call_kw/partner/read"]);
             assert.containsNone(document.body, ".tooltip"); // body different from webClient in tests !
-            assert.containsN(webClient.el, ".o_form_buttons_view button:not([disabled])", 2);
+            assert.containsN(target, ".o_form_buttons_view button:not([disabled])", 2);
         }
     );
 
@@ -2048,16 +2004,16 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
-        await cpHelpers.editSearch(webClient.el, "m");
-        await cpHelpers.validateSearch(webClient.el);
+        await cpHelpers.editSearch(target, "m");
+        await cpHelpers.validateSearch(target);
         assert.verifySteps(["search_read ", "search_read foo,ilike,m"]);
         // Triggering the do_search above will kill the current searchview Input
-        await cpHelpers.editSearch(webClient.el, "o");
+        await cpHelpers.editSearch(target, "o");
         // We have something in the input of the search view. Making the search_read
         // return at this point will trigger the redraw of the view.
         // However we want to hold on to what we just typed
         searchPromise.resolve();
-        await cpHelpers.validateSearch(webClient.el);
+        await cpHelpers.validateSearch(target);
         assert.verifySteps(["search_read |,foo,ilike,m,foo,ilike,o"]);
     });
 
@@ -2074,12 +2030,12 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData, mockRPC });
             // execute an action and edit existing record
             await doAction(webClient, 3);
-            await testUtils.dom.click($(webClient.el).find(".o_list_view .o_data_row:first"));
+            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
             await legacyExtraNextTick();
-            assert.containsOnce(webClient, ".o_form_view.o_form_readonly");
-            await testUtils.dom.click($(webClient.el).find(".o_control_panel .o_form_button_edit"));
-            assert.containsOnce(webClient, ".o_form_view.o_form_editable");
-            await testUtils.fields.editInput($(webClient.el).find("input[name=foo]"), "val");
+            assert.containsOnce(target, ".o_form_view.o_form_readonly");
+            await testUtils.dom.click($(target).find(".o_control_panel .o_form_button_edit"));
+            assert.containsOnce(target, ".o_form_view.o_form_editable");
+            await testUtils.fields.editInput($(target).find("input[name=foo]"), "val");
             clearUncommittedChanges(webClient.env);
             await testUtils.nextTick();
             await legacyExtraNextTick();
@@ -2117,7 +2073,7 @@ QUnit.module("ActionManager", (hooks) => {
 
             await doAction(webClient, 3);
 
-            await testUtils.dom.click(webClient.el.querySelector(".o_list_button_add"));
+            await testUtils.dom.click(target.querySelector(".o_list_button_add"));
             assert.containsOnce(
                 document.body,
                 ".modal.o_technical_modal",
@@ -2144,14 +2100,14 @@ QUnit.module("ActionManager", (hooks) => {
             await doAction(webClient, 3, { viewType: "form" });
             await legacyExtraNextTick();
             await testUtils.fields.editInput(
-                webClient.el.querySelector(".o_input[name=display_name]"),
+                target.querySelector(".o_input[name=display_name]"),
                 "TEST"
             );
             // Open dialog without saving should not ask to discard
             await doAction(webClient, 5);
             await legacyExtraNextTick();
-            assert.containsOnce(webClient, ".o_dialog");
-            assert.containsOnce(webClient, ".o_dialog .o_act_window .o_view_controller");
+            assert.containsOnce(target, ".o_dialog");
+            assert.containsOnce(target, ".o_dialog .o_act_window .o_view_controller");
         }
     );
 
@@ -2215,19 +2171,17 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3, { viewType: "form", props: { resId: 1 } });
         await legacyExtraNextTick();
-        assert.isVisible(webClient.el.querySelector(".o_form_buttons_view .o_form_button_edit"));
-        await click(webClient.el.querySelector(".o_form_buttons_view .o_form_button_edit"));
+        assert.isVisible(target.querySelector(".o_form_buttons_view .o_form_button_edit"));
+        await click(target.querySelector(".o_form_buttons_view .o_form_button_edit"));
         await legacyExtraNextTick();
-        assert.isVisible(webClient.el.querySelector(".o_form_buttons_edit .o_form_button_save"));
-        assert.isVisible(
-            webClient.el.querySelector(".o_statusbar_buttons button[name=do_something]")
-        );
-        await click(webClient.el.querySelector(".o_statusbar_buttons button[name=do_something]"));
+        assert.isVisible(target.querySelector(".o_form_buttons_edit .o_form_button_save"));
+        assert.isVisible(target.querySelector(".o_statusbar_buttons button[name=do_something]"));
+        await click(target.querySelector(".o_statusbar_buttons button[name=do_something]"));
         await legacyExtraNextTick();
-        assert.isVisible(webClient.el.querySelector(".o_form_buttons_edit .o_form_button_save"));
-        await click(webClient.el.querySelector(".o_form_buttons_edit .o_form_button_save"));
+        assert.isVisible(target.querySelector(".o_form_buttons_edit .o_form_button_save"));
+        await click(target.querySelector(".o_form_buttons_edit .o_form_button_save"));
         await legacyExtraNextTick();
-        assert.isVisible(webClient.el.querySelector(".o_form_buttons_view .o_form_button_edit"));
+        assert.isVisible(target.querySelector(".o_form_buttons_view .o_form_button_edit"));
     });
 
     QUnit.test("debugManager is active for (legacy) views", async function (assert) {
@@ -2243,12 +2197,12 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 1);
         assert.containsNone(
-            webClient.el,
+            target,
             ".o_debug_manager .dropdown-item:contains('Edit View: Kanban')"
         );
-        await click(webClient.el.querySelector(".o_debug_manager .dropdown-toggle"));
+        await click(target.querySelector(".o_debug_manager .dropdown-toggle"));
         assert.containsOnce(
-            webClient.el,
+            target,
             ".o_debug_manager .dropdown-item:contains('Edit View: Kanban')"
         );
     });
@@ -2267,20 +2221,14 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         assert.doesNotHaveClass(
-            webClient.el.querySelector(".o_pivot_measure_row"),
+            target.querySelector(".o_pivot_measure_row"),
             "o_pivot_sort_order_asc"
         );
-        await click(webClient.el.querySelector(".o_pivot_measure_row"));
-        assert.hasClass(
-            webClient.el.querySelector(".o_pivot_measure_row"),
-            "o_pivot_sort_order_asc"
-        );
-        await cpHelpers.switchView(webClient.el, "pivot");
+        await click(target.querySelector(".o_pivot_measure_row"));
+        assert.hasClass(target.querySelector(".o_pivot_measure_row"), "o_pivot_sort_order_asc");
+        await cpHelpers.switchView(target, "pivot");
         await legacyExtraNextTick();
-        assert.hasClass(
-            webClient.el.querySelector(".o_pivot_measure_row"),
-            "o_pivot_sort_order_asc"
-        );
+        assert.hasClass(target.querySelector(".o_pivot_measure_row"), "o_pivot_sort_order_asc");
         assert.verifySteps([
             "read_group", // initial read_group
             "read_group", // read_group at reload after switch view
@@ -2378,13 +2326,13 @@ QUnit.module("ActionManager", (hooks) => {
 
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 24);
-        await click(webClient.el, ".o_form_view button");
+        await click(target, ".o_form_view button");
 
         await warningOpened;
-        assert.containsOnce(webClient, ".modal");
-        assert.containsOnce(webClient, ".modal .o_dialog_warning");
+        assert.containsOnce(target, ".modal");
+        assert.containsOnce(target, ".modal .o_dialog_warning");
         assert.strictEqual(
-            webClient.el.querySelector(".modal .modal-title").textContent,
+            target.querySelector(".modal .modal-title").textContent,
             "Validation Error"
         );
     });
@@ -2397,11 +2345,11 @@ QUnit.module("ActionManager", (hooks) => {
         assert.verifySteps(["/web/webclient/load_menus"]);
 
         await doAction(webClient, 1);
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsOnce(target, ".o_kanban_view");
         assert.verifySteps(["/web/action/load", "load_views", "/web/dataset/search_read"]);
 
         await doAction(webClient, 1);
-        assert.containsOnce(webClient, ".o_kanban_view");
+        assert.containsOnce(target, ".o_kanban_view");
 
         assert.verifySteps(["/web/dataset/search_read"]);
     });
@@ -2413,10 +2361,10 @@ QUnit.module("ActionManager", (hooks) => {
         await doAction(webClient, 3); // list view
         const titleService = webClient.env.services.title;
         assert.strictEqual(titleService.current, '{"zopenerp":"Odoo","action":"Partners"}');
-        await click(webClient.el.querySelector(".o_data_row"));
+        await click(target.querySelector(".o_data_row"));
         await legacyExtraNextTick();
         assert.strictEqual(titleService.current, '{"zopenerp":"Odoo","action":"First record"}');
-        await click(webClient.el.querySelector(".o_pager_next"));
+        await click(target.querySelector(".o_pager_next"));
         assert.strictEqual(titleService.current, '{"zopenerp":"Odoo","action":"Second record"}');
     });
 
@@ -2445,7 +2393,34 @@ QUnit.module("ActionManager", (hooks) => {
             views: [[3, "pivot"]],
             context: { group_by: "foo" },
         });
-        assert.containsOnce(webClient, ".o_pivot_view");
-        assert.containsN(webClient, ".o_pivot_view tbody th", 6);
+        assert.containsOnce(target, ".o_pivot_view");
+        assert.containsN(target, ".o_pivot_view tbody th", 6);
+    });
+
+    QUnit.test("action help given to View in props if not empty", async function (assert) {
+        serverData.models.partner.records = [];
+        const action = serverData.actions[3];
+        serverData.actions[3] = {
+            ...action,
+            help: markup('<p class="hello">Hello</p>'),
+        };
+        serverData.actions[4] = {
+            ...action,
+            id: 4,
+            help: markup('<p class="hello"></p>'),
+        };
+
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, 3);
+        assert.containsOnce(target, ".o_list_view");
+        assert.containsOnce(target, ".o_view_nocontent");
+        assert.strictEqual(target.querySelector(".o_view_nocontent").innerText, "Hello");
+        assert.containsNone(target, "table");
+
+        await doAction(webClient, 4);
+        assert.containsOnce(target, ".o_list_view");
+        assert.containsNone(target, ".o_view_nocontent");
+        assert.containsOnce(target, "table");
     });
 });
diff --git a/addons/web/static/tests/webclient/helpers.js b/addons/web/static/tests/webclient/helpers.js
index 3e9c9b3b530..9fd42d88e68 100644
--- a/addons/web/static/tests/webclient/helpers.js
+++ b/addons/web/static/tests/webclient/helpers.js
@@ -36,9 +36,14 @@ import {
     makeFakeRouterService,
     makeFakeHTTPService,
 } from "../helpers/mock_services";
-import { getFixture, legacyExtraNextTick, nextTick, patchWithCleanup } from "../helpers/utils";
+import {
+    getFixture,
+    legacyExtraNextTick,
+    mount,
+    nextTick,
+    patchWithCleanup,
+} from "../helpers/utils";
 import session from "web.session";
-import { ComponentAdapter } from "web.OwlCompatibility";
 import LegacyMockServer from "web.MockServer";
 import Widget from "web.Widget";
 import { userService } from "@web/core/user_service";
@@ -46,8 +51,9 @@ import { uiService } from "@web/core/ui/ui_service";
 import { ClientActionAdapter, ViewAdapter } from "@web/legacy/action_adapters";
 import { commandService } from "@web/core/commands/command_service";
 import { CustomFavoriteItem } from "@web/search/favorite_menu/custom_favorite_item";
+import { standaloneAdapter } from "web.OwlCompatibility";
 
-const { Component, mount, xml } = owl;
+const { Component, onMounted, xml } = owl;
 
 const actionRegistry = registry.category("actions");
 const serviceRegistry = registry.category("services");
@@ -192,7 +198,7 @@ export function addLegacyMockEnvironment(env, legacyParams = {}) {
     registerCleanup(() => (debouncedField.prototype.DEBOUNCE = initialDebouncedVal));
 
     if (legacyParams.withLegacyMockServer) {
-        const adapter = new ComponentAdapter(null, { Component: Component });
+        const adapter = standaloneAdapter({ Component });
         adapter.env = legacyEnv;
         const W = Widget.extend({ do_push_state() {} });
         const widget = new W(adapter);
@@ -231,15 +237,19 @@ export async function createWebClient(params) {
     // to be destroyed. We thus need to manually destroy them here.
     const controllers = [];
     patchWithCleanup(ClientActionAdapter.prototype, {
-        mounted() {
+        setup() {
             this._super();
-            controllers.push(this.widget);
+            onMounted(() => {
+                controllers.push(this.widget);
+            });
         },
     });
     patchWithCleanup(ViewAdapter.prototype, {
-        mounted() {
+        setup() {
             this._super();
-            controllers.push(this.widget);
+            onMounted(() => {
+                controllers.push(this.widget);
+            });
         },
     });
 
@@ -266,14 +276,13 @@ export async function createWebClient(params) {
 
     const WebClientClass = params.WebClientClass || WebClient;
     const target = params && params.target ? params.target : getFixture();
-    const wc = await mount(WebClientClass, { env, target });
+    const wc = await mount(WebClientClass, target, { env });
     registerCleanup(() => {
         for (const controller of controllers) {
             if (!controller.isDestroyed()) {
                 controller.destroy();
             }
         }
-        wc.destroy();
     });
     // Wait for visual changes caused by a potential loadState
     await nextTick();
diff --git a/addons/web/static/tests/webclient/loading_indicator_tests.js b/addons/web/static/tests/webclient/loading_indicator_tests.js
index 7d79f70978c..55c34aa3165 100644
--- a/addons/web/static/tests/webclient/loading_indicator_tests.js
+++ b/addons/web/static/tests/webclient/loading_indicator_tests.js
@@ -6,9 +6,14 @@ import { uiService } from "@web/core/ui/ui_service";
 import { patch, unpatch } from "@web/core/utils/patch";
 import { LoadingIndicator } from "@web/webclient/loading_indicator/loading_indicator";
 import { makeTestEnv } from "../helpers/mock_env";
-import { getFixture, nextTick, patchWithCleanup, mockTimeout } from "../helpers/utils";
+import {
+    getFixture,
+    mockTimeout,
+    mount,
+    nextTick,
+    patchWithCleanup,
+} from "@web/../tests/helpers/utils";
 
-const { mount } = owl;
 const serviceRegistry = registry.category("services");
 
 let target;
@@ -26,12 +31,12 @@ QUnit.module("LoadingIndicator", {
 
 QUnit.test("displays the loading indicator in non debug mode", async (assert) => {
     const env = await makeTestEnv({ ...baseConfig });
-    await mount(LoadingIndicator, { env, target });
-    let loadingIndicator = target.querySelector(".o_loading");
+    await mount(LoadingIndicator, target, { env });
+    let loadingIndicator = target.querySelector(".o_loading_indicator");
     assert.strictEqual(loadingIndicator, null, "the loading indicator should not be displayed");
     env.bus.trigger("RPC:REQUEST", 1);
     await nextTick();
-    loadingIndicator = target.querySelector(".o_loading");
+    loadingIndicator = target.querySelector(".o_loading_indicator");
     assert.notStrictEqual(loadingIndicator, null, "the loading indicator should be displayed");
     assert.strictEqual(
         loadingIndicator.textContent,
@@ -40,19 +45,19 @@ QUnit.test("displays the loading indicator in non debug mode", async (assert) =>
     );
     env.bus.trigger("RPC:RESPONSE", 1);
     await nextTick();
-    loadingIndicator = target.querySelector(".o_loading");
+    loadingIndicator = target.querySelector(".o_loading_indicator");
     assert.strictEqual(loadingIndicator, null, "the loading indicator should not be displayed");
 });
 
 QUnit.test("displays the loading indicator for one rpc in debug mode", async (assert) => {
     patchWithCleanup(odoo, { debug: "1" });
     const env = await makeTestEnv({ ...baseConfig });
-    await mount(LoadingIndicator, { env, target });
-    let loadingIndicator = target.querySelector(".o_loading");
+    await mount(LoadingIndicator, target, { env });
+    let loadingIndicator = target.querySelector(".o_loading_indicator");
     assert.strictEqual(loadingIndicator, null, "the loading indicator should not be displayed");
     env.bus.trigger("RPC:REQUEST", 1);
     await nextTick();
-    loadingIndicator = target.querySelector(".o_loading");
+    loadingIndicator = target.querySelector(".o_loading_indicator");
     assert.notStrictEqual(loadingIndicator, null, "the loading indicator should be displayed");
     assert.strictEqual(
         loadingIndicator.textContent,
@@ -61,20 +66,20 @@ QUnit.test("displays the loading indicator for one rpc in debug mode", async (as
     );
     env.bus.trigger("RPC:RESPONSE", 1);
     await nextTick();
-    loadingIndicator = target.querySelector(".o_loading");
+    loadingIndicator = target.querySelector(".o_loading_indicator");
     assert.strictEqual(loadingIndicator, null, "the loading indicator should not be displayed");
 });
 
 QUnit.test("displays the loading indicator for multi rpc in debug mode", async (assert) => {
     patchWithCleanup(odoo, { debug: "1" });
     const env = await makeTestEnv({ ...baseConfig });
-    await mount(LoadingIndicator, { env, target });
-    let loadingIndicator = target.querySelector(".o_loading");
+    await mount(LoadingIndicator, target, { env });
+    let loadingIndicator = target.querySelector(".o_loading_indicator");
     assert.strictEqual(loadingIndicator, null, "the loading indicator should not be displayed");
     env.bus.trigger("RPC:REQUEST", 1);
     env.bus.trigger("RPC:REQUEST", 2);
     await nextTick();
-    loadingIndicator = target.querySelector(".o_loading");
+    loadingIndicator = target.querySelector(".o_loading_indicator");
     assert.notStrictEqual(loadingIndicator, null, "the loading indicator should be displayed");
     assert.strictEqual(
         loadingIndicator.textContent,
@@ -83,7 +88,7 @@ QUnit.test("displays the loading indicator for multi rpc in debug mode", async (
     );
     env.bus.trigger("RPC:REQUEST", 3);
     await nextTick();
-    loadingIndicator = target.querySelector(".o_loading");
+    loadingIndicator = target.querySelector(".o_loading_indicator");
     assert.strictEqual(
         loadingIndicator.textContent,
         "Loading (3)",
@@ -91,7 +96,7 @@ QUnit.test("displays the loading indicator for multi rpc in debug mode", async (
     );
     env.bus.trigger("RPC:RESPONSE", 1);
     await nextTick();
-    loadingIndicator = target.querySelector(".o_loading");
+    loadingIndicator = target.querySelector(".o_loading_indicator");
     assert.strictEqual(
         loadingIndicator.textContent,
         "Loading (2)",
@@ -99,7 +104,7 @@ QUnit.test("displays the loading indicator for multi rpc in debug mode", async (
     );
     env.bus.trigger("RPC:REQUEST", 4);
     await nextTick();
-    loadingIndicator = target.querySelector(".o_loading");
+    loadingIndicator = target.querySelector(".o_loading_indicator");
     assert.strictEqual(
         loadingIndicator.textContent,
         "Loading (3)",
@@ -108,7 +113,7 @@ QUnit.test("displays the loading indicator for multi rpc in debug mode", async (
     env.bus.trigger("RPC:RESPONSE", 2);
     env.bus.trigger("RPC:RESPONSE", 3);
     await nextTick();
-    loadingIndicator = target.querySelector(".o_loading");
+    loadingIndicator = target.querySelector(".o_loading_indicator");
     assert.strictEqual(
         loadingIndicator.textContent,
         "Loading (1)",
@@ -116,7 +121,7 @@ QUnit.test("displays the loading indicator for multi rpc in debug mode", async (
     );
     env.bus.trigger("RPC:RESPONSE", 4);
     await nextTick();
-    loadingIndicator = target.querySelector(".o_loading");
+    loadingIndicator = target.querySelector(".o_loading_indicator");
     assert.strictEqual(loadingIndicator, null, "the loading indicator should not be displayed");
 });
 
@@ -129,13 +134,13 @@ QUnit.test("loading indicator blocks UI", async (assert) => {
         },
     });
     const ui = env.services.ui;
-    ui.bus.on("BLOCK", null, () => {
+    ui.bus.addEventListener("BLOCK", () => {
         assert.step("block");
     });
-    ui.bus.on("UNBLOCK", null, () => {
+    ui.bus.addEventListener("UNBLOCK", () => {
         assert.step("unblock");
     });
-    await mount(LoadingIndicator, { env, target });
+    await mount(LoadingIndicator, target, { env });
     env.bus.trigger("RPC:REQUEST", 1);
     await nextTick();
     env.bus.trigger("RPC:RESPONSE", 1);
@@ -154,7 +159,7 @@ QUnit.test("loading indicator doesn't unblock ui if it didn't block it", async (
     ui.bus.on("UNBLOCK", null, () => {
         assert.step("unblock");
     });
-    await mount(LoadingIndicator, { env, target });
+    await mount(LoadingIndicator, target, { env });
     env.bus.trigger("RPC:REQUEST", 1);
     execRegisteredTimeouts();
     env.bus.trigger("RPC:RESPONSE", 1);
diff --git a/addons/web/static/tests/webclient/mobile/mobile_switch_company_menu_tests.js b/addons/web/static/tests/webclient/mobile/mobile_switch_company_menu_tests.js
index 48fb20aa8df..2803434bd34 100644
--- a/addons/web/static/tests/webclient/mobile/mobile_switch_company_menu_tests.js
+++ b/addons/web/static/tests/webclient/mobile/mobile_switch_company_menu_tests.js
@@ -3,15 +3,19 @@
 import { browser } from "@web/core/browser/browser";
 import { registry } from "@web/core/registry";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
-import { registerCleanup } from "@web/../tests/helpers/cleanup";
 import { makeTestEnv } from "@web/../tests/helpers/mock_env";
-import { click, getFixture, makeDeferred, patchWithCleanup } from "@web/../tests/helpers/utils";
+import {
+    click,
+    getFixture,
+    makeDeferred,
+    mount,
+    patchWithCleanup,
+} from "@web/../tests/helpers/utils";
 import { MobileSwitchCompanyMenu } from "@web/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu";
 import { companyService } from "@web/webclient/company_service";
 import { uiService } from "@web/core/ui/ui_service";
 import { session } from "@web/session";
 
-const { mount } = owl;
 const serviceRegistry = registry.category("services");
 
 async function createSwitchCompanyMenu(routerParams = {}, toggleDelay = 0) {
@@ -31,8 +35,7 @@ async function createSwitchCompanyMenu(routerParams = {}, toggleDelay = 0) {
     }
     const env = await makeTestEnv();
     const target = getFixture();
-    const scMenu = await mount(MobileSwitchCompanyMenu, { env, target });
-    registerCleanup(() => scMenu.destroy());
+    const scMenu = await mount(MobileSwitchCompanyMenu, target, { env });
     return scMenu;
 }
 
diff --git a/addons/web/static/tests/webclient/navbar_tests.js b/addons/web/static/tests/webclient/navbar_tests.js
index 44ee22fc9fe..8a6a141ec6f 100644
--- a/addons/web/static/tests/webclient/navbar_tests.js
+++ b/addons/web/static/tests/webclient/navbar_tests.js
@@ -9,9 +9,17 @@ import { actionService } from "@web/webclient/actions/action_service";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { NavBar } from "@web/webclient/navbar/navbar";
 import { clearRegistryWithCleanup, makeTestEnv } from "../helpers/mock_env";
-import { click, getFixture, nextTick, patchWithCleanup, makeDeferred } from "../helpers/utils";
+import {
+    click,
+    destroy,
+    getFixture,
+    mount,
+    nextTick,
+    patchWithCleanup,
+    makeDeferred,
+} from "../helpers/utils";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 const systrayRegistry = registry.category("systray");
 const serviceRegistry = registry.category("services");
 
@@ -43,25 +51,23 @@ QUnit.module("Navbar", {
 QUnit.test("can be rendered", async (assert) => {
     const env = await makeTestEnv(baseConfig);
     const target = getFixture();
-    const navbar = await mount(NavBar, { env, target });
+    const navbar = await mount(NavBar, target, { env });
     assert.containsOnce(
         navbar.el,
         ".o_navbar_apps_menu button.dropdown-toggle",
         "1 apps menu toggler present"
     );
-    navbar.destroy();
 });
 
 QUnit.test("dropdown menu can be toggled", async (assert) => {
     const env = await makeTestEnv(baseConfig);
     const target = getFixture();
-    const navbar = await mount(NavBar, { env, target });
+    const navbar = await mount(NavBar, target, { env });
     const dropdown = navbar.el.querySelector(".o_navbar_apps_menu");
     await click(dropdown, "button.dropdown-toggle");
     assert.containsOnce(dropdown, ".dropdown-menu");
     await click(dropdown, "button.dropdown-toggle");
     assert.containsNone(dropdown, ".dropdown-menu");
-    navbar.destroy();
 });
 
 QUnit.test("data-menu-xmlid attribute on AppsMenu items", async (assert) => {
@@ -75,7 +81,7 @@ QUnit.test("data-menu-xmlid attribute on AppsMenu items", async (assert) => {
     };
     const env = await makeTestEnv(baseConfig);
     const target = getFixture();
-    const navbar = await mount(NavBar, { env, target });
+    const navbar = await mount(NavBar, target, { env });
 
     // check apps
     const appsMenu = navbar.el.querySelector(".o_navbar_apps_menu");
@@ -103,14 +109,12 @@ QUnit.test("data-menu-xmlid attribute on AppsMenu items", async (assert) => {
     // check sub menus
     await click(navbar.el.querySelector(".o_menu_sections .dropdown-toggle"));
     assert.containsOnce(navbar, ".o_menu_sections .dropdown-item[data-menu-xmlid=menu_5]");
-
-    navbar.destroy();
 });
 
 QUnit.test("navbar can display current active app", async (assert) => {
     const env = await makeTestEnv(baseConfig);
     const target = getFixture();
-    const navbar = await mount(NavBar, { env, target });
+    const navbar = await mount(NavBar, target, { env });
     const dropdown = navbar.el.querySelector(".o_navbar_apps_menu");
     // Open apps menu
     await click(dropdown, "button.dropdown-toggle");
@@ -128,15 +132,13 @@ QUnit.test("navbar can display current active app", async (assert) => {
         ".dropdown-menu .dropdown-item.focus",
         "should show the current active app"
     );
-    navbar.destroy();
 });
 
 QUnit.test("navbar can display systray items", async (assert) => {
     const env = await makeTestEnv(baseConfig);
     const target = getFixture();
-    const navbar = await mount(NavBar, { env, target });
+    const navbar = await mount(NavBar, target, { env });
     assert.containsOnce(navbar.el, "li.my-item");
-    navbar.destroy();
 });
 
 QUnit.test("navbar can display systray items ordered based on their sequence", async (assert) => {
@@ -156,11 +158,10 @@ QUnit.test("navbar can display systray items ordered based on their sequence", a
     systrayRegistry.add("addon.myitem4", { Component: MyItem4 });
     const env = await makeTestEnv(baseConfig);
     const target = getFixture();
-    const navbar = await mount(NavBar, { env, target });
+    const navbar = await mount(NavBar, target, { env });
     const menuSystray = navbar.el.getElementsByClassName("o_menu_systray")[0];
     assert.containsN(menuSystray, "li", 4, "four systray items should be displayed");
     assert.strictEqual(menuSystray.innerText, "my item 3\nmy item 4\nmy item 2\nmy item 1");
-    navbar.destroy();
 });
 
 QUnit.test("can adapt with 'more' menu sections behavior", async (assert) => {
@@ -191,7 +192,7 @@ QUnit.test("can adapt with 'more' menu sections behavior", async (assert) => {
 
     // Set menu and mount
     env.services.menu.setCurrentMenu(1);
-    const navbar = await mount(MyNavbar, { env, target });
+    const navbar = await mount(MyNavbar, target, { env });
     assert.containsN(
         navbar.el,
         ".o_menu_sections > *:not(.o_menu_sections_more):not(.d-none)",
@@ -237,7 +238,6 @@ QUnit.test("can adapt with 'more' menu sections behavior", async (assert) => {
         "adapt -> hide 3/3 sections",
         "adapt -> hide 0/3 sections",
     ]);
-    navbar.destroy();
 });
 
 QUnit.test(
@@ -275,7 +275,7 @@ QUnit.test(
         target.style.width = "600px";
 
         const env = await makeTestEnv(baseConfig);
-        const navbar = await mount(MyNavbar, { env, target });
+        const navbar = await mount(MyNavbar, target, { env });
         assert.strictEqual(navbar.currentAppSections.length, 0, "0 app sub menus");
         assert.strictEqual(navbar.el.offsetWidth, 600);
         assert.strictEqual(adaptCount, 1);
@@ -345,8 +345,6 @@ QUnit.test(
             2,
             "during adapt, render triggered as the more menu dropdown is NO MORE the same"
         );
-
-        navbar.destroy();
     }
 );
 
@@ -379,7 +377,7 @@ QUnit.test("'more' menu sections properly updated on app change", async (assert)
 
     // Set App1 menu and mount
     env.services.menu.setCurrentMenu(1);
-    const navbar = await mount(NavBar, { env, target });
+    const navbar = await mount(NavBar, target, { env });
 
     // Force minimal width and dispatch window resize event
     navbar.el.style.width = "0%";
@@ -417,7 +415,6 @@ QUnit.test("'more' menu sections properly updated on app change", async (assert)
         ["Section 20", "Section 21", "Section 22", "Section 220", "Section 221", "Section 222"],
         "'more' menu should contain App2 sections"
     );
-    navbar.destroy();
 });
 
 QUnit.test("Do not execute adapt when navbar is destroyed", async (assert) => {
@@ -444,7 +441,7 @@ QUnit.test("Do not execute adapt when navbar is destroyed", async (assert) => {
 
     // Set menu and mount
     env.services.menu.setCurrentMenu(1);
-    const navbar = await mount(MyNavbar, { env, target });
+    const navbar = await mount(MyNavbar, target, { env });
     assert.verifySteps(["adapt NavBar"]);
     window.dispatchEvent(new Event("resize"));
     prom.resolve();
@@ -452,7 +449,7 @@ QUnit.test("Do not execute adapt when navbar is destroyed", async (assert) => {
     prom = makeDeferred();
     assert.verifySteps(["adapt NavBar"]);
     window.dispatchEvent(new Event("resize"));
-    navbar.destroy();
+    destroy(navbar);
     prom.resolve();
     await prom;
     assert.verifySteps([]);
diff --git a/addons/web/static/tests/webclient/switch_company_menu_tests.js b/addons/web/static/tests/webclient/switch_company_menu_tests.js
index 7c9d7c1a787..18356f3c87e 100644
--- a/addons/web/static/tests/webclient/switch_company_menu_tests.js
+++ b/addons/web/static/tests/webclient/switch_company_menu_tests.js
@@ -4,14 +4,12 @@ import { browser } from "@web/core/browser/browser";
 import { registry } from "@web/core/registry";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { SwitchCompanyMenu } from "@web/webclient/switch_company_menu/switch_company_menu";
-import { registerCleanup } from "../helpers/cleanup";
 import { makeTestEnv } from "../helpers/mock_env";
 import { companyService } from "@web/webclient/company_service";
-import { click, getFixture, makeDeferred, patchWithCleanup } from "../helpers/utils";
+import { click, getFixture, makeDeferred, mount, patchWithCleanup } from "../helpers/utils";
 import { uiService } from "@web/core/ui/ui_service";
 import { session } from "@web/session";
 
-const { mount } = owl;
 const serviceRegistry = registry.category("services");
 
 async function createSwitchCompanyMenu(routerParams = {}, toggleDelay = 0) {
@@ -31,8 +29,7 @@ async function createSwitchCompanyMenu(routerParams = {}, toggleDelay = 0) {
     }
     const env = await makeTestEnv();
     const target = getFixture();
-    const scMenu = await mount(SwitchCompanyMenu, { env, target });
-    registerCleanup(() => scMenu.destroy());
+    const scMenu = await mount(SwitchCompanyMenu, target, { env });
     return scMenu;
 }
 
diff --git a/addons/web/static/tests/webclient/user_menu_tests.js b/addons/web/static/tests/webclient/user_menu_tests.js
index 93e35a9ba8b..953620376db 100644
--- a/addons/web/static/tests/webclient/user_menu_tests.js
+++ b/addons/web/static/tests/webclient/user_menu_tests.js
@@ -4,17 +4,15 @@ import { browser } from "@web/core/browser/browser";
 import { ormService } from "@web/core/orm_service";
 import { registry } from "@web/core/registry";
 import { uiService } from "@web/core/ui/ui_service";
-import { patch, unpatch } from "@web/core/utils/patch";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { UserMenu } from "@web/webclient/user_menu/user_menu";
 import { preferencesItem } from "@web/webclient/user_menu/user_menu_items";
 import { userService } from "@web/core/user_service";
-import { makeTestEnv } from "../helpers/mock_env";
+import { makeTestEnv } from "@web/../tests/helpers/mock_env";
 import { makeFakeLocalizationService } from "../helpers/mock_services";
-import { click, getFixture, patchWithCleanup } from "../helpers/utils";
+import { click, getFixture, mount, patchWithCleanup } from "@web/../tests/helpers/utils";
 import { session } from "@web/session";
 
-const { mount } = owl;
 const serviceRegistry = registry.category("services");
 const userMenuRegistry = registry.category("user_menuitems");
 let target;
@@ -24,19 +22,15 @@ let userMenu;
 QUnit.module("UserMenu", {
     async beforeEach() {
         patchWithCleanup(session, { name: "Sauron" });
-        serviceRegistry.add("user", userService);
-        serviceRegistry.add("hotkey", hotkeyService);
-        serviceRegistry.add("ui", uiService);
-        target = getFixture();
-        patch(browser, "usermenutest", {
+        patchWithCleanup(browser, {
             location: {
                 origin: "http://lordofthering",
             },
         });
-    },
-    afterEach() {
-        userMenu.unmount();
-        unpatch(browser, "usermenutest");
+        serviceRegistry.add("user", userService);
+        serviceRegistry.add("hotkey", hotkeyService);
+        serviceRegistry.add("ui", uiService);
+        target = getFixture();
     },
 });
 
@@ -90,7 +84,7 @@ QUnit.test("can be rendered", async (assert) => {
             },
         };
     });
-    userMenu = await mount(UserMenu, { env, target });
+    userMenu = await mount(UserMenu, target, { env });
     let userMenuEl = userMenu.el;
     assert.containsOnce(userMenuEl, "img.o_user_avatar");
     assert.strictEqual(
@@ -127,7 +121,7 @@ QUnit.test("can be rendered", async (assert) => {
 QUnit.test("display the correct name in debug mode", async (assert) => {
     patchWithCleanup(odoo, { debug: "1" });
     env = await makeTestEnv();
-    userMenu = await mount(UserMenu, { env, target });
+    userMenu = await mount(UserMenu, target, { env });
     let userMenuEl = userMenu.el;
     assert.containsOnce(userMenuEl, "img.o_user_avatar");
     assert.containsOnce(userMenuEl, "span.oe_topbar_name");
@@ -162,7 +156,7 @@ QUnit.test("can execute the callback of settings", async (assert) => {
 
     env = await makeTestEnv(testConfig);
     userMenuRegistry.add("profile", preferencesItem);
-    userMenu = await mount(UserMenu, { env, target });
+    userMenu = await mount(UserMenu, target, { env });
     await click(userMenu.el.querySelector("button.dropdown-toggle"));
     assert.containsOnce(userMenu.el, ".dropdown-menu .dropdown-item");
     const item = userMenu.el.querySelector(".dropdown-menu .dropdown-item");
diff --git a/addons/web/static/tests/webclient/webclient_tests.js b/addons/web/static/tests/webclient/webclient_tests.js
index 8c5a4a3750d..8d564d15749 100644
--- a/addons/web/static/tests/webclient/webclient_tests.js
+++ b/addons/web/static/tests/webclient/webclient_tests.js
@@ -12,14 +12,14 @@ import { menuService } from "@web/webclient/menus/menu_service";
 import { WebClient } from "@web/webclient/webclient";
 import { clearRegistryWithCleanup, makeTestEnv } from "../helpers/mock_env";
 import { fakeTitleService } from "../helpers/mock_services";
-import { getFixture, patchWithCleanup, triggerEvent } from "../helpers/utils";
-import { session } from "@web/session";
+import { destroy, getFixture, mount, patchWithCleanup, triggerEvent } from "../helpers/utils";
 
-const { Component, mount, xml } = owl;
+const { Component, xml } = owl;
 const mainComponentRegistry = registry.category("main_components");
 const serviceRegistry = registry.category("services");
 
 let baseConfig;
+let target;
 
 QUnit.module("WebClient", {
     async beforeEach() {
@@ -34,16 +34,15 @@ QUnit.module("WebClient", {
             .add("title", fakeTitleService)
             .add("ui", uiService);
         baseConfig = { activateMockServer: true };
+        target = getFixture();
     },
 });
 
 QUnit.test("can be rendered", async (assert) => {
     assert.expect(1);
     const env = await makeTestEnv(baseConfig);
-    const target = getFixture();
-    const webClient = await mount(WebClient, { env, target });
-    assert.containsOnce(webClient.el, "header > nav.o_main_navbar");
-    webClient.destroy();
+    await mount(WebClient, target, { env });
+    assert.containsOnce(target, "header > nav.o_main_navbar");
 });
 
 QUnit.test("can render a main component", async (assert) => {
@@ -53,30 +52,8 @@ QUnit.test("can render a main component", async (assert) => {
     clearRegistryWithCleanup(mainComponentRegistry);
     mainComponentRegistry.add("mycomponent", { Component: MyComponent });
     const env = await makeTestEnv(baseConfig);
-    const target = getFixture();
-    const webClient = await mount(WebClient, { env, target });
-    assert.containsOnce(webClient.el, ".chocolate");
-    webClient.destroy();
-});
-
-QUnit.test("webclient for the superuser", async (assert) => {
-    assert.expect(1);
-    patchWithCleanup(session, { uid: 1 });
-    const env = await makeTestEnv(baseConfig);
-    const target = getFixture();
-    const webClient = await mount(WebClient, { env, target });
-    assert.hasClass(webClient.el, "o_is_superuser");
-    webClient.destroy();
-});
-
-QUnit.test("webclient for a non superuser", async (assert) => {
-    assert.expect(1);
-    patchWithCleanup(session, { uid: 2 });
-    const env = await makeTestEnv(baseConfig);
-    const target = getFixture();
-    const webClient = await mount(WebClient, { env, target });
-    assert.doesNotHaveClass(webClient.el, "o_is_superuser");
-    webClient.destroy();
+    await mount(WebClient, target, { env });
+    assert.containsOnce(target, ".chocolate");
 });
 
 QUnit.test("control-click propagation stopped on <a href/>", async (assert) => {
@@ -106,25 +83,23 @@ QUnit.test("control-click propagation stopped on <a href/>", async (assert) => {
         }
     }
     MyComponent.template = xml`<a href="#" class="MyComponent" t-on-click="onclick" />`;
-    const target = getFixture();
     let env = await makeTestEnv(baseConfig);
 
     // Mount the component as standalone and control-click the <a href/>
-    const standaloneComponent = await mount(MyComponent, { env, target });
+    const standaloneComponent = await mount(MyComponent, target, { env });
     assert.verifySteps([]);
     await triggerEvent(standaloneComponent.el, "", "click", { ctrlKey: false });
     await triggerEvent(standaloneComponent.el, "", "click", { ctrlKey: true });
     assert.verifySteps(["click", "ctrl-click"]);
-    standaloneComponent.destroy();
+    destroy(standaloneComponent);
 
     // Register the component as a main one, mount the webclient and control-click the <a href/>
     clearRegistryWithCleanup(mainComponentRegistry);
     mainComponentRegistry.add("mycomponent", { Component: MyComponent });
     env = await makeTestEnv(baseConfig);
-    const webClient = await mount(WebClient, { env, target });
+    await mount(WebClient, target, { env });
     assert.verifySteps([]);
-    await triggerEvent(webClient.el, ".MyComponent", "click", { ctrlKey: false });
-    await triggerEvent(webClient.el, ".MyComponent", "click", { ctrlKey: true });
+    await triggerEvent(target, ".MyComponent", "click", { ctrlKey: false });
+    await triggerEvent(target, ".MyComponent", "click", { ctrlKey: true });
     assert.verifySteps(["click"]);
-    webClient.destroy();
 });
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 656cadd9ce7..94b4c38217b 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -201,7 +201,7 @@
             <t t-set="head">
                 <t t-call-assets="web.assets_common" t-js="false"/>
                 <t t-call-assets="web.assets_backend" t-js="false"/>
-                <t t-call-assets="web.assets_common" t-css="false"/>
+                <t t-call-assets="web.tests_assets_common" t-css="false"/>
                 <t t-call-assets="web.assets_backend" t-css="false"/>
 
                 <t t-call="web.test_helpers"/>
@@ -220,9 +220,10 @@
             <t t-set="title">Web Mobile Tests</t>
             <t t-set="head">
                 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
+
                 <t t-call-assets="web.assets_common" t-js="false"/>
                 <t t-call-assets="web.assets_backend" t-js="false"/>
-                <t t-call-assets="web.assets_common" t-css="false"/>
+                <t t-call-assets="web.tests_assets_common" t-css="false"/>
                 <t t-call-assets="web.assets_backend" t-css="false"/>
 
                 <t t-call="web.test_helpers"/>