Add latest changes from gitlab-org/gitlab@master

2 files changed, 277 insertions, 4 deletions

diff --git a/spec/frontend/__helpers__/vue_test_utils_helper.js b/spec/frontend/__helpers__/vue_test_utils_helper.js
index d6132ef84ac..a94cee84f74 100644
--- a/spec/frontend/__helpers__/vue_test_utils_helper.js
+++ b/spec/frontend/__helpers__/vue_test_utils_helper.js
@@ -1,4 +1,6 @@
-import { isArray } from 'lodash';
+import * as testingLibrary from '@testing-library/dom';
+import { createWrapper, WrapperArray, mount, shallowMount } from '@vue/test-utils';
+import { isArray, upperFirst } from 'lodash';
 
 const vNodeContainsText = (vnode, text) =>
   (vnode.text && vnode.text.includes(text)) ||
@@ -37,6 +39,17 @@ export const waitForMutation = (store, expectedMutationType) =>
   });
 
 export const extendedWrapper = (wrapper) => {
+  // https://testing-library.com/docs/queries/about
+  const AVAILABLE_QUERIES = [
+    'byRole',
+    'byLabelText',
+    'byPlaceholderText',
+    'byText',
+    'byDisplayValue',
+    'byAltText',
+    'byTitle',
+  ];
+
   if (isArray(wrapper) || !wrapper?.find) {
     // eslint-disable-next-line no-console
     console.warn(
@@ -56,5 +69,63 @@ export const extendedWrapper = (wrapper) => {
         return this.findAll(`[data-testid="${id}"]`);
       },
     },
+    // `findBy`
+    ...AVAILABLE_QUERIES.reduce((accumulator, query) => {
+      return {
+        ...accumulator,
+        [`find${upperFirst(query)}`]: {
+          value(text, options = {}) {
+            const elements = testingLibrary[`queryAll${upperFirst(query)}`](
+              wrapper.element,
+              text,
+              options,
+            );
+
+            // Return VTU `ErrorWrapper` if element is not found
+            // https://github.com/vuejs/vue-test-utils/blob/dev/packages/test-utils/src/error-wrapper.js
+            // VTU does not expose `ErrorWrapper` so, as of now, this is the best way to
+            // create an `ErrorWrapper`
+            if (!elements.length) {
+              const emptyElement = document.createElement('div');
+
+              return createWrapper(emptyElement).find('testing-library-element-not-found');
+            }
+
+            return createWrapper(elements[0], this.options || {});
+          },
+        },
+      };
+    }, {}),
+    // `findAllBy`
+    ...AVAILABLE_QUERIES.reduce((accumulator, query) => {
+      return {
+        ...accumulator,
+        [`findAll${upperFirst(query)}`]: {
+          value(text, options = {}) {
+            const elements = testingLibrary[`queryAll${upperFirst(query)}`](
+              wrapper.element,
+              text,
+              options,
+            );
+
+            const wrappers = elements.map((element) => {
+              const elementWrapper = createWrapper(element, this.options || {});
+              elementWrapper.selector = text;
+
+              return elementWrapper;
+            });
+
+            const wrapperArray = new WrapperArray(wrappers);
+            wrapperArray.selector = text;
+
+            return wrapperArray;
+          },
+        },
+      };
+    }, {}),
   });
 };
