Applied initial round of feedback

Fixed tests and applied suggestions

app/assets/javascripts/static_site_editor/components/edit_area.vue

@@ -50,8 +50,8 @@ export default {
       parsedSource: parseSourceFile(this.preProcess(true, this.content)),
       editorMode: EDITOR_TYPES.wysiwyg,
       isModified: false,
-      isDrawerOpen: false,
       hasMatter: false,
+      isDrawerOpen: false,
     };
   },
   imageRepository: imageRepository(),
@@ -62,13 +62,16 @@ export default {
     editableMatter() {
       return this.isDrawerOpen ? this.parsedSource.matter() : {};
     },
-    hasSettingsButton() {
+    hasSettings() {
       return this.hasMatter && this.isWysiwygMode;
     },
     isWysiwygMode() {
       return this.editorMode === EDITOR_TYPES.wysiwyg;
     },
   },
+  created() {
+    this.refreshEditHelpers();
+  },
   methods: {
     preProcess(isWrap, value) {
       const formattedContent = formatter(value);
@@ -138,7 +141,7 @@ export default {
     <unsaved-changes-confirm-dialog :modified="isModified" />
     <publish-toolbar
       class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full"
-      :is-show-edit="hasSettingsButton"
+      :has-settings="hasSettings"
       :return-url="returnUrl"
       :saveable="isModified"
       :saving-changes="savingChanges"

app/assets/javascripts/static_site_editor/components/publish_toolbar.vue

@@ -6,7 +6,7 @@ export default {
     GlButton,
   },
   props: {
-    isShowEdit: {
+    hasSettings: {
       type: Boolean,
       required: false,
       default: false,
@@ -36,9 +36,9 @@ export default {
         s__('StaticSiteEditor|Return to site')
       }}</gl-button>
       <gl-button
-        v-if="isShowEdit"
+        v-if="hasSettings"
         ref="settings"
-        :loading="savingChanges"
+        :disabled="savingChanges"
         @click="$emit('editSettings')"
       >
         <span>{{ __('Settings') }}</span>

spec/frontend/static_site_editor/components/edit_area_spec.js

@@ -48,6 +48,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    wrapper = null;
   });
 
   it('renders edit header', () => {
@@ -55,8 +56,8 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
     expect(findEditHeader().props('title')).toBe(title);
   });
 
-  it('does not render edit drawer', () => {
-    expect(findEditDrawer().exists()).toBe(false);
+  it('renders edit drawer', () => {
+    expect(findEditDrawer().exists()).toBe(true);
   });
 
   it('renders rich content editor with a format pass', () => {
@@ -78,6 +79,18 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
     expect(findUnsavedChangesConfirmDialog().props('modified')).toBe(false);
   });
 
+  it.each`
+    key
+    ${'isModified'}
+    ${'hasMatter'}
+  `('updates $key data when refreshEditHelpers is called', ({ key }) => {
+    const spy = jest.spyOn(wrapper.vm.parsedSource, key);
+
+    wrapper.vm.refreshEditHelpers();
+
+    expect(spy).toHaveBeenCalled();
+  });
+
   describe('when content changes', () => {
     beforeEach(() => {
       findRichContentEditor().vm.$emit('input', newBody);
@@ -154,17 +167,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
     });
   });
 
-  describe('when hasMatter', () => {
-    beforeEach(() => {
-      wrapper.setData({ hasMatter: true, isDrawerOpen: false });
-
-      wrapper.vm.$nextTick();
-    });
-
-    afterEach(() => {
-      wrapper.setData({ hasMatter: false });
-    });
-
+  describe('when content has front matter', () => {
     it('renders a closed edit drawer', () => {
       expect(findEditDrawer().exists()).toBe(true);
       expect(findEditDrawer().props('isOpen')).toBe(false);
@@ -174,13 +177,12 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
       findPublishToolbar().vm.$emit('editSettings');
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.isDrawerOpen).toBe(true);
         expect(findEditDrawer().props('isOpen')).toBe(true);
       });
     });
 
     it('closes the edit drawer', () => {
-      wrapper.setData({ isDrawerOpen: true });
+      buildWrapper({ isDrawerOpen: true });
 
       findEditDrawer().vm.$emit('close');
 
@@ -204,6 +206,20 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
     });
   });
 
+  describe('when content lacks front matter', () => {
+    beforeEach(() => {
+      buildWrapper({ content: body });
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('does not render edit drawer', () => {
+      expect(findEditDrawer().exists()).toBe(false);
+    });
+  });
+
   describe('when content is submitted', () => {
     it('should format the content', () => {
       findPublishToolbar().vm.$emit('submit', content);

spec/frontend/static_site_editor/components/edit_drawer_spec.js

@@ -27,6 +27,7 @@ describe('~/static_site_editor/components/edit_drawer.vue', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    wrapper = null;
   });
 
   it('renders the GlDrawer', () => {
@@ -41,7 +42,7 @@ describe('~/static_site_editor/components/edit_drawer.vue', () => {
     expect(findFrontMatterControls().props('settings')).toBe(wrapper.props('settings'));
   });
 
-  it('is closed be default', () => {
+  it('is closed by default', () => {
     expect(findGlDrawer().props('open')).toBe(false);
   });
 

spec/frontend/static_site_editor/components/publish_toolbar_spec.js

@@ -10,7 +10,7 @@ describe('Static Site Editor Toolbar', () => {
   const buildWrapper = (propsData = {}) => {
     wrapper = shallowMount(PublishToolbar, {
       propsData: {
-        isShowEdit: false,
+        hasSettings: false,
         saveable: false,
         ...propsData,
       },
@@ -58,7 +58,7 @@ describe('Static Site Editor Toolbar', () => {
 
   describe('when providing settings CTA', () => {
     it('enables Submit Changes button', () => {
-      buildWrapper({ isShowEdit: true });
+      buildWrapper({ hasSettings: true });
 
       expect(findEditSettingsButton().exists()).toBe(true);
     });