Merge branch 'sse-render-utils-DRY-refactor' into 'master'

Add render_utils.js for DRY-sake

See merge request gitlab-org/gitlab!37129

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token.js

@@ -34,7 +34,7 @@ export const buildUneditableCloseTokens = (token, tagType = TAG_TYPES.block) =>
 
 export const buildTextToken = content => buildToken('text', null, { content });
 
-export const buildUneditableTokens = token => {
+export const buildUneditableBlockTokens = token => {
   return [...buildUneditableOpenTokens(token), buildUneditableCloseToken()];
 };
 

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_embedded_ruby_text.js

-import { buildUneditableTokens } from './build_uneditable_token';
+import { renderUneditableLeaf as render } from './render_utils';
 
 const embeddedRubyRegex = /(^<%.+%>$)/;
 
@@ -6,8 +6,4 @@ const canRender = ({ literal }) => {
   return embeddedRubyRegex.test(literal);
 };
 
-const render = (_, { origin }) => {
-  return buildUneditableTokens(origin());
-};
-
 export default { canRender, render };

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_identifier_paragraph.js

-import { buildUneditableOpenTokens, buildUneditableCloseToken } from './build_uneditable_token';
+import { renderUneditableBranch as render } from './render_utils';
 
 const identifierRegex = /(^\[.+\]: .+)/;
 
@@ -10,7 +10,4 @@ const canRender = (node, context) => {
   return isIdentifier(context.getChildrenText(node));
 };
 
-const render = (_, { entering, origin }) =>
-  entering ? buildUneditableOpenTokens(origin()) : buildUneditableCloseToken();
-
 export default { canRender, render };

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_kramdown_list.js

-import { buildUneditableOpenTokens, buildUneditableCloseToken } from './build_uneditable_token';
+import { renderUneditableBranch as render } from './render_utils';
 
 const isKramdownTOC = ({ type, literal }) => type === 'text' && literal === 'TOC';
 
@@ -21,7 +21,4 @@ const canRender = node => {
   return false;
 };
 
-const render = (_, { entering, origin }) =>
-  entering ? buildUneditableOpenTokens(origin()) : buildUneditableCloseToken();
-
 export default { canRender, render };

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_kramdown_text.js

-import { buildUneditableTokens } from './build_uneditable_token';
+import { renderUneditableLeaf as render } from './render_utils';
 
 const kramdownRegex = /(^{:.+}$)/;
 
@@ -6,8 +6,4 @@ const canRender = ({ literal }) => {
   return kramdownRegex.test(literal);
 };
 
-const render = (_, { origin }) => {
-  return buildUneditableTokens(origin());
-};
-
 export default { canRender, render };

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_utils.js

+import {
+  buildUneditableBlockTokens,
+  buildUneditableOpenTokens,
+  buildUneditableCloseToken,
+} from './build_uneditable_token';
+
+export const renderUneditableLeaf = (_, { origin }) => buildUneditableBlockTokens(origin());
+
+export const renderUneditableBranch = (_, { entering, origin }) =>
+  entering ? buildUneditableOpenTokens(origin()) : buildUneditableCloseToken();

spec/frontend/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token_spec.js

@@ -3,7 +3,7 @@ import {
   buildUneditableOpenTokens,
   buildUneditableCloseToken,
   buildUneditableCloseTokens,
-  buildUneditableTokens,
+  buildUneditableBlockTokens,
   buildUneditableInlineTokens,
   buildUneditableHtmlAsTextTokens,
 } from '~/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token';
@@ -51,9 +51,9 @@ describe('Build Uneditable Token renderer helper', () => {
     });
   });
 
