Add latest changes from gitlab-org/gitlab@master

3 files changed, 81 insertions, 5 deletions

diff --git a/spec/frontend/static_site_editor/components/edit_meta_controls_spec.js b/spec/frontend/static_site_editor/components/edit_meta_controls_spec.js
index 3f99768aa08..b887570e947 100644
--- a/spec/frontend/static_site_editor/components/edit_meta_controls_spec.js
+++ b/spec/frontend/static_site_editor/components/edit_meta_controls_spec.js
@@ -1,10 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
 
-import { GlFormInput, GlFormTextarea } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlFormInput, GlFormTextarea } from '@gitlab/ui';
 
 import EditMetaControls from '~/static_site_editor/components/edit_meta_controls.vue';
 
-import { mergeRequestMeta } from '../mock_data';
+import { mergeRequestMeta, mergeRequestTemplates } from '../mock_data';
 
 describe('~/static_site_editor/components/edit_meta_controls.vue', () => {
   let wrapper;
@@ -19,6 +19,8 @@ describe('~/static_site_editor/components/edit_meta_controls.vue', () => {
       propsData: {
         title,
         description,
+        templates: mergeRequestTemplates,
+        currentTemplate: null,
         ...propsData,
       },
     });
@@ -31,6 +33,10 @@ describe('~/static_site_editor/components/edit_meta_controls.vue', () => {
   };
 
   const findGlFormInputTitle = () => wrapper.find(GlFormInput);
+  const findGlDropdownDescriptionTemplate = () => wrapper.find(GlDropdown);
+  const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
+  const findDropdownItemByIndex = index => findAllDropdownItems().at(index);
+
   const findGlFormTextAreaDescription = () => wrapper.find(GlFormTextarea);
 
   beforeEach(() => {
@@ -49,6 +55,10 @@ describe('~/static_site_editor/components/edit_meta_controls.vue', () => {
     expect(findGlFormInputTitle().exists()).toBe(true);
   });
 
+  it('renders the description template dropdown', () => {
+    expect(findGlDropdownDescriptionTemplate().exists()).toBe(true);
+  });
+
   it('renders the description input', () => {
     expect(findGlFormTextAreaDescription().exists()).toBe(true);
   });
@@ -65,6 +75,11 @@ describe('~/static_site_editor/components/edit_meta_controls.vue', () => {
     expect(mockGlFormInputTitleInstance.$el.select).toHaveBeenCalled();
   });
 
+  it('renders a GlDropdownItem per template plus one (for the starting none option)', () => {
+    expect(findDropdownItemByIndex(0).text()).toBe('None');
+    expect(findAllDropdownItems().length).toBe(mergeRequestTemplates.length + 1);
+  });
+
   describe('when inputs change', () => {
     const storageKey = 'sse-merge-request-meta-local-storage-editable';
 
@@ -84,4 +99,17 @@ describe('~/static_site_editor/components/edit_meta_controls.vue', () => {
       expect(wrapper.emitted('updateSettings')[0][0]).toMatchObject(newSettings);
     });
   });
+
+  describe('when templates change', () => {
+    it.each`
+      index | value
+      ${0}  | ${null}
+      ${1}  | ${mergeRequestTemplates[0]}
+      ${2}  | ${mergeRequestTemplates[1]}
+    `('emits a change template event when $index is clicked', ({ index, value }) => {
+      findDropdownItemByIndex(index).vm.$emit('click');
+
+      expect(wrapper.emitted('changeTemplate')[0][0]).toBe(value);
+    });
+  });
 });
diff --git a/spec/frontend/static_site_editor/components/edit_meta_modal_spec.js b/spec/frontend/static_site_editor/components/edit_meta_modal_spec.js
index da4c225d25b..70ffb480e4c 100644
--- a/spec/frontend/static_site_editor/components/edit_meta_modal_spec.js
+++ b/spec/frontend/static_site_editor/components/edit_meta_modal_spec.js
@@ -5,7 +5,7 @@ import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import EditMetaModal from '~/static_site_editor/components/edit_meta_modal.vue';
 import EditMetaControls from '~/static_site_editor/components/edit_meta_controls.vue';
 import { MR_META_LOCAL_STORAGE_KEY } from '~/static_site_editor/constants';
-import { sourcePath, mergeRequestMeta } from '../mock_data';
+import { sourcePath, mergeRequestMeta, mergeRequestTemplates } from '../mock_data';
 
 describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
   useLocalStorageSpy();
@@ -15,12 +15,13 @@ describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
   let mockEditMetaControlsInstance;
   const { title, description } = mergeRequestMeta;
 
-  const buildWrapper = (propsData = {}) => {
+  const buildWrapper = (propsData = {}, data = {}) => {
     wrapper = shallowMount(EditMetaModal, {
       propsData: {
         sourcePath,
         ...propsData,
       },
+      data: () => data,
     });
   };
 
@@ -51,7 +52,12 @@ describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
   });
 
   it('initializes initial merge request meta with local storage data', async () => {
-    const localStorageMeta = { title: 'stored title', description: 'stored description' };
+    const localStorageMeta = {
+      title: 'stored title',
+      description: 'stored description',
+      templates: null,
+      currentTemplate: null,
+    };
 
     findLocalStorageSync().vm.$emit('input', localStorageMeta);
 
@@ -80,6 +86,14 @@ describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
     expect(findEditMetaControls().props('description')).toBe(description);
   });
 
+  it('forwards the templates prop', () => {
+    expect(findEditMetaControls().props('templates')).toBe(null);
+  });
+
+  it('forwards the currentTemplate prop', () => {
+    expect(findEditMetaControls().props('currentTemplate')).toBe(null);
+  });
+
   describe('when save button is clicked', () => {
     beforeEach(() => {
       findGlModal().vm.$emit('primary', mergeRequestMeta);
@@ -94,6 +108,36 @@ describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
     });
   });
 
+  describe('when templates exist', () => {
+    const template1 = mergeRequestTemplates[0];
+
+    beforeEach(() => {
+      buildWrapper({}, { templates: mergeRequestTemplates, currentTemplate: null });
+    });
+
+    it('sets the currentTemplate on the changeTemplate event', async () => {
+      findEditMetaControls().vm.$emit('changeTemplate', template1);
+
+      await wrapper.vm.$nextTick();
+
+      expect(findEditMetaControls().props().currentTemplate).toBe(template1);
+
+      findEditMetaControls().vm.$emit('changeTemplate', null);
+
+      await wrapper.vm.$nextTick();
+
+      expect(findEditMetaControls().props().currentTemplate).toBe(null);
+    });
+
+    it('updates the description on the changeTemplate event', async () => {
+      findEditMetaControls().vm.$emit('changeTemplate', template1);
+
+      await wrapper.vm.$nextTick();
+
+      expect(findEditMetaControls().props().description).toEqual(template1.content);
+    });
+  });
+
   it('emits the hide event', () => {
     findGlModal().vm.$emit('hide');
     expect(wrapper.emitted('hide')).toEqual([[]]);
diff --git a/spec/frontend/static_site_editor/mock_data.js b/spec/frontend/static_site_editor/mock_data.js
index 956aadb23f3..133344bf08a 100644
--- a/spec/frontend/static_site_editor/mock_data.js
+++ b/spec/frontend/static_site_editor/mock_data.js
@@ -48,6 +48,10 @@ export const savedContentMeta = {
     url: 'foobar/-/merge_requests/123',
   },
 };
+export const mergeRequestTemplates = [
+  { key: 'Template1', name: 'Template 1', content: 'This is template 1!' },
+  { key: 'Template2', name: 'Template 2', content: 'This is template 2!' },
+];
 
 export const submitChangesError = 'Could not save changes';
 export const commitBranchResponse = {