Add `createComponentWithMixin` to create anonymous components with mixin

1 files changed, 19 insertions, 3 deletions

diff --git a/spec/javascripts/helpers/vue_mount_component_helper.js b/spec/javascripts/helpers/vue_mount_component_helper.js
index effacbcff4e..a34a1add4e0 100644
--- a/spec/javascripts/helpers/vue_mount_component_helper.js
+++ b/spec/javascripts/helpers/vue_mount_component_helper.js
@@ -1,14 +1,30 @@
+import Vue from 'vue';
+
+const mountComponent = (Component, props = {}, el = null) => new Component({
+  propsData: props,
+}).$mount(el);
+
 export const createComponentWithStore = (Component, store, propsData = {}) => new Component({
   store,
   propsData,
 });
 
+export const createComponentWithMixin = (mixins = [], state = {}, props = {}, template = '<div></div>') => {
+  const Component = Vue.extend({
+    template,
+    mixins,
+    data() {
+      return props;
+    },
+  });
+
+  return mountComponent(Component, props);
+};
+
 export const mountComponentWithStore = (Component, { el, props, store }) =>
   new Component({
     store,
     propsData: props || { },
   }).$mount(el);
 
-export default (Component, props = {}, el = null) => new Component({
-  propsData: props,
-}).$mount(el);
+export default mountComponent;