Remove data-testids in favour of testing by label text

Remove data-testids in app/assets/javascripts/issuable

app/assets/javascripts/issuable/components/csv_export_modal.vue

@@ -51,7 +51,6 @@ export default {
     </template>
     <div
       v-if="issuableCount > -1"
-      data-testid="issuable-count-note"
       class="gl-justify-content-start gl-align-items-center gl-p-4 gl-border-b-solid gl-border-1 gl-border-gray-50"
     >
       <gl-icon name="check" class="gl-color-green-400" />

app/assets/javascripts/issuable/components/csv_import_export_buttons.vue

@@ -72,9 +72,6 @@ export default {
     importModalId() {
       return `${this.issuableType}-import-modal`;
     },
-    importButtonText() {
-      return this.showLabel ? this.$options.i18n.importIssuesText : null;
-    },
     importButtonTooltipText() {
       return this.showLabel ? null : this.$options.i18n.importIssuesText;
     },
@@ -90,29 +87,25 @@ export default {
     <gl-button-group>
       <gl-button
         v-if="showExportButton"
-        v-gl-tooltip.hover="$options.i18n.exportAsCsvButtonText"
+        v-gl-tooltip="$options.i18n.exportAsCsvButtonText"
         v-gl-modal="exportModalId"
         icon="export"
         :aria-label="$options.i18n.exportAsCsvButtonText"
         data-qa-selector="export_as_csv_button"
-        data-testid="export-csv-button"
       />
       <gl-dropdown
         v-if="showImportButton"
-        v-gl-tooltip.hover="importButtonTooltipText"
+        v-gl-tooltip="importButtonTooltipText"
         data-qa-selector="import_issues_dropdown"
-        data-testid="import-csv-dropdown"
-        :text="importButtonText"
+        :text="$options.i18n.importIssuesText"
+        :text-sr-only="!showLabel"
         :icon="importButtonIcon"
       >
-        <gl-dropdown-item v-gl-modal="importModalId" data-testid="import-csv-link">{{
-          __('Import CSV')
-        }}</gl-dropdown-item>
+        <gl-dropdown-item v-gl-modal="importModalId">{{ __('Import CSV') }}</gl-dropdown-item>
         <gl-dropdown-item
           v-if="canEdit"
           :href="projectImportJiraPath"
           data-qa-selector="import_from_jira_link"
-          data-testid="import-from-jira-link"
           >{{ __('Import from Jira') }}</gl-dropdown-item
         >
       </gl-dropdown>

app/assets/javascripts/issuable/components/csv_import_modal.vue

@@ -48,13 +48,7 @@ export default {
 
 <template>
   <gl-modal :modal-id="modalId" :title="__('Import issues')">
-    <form
-      ref="form"
-      :action="importCsvIssuesPath"
-      enctype="multipart/form-data"
-      method="post"
-      data-testid="import-csv-form"
-    >
+    <form ref="form" :action="importCsvIssuesPath" enctype="multipart/form-data" method="post">
       <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
       <p>
         {{

app/assets/javascripts/issuable/components/issuable_by_email.vue

@@ -91,7 +91,7 @@ export default {
 
 <template>
   <div>
-    <gl-button v-gl-modal="$options.modalId" variant="link" data-testid="issuable-email-modal-btn"
+    <gl-button v-gl-modal="$options.modalId" variant="link"
       ><gl-sprintf :message="__('Email a new %{name} to this project')"
         ><template #name>{{ issuableName }}</template></gl-sprintf
       ></gl-button
@@ -122,7 +122,6 @@ export default {
             :title="$options.i18n.sendEmail"
             :aria-label="$options.i18n.sendEmail"
             icon="mail"
-            data-testid="mail-to-btn"
           />
         </template>
       </gl-form-input-group>
@@ -156,12 +155,7 @@ export default {
             /></gl-link>
           </template>
           <template #resetLink="{ content }">
-            <gl-button
-              variant="link"
-              data-testid="incoming-email-token-reset"
-              @click="resetIncomingEmailToken"
-              >{{ content }}</gl-button
-            >
+            <gl-button variant="link" @click="resetIncomingEmailToken">{{ content }}</gl-button>
           </template>
         </gl-sprintf>
       </p>

app/assets/javascripts/issuable/components/status_box.vue

@@ -91,11 +91,7 @@ export default {
 
 <template>
   <div :class="statusBoxClass" class="issuable-status-box status-box">
-    <gl-icon
-      :name="statusIconName"
-      class="gl-display-block gl-sm-display-none!"
-      data-testid="status-icon"
-    />
+    <gl-icon :name="statusIconName" class="gl-display-block gl-sm-display-none!" />
     <span class="gl-display-none gl-sm-display-block">
       {{ statusHumanName }}
     </span>

spec/features/issues/csv_spec.rb

@@ -16,9 +16,7 @@ RSpec.describe 'Issues csv', :js do
 
   def request_csv(params = {})
     visit project_issues_path(project, params)
-    page.within('.nav-controls') do
-      find('[data-testid="export-csv-button"]').click
-    end
+    click_button 'Export as CSV'
     click_on 'Export issues'
   end
 

spec/features/issues/user_resets_their_incoming_email_token_spec.rb

@@ -16,11 +16,11 @@ RSpec.describe 'Issues > User resets their incoming email token' do
   end
 
   it 'changes incoming email address token', :js do
-    page.find('[data-testid="issuable-email-modal-btn"]').click
+    click_button 'Email a new issue to this project'
 
     page.within '#issuable-email-modal' do
       previous_token = page.find('input[type="text"]').value
-      page.find('[data-testid="incoming-email-token-reset"]').click
+      click_button 'reset it'
 
       wait_for_requests
 

spec/features/merge_requests/user_exports_as_csv_spec.rb

@@ -12,15 +12,9 @@ RSpec.describe 'Merge Requests > Exports as CSV', :js do
     visit(project_merge_requests_path(project))
   end
 
-  subject { page.find('.nav-controls') }
-
-  it { is_expected.to have_selector '[data-testid="export-csv-button"]' }
-
   context 'button is clicked' do
     before do
-      page.within('.nav-controls') do
-        find('[data-testid="export-csv-button"]').click
-      end
+      click_button 'Export as CSV'
     end
 
     it 'shows a success message' do

spec/frontend/issuable/components/csv_export_modal_spec.js

 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');
       });
     });
 

spec/frontend/issuable/components/csv_import_export_buttons_spec.js

-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', () => {

spec/frontend/issuable/components/csv_import_modal_spec.js

-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();
       });

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}`,
       );
     });

spec/frontend/issuable/components/status_box_spec.js

-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);
       });
     });
   });