Syncs the vue test utils helpers

2 files changed, 64 insertions, 2 deletions

diff --git a/spec/frontend/helpers/vue_test_utils_helper.js b/spec/frontend/helpers/vue_test_utils_helper.js
index 121e99c9783..68326e37ae7 100644
--- a/spec/frontend/helpers/vue_test_utils_helper.js
+++ b/spec/frontend/helpers/vue_test_utils_helper.js
@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 const vNodeContainsText = (vnode, text) =>
   (vnode.text && vnode.text.includes(text)) ||
   (vnode.children && vnode.children.filter(child => vNodeContainsText(child, text)).length);
@@ -19,3 +17,19 @@ export const shallowWrapperContainsSlotText = (shallowWrapper, slotName, text) =
   Boolean(
     shallowWrapper.vm.$slots[slotName].filter(vnode => vNodeContainsText(vnode, text)).length,
   );
+
+/**
+ * Returns a promise that waits for a mutation to be fired before resolving
+ * NOTE: There's no reject action here so it will hang if it waits for a mutation that won't happen.
+ * @param {Object} store - The Vue store that contains the mutations
+ * @param {String} expectedMutationType - The Mutation to wait for
+ */
+export const waitForMutation = (store, expectedMutationType) =>
+  new Promise(resolve => {
+    const unsubscribe = store.subscribe(mutation => {
+      if (mutation.type === expectedMutationType) {
+        unsubscribe();
+        resolve();
+      }
+    });
+  });
diff --git a/spec/frontend/helpers/vue_test_utils_helper_spec.js b/spec/frontend/helpers/vue_test_utils_helper_spec.js
new file mode 100644
index 00000000000..41714066da5
--- /dev/null
+++ b/spec/frontend/helpers/vue_test_utils_helper_spec.js
@@ -0,0 +1,48 @@
+import { shallowMount } from '@vue/test-utils';
+import { shallowWrapperContainsSlotText } from './vue_test_utils_helper';
+
+describe('Vue test utils helpers', () => {
+  describe('shallowWrapperContainsSlotText', () => {
+    const mockText = 'text';
+    const mockSlot = `<div>${mockText}</div>`;
+    let mockComponent;
+
+    beforeEach(() => {
+      mockComponent = shallowMount(
+        {
+          render(h) {
+            h(`<div>mockedComponent</div>`);
+          },
+        },
+        {
+          slots: {
+            default: mockText,
+            namedSlot: mockSlot,
+          },
+        },
+      );
+    });
+
+    it('finds text within shallowWrapper default slot', () => {
+      expect(shallowWrapperContainsSlotText(mockComponent, 'default', mockText)).toBe(true);
+    });
+
+    it('finds text within shallowWrapper named slot', () => {
+      expect(shallowWrapperContainsSlotText(mockComponent, 'namedSlot', mockText)).toBe(true);
+    });
+
+    it('returns false when text is not present', () => {
+      const searchText = 'absent';
+
+      expect(shallowWrapperContainsSlotText(mockComponent, 'default', searchText)).toBe(false);
+      expect(shallowWrapperContainsSlotText(mockComponent, 'namedSlot', searchText)).toBe(false);
+    });
+
+    it('searches with case-sensitivity', () => {
+      const searchText = mockText.toUpperCase();
+
+      expect(shallowWrapperContainsSlotText(mockComponent, 'default', searchText)).toBe(false);
+      expect(shallowWrapperContainsSlotText(mockComponent, 'namedSlot', searchText)).toBe(false);
+    });
+  });
+});