Add latest changes from gitlab-org/gitlab@master

5 files changed, 81 insertions, 84 deletions

diff --git a/spec/frontend/issuable/components/csv_export_modal_spec.js b/spec/frontend/issuable/components/csv_export_modal_spec.js
index 7eb85a946ae..34094d22e68 100644
--- a/spec/frontend/issuable/components/csv_export_modal_spec.js
+++ b/spec/frontend/issuable/components/csv_export_modal_spec.js
@@ -1,7 +1,6 @@
 import { GlModal, GlIcon, GlButton } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { stubComponent } from 'helpers/stub_component';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import CsvExportModal from '~/issuable/components/csv_export_modal.vue';
 
 describe('CsvExportModal', () => {
@@ -9,26 +8,24 @@ describe('CsvExportModal', () => {
 
   function createComponent(options = {}) {
     const { injectedProperties = {}, props = {} } = options;
-    return extendedWrapper(
-      mount(CsvExportModal, {
-        propsData: {
-          modalId: 'csv-export-modal',
-          exportCsvPath: 'export/csv/path',
-          issuableCount: 1,
-          ...props,
-        },
-        provide: {
-          issuableType: 'issues',
-          ...injectedProperties,
-        },
-        stubs: {
-          GlModal: stubComponent(GlModal, {
-            template:
-              '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
-          }),
-        },
-      }),
-    );
+    return mount(CsvExportModal, {
+      propsData: {
+        modalId: 'csv-export-modal',
+        exportCsvPath: 'export/csv/path',
+        issuableCount: 1,
+        ...props,
+      },
+      provide: {
+        issuableType: 'issues',
+        ...injectedProperties,
+      },
+      stubs: {
+        GlModal: stubComponent(GlModal, {
+          template:
+            '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
+        }),
+      },
+    });
   }
 
   afterEach(() => {
@@ -61,14 +58,13 @@ describe('CsvExportModal', () => {
     describe('issuable count info text', () => {
       it('displays the info text when issuableCount is > -1', () => {
         wrapper = createComponent({ props: { issuableCount: 10 } });
-        expect(wrapper.findByTestId('issuable-count-note').exists()).toBe(true);
-        expect(wrapper.findByTestId('issuable-count-note').text()).toContain('10 issues selected');
+        expect(wrapper.text()).toContain('10 issues selected');
         expect(findIcon().exists()).toBe(true);
       });
 
       it("doesn't display the info text when issuableCount is -1", () => {
         wrapper = createComponent({ props: { issuableCount: -1 } });
-        expect(wrapper.findByTestId('issuable-count-note').exists()).toBe(false);
+        expect(wrapper.text()).not.toContain('issues selected');
       });
     });
 
diff --git a/spec/frontend/issuable/components/csv_import_export_buttons_spec.js b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
index 2fe8d28a333..118c12d968b 100644
--- a/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
+++ b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
@@ -1,6 +1,6 @@
-import { shallowMount } from '@vue/test-utils';
+import { GlButton, GlDropdown } from '@gitlab/ui';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import CsvExportModal from '~/issuable/components/csv_export_modal.vue';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
 import CsvImportModal from '~/issuable/components/csv_import_modal.vue';
@@ -14,35 +14,33 @@ describe('CsvImportExportButtons', () => {
 
   function createComponent(injectedProperties = {}) {
     glModalDirective = jest.fn();
-    return extendedWrapper(
-      shallowMount(CsvImportExportButtons, {
-        directives: {
-          GlTooltip: createMockDirective(),
-          glModal: {
-            bind(_, { value }) {
-              glModalDirective(value);
-            },
+    return mountExtended(CsvImportExportButtons, {
+      directives: {
+        GlTooltip: createMockDirective(),
+        glModal: {
+          bind(_, { value }) {
+            glModalDirective(value);
           },
         },
-        provide: {
-          ...injectedProperties,
-        },
-        propsData: {
-          exportCsvPath,
-          issuableCount,
-        },
-      }),
-    );
+      },
+      provide: {
+        ...injectedProperties,
+      },
+      propsData: {
+        exportCsvPath,
+        issuableCount,
+      },
+    });
   }
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  const findExportCsvButton = () => wrapper.findByTestId('export-csv-button');
-  const findImportDropdown = () => wrapper.findByTestId('import-csv-dropdown');
-  const findImportCsvButton = () => wrapper.findByTestId('import-csv-dropdown');
-  const findImportFromJiraLink = () => wrapper.findByTestId('import-from-jira-link');
+  const findExportCsvButton = () => wrapper.findComponent(GlButton);
+  const findImportDropdown = () => wrapper.findComponent(GlDropdown);
+  const findImportCsvButton = () => wrapper.findByRole('menuitem', { name: 'Import CSV' });
+  const findImportFromJiraLink = () => wrapper.findByRole('menuitem', { name: 'Import from Jira' });
   const findExportCsvModal = () => wrapper.findComponent(CsvExportModal);
   const findImportCsvModal = () => wrapper.findComponent(CsvImportModal);
 
@@ -97,7 +95,7 @@ describe('CsvImportExportButtons', () => {
         expect(findImportDropdown().exists()).toBe(true);
       });
 
-      it('renders the import button', () => {
+      it('renders the import csv menu item', () => {
         expect(findImportCsvButton().exists()).toBe(true);
       });
 
@@ -106,8 +104,11 @@ describe('CsvImportExportButtons', () => {
           wrapper = createComponent({ showImportButton: true, showLabel: false });
         });
 
-        it('does not have a button text', () => {
-          expect(findImportCsvButton().props('text')).toBe(null);
+        it('hides button text', () => {
+          expect(findImportDropdown().props()).toMatchObject({
+            text: 'Import issues',
+            textSrOnly: true,
+          });
         });
 
         it('import button has a tooltip', () => {
@@ -124,7 +125,10 @@ describe('CsvImportExportButtons', () => {
         });
 
         it('displays a button text', () => {
-          expect(findImportCsvButton().props('text')).toBe('Import issues');
+          expect(findImportDropdown().props()).toMatchObject({
+            text: 'Import issues',
+            textSrOnly: false,
+          });
         });
 
         it('import button has no tooltip', () => {
diff --git a/spec/frontend/issuable/components/csv_import_modal_spec.js b/spec/frontend/issuable/components/csv_import_modal_spec.js
index ce9d738f77b..0c88b6b1283 100644
--- a/spec/frontend/issuable/components/csv_import_modal_spec.js
+++ b/spec/frontend/issuable/components/csv_import_modal_spec.js
@@ -1,8 +1,6 @@
-import { GlModal } from '@gitlab/ui';
-import { getByRole, getByLabelText } from '@testing-library/dom';
-import { mount } from '@vue/test-utils';
+import { GlButton, GlModal } from '@gitlab/ui';
 import { stubComponent } from 'helpers/stub_component';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import CsvImportModal from '~/issuable/components/csv_import_modal.vue';
 
 jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
@@ -13,23 +11,21 @@ describe('CsvImportModal', () => {
 
   function createComponent(options = {}) {
     const { injectedProperties = {}, props = {} } = options;
-    return extendedWrapper(
-      mount(CsvImportModal, {
-        propsData: {
-          modalId: 'csv-import-modal',
-          ...props,
-        },
-        provide: {
-          issuableType: 'issues',
-          ...injectedProperties,
-        },
-        stubs: {
-          GlModal: stubComponent(GlModal, {
-            template: '<div><slot></slot><slot name="modal-footer"></slot></div>',
-          }),
-        },
-      }),
-    );
+    return mountExtended(CsvImportModal, {
+      propsData: {
+        modalId: 'csv-import-modal',
+        ...props,
+      },
+      provide: {
+        issuableType: 'issues',
+        ...injectedProperties,
+      },
+      stubs: {
+        GlModal: stubComponent(GlModal, {
+          template: '<div><slot></slot><slot name="modal-footer"></slot></div>',
+        }),
+      },
+    });
   }
 
   beforeEach(() => {
@@ -41,9 +37,9 @@ describe('CsvImportModal', () => {
   });
 
   const findModal = () => wrapper.findComponent(GlModal);
-  const findPrimaryButton = () => getByRole(wrapper.element, 'button', { name: 'Import issues' });
-  const findForm = () => wrapper.findByTestId('import-csv-form');
-  const findFileInput = () => getByLabelText(wrapper.element, 'Upload CSV file');
+  const findPrimaryButton = () => wrapper.findComponent(GlButton);
+  const findForm = () => wrapper.find('form');
+  const findFileInput = () => wrapper.findByLabelText('Upload CSV file');
   const findAuthenticityToken = () => new FormData(findForm().element).get('authenticity_token');
 
   describe('template', () => {
@@ -76,8 +72,8 @@ describe('CsvImportModal', () => {
         expect(findPrimaryButton()).toExist();
       });
 
-      it('submits the form when the primary action is clicked', async () => {
-        findPrimaryButton().click();
+      it('submits the form when the primary action is clicked', () => {
+        findPrimaryButton().trigger('click');
 
         expect(formSubmitSpy).toHaveBeenCalled();
       });
diff --git a/spec/frontend/issuable/components/issuable_by_email_spec.js b/spec/frontend/issuable/components/issuable_by_email_spec.js
index 08a99f29479..f11c41fe25d 100644
--- a/spec/frontend/issuable/components/issuable_by_email_spec.js
+++ b/spec/frontend/issuable/components/issuable_by_email_spec.js
@@ -58,10 +58,11 @@ describe('IssuableByEmail', () => {
     mockAxios.restore();
   });
 
-  const findFormInputGroup = () => wrapper.find(GlFormInputGroup);
+  const findButton = () => wrapper.findComponent(GlButton);
+  const findFormInputGroup = () => wrapper.findComponent(GlFormInputGroup);
 
   const clickResetEmail = async () => {
-    wrapper.findByTestId('incoming-email-token-reset').vm.$emit('click');
+    wrapper.findAllComponents(GlButton).at(2).trigger('click');
 
     await waitForPromises();
   };
@@ -75,14 +76,14 @@ describe('IssuableByEmail', () => {
       'renders a link with "$buttonText" when type is "$issuableType"',
       ({ issuableType, buttonText }) => {
         wrapper = createComponent({ issuableType });
-        expect(wrapper.findByTestId('issuable-email-modal-btn').text()).toBe(buttonText);
+        expect(findButton().text()).toBe(buttonText);
       },
     );
 
     it('opens the modal when the user clicks the button', () => {
       wrapper = createComponent();
 
-      wrapper.findByTestId('issuable-email-modal-btn').vm.$emit('click');
+      findButton().trigger('click');
 
       expect(glModalDirective).toHaveBeenCalled();
     });
@@ -105,7 +106,7 @@ describe('IssuableByEmail', () => {
         initialEmail,
       });
 
-      expect(wrapper.findByTestId('mail-to-btn').attributes('href')).toBe(
+      expect(wrapper.findAllComponents(GlButton).at(1).attributes('href')).toBe(
         `mailto:${initialEmail}?subject=${subject}&body=${body}`,
       );
     });
diff --git a/spec/frontend/issuable/components/status_box_spec.js b/spec/frontend/issuable/components/status_box_spec.js
index 990fac67f7e..9cbf023dbd6 100644
--- a/spec/frontend/issuable/components/status_box_spec.js
+++ b/spec/frontend/issuable/components/status_box_spec.js
@@ -1,4 +1,4 @@
-import { GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import StatusBox from '~/issuable/components/status_box.vue';
 
@@ -64,7 +64,7 @@ describe('Merge request status box component', () => {
           initialState: testCase.state,
         });
 
-        expect(wrapper.find('[data-testid="status-icon"]').props('name')).toBe(testCase.icon);
+        expect(wrapper.findComponent(GlIcon).props('name')).toBe(testCase.icon);
       });
     });
   });