+
+export const shallowMountExtended = (...args) => extendedWrapper(shallowMount(...args));
+
+export const mountExtended = (...args) => extendedWrapper(mount(...args));
diff --git a/spec/frontend/__helpers__/vue_test_utils_helper_spec.js b/spec/frontend/__helpers__/vue_test_utils_helper_spec.js
index d4f8e36c169..dfe5a483223 100644
--- a/spec/frontend/__helpers__/vue_test_utils_helper_spec.js
+++ b/spec/frontend/__helpers__/vue_test_utils_helper_spec.js
@@ -1,7 +1,27 @@
-import { shallowMount } from '@vue/test-utils';
-import { extendedWrapper, shallowWrapperContainsSlotText } from './vue_test_utils_helper';
+import * as testingLibrary from '@testing-library/dom';
+import * as vtu from '@vue/test-utils';
+import {
+  shallowMount,
+  Wrapper as VTUWrapper,
+  WrapperArray as VTUWrapperArray,
+} from '@vue/test-utils';
+import {
+  extendedWrapper,
+  shallowMountExtended,
+  mountExtended,
+  shallowWrapperContainsSlotText,
+} from './vue_test_utils_helper';
+
+jest.mock('@testing-library/dom', () => ({
+  __esModule: true,
+  ...jest.requireActual('@testing-library/dom'),
+}));
 
 describe('Vue test utils helpers', () => {
+  afterAll(() => {
+    jest.unmock('@testing-library/dom');
+  });
+
   describe('shallowWrapperContainsSlotText', () => {
     const mockText = 'text';
     const mockSlot = `<div>${mockText}</div>`;
@@ -84,7 +104,7 @@ describe('Vue test utils helpers', () => {
         );
       });
 
-      it('should find the component by test id', () => {
+      it('should find the element by test id', () => {
         expect(mockComponent.findByTestId(testId).exists()).toBe(true);
       });
     });
@@ -105,5 +125,187 @@ describe('Vue test utils helpers', () => {
         expect(mockComponent.findAllByTestId(testId)).toHaveLength(2);
       });
     });
+
+    describe.each`
+      findMethod                 | expectedQuery
+      ${'findByRole'}            | ${'queryAllByRole'}
+      ${'findByLabelText'}       | ${'queryAllByLabelText'}
+      ${'findByPlaceholderText'} | ${'queryAllByPlaceholderText'}
+      ${'findByText'}            | ${'queryAllByText'}
+      ${'findByDisplayValue'}    | ${'queryAllByDisplayValue'}
+      ${'findByAltText'}         | ${'queryAllByAltText'}
+    `('$findMethod', ({ findMethod, expectedQuery }) => {
+      const text = 'foo bar';
+      const options = { selector: 'div' };
+      const mockDiv = document.createElement('div');
+
+      let wrapper;
+      beforeEach(() => {
+        wrapper = extendedWrapper(
+          shallowMount({
+            template: `<div>foo bar</div>`,
+          }),
+        );
+      });
+
+      it(`calls Testing Library \`${expectedQuery}\` function with correct parameters`, () => {
+        jest.spyOn(testingLibrary, expectedQuery).mockImplementation(() => [mockDiv]);
+
+        wrapper[findMethod](text, options);
+
+        expect(testingLibrary[expectedQuery]).toHaveBeenLastCalledWith(
+          wrapper.element,
+          text,
+          options,
+        );
+      });
+
+      describe('when element is found', () => {
+        beforeEach(() => {
+          jest.spyOn(testingLibrary, expectedQuery).mockImplementation(() => [mockDiv]);
+          jest.spyOn(vtu, 'createWrapper');
+        });
+
+        it('returns a VTU wrapper', () => {
+          const result = wrapper[findMethod](text, options);
+
+          expect(vtu.createWrapper).toHaveBeenCalledWith(mockDiv, wrapper.options);
+          expect(result).toBeInstanceOf(VTUWrapper);
+        });
+      });
+
+      describe('when multiple elements are found', () => {
+        beforeEach(() => {
+          const mockSpan = document.createElement('span');
+          jest.spyOn(testingLibrary, expectedQuery).mockImplementation(() => [mockDiv, mockSpan]);
+          jest.spyOn(vtu, 'createWrapper');
+        });
+
+        it('returns the first element as a VTU wrapper', () => {
+          const result = wrapper[findMethod](text, options);
+
+          expect(vtu.createWrapper).toHaveBeenCalledWith(mockDiv, wrapper.options);
+          expect(result).toBeInstanceOf(VTUWrapper);
+        });
+      });
+
+      describe('when element is not found', () => {
+        beforeEach(() => {
+          jest.spyOn(testingLibrary, expectedQuery).mockImplementation(() => []);
+        });
+
+        it('returns a VTU error wrapper', () => {
+          expect(wrapper[findMethod](text, options).exists()).toBe(false);
+        });
+      });
+    });
+
+    describe.each`
+      findMethod                    | expectedQuery
+      ${'findAllByRole'}            | ${'queryAllByRole'}
+      ${'findAllByLabelText'}       | ${'queryAllByLabelText'}
+      ${'findAllByPlaceholderText'} | ${'queryAllByPlaceholderText'}
+      ${'findAllByText'}            | ${'queryAllByText'}
+      ${'findAllByDisplayValue'}    | ${'queryAllByDisplayValue'}
+      ${'findAllByAltText'}         | ${'queryAllByAltText'}
+    `('$findMethod', ({ findMethod, expectedQuery }) => {
+      const text = 'foo bar';
+      const options = { selector: 'div' };
+      const mockElements = [
+        document.createElement('li'),
+        document.createElement('li'),
+        document.createElement('li'),
+      ];
+
+      let wrapper;
+      beforeEach(() => {
+        wrapper = extendedWrapper(
+          shallowMount({
+            template: `
+              <ul>
+                <li>foo</li>
+                <li>bar</li>
+                <li>baz</li>
+              </ul>
+            `,
+          }),
+        );
+      });
+
+      it(`calls Testing Library \`${expectedQuery}\` function with correct parameters`, () => {
+        jest.spyOn(testingLibrary, expectedQuery).mockImplementation(() => mockElements);
+
+        wrapper[findMethod](text, options);
+
+        expect(testingLibrary[expectedQuery]).toHaveBeenLastCalledWith(
+          wrapper.element,
+          text,
+          options,
+        );
+      });
+
+      describe('when elements are found', () => {
+        beforeEach(() => {
+          jest.spyOn(testingLibrary, expectedQuery).mockImplementation(() => mockElements);
+        });
+
+        it('returns a VTU wrapper array', () => {
+          const result = wrapper[findMethod](text, options);
+
+          expect(result).toBeInstanceOf(VTUWrapperArray);
+          expect(
+            result.wrappers.every(
+              (resultWrapper) =>
+                resultWrapper instanceof VTUWrapper && resultWrapper.options === wrapper.options,
+            ),
+          ).toBe(true);
+          expect(result.length).toBe(3);
+        });
+      });
+
+      describe('when elements are not found', () => {
+        beforeEach(() => {
+          jest.spyOn(testingLibrary, expectedQuery).mockImplementation(() => []);
+        });
+
+        it('returns an empty VTU wrapper array', () => {
+          const result = wrapper[findMethod](text, options);
+
+          expect(result).toBeInstanceOf(VTUWrapperArray);
+          expect(result.length).toBe(0);
+        });
+      });
+    });
+  });
+
+  describe.each`
+    mountExtendedFunction   | expectedMountFunction
+    ${shallowMountExtended} | ${'shallowMount'}
+    ${mountExtended}        | ${'mount'}
+  `('$mountExtendedFunction', ({ mountExtendedFunction, expectedMountFunction }) => {
+    const FakeComponent = jest.fn();
+    const options = {
+      propsData: {
+        foo: 'bar',
+      },
+    };
+
+    beforeEach(() => {
+      const mockWrapper = { find: jest.fn() };
+      jest.spyOn(vtu, expectedMountFunction).mockImplementation(() => mockWrapper);
+    });
+
+    it(`calls \`${expectedMountFunction}\` with passed arguments`, () => {
+      mountExtendedFunction(FakeComponent, options);
+
+      expect(vtu[expectedMountFunction]).toHaveBeenCalledWith(FakeComponent, options);
+    });
+
+    it('returns extended wrapper', () => {
+      const result = mountExtendedFunction(FakeComponent, options);
+
+      expect(result).toHaveProperty('find');
+      expect(result).toHaveProperty('findByTestId');
+    });
   });
 });