Merge branch 'xanf-upgrade-vtu-to-v1' into 'master'

Upgrade @vue/test-utils to v1.1.2

See merge request gitlab-org/gitlab!50598

ee/spec/frontend/analytics/code_review_analytics/components/__snapshots__/merge_request_table_spec.js.snap

@@ -4,9 +4,9 @@ exports[`MergeRequestTable component template matches the snapshot 1`] = `
 <table
   aria-busy="false"
   aria-colcount="7"
-  aria-describedby="__BVID__59__caption_"
+  aria-describedby="__BVID__36__caption_"
   class="table b-table gl-table my-3 b-table-stacked-sm"
-  id="__BVID__59"
+  id="__BVID__36"
   role="table"
 >
   <!---->

ee/spec/frontend/approvals/components/approvers_select_spec.js

@@ -63,7 +63,7 @@ describe('Approvals ApproversSelect', () => {
       ...options,
       propsData,
       localVue,
-      attachToDocument: true,
+      attachTo: document.body,
     });
 
     await waitForPromises();

ee/spec/frontend/approvals/components/branches_select_spec.js

@@ -34,7 +34,7 @@ describe('Branches Select', () => {
       },
       localVue,
       store: new Vuex.Store(store),
-      attachToDocument: true,
+      attachTo: document.body,
     });
 
     await waitForPromises();

ee/spec/frontend/approvals/components/mr_edit/mr_rules_spec.js

@@ -27,7 +27,7 @@ describe('EE Approvals MRRules', () => {
     wrapper = mount(localVue.extend(MRRules), {
       localVue,
       store: new Vuex.Store(store),
-      attachToDocument: true,
+      attachTo: document.body,
     });
   };
 

ee/spec/frontend/groups/components/invite_members_spec.js

@@ -53,7 +53,7 @@ describe('User invites', () => {
     beforeEach(() => {
       wrapper = mount(Component, {
         propsData: { emails: [], docsPath: 'https://some.doc.path' },
-        attachToDocument: true,
+        attachTo: document.body,
       });
 
       clickButton();

ee/spec/frontend/related_issues/components/related_issuable_input_spec.js

@@ -77,7 +77,7 @@ describe('RelatedIssuableInput', () => {
           references: ['foo', 'bar'],
         },
         // We need to attach to document, so that `document.activeElement` is properly set in jsdom
-        attachToDocument: true,
+        attachTo: document.body,
       });
 
       wrapper.find('li').trigger('click');

ee/spec/frontend/threat_monitoring/components/__snapshots__/network_policy_list_spec.js.snap

@@ -6,10 +6,10 @@ exports[`NetworkPolicyList component renders policies table 1`] = `
 <table
   aria-busy="false"
   aria-colcount="3"
-  aria-describedby="__BVID__432__caption_"
+  aria-describedby="__BVID__333__caption_"
   aria-multiselectable="false"
   class="table b-table gl-table table-hover b-table-stacked-md b-table-selectable b-table-select-single"
-  id="__BVID__432"
+  id="__BVID__333"
   role="table"
 >
   <!---->

ee/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_container_spec.js

@@ -24,7 +24,7 @@ describe('MrWidgetPipelineContainer', () => {
       provide: {
         ...provide,
       },
-      attachToDocument: true,
+      attachTo: document.body,
     });
   };
 

package.json

@@ -163,7 +163,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.10.1",
     "@gitlab/eslint-plugin": "5.0.0",
     "@testing-library/dom": "^7.16.2",
-    "@vue/test-utils": "1.0.0-beta.30",
+    "@vue/test-utils": "1.1.2",
     "acorn": "^6.3.0",
     "axios-mock-adapter": "^1.15.0",
     "babel-jest": "^26.5.2",

spec/frontend/__mocks__/@gitlab/ui.js

