1 files changed, 205 insertions, 3 deletions
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');
+    });
   });
 });