1 files changed, 28 insertions, 12 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 191f91be076..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,15 +1,12 @@
 import { shallowMount } from '@vue/test-utils';
 
-import { useLocalStorageSpy } from 'helpers/local_storage_helper';
-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', () => {
-  useLocalStorageSpy();
-
   let wrapper;
   let mockSelect;
   let mockGlFormInputTitleInstance;
@@ -22,6 +19,8 @@ describe('~/static_site_editor/components/edit_meta_controls.vue', () => {
       propsData: {
         title,
         description,
+        templates: mergeRequestTemplates,
+        currentTemplate: null,
         ...propsData,
       },
     });
@@ -34,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(() => {
@@ -52,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);
   });
@@ -68,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';
 
@@ -86,14 +98,18 @@ describe('~/static_site_editor/components/edit_meta_controls.vue', () => {
 
       expect(wrapper.emitted('updateSettings')[0][0]).toMatchObject(newSettings);
     });
+  });
 
-    it('should remember the input changes', () => {
-      findGlFormInputTitle().vm.$emit('input', newTitle);
-      findGlFormTextAreaDescription().vm.$emit('input', newDescription);
-
-      const newSettings = { title: newTitle, description: newDescription };
-
-      expect(localStorage.setItem).toHaveBeenCalledWith(storageKey, JSON.stringify(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);
     });
   });
 });