Commit ee0be57e authored by Derek Knox's avatar Derek Knox Committed by Enrique Alcántara

Fix SSE edit_area sync bug

Fix mode change dependency for syncing
to work (bug) and additionally refactor
the sync method names to more clearly
communicate the sync direction (rawToBody
or bodyToRaw)
parent 7b51f088
......@@ -58,15 +58,16 @@ export default {
methods: {
syncSource() {
if (this.isWysiwygMode) {
this.parsedSource.syncBody();
this.parsedSource.syncBodyToRaw();
return;
}
this.parsedSource.syncRaw();
this.parsedSource.syncRawToBody();
},
onModeChange(mode) {
this.editorMode = mode;
// Sequentially sync then switch modes (rich-content-editor's v-model computed source content update)
this.syncSource();
this.editorMode = mode;
},
onSubmit() {
this.syncSource();
......
......@@ -24,7 +24,7 @@ const parseSourceFile = raw => {
const computedRaw = () => `${editable.header}${editable.spacing}${editable.body}`;
const syncBody = () => {
const syncRawToBody = () => {
/*
We re-parse as markdown editing could have added non-body changes (preFrontMatter, frontMatter, or spacing).
Re-parsing additionally gets us the desired body that was extracted from the mutated editable.raw
......@@ -33,7 +33,7 @@ const parseSourceFile = raw => {
Object.assign(editable, parse(editable.raw));
};
const syncRaw = () => {
const syncBodyToRaw = () => {
editable.raw = computedRaw();
};
......@@ -47,8 +47,8 @@ const parseSourceFile = raw => {
editable,
isModifiedRaw,
isModifiedBody,
syncRaw,
syncBody,
syncBodyToRaw,
syncRawToBody,
};
};
......
---
title: Fix static site editor raw (has front matter) <-> body (lacks front matter) content changes sync
merge_request: 34523
author:
type: fixed
import { shallowMount } from '@vue/test-utils';
import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
import { EDITOR_TYPES } from '~/vue_shared/components/rich_content_editor/constants';
import EditArea from '~/static_site_editor/components/edit_area.vue';
import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
......@@ -91,4 +92,47 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
});
});
});
describe('when the mode changes', () => {
const setInitialMode = mode => {
wrapper.setData({ editorMode: mode });
};
afterEach(() => {
setInitialMode(EDITOR_TYPES.wysiwyg);
});
it.each`
initialMode | targetMode
${EDITOR_TYPES.wysiwyg} | ${EDITOR_TYPES.markdown}
${EDITOR_TYPES.markdown} | ${EDITOR_TYPES.wysiwyg}
`('sets editorMode from $initialMode to $targetMode', ({ initialMode, targetMode }) => {
setInitialMode(initialMode);
findRichContentEditor().vm.$emit('modeChange', targetMode);
expect(wrapper.vm.editorMode).toBe(targetMode);
});
it.each`
syncFnName | initialMode | targetMode
${'syncBodyToRaw'} | ${EDITOR_TYPES.wysiwyg} | ${EDITOR_TYPES.markdown}
${'syncRawToBody'} | ${EDITOR_TYPES.markdown} | ${EDITOR_TYPES.wysiwyg}
`(
'calls $syncFnName source before switching from $initialMode to $targetMode',
({ syncFnName, initialMode, targetMode }) => {
setInitialMode(initialMode);
const spySyncSource = jest.spyOn(wrapper.vm, 'syncSource');
const spySyncParsedSource = jest.spyOn(wrapper.vm.parsedSource, syncFnName);
findRichContentEditor().vm.$emit('modeChange', targetMode);
expect(spySyncSource).toHaveBeenCalled();
expect(spySyncParsedSource).toHaveBeenCalled();
spySyncSource.mockReset();
spySyncParsedSource.mockReset();
},
);
});
});
......@@ -49,10 +49,10 @@ describe('parseSourceFile', () => {
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'}
${contentSimple} | ${'body'} | ${'syncBodyToRaw'} | ${'isModifiedRaw'} | ${'returns true after modification and sync'}
${contentSimple} | ${'raw'} | ${'syncRawToBody'} | ${'isModifiedBody'} | ${'returns true after modification and sync'}
${contentComplex} | ${'body'} | ${'syncBodyToRaw'} | ${'isModifiedRaw'} | ${'returns true after modification and sync'}
${contentComplex} | ${'raw'} | ${'syncRawToBody'} | ${'isModifiedBody'} | ${'returns true after modification and sync'}
`('$desc', ({ sourceContent, editableKey, syncKey, isModifiedKey }) => {
const parsedSource = parseSourceFile(sourceContent);
parsedSource.editable[editableKey] += 'Added content';
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment