Merge branch 'jivl-new-modal-project-labels-milestones' into 'master'

Resolve: Modal and banner designs for project label and project milestone promotion

Closes #41895

See merge request gitlab-org/gitlab-ce!17197

3 files changed, 173 insertions, 4 deletions

diff --git a/spec/controllers/projects/milestones_controller_spec.rb b/spec/controllers/projects/milestones_controller_spec.rb
index 00cf464ec5b..306094f7ffb 100644
--- a/spec/controllers/projects/milestones_controller_spec.rb
+++ b/spec/controllers/projects/milestones_controller_spec.rb
@@ -98,10 +98,8 @@ describe Projects::MilestonesController do
       it 'shows group milestone' do
         post :promote, namespace_id: project.namespace.id, project_id: project.id, id: milestone.iid
 
-        group_milestone = assigns(:milestone)
-
-        expect(response).to redirect_to(group_milestone_path(project.group, group_milestone.iid))
-        expect(flash[:notice]).to eq('Milestone has been promoted to group milestone.')
+        expect(flash[:notice]).to eq("#{milestone.title} promoted to group milestone")
+        expect(response).to redirect_to(project_milestones_path(project))
       end
     end
 
diff --git a/spec/javascripts/pages/labels/components/promote_label_modal_spec.js b/spec/javascripts/pages/labels/components/promote_label_modal_spec.js
new file mode 100644
index 00000000000..ba2e07f02f7
--- /dev/null
+++ b/spec/javascripts/pages/labels/components/promote_label_modal_spec.js
@@ -0,0 +1,88 @@
+import Vue from 'vue';
+import promoteLabelModal from '~/pages/projects/labels/components/promote_label_modal.vue';
+import eventHub from '~/pages/projects/labels/event_hub';
+import axios from '~/lib/utils/axios_utils';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('Promote label modal', () => {
+  let vm;
+  const Component = Vue.extend(promoteLabelModal);
+  const labelMockData = {
+    labelTitle: 'Documentation',
+    labelColor: '#5cb85c',
+    labelTextColor: '#ffffff',
+    url: `${gl.TEST_HOST}/dummy/promote/labels`,
+  };
+
+  describe('Modal title and description', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, labelMockData);
+    });
+
+    afterEach(() => {
+      vm.$destroy();
+    });
+
+    it('contains the proper description', () => {
+      expect(vm.text).toContain('Promoting this label will make it available for all projects inside the group');
+    });
+
+    it('contains a label span with the color', () => {
+      const labelFromTitle = vm.$el.querySelector('.modal-header .label.color-label');
+
+      expect(labelFromTitle.style.backgroundColor).not.toBe(null);
+      expect(labelFromTitle.textContent).toContain(vm.labelTitle);
+    });
+  });
+
+  describe('When requesting a label promotion', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        ...labelMockData,
+      });
+      spyOn(eventHub, '$emit');
+    });
+
+    afterEach(() => {
+      vm.$destroy();
+    });
+
+    it('redirects when a label is promoted', (done) => {
+      const responseURL = `${gl.TEST_HOST}/dummy/endpoint`;
+      spyOn(axios, 'post').and.callFake((url) => {
+        expect(url).toBe(labelMockData.url);
+        expect(eventHub.$emit).toHaveBeenCalledWith('promoteLabelModal.requestStarted', labelMockData.url);
+        return Promise.resolve({
+          request: {
+            responseURL,
+          },
+        });
+      });
+
+      vm.onSubmit()
+        .then(() => {
+          expect(eventHub.$emit).toHaveBeenCalledWith('promoteLabelModal.requestFinished', { labelUrl: labelMockData.url, successful: true });
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('displays an error if promoting a label failed', (done) => {
+      const dummyError = new Error('promoting label failed');
+      dummyError.response = { status: 500 };
+      spyOn(axios, 'post').and.callFake((url) => {
+        expect(url).toBe(labelMockData.url);
+        expect(eventHub.$emit).toHaveBeenCalledWith('promoteLabelModal.requestStarted', labelMockData.url);
+        return Promise.reject(dummyError);
+      });
+
+      vm.onSubmit()
+        .catch((error) => {
+          expect(error).toBe(dummyError);
+          expect(eventHub.$emit).toHaveBeenCalledWith('promoteLabelModal.requestFinished', { labelUrl: labelMockData.url, successful: false });
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});
diff --git a/spec/javascripts/pages/milestones/shared/components/promote_milestone_modal_spec.js b/spec/javascripts/pages/milestones/shared/components/promote_milestone_modal_spec.js
new file mode 100644
index 00000000000..bf044fe8fb5
--- /dev/null
+++ b/spec/javascripts/pages/milestones/shared/components/promote_milestone_modal_spec.js
@@ -0,0 +1,83 @@
+import Vue from 'vue';
+import promoteMilestoneModal from '~/pages/milestones/shared/components/promote_milestone_modal.vue';
+import eventHub from '~/pages/milestones/shared/event_hub';
+import axios from '~/lib/utils/axios_utils';
+import mountComponent from '../../../../helpers/vue_mount_component_helper';
+
+describe('Promote milestone modal', () => {
+  let vm;
+  const Component = Vue.extend(promoteMilestoneModal);
+  const milestoneMockData = {
+    milestoneTitle: 'v1.0',
+    url: `${gl.TEST_HOST}/dummy/promote/milestones`,
+  };
+
+  describe('Modal title and description', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, milestoneMockData);
+    });
+
+    afterEach(() => {
+      vm.$destroy();
+    });
+
+    it('contains the proper description', () => {
+      expect(vm.text).toContain('Promoting this milestone will make it available for all projects inside the group.');
+    });
+
+    it('contains the correct title', () => {
+      expect(vm.title).toEqual('Promote v1.0 to group milestone?');
+    });
+  });
+
+  describe('When requesting a milestone promotion', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        ...milestoneMockData,
+      });
+      spyOn(eventHub, '$emit');
+    });
+
+    afterEach(() => {
+      vm.$destroy();
+    });
+
+    it('redirects when a milestone is promoted', (done) => {
+      const responseURL = `${gl.TEST_HOST}/dummy/endpoint`;
+      spyOn(axios, 'post').and.callFake((url) => {
+        expect(url).toBe(milestoneMockData.url);
+        expect(eventHub.$emit).toHaveBeenCalledWith('promoteMilestoneModal.requestStarted', milestoneMockData.url);
+        return Promise.resolve({
+          request: {
+            responseURL,
+          },
+        });
+      });
+
+      vm.onSubmit()
+        .then(() => {
+          expect(eventHub.$emit).toHaveBeenCalledWith('promoteMilestoneModal.requestFinished', { milestoneUrl: milestoneMockData.url, successful: true });
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('displays an error if promoting a milestone failed', (done) => {
+      const dummyError = new Error('promoting milestone failed');
+      dummyError.response = { status: 500 };
+      spyOn(axios, 'post').and.callFake((url) => {
+        expect(url).toBe(milestoneMockData.url);
+        expect(eventHub.$emit).toHaveBeenCalledWith('promoteMilestoneModal.requestStarted', milestoneMockData.url);
+        return Promise.reject(dummyError);
+      });
+
+      vm.onSubmit()
+        .catch((error) => {
+          expect(error).toBe(dummyError);
+          expect(eventHub.$emit).toHaveBeenCalledWith('promoteMilestoneModal.requestFinished', { milestoneUrl: milestoneMockData.url, successful: false });
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});