-  describe('buildUneditableTokens', () => {
+  describe('buildUneditableBlockTokens', () => {
     it('returns a 3-item array of tokens with the originToken wrapped in the middle of block tokens', () => {
-      const result = buildUneditableTokens(originToken);
+      const result = buildUneditableBlockTokens(originToken);
 
       expect(result).toHaveLength(3);
       expect(result).toStrictEqual(uneditableTokens);

spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_embedded_ruby_spec.js

 import renderer from '~/vue_shared/components/rich_content_editor/services/renderers/render_embedded_ruby_text';
-import { buildUneditableTokens } from '~/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token';
+import { renderUneditableLeaf } from '~/vue_shared/components/rich_content_editor/services/renderers/render_utils';
 
 import { buildMockTextNode, normalTextNode } from './mock_data';
 
@@ -17,14 +17,8 @@ describe('Render Embedded Ruby Text renderer', () => {
   });
 
   describe('render', () => {
-    const origin = jest.fn();
-
-    it('should return uneditable tokens', () => {
-      const context = { origin };
-
-      expect(renderer.render(embeddedRubyTextNode, context)).toStrictEqual(
-        buildUneditableTokens(origin()),
-      );
+    it('should delegate rendering to the renderUneditableLeaf util', () => {
+      expect(renderer.render).toBe(renderUneditableLeaf);
     });
   });
 });

spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_identifier_paragraph_spec.js

 import renderer from '~/vue_shared/components/rich_content_editor/services/renderers/render_identifier_paragraph';
-import {
-  buildUneditableOpenTokens,
-  buildUneditableCloseToken,
-} from '~/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token';
+import { renderUneditableBranch } from '~/vue_shared/components/rich_content_editor/services/renderers/render_utils';
 
 import { buildMockTextNode } from './mock_data';
 
@@ -40,26 +37,8 @@ describe('Render Identifier Paragraph renderer', () => {
   });
 
   describe('render', () => {
-    let origin;
-
-    beforeEach(() => {
-      origin = jest.fn();
-    });
-
-    it('should return uneditable open tokens when entering', () => {
-      const context = { entering: true, origin };
-
-      expect(renderer.render(identifierParagraphNode, context)).toStrictEqual(
-        buildUneditableOpenTokens(origin()),
-      );
-    });
-
-    it('should return an uneditable close tokens when exiting', () => {
-      const context = { entering: false, origin };
-
-      expect(renderer.render(identifierParagraphNode, context)).toStrictEqual(
-        buildUneditableCloseToken(origin()),
-      );
+    it('should delegate rendering to the renderUneditableBranch util', () => {
+      expect(renderer.render).toBe(renderUneditableBranch);
     });
   });
 });

spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_kramdown_list_spec.js

 import renderer from '~/vue_shared/components/rich_content_editor/services/renderers/render_kramdown_list';
-import {
-  buildUneditableOpenTokens,
-  buildUneditableCloseToken,
-} from '~/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token';
+import { renderUneditableBranch } from '~/vue_shared/components/rich_content_editor/services/renderers/render_utils';
 
 import { buildMockTextNode } from './mock_data';
 
@@ -34,22 +31,8 @@ describe('Render Kramdown List renderer', () => {
   });
 
   describe('render', () => {
-    const origin = jest.fn();
-
-    it('should return uneditable open tokens when entering', () => {
-      const context = { entering: true, origin };
-
-      expect(renderer.render(kramdownListNode, context)).toStrictEqual(
-        buildUneditableOpenTokens(origin()),
-      );
-    });
-
-    it('should return an uneditable close tokens when exiting', () => {
-      const context = { entering: false, origin };
-
-      expect(renderer.render(kramdownListNode, context)).toStrictEqual(
-        buildUneditableCloseToken(origin()),
-      );
+    it('should delegate rendering to the renderUneditableBranch util', () => {
+      expect(renderer.render).toBe(renderUneditableBranch);
     });
   });
 });

spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_kramdown_text_spec.js

 import renderer from '~/vue_shared/components/rich_content_editor/services/renderers/render_kramdown_text';
-import { buildUneditableTokens } from '~/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token';
+import { renderUneditableLeaf } from '~/vue_shared/components/rich_content_editor/services/renderers/render_utils';
 
 import { buildMockTextNode, normalTextNode } from './mock_data';
 
@@ -17,14 +17,8 @@ describe('Render Kramdown Text renderer', () => {
   });
 
   describe('render', () => {
-    const origin = jest.fn();
-
-    it('should return uneditable tokens', () => {
-      const context = { origin };
-
-      expect(renderer.render(kramdownTextNode, context)).toStrictEqual(
-        buildUneditableTokens(origin()),
-      );
+    it('should delegate rendering to the renderUneditableLeaf util', () => {
+      expect(renderer.render).toBe(renderUneditableLeaf);
     });
   });
 });

spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_utils_spec.js

+import {
+  renderUneditableLeaf,
+  renderUneditableBranch,
+} from '~/vue_shared/components/rich_content_editor/services/renderers/render_utils';
+
+import {
+  buildUneditableBlockTokens,
+  buildUneditableOpenTokens,
+} from '~/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token';
+
+import { originToken, uneditableCloseToken } from './mock_data';
+
+describe('Render utils', () => {
+  describe('renderUneditableLeaf', () => {
+    it('should return uneditable block tokens around an origin token', () => {
+      const context = { origin: jest.fn().mockReturnValueOnce(originToken) };
+      const result = renderUneditableLeaf({}, context);
+
+      expect(result).toStrictEqual(buildUneditableBlockTokens(originToken));
+    });
+  });
+
+  describe('renderUneditableBranch', () => {
+    let origin;
+
+    beforeEach(() => {
+      origin = jest.fn().mockReturnValueOnce(originToken);
+    });
+
+    it('should return uneditable block open token followed by the origin token when entering', () => {
+      const context = { entering: true, origin };
+      const result = renderUneditableBranch({}, context);
+
+      expect(result).toStrictEqual(buildUneditableOpenTokens(originToken));
+    });
+
+    it('should return uneditable block closing token when exiting', () => {
+      const context = { entering: false, origin };
+      const result = renderUneditableBranch({}, context);
+
+      expect(result).toStrictEqual(uneditableCloseToken);
+    });
+  });
+});