@@ -2,7 +2,7 @@ export * from '@gitlab/ui';
 
 /**
  * The @gitlab/ui tooltip directive requires awkward and distracting set up in tests
- * for components that use it (e.g., `attachToDocument: true` and `sync: true` passed
+ * for components that use it (e.g., `attachTo: document.body` and `sync: true` passed
  * to the `mount` helper from `vue-test-utils`).
  *
  * This mock decouples those tests from the implementation, removing the need to set

spec/frontend/alerts_settings/__snapshots__/alerts_settings_form_spec.js.snap

@@ -16,7 +16,8 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
       <!---->
     </div>
   </div>
-  <div class=\\"gl-mt-3 collapse\\" style=\\"display: none;\\" id=\\"__BVID__10\\">
+  <transition-stub css=\\"true\\" enterclass=\\"\\" leaveclass=\\"collapse show\\" entertoclass=\\"collapse show\\" leavetoclass=\\"collapse\\" enteractiveclass=\\"collapsing\\" leaveactiveclass=\\"collapsing\\" class=\\"gl-mt-3\\">
+    <div class=\\"collapse\\" style=\\"display: none;\\" id=\\"__BVID__10\\">
       <div>
         <div id=\\"name-integration\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"name-integration__BV_label_\\" for=\\"name-integration\\" class=\\"d-block col-form-label\\">2. Name integration</label>
           <div class=\\"bv-no-focus-ring\\"><input type=\\"text\\" placeholder=\\"Enter integration name\\" class=\\"gl-form-input form-control\\" id=\\"__BVID__15\\">
@@ -93,5 +94,6 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
           <!---->
           <!----> <span class=\\"gl-button-text\\">Cancel</span></button></div>
     </div>
+  </transition-stub>
 </form>"
 `;

spec/frontend/boards/components/board_form_spec.js

@@ -71,7 +71,7 @@ describe('BoardForm', () => {
           mutate,
         },
       },
-      attachToDocument: true,
+      attachTo: document.body,
     });
   };
 

spec/frontend/boards/components/boards_selector_spec.js

@@ -94,7 +94,7 @@ describe('BoardsSelector', () => {
         weights: [],
       },
       mocks: { $apollo },
-      attachToDocument: true,
+      attachTo: document.body,
     });
 
     wrapper.vm.$apollo.addSmartQuery = jest.fn((_, options) => {

spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js

@@ -17,7 +17,7 @@ describe('Ci variable modal', () => {
   const createComponent = (method, options = {}) => {
     store = createStore();
     wrapper = method(CiVariableModal, {
-      attachToDocument: true,
+      attachTo: document.body,
       stubs: {
         GlModal: ModalStub,
       },

spec/frontend/ci_variable_list/components/ci_variable_table_spec.js

@@ -17,7 +17,7 @@ describe('Ci variable table', () => {
     store.state.isGroup = true;
     jest.spyOn(store, 'dispatch').mockImplementation();
     wrapper = mount(CiVariableTable, {
-      attachToDocument: true,
+      attachTo: document.body,
       localVue,
       store,
     });

spec/frontend/deploy_freeze/components/deploy_freeze_modal_spec.js

@@ -19,7 +19,7 @@ describe('Deploy freeze modal', () => {
       timezoneData: timezoneDataFixture,
     });
     wrapper = shallowMount(DeployFreezeModal, {
-      attachToDocument: true,
+      attachTo: document.body,
       stubs: {
         GlModal,
       },

spec/frontend/deploy_freeze/components/deploy_freeze_table_spec.js

@@ -18,7 +18,7 @@ describe('Deploy freeze table', () => {
     });
     jest.spyOn(store, 'dispatch').mockImplementation();
     wrapper = mount(DeployFreezeTable, {
-      attachToDocument: true,
+      attachTo: document.body,
       localVue,
       store,
     });

spec/frontend/design_management/components/design_notes/design_reply_form_spec.js

@@ -36,7 +36,7 @@ describe('Design reply form component', () => {
 
   it('textarea has focus after component mount', () => {
     // We need to attach to document, so that `document.activeElement` is properly set in jsdom
-    createComponent({}, { attachToDocument: true });
+    createComponent({}, { attachTo: document.body });
 
     expect(findTextarea().element).toEqual(document.activeElement);
   });

spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap

@@ -10,7 +10,10 @@ exports[`Design management list item component when item appears in view after i
 
 exports[`Design management list item component with notes renders item with multiple comments 1`] = `
 <router-link-stub
+  ariacurrentvalue="page"
   class="card gl-cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
+  event="click"
+  tag="a"
   to="[object Object]"
 >
   <div
@@ -81,7 +84,10 @@ exports[`Design management list item component with notes renders item with mult
 
 exports[`Design management list item component with notes renders item with single comment 1`] = `
 <router-link-stub
+  ariacurrentvalue="page"
   class="card gl-cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
+  event="click"
+  tag="a"
   to="[object Object]"
 >
   <div

spec/frontend/design_management/pages/index_spec.js

@@ -160,7 +160,7 @@ describe('Design management index page', () => {
       localVue,
       router,
       stubs: { DesignDestroyer, ApolloMutation, VueDraggable, ...stubs },
-      attachToDocument: true,
+      attachTo: document.body,
       provide: {
         projectPath: 'project-path',
         issueIid: '1',

spec/frontend/monitoring/components/charts/stacked_column_spec.js

@@ -26,7 +26,7 @@ describe('Stacked column chart component', () => {
       stubs: {
         GlPopover: true,
       },
-      attachToDocument: true,
+      attachTo: document.body,
     });
 
   beforeEach(() => {

spec/frontend/monitoring/components/charts/time_series_spec.js

@@ -53,7 +53,7 @@ describe('Time series component', () => {
       stubs: {
         GlPopover: true,
       },
-      attachToDocument: true,
+      attachTo: document.body,
     });
   };
 

spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js

@@ -11,7 +11,7 @@ const createMountedWrapper = (props = {}) => {
   wrapper = mount(DuplicateDashboardForm, {
     propsData: { ...props },
     // We need to attach to document, so that `document.activeElement` is properly set in jsdom
-    attachToDocument: true,
+    attachTo: document.body,
   });
 };
 

spec/frontend/pipeline_editor/components/commit/commit_form_spec.js

@@ -16,8 +16,8 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
         ...props,
       },
 
-      // attachToDocument is required for input/submit events
-      attachToDocument: mountFn === mount,
+      // attachTo is required for input/submit events
+      attachTo: mountFn === mount ? document.body : null,
     });
   };
 

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -100,8 +100,8 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
           mutate: mockMutate,
         },
       },
-      // attachToDocument is required for input/submit events
-      attachToDocument: mountFn === mount,
+      // attachTo is required for input/submit events
+      attachTo: mountFn === mount ? document.body : null,
       ...options,
     });
   };

spec/frontend/pipelines/components/dag/dag_graph_spec.js

@@ -20,7 +20,7 @@ describe('The DAG graph', () => {
     }
 
     wrapper = shallowMount(DagGraph, {
-      attachToDocument: true,
+      attachTo: document.body,
       propsData,
       data() {
         return {

spec/frontend/pipelines/components/pipelines_filtered_search_spec.js

@@ -26,7 +26,7 @@ describe('Pipelines filtered search', () => {
         projectId: '21',
         params,
       },
-      attachToDocument: true,
+      attachTo: document.body,
     });
   };
 

spec/frontend/pipelines/stage_spec.js

@@ -26,7 +26,7 @@ describe('Pipelines stage component', () => {
 
   const createComponent = (props = {}) => {
     wrapper = mount(StageComponent, {
-      attachToDocument: true,
+      attachTo: document.body,
       propsData: {
         ...defaultProps,
         ...props,

spec/frontend/sidebar/sidebar_assignees_spec.js

@@ -29,7 +29,7 @@ describe('sidebar assignees', () => {
         },
       },
       // Attaching to document is required because this component emits something from the parent element :/
-      attachToDocument: true,
+      attachTo: document.body,
     });
   };
 

spec/frontend/test_setup.js

@@ -58,8 +58,18 @@ Object.entries(jqueryMatchers).forEach(([matcherName, matcherFactory]) => {
 
 expect.extend(customMatchers);
 
-// Tech debt issue TBD
-testUtilsConfig.logModifiedComponents = false;
+testUtilsConfig.deprecationWarningHandler = (method, message) => {
+  const ALLOWED_DEPRECATED_METHODS = [
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/295679
+    'finding components with `find` or `get`',
+
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/295680
+    'finding components with `findAll`',
+  ];
+  if (!ALLOWED_DEPRECATED_METHODS.includes(method)) {
+    global.console.error(message);
+  }
+};
 
 Object.assign(global, {
   requestIdleCallback(cb) {

spec/frontend/vue_shared/components/project_selector/project_selector_spec.js

@@ -31,7 +31,7 @@ describe('ProjectSelector component', () => {
         showSearchErrorMessage: false,
         totalResults: searchResults.length,
       },
-      attachToDocument: true,
+      attachTo: document.body,
     });
 
     ({ vm } = wrapper);

spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js

@@ -18,7 +18,7 @@ describe('TooltipOnTruncate component', () => {
 
   const createComponent = ({ propsData, ...options } = {}) => {
     wrapper = shallowMount(TooltipOnTruncate, {
-      attachToDocument: true,
+      attachTo: document.body,
       propsData: {
         ...propsData,
       },
@@ -44,7 +44,7 @@ describe('TooltipOnTruncate component', () => {
       },
       {
         propsData: { ...propsData },
-        attachToDocument: true,
+        attachTo: document.body,
         ...options,
       },
     );

spec/frontend/vue_shared/directives/tooltip_spec.js

@@ -19,7 +19,7 @@ describe('Tooltip directive', () => {
         data: () => ({ tooltip: text }),
         template,
       },
-      { attachToDocument: true },
+      { attachTo: document.body },
     );
   }
 

spec/frontend/vue_shared/directives/validation_spec.js

@@ -36,7 +36,7 @@ describe('validation directive', () => {
       `,
     };
 
-    wrapper = shallowMount(component, { attachToDocument: true });
+    wrapper = shallowMount(component, { attachTo: document.body });
   };
 
   afterEach(() => {

yarn.lock

@@ -1423,10 +1423,10 @@
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.9.0"
 
-"@vue/test-utils@1.0.0-beta.30":
-  version "1.0.0-beta.30"
-  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.30.tgz#d5f26d1e2411fdb7fa7fdedb61b4b4ea4194c49d"
-  integrity sha512-Wyvcha9fNk8+kzTDwb3xWGjPkCPzHSYSwKP6MplrPTG/auhqoad7JqUEceZLc6u7AU4km2pPQ8/m9s0RgCZ0NA==
+"@vue/test-utils@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.1.2.tgz#fdb487448dceefeaf3d01d465f7c836a3d666dbc"
+  integrity sha512-utbIL7zn9c+SjhybPwh48lpWCiluFCbP1yyRNAy1fQsw/6hiNFioaWy05FoVAFIZXC5WwBf+5r4ypfM1j/nI4A==
   dependencies:
     dom-event-types "^1.0.0"
     lodash "^4.17.15"