Add latest changes from gitlab-org/gitlab@master

2 files changed, 53 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 0e157f8efdf..191f91be076 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,14 +1,21 @@
 import { shallowMount } from '@vue/test-utils';
 
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import { GlFormInput, GlFormTextarea } from '@gitlab/ui';
 
 import EditMetaControls from '~/static_site_editor/components/edit_meta_controls.vue';
 
 import { mergeRequestMeta } from '../mock_data';
 
-describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
+describe('~/static_site_editor/components/edit_meta_controls.vue', () => {
+  useLocalStorageSpy();
+
   let wrapper;
+  let mockSelect;
+  let mockGlFormInputTitleInstance;
   const { title, description } = mergeRequestMeta;
+  const newTitle = 'New title';
+  const newDescription = 'New description';
 
   const buildWrapper = (propsData = {}) => {
     wrapper = shallowMount(EditMetaControls, {
@@ -20,11 +27,18 @@ describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
     });
   };
 
+  const buildMocks = () => {
+    mockSelect = jest.fn();
+    mockGlFormInputTitleInstance = { $el: { select: mockSelect } };
+    wrapper.vm.$refs.title = mockGlFormInputTitleInstance;
+  };
+
   const findGlFormInputTitle = () => wrapper.find(GlFormInput);
   const findGlFormTextAreaDescription = () => wrapper.find(GlFormTextarea);
 
   beforeEach(() => {
     buildWrapper();
+    buildMocks();
 
     return wrapper.vm.$nextTick();
   });
@@ -50,23 +64,36 @@ describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
     expect(findGlFormTextAreaDescription().attributes().value).toBe(description);
   });
 
-  it('emits updated settings when title input updates', () => {
-    const newTitle = 'New title';
+  it('calls select on the title input when mounted', () => {
+    expect(mockGlFormInputTitleInstance.$el.select).toHaveBeenCalled();
+  });
 
-    findGlFormInputTitle().vm.$emit('input', newTitle);
+  describe('when inputs change', () => {
+    const storageKey = 'sse-merge-request-meta-local-storage-editable';
 
-    const newSettings = { description, title: newTitle };
+    afterEach(() => {
+      localStorage.removeItem(storageKey);
+    });
 
-    expect(wrapper.emitted('updateSettings')[0][0]).toMatchObject(newSettings);
-  });
+    it.each`
+      findFn                           | key              | value
+      ${findGlFormInputTitle}          | ${'title'}       | ${newTitle}
+      ${findGlFormTextAreaDescription} | ${'description'} | ${newDescription}
+    `('emits updated settings when $findFn input updates', ({ key, value, findFn }) => {
+      findFn().vm.$emit('input', value);
+
+      const newSettings = { ...mergeRequestMeta, [key]: value };
 
-  it('emits updated settings when description textarea updates', () => {
-    const newDescription = 'New description';
+      expect(wrapper.emitted('updateSettings')[0][0]).toMatchObject(newSettings);
+    });
 
-    findGlFormTextAreaDescription().vm.$emit('input', newDescription);
+    it('should remember the input changes', () => {
+      findGlFormInputTitle().vm.$emit('input', newTitle);
+      findGlFormTextAreaDescription().vm.$emit('input', newDescription);
 
-    const newSettings = { description: newDescription, title };
+      const newSettings = { title: newTitle, description: newDescription };
 
-    expect(wrapper.emitted('updateSettings')[0][0]).toMatchObject(newSettings);
+      expect(localStorage.setItem).toHaveBeenCalledWith(storageKey, JSON.stringify(newSettings));
+    });
   });
 });
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 3fbd3542ed3..7a5685033f3 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
@@ -9,6 +9,8 @@ import { sourcePath, mergeRequestMeta } from '../mock_data';
 
 describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
   let wrapper;
+  let resetCachedEditable;
+  let mockEditMetaControlsInstance;
   const { title, description } = mergeRequestMeta;
 
   const buildWrapper = (propsData = {}) => {
@@ -20,11 +22,18 @@ describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
     });
   };
 
+  const buildMocks = () => {
+    resetCachedEditable = jest.fn();
+    mockEditMetaControlsInstance = { resetCachedEditable };
+    wrapper.vm.$refs.editMetaControls = mockEditMetaControlsInstance;
+  };
+
   const findGlModal = () => wrapper.find(GlModal);
   const findEditMetaControls = () => wrapper.find(EditMetaControls);
 
   beforeEach(() => {
     buildWrapper();
+    buildMocks();
 
     return wrapper.vm.$nextTick();
   });
@@ -59,6 +68,11 @@ describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
     expect(wrapper.emitted('primary')).toEqual([[mergeRequestMeta]]);
   });
 
+  it('calls resetCachedEditable on EditMetaControls when primary emits', () => {
+    findGlModal().vm.$emit('primary', mergeRequestMeta);
+    expect(mockEditMetaControlsInstance.resetCachedEditable).toHaveBeenCalled();
+  });
+
   it('emits the hide event', () => {
     findGlModal().vm.$emit('hide');
     expect(wrapper.emitted('hide')).toEqual([[]]);