Merge branch '97-findByTestId' into 'main'

Add `findByTestId` frontend test helper

Closes #97

See merge request gitlab-org/developer-relations/contributor-success/contributors-gitlab-com!615

contributors/app/javascript/common/components/FilterCard.spec.js

@@ -16,9 +16,7 @@ const createWrapper = ({ showCommunityOnly = false, showSearch = false } = {}) =
     props: { modelValue, showCommunityOnly, showSearch },
   });
 };
-const findInWrapper = (testId) => {
-  return wrapper.find(`[data-test-id="filter-card-${testId}"]`);
-};
+const findInWrapper = testId => wrapper.findByTestId(`filter-card-${testId}`);
 
 beforeEach(() => {
   reactiveRoute = reactive({ query: { fromDate: '2024-04-06', toDate: '' } });

contributors/app/javascript/common/components/LevelProgress.spec.js

@@ -26,9 +26,7 @@ const createWrapper = async (props = { minimized: false }, userOverrides = {}) =
   );
 };
 
-const findInWrapper = (testId) => {
-  return wrapper.find(`[data-test-id="progress-bar-${testId}"]`);
-};
+const findInWrapper = testId => wrapper.findByTestId(`progress-bar-${testId}`);
 
 const findProgress = () => wrapper.findComponent(BProgress);
 const findProgressBar = () => wrapper.findComponent(BProgressBar);

contributors/app/javascript/pages/LeaderboardPage.spec.js

@@ -91,10 +91,10 @@ describe('while loading', () => {
 
   describe('with modified params', () => {
     it('sends the correct api query', async () => {
-      wrapper.find('[data-test-id="filter-card-from-date"]').setValue('2022-01-01');
-      wrapper.find('[data-test-id="filter-card-to-date"]').setValue('2023-01-01');
-      wrapper.find('[data-test-id="filter-card-community-only"]').setChecked(false);
-      wrapper.find('[data-test-id="filter-card-search-input"]').setValue('Bob');
+      wrapper.findByTestId('filter-card-from-date').setValue('2022-01-01');
+      wrapper.findByTestId('filter-card-to-date').setValue('2023-01-01');
+      wrapper.findByTestId('filter-card-community-only').setChecked(false);
+      wrapper.findByTestId('filter-card-search-input').setValue('Bob');
       wrapper.findComponent(BPagination).trigger('update:modelValue', 2);
       await wrapper.findComponent(BButton).trigger('click');
 

contributors/app/javascript/pages/RewardsPage.spec.js

@@ -15,7 +15,7 @@ const createWrapper = ({ userAdmin = false } = {}) => {
   });
 };
 
-const findIssueRewardsButton = () => wrapper.find('[data-test-id="issue-rewards-button"]');
+const findIssueRewardsButton = () => wrapper.findByTestId('issue-rewards-button');
 
 const mockData = {
   records: [

contributors/app/javascript/pages/user-page/AddEventModal.spec.js

@@ -15,9 +15,7 @@ const createWrapper = () => {
   formWrapper = modalWrapper.findComponent(BForm);
 };
 
-const findField = (testId) => {
-  return formWrapper.find(`[data-test-id='event-modal-${testId}']`);
-};
+const findField = testId => formWrapper.findByTestId(`event-modal-${testId}`);
 
 const fillForm = async (optional = true) => {
   await findField('input-name').setValue('Community event #999');

contributors/vite.config.js

@@ -36,6 +36,7 @@ export default defineConfig({
       reporter: ['cobertura', 'text'],
     },
     reporters: ['junit', 'default'],
+    setupFiles: ['../vitest.setup.js'],
     outputFile: './coverage/junit.json',
   },
 });

contributors/vitest.setup.js

+import { config } from '@vue/test-utils';
+import { beforeAll } from 'vitest';
+
+const DataTestIdPlugin = (wrapper) => {
+  function findByTestId(testId) {
+    return wrapper.find(`[data-test-id="${testId}"]`);
+  }
+
+  return {
+    findByTestId,
+  };
+};
+
+beforeAll(() => {
+  config.plugins.VueWrapper.install(DataTestIdPlugin);
+});