Add latest changes from gitlab-org/gitlab@master

4 files changed, 96 insertions, 10 deletions

diff --git a/spec/frontend/static_site_editor/components/edit_area_spec.js b/spec/frontend/static_site_editor/components/edit_area_spec.js
index 5817bad2ac5..d7c798e6620 100644
--- a/spec/frontend/static_site_editor/components/edit_area_spec.js
+++ b/spec/frontend/static_site_editor/components/edit_area_spec.js
@@ -7,12 +7,17 @@ import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue'
 import EditHeader from '~/static_site_editor/components/edit_header.vue';
 import UnsavedChangesConfirmDialog from '~/static_site_editor/components/unsaved_changes_confirm_dialog.vue';
 
-import { sourceContentTitle as title, sourceContent as content, returnUrl } from '../mock_data';
+import {
+  sourceContentTitle as title,
+  sourceContent as content,
+  sourceContentBody as body,
+  returnUrl,
+} from '../mock_data';
 
 describe('~/static_site_editor/components/edit_area.vue', () => {
   let wrapper;
   const savingChanges = true;
-  const newContent = `new ${content}`;
+  const newBody = `new ${body}`;
 
   const buildWrapper = (propsData = {}) => {
     wrapper = shallowMount(EditArea, {
@@ -46,7 +51,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
 
   it('renders rich content editor', () => {
     expect(findRichContentEditor().exists()).toBe(true);
-    expect(findRichContentEditor().props('value')).toBe(content);
+    expect(findRichContentEditor().props('value')).toBe(body);
   });
 
   it('renders publish toolbar', () => {
@@ -65,7 +70,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
 
   describe('when content changes', () => {
     beforeEach(() => {
-      findRichContentEditor().vm.$emit('input', newContent);
+      findRichContentEditor().vm.$emit('input', newBody);
 
       return wrapper.vm.$nextTick();
     });
@@ -79,7 +84,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
     });
 
     it('sets publish toolbar as not saveable when content changes are rollback', () => {
-      findRichContentEditor().vm.$emit('input', content);
+      findRichContentEditor().vm.$emit('input', body);
 
       return wrapper.vm.$nextTick().then(() => {
         expect(findPublishToolbar().props('saveable')).toBe(false);
diff --git a/spec/frontend/static_site_editor/mock_data.js b/spec/frontend/static_site_editor/mock_data.js
index 371695e913e..422048a5f69 100644
--- a/spec/frontend/static_site_editor/mock_data.js
+++ b/spec/frontend/static_site_editor/mock_data.js
@@ -1,16 +1,17 @@
-export const sourceContent = `
----
+export const sourceContentHeader = `---
 layout: handbook-page-toc
 title: Handbook
 twitter_image: '/images/tweets/handbook-gitlab.png'
----
-
-## On this page
+---`;
+export const sourceContentSpacing = `
+`;
+export const sourceContentBody = `## On this page
 {:.no_toc .hidden-md .hidden-lg}
 
 - TOC
 {:toc .hidden-md .hidden-lg}
 `;
+export const sourceContent = `${sourceContentHeader}${sourceContentSpacing}${sourceContentBody}`;
 export const sourceContentTitle = 'Handbook';
 
 export const username = 'gitlabuser';
diff --git a/spec/frontend/static_site_editor/pages/home_spec.js b/spec/frontend/static_site_editor/pages/home_spec.js
index 8c9c54f593e..d3ee70785d1 100644
--- a/spec/frontend/static_site_editor/pages/home_spec.js
+++ b/spec/frontend/static_site_editor/pages/home_spec.js
@@ -7,6 +7,8 @@ import InvalidContentMessage from '~/static_site_editor/components/invalid_conte
 import SubmitChangesError from '~/static_site_editor/components/submit_changes_error.vue';
 import submitContentChangesMutation from '~/static_site_editor/graphql/mutations/submit_content_changes.mutation.graphql';
 import { SUCCESS_ROUTE } from '~/static_site_editor/router/constants';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import { TRACKING_ACTION_INITIALIZE_EDITOR } from '~/static_site_editor/constants';
 
 import {
   projectId as project,
@@ -17,6 +19,7 @@ import {
   username,
   savedContentMeta,
   submitChangesError,
+  trackingCategory,
 } from '../mock_data';
 
 const localVue = createLocalVue();
@@ -29,6 +32,7 @@ describe('static_site_editor/pages/home', () => {
   let $apollo;
   let $router;
   let mutateMock;
+  let trackingSpy;
 
   const buildApollo = (queries = {}) => {
     mutateMock = jest.fn();
@@ -76,10 +80,14 @@ describe('static_site_editor/pages/home', () => {
   beforeEach(() => {
     buildApollo();
     buildRouter();
+
+    document.body.dataset.page = trackingCategory;
+    trackingSpy = mockTracking(document.body.dataset.page, undefined, jest.spyOn);
   });
 
   afterEach(() => {
     wrapper.destroy();
+    unmockTracking();
     wrapper = null;
     $apollo = null;
   });
@@ -208,4 +216,12 @@ describe('static_site_editor/pages/home', () => {
       expect($router.push).toHaveBeenCalledWith(SUCCESS_ROUTE);
     });
   });
+
+  it('tracks when editor is initialized on the mounted lifecycle hook', () => {
+    buildWrapper();
+    expect(trackingSpy).toHaveBeenCalledWith(
+      document.body.dataset.page,
+      TRACKING_ACTION_INITIALIZE_EDITOR,
+    );
+  });
 });
diff --git a/spec/frontend/static_site_editor/services/parse_source_file_spec.js b/spec/frontend/static_site_editor/services/parse_source_file_spec.js
new file mode 100644
index 00000000000..fe99c4f5334
--- /dev/null
+++ b/spec/frontend/static_site_editor/services/parse_source_file_spec.js
@@ -0,0 +1,64 @@
+import {
+  sourceContent as content,
+  sourceContentHeader as header,
+  sourceContentSpacing as spacing,
+  sourceContentBody as body,
+} from '../mock_data';
+
+import parseSourceFile from '~/static_site_editor/services/parse_source_file';
+
+describe('parseSourceFile', () => {
+  const contentSimple = content;
+  const contentComplex = [content, content, content].join('');
+
+  describe('the editable shape and its expected values', () => {
+    it.each`
+      sourceContent     | sourceHeader | sourceSpacing | sourceBody                           | desc
+      ${contentSimple}  | ${header}    | ${spacing}    | ${body}                              | ${'extracts header'}
+      ${contentComplex} | ${header}    | ${spacing}    | ${[body, content, content].join('')} | ${'extracts body'}
+    `('$desc', ({ sourceContent, sourceHeader, sourceSpacing, sourceBody }) => {
+      const { editable } = parseSourceFile(sourceContent);
+
+      expect(editable).toMatchObject({
+        raw: sourceContent,
+        header: sourceHeader,
+        spacing: sourceSpacing,
+        body: sourceBody,
+      });
+    });
+
+    it('returns the same front matter regardless of front matter duplication', () => {
+      const parsedSourceSimple = parseSourceFile(contentSimple);
+      const parsedSourceComplex = parseSourceFile(contentComplex);
+
+      expect(parsedSourceSimple.editable.header).toBe(parsedSourceComplex.editable.header);
+    });
+  });
+
+  describe('editable body to raw content default and changes', () => {
+    it.each`
+      sourceContent     | desc
+      ${contentSimple}  | ${'returns false by default for both raw and body'}
+      ${contentComplex} | ${'returns false by default for both raw and body'}
+    `('$desc', ({ sourceContent }) => {
+      const parsedSource = parseSourceFile(sourceContent);
+
+      expect(parsedSource.isModifiedRaw()).toBe(false);
+      expect(parsedSource.isModifiedBody()).toBe(false);
+    });
+
+    it.each`
+      sourceContent     | editableKey | syncKey       | isModifiedKey       | desc
+      ${contentSimple}  | ${'body'}   | ${'syncRaw'}  | ${'isModifiedRaw'}  | ${'returns true after modification and sync'}
+      ${contentSimple}  | ${'raw'}    | ${'syncBody'} | ${'isModifiedBody'} | ${'returns true after modification and sync'}
+      ${contentComplex} | ${'body'}   | ${'syncRaw'}  | ${'isModifiedRaw'}  | ${'returns true after modification and sync'}
+      ${contentComplex} | ${'raw'}    | ${'syncBody'} | ${'isModifiedBody'} | ${'returns true after modification and sync'}
+    `('$desc', ({ sourceContent, editableKey, syncKey, isModifiedKey }) => {
+      const parsedSource = parseSourceFile(sourceContent);
+      parsedSource.editable[editableKey] += 'Added content';
+      parsedSource[syncKey]();
+
+      expect(parsedSource[isModifiedKey]()).toBe(true);
+    });
+  });
+});