Replace attachToDocument with attachTo: document.body

@vue/test-utils deprecated `attachToDocument` in 1.0.x

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/vue_mr_widget/components/mr_widget_pipeline_container_spec.js

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

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/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/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,20 @@ 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`',
+
+    'options.attachToDocument is deprecated in favor of options.attachTo and will be removed in a future release',
+  ];
+  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(() => {