Skip to content

Resolve "Improve stubs mocking for @vue/test-utils v2"

Illya Klymov requested to merge xanf-async-components-stub into 408993-improve-stubs-mocking-for-vue-test-utils-v2

What does this MR do and why?

This MR introduces ability to find async components in shallow-based tests

In @vue/test-utils v1 (Vue.js 2), due to implementation nuances test-utils were unable to stub async components. With @vue/test-utils v2 and Vue.js 3 specially-crafted vnode transformers shallowMount stubs async components. But at the moment of stubbing async component is not resolved, so test-utils are simply unaware which component we're stubbing (we have only loader function)

This MR partially mimics behavior of Vue.js 2 test-utils. When we encounter async component we try to load it (it is side-effect free), and when it is loaded we update stub record to point to real component, not a loader.

While this basically means, that proper stubs will be available only on next tick, this is exactly the behaviour we were using in our codebase, where async components are actually also resolved after next tick

How to set up and validate locally

 let mutationHandlerMock;
 let subscriptionHandlerMock;

-describe('AiGenie', () => {
+describe.skip('AiGenie', () => {
   let wrapper;
   const containerId = 'container';
   const language = 'vue';
diff --git a/spec/frontend/environment.js b/spec/frontend/environment.js
index 4e341b2bb2f6..00e7fe86b2a5 100644
--- a/spec/frontend/environment.js
+++ b/spec/frontend/environment.js
@@ -23,7 +23,7 @@ class CustomEnvironment extends TestEnvironment {

     const { error: originalErrorFn } = context.console;
     Object.assign(context.console, {
-      error(...args) {
+      disable_error(...args) {
         if (
           args?.[0]?.includes('[Vue warn]: Missing required prop') ||
           args?.[0]?.includes('[Vue warn]: Invalid prop')
@@ -38,7 +38,7 @@ class CustomEnvironment extends TestEnvironment {
         );
       },

-      warn(...args) {
+      disable_warn(...args) {
         if (args?.[0]?.includes('The updateQuery callback for fetchMore is deprecated')) {
           return;
         }
  • run VUE_VERSION=3 yarn jest --maxWorkers 6 2>&1 | egrep "^(FAIL|PASS)" | awk '{ print $2 " " $1 }' | sort -u > /tmp/before-fix on master (this will generate baseline - tests before fixing stubs behaviour)
  • switch to this branch
  • run VUE_VERSION=3 yarn jest --maxWorkers 6 2>&1 | egrep "^(FAIL|PASS)" | awk '{ print $2 " " $1 }' | sort -u > /tmp/after-fix (this will generate report after fixes)
  • run diff /tmp/before-fix /tmp/after-fix to observe fixes

(fixes and table below are actually reported against Resolve "Improve stubs mocking for @vue/test-ut... (!118962 - closed) MR to demonstrate impact of this specific change)

Summary of changes 
--- /tmp/after-fix	2023-04-27 21:14:06
+++ /tmp/after-async-fix	2023-04-27 22:14:32
@@ -48,7 +48,7 @@
 ee/spec/frontend/ai/utils_spec.js PASS
 ee/spec/frontend/analytics/analytics_dashboards/components/analytics_dashboard_spec.js PASS
 ee/spec/frontend/analytics/analytics_dashboards/components/analytics_visualization_designer_spec.js PASS
-ee/spec/frontend/analytics/analytics_dashboards/components/dashboards_list_spec.js FAIL
+ee/spec/frontend/analytics/analytics_dashboards/components/dashboards_list_spec.js PASS
 ee/spec/frontend/analytics/analytics_dashboards/components/data_sources/cube_analytics_spec.js PASS
 ee/spec/frontend/analytics/analytics_dashboards/components/list/dashboard_list_item_spec.js PASS
 ee/spec/frontend/analytics/analytics_dashboards/components/list/feature_list_item_spec.js FAIL
@@ -268,7 +268,7 @@
 ee/spec/frontend/boards/components/assignee_select_spec.js PASS
 ee/spec/frontend/boards/components/board_add_new_column_spec.js PASS
 ee/spec/frontend/boards/components/board_content_sidebar_spec.js FAIL
-ee/spec/frontend/boards/components/board_content_spec.js FAIL
+ee/spec/frontend/boards/components/board_content_spec.js PASS
 ee/spec/frontend/boards/components/board_filtered_search_spec.js PASS
 ee/spec/frontend/boards/components/board_form_spec.js PASS
 ee/spec/frontend/boards/components/board_list_header_spec.js PASS
@@ -406,7 +406,7 @@
 ee/spec/frontend/environments/environment_alert_spec.js PASS
 ee/spec/frontend/environments/environment_approval_spec.js FAIL
 ee/spec/frontend/environments/environment_form_spec.js PASS
-ee/spec/frontend/environments/environments_table_spec.js FAIL
+ee/spec/frontend/environments/environments_table_spec.js PASS
 ee/spec/frontend/environments/multiple_approval_rules_table_spec.js PASS
 ee/spec/frontend/environments/new_environment_item_spec.js FAIL
 ee/spec/frontend/environments_dashboard/components/dashboard_spec.js FAIL
@@ -445,7 +445,7 @@
 ee/spec/frontend/external_issues_show/components/sidebar/issue_field_dropdown_spec.js PASS
 ee/spec/frontend/external_issues_show/components/sidebar/issue_field_spec.js PASS
 ee/spec/frontend/feature_flags/components/actions_spec.js PASS
-ee/spec/frontend/feature_flags/components/edit_feature_flag_spec.js FAIL
+ee/spec/frontend/feature_flags/components/edit_feature_flag_spec.js PASS
 ee/spec/frontend/filtered_search/filtered_search_manager_spec.js PASS
 ee/spec/frontend/filtered_search/filtered_search_tokenizer_spec.js PASS
 ee/spec/frontend/filtered_search/issues_filtered_search_token_keys_spec.js PASS
@@ -1121,7 +1121,7 @@
 ee/spec/frontend/vue_merge_request_widget/components/states/mr_widget_jira_association_missing_spec.js PASS
 ee/spec/frontend/vue_merge_request_widget/components/states/mr_widget_policy_violation_spec.js PASS
 ee/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js FAIL
-ee/spec/frontend/vue_merge_request_widget/components/widget/app_spec.js FAIL
+ee/spec/frontend/vue_merge_request_widget/components/widget/app_spec.js PASS
 ee/spec/frontend/vue_merge_request_widget/ee_mr_widget_options_spec.js FAIL
 ee/spec/frontend/vue_merge_request_widget/extensions/browser_performance/index_spec.js PASS
 ee/spec/frontend/vue_merge_request_widget/extensions/license_compliance/index_spec.js FAIL
@@ -1262,7 +1262,7 @@
 ee/spec/frontend/vulnerabilities/generic_report/types/url_spec.js PASS
 ee/spec/frontend/vulnerabilities/generic_report/types/utils_spec.js PASS
 ee/spec/frontend/vulnerabilities/generic_report/types/value_spec.js PASS
-ee/spec/frontend/vulnerabilities/header_spec.js FAIL
+ee/spec/frontend/vulnerabilities/header_spec.js PASS
 ee/spec/frontend/vulnerabilities/helpers_spec.js PASS
 ee/spec/frontend/vulnerabilities/history_comment_editor_spec.js FAIL
 ee/spec/frontend/vulnerabilities/history_comment_spec.js PASS
@@ -1591,7 +1591,7 @@
 spec/frontend/ci/pipeline_editor/graphql/resolvers_spec.js PASS
 spec/frontend/ci/pipeline_editor/pipeline_editor_app_spec.js PASS
 spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js PASS
-spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js FAIL
+spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js PASS
 spec/frontend/ci/pipeline_new/components/refs_dropdown_spec.js PASS
 spec/frontend/ci/pipeline_new/utils/filter_variables_spec.js PASS
 spec/frontend/ci/pipeline_new/utils/format_refs_spec.js PASS
@@ -2149,7 +2149,7 @@
 spec/frontend/ide/components/ide_review_spec.js PASS
 spec/frontend/ide/components/ide_side_bar_spec.js PASS
 spec/frontend/ide/components/ide_sidebar_nav_spec.js FAIL
-spec/frontend/ide/components/ide_spec.js FAIL
+spec/frontend/ide/components/ide_spec.js PASS
 spec/frontend/ide/components/ide_status_bar_spec.js FAIL
 spec/frontend/ide/components/ide_status_list_spec.js PASS
 spec/frontend/ide/components/ide_status_mr_spec.js FAIL
@@ -2184,7 +2184,7 @@
 spec/frontend/ide/components/terminal/session_spec.js FAIL
 spec/frontend/ide/components/terminal/terminal_controls_spec.js PASS
 spec/frontend/ide/components/terminal/terminal_spec.js PASS
-spec/frontend/ide/components/terminal/view_spec.js FAIL
+spec/frontend/ide/components/terminal/view_spec.js PASS
 spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js PASS
 spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js FAIL
 spec/frontend/ide/ide_router_extension_spec.js FAIL
@@ -2731,7 +2731,7 @@
 spec/frontend/notes/components/note_signed_out_widget_spec.js PASS
 spec/frontend/notes/components/noteable_discussion_spec.js FAIL
 spec/frontend/notes/components/noteable_note_spec.js PASS
-spec/frontend/notes/components/notes_activity_header_spec.js FAIL
+spec/frontend/notes/components/notes_activity_header_spec.js PASS
 spec/frontend/notes/components/notes_app_spec.js FAIL
 spec/frontend/notes/components/timeline_toggle_spec.js PASS
 spec/frontend/notes/components/toggle_replies_widget_spec.js PASS
@@ -3681,7 +3681,7 @@
 spec/frontend/vue_shared/issuable/issuable_blocked_icon_spec.js FAIL
 spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js PASS
 spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js FAIL
-spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js FAIL
+spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js PASS
 spec/frontend/vue_shared/issuable/list/components/issuable_tabs_spec.js PASS
 spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js FAIL
 spec/frontend/vue_shared/issuable/show/components/issuable_description_spec.js PASS
Metric Before !118962 (closed) This MR
Tests failed 3946 ⬇ 3883 ⬇ ⬇ 3837
Suites failed 933 ⬇ 924 ⬇ ⬇ 913
Tests passed 42081 ⬆ 42144 ⬆ ⬆ 42190
Suites passed 2835 ⬆ 2844 ⬆ ⬆ 2855

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #408993 (closed)

Edited by Illya Klymov

Merge request reports