Added specs for creating a value stream

Update base spec to mock the toast
message displayed when a value stream
is created

ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_select.vue

 <script>
-import { GlButton, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlForm, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
 
 export default {
   components: {
     GlButton,
+    GlForm,
     GlFormInput,
     GlModal,
   },
@@ -24,7 +25,7 @@ export default {
 };
 </script>
 <template>
-  <div>
+  <gl-form>
     <gl-button
       v-gl-modal-directive="'create-value-stream-modal'"
       data-testid="create-value-stream"
@@ -47,5 +48,5 @@ export default {
     >
       <gl-form-input id="name" v-model="name" :placeholder="__('Example: My value stream')" />
     </gl-modal>
-  </div>
+  </gl-form>
 </template>

ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js

@@ -66,6 +66,12 @@ const initialCycleAnalyticsState = {
   group: selectedGroup,
 };
 
+const mocks = {
+  $toast: {
+    show: jest.fn(),
+  },
+};
+
 function createComponent({
   opts = {
     stubs: defaultStubs,
@@ -88,6 +94,7 @@ function createComponent({
       hideGroupDropDown,
       ...props,
     },
+    mocks,
     ...opts,
   });
 
@@ -272,6 +279,14 @@ describe('Cycle Analytics component', () => {
         it('displays the create multiple value streams button', () => {
           displaysCreateValueStream(true);
         });
+
+        it('displays a toast message when value stream is created', () => {
+          wrapper.find(ValueStreamSelect).vm.$emit('create', { name: 'cool new stream' });
+
+          expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(
+            "'cool new stream' Value Stream created",
+          );
+        });
       });
     });
 

ee/spec/frontend/analytics/cycle_analytics/components/value_stream_select_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
+import ValueStreamSelect from 'ee/analytics/cycle_analytics/components/value_stream_select.vue';
+
+describe('ValueStreamSelect', () => {
+  let wrapper = null;
+
+  function createComponent() {
+    return shallowMount(ValueStreamSelect, {});
+  }
+
+  const findModal = () => wrapper.find(GlModal);
+
+  const submitButtonDisabledState = () => findModal().props('actionPrimary').attributes[1].disabled;
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Create value stream form', () => {
+    it('submit button is disabled', () => {
+      expect(submitButtonDisabledState()).toBe(true);
+    });
+
+    describe('with valid fields', () => {
+      beforeEach(() => {
+        wrapper = createComponent();
+        wrapper.setData({ name: 'Cool stream' });
+      });
+
+      it('submit button is enabled', () => {
+        expect(submitButtonDisabledState()).toBe(false);
+      });
+
+      it('emits the "create" event when submitted', () => {
+        findModal().vm.$emit('primary');
+        expect(wrapper.emitted().create[0]).toEqual([{ name: 'Cool stream' }]);
+      });
+    });
+  });
+});