Apply feedback - v2

Add 'Uneditable' to render helper methods,
use alias, and simplify the render_utils_spec

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 { renderDefaultBlock } from './render_utils';
+import { renderUneditableLeaf as render } from './render_utils';
 
 const embeddedRubyRegex = /(^<%.+%>$)/;
 
@@ -6,6 +6,4 @@ const canRender = ({ literal }) => {
   return embeddedRubyRegex.test(literal);
 };
 
-const render = renderDefaultBlock;
-
 export default { canRender, render };

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

-import { renderEnterExitBlock } from './render_utils';
+import { renderUneditableBranch as render } from './render_utils';
 
 const identifierRegex = /(^\[.+\]: .+)/;
 
@@ -10,6 +10,4 @@ const canRender = (node, context) => {
   return isIdentifier(context.getChildrenText(node));
 };
 
-const render = renderEnterExitBlock;
-
 export default { canRender, render };

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

-import { renderEnterExitBlock } from './render_utils';
+import { renderUneditableBranch as render } from './render_utils';
 
 const isKramdownTOC = ({ type, literal }) => type === 'text' && literal === 'TOC';
 
@@ -21,6 +21,4 @@ const canRender = node => {
   return false;
 };
 
-const render = renderEnterExitBlock;
-
 export default { canRender, render };

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

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

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

 import {
-  buildUneditableTokens,
+  buildUneditableBlockTokens,
   buildUneditableOpenTokens,
   buildUneditableCloseToken,
 } from './build_uneditable_token';
 
-export const renderDefaultBlock = (_, { origin }) => buildUneditableTokens(origin());
+export const renderUneditableLeaf = (_, { origin }) => buildUneditableBlockTokens(origin());
 
-export const renderEnterExitBlock = (_, { entering, 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,26 +31,8 @@ describe('Render Kramdown List 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(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 {
-  renderDefaultBlock,
-  renderEnterExitBlock,
+  renderUneditableLeaf,
+  renderUneditableBranch,
 } from '~/vue_shared/components/rich_content_editor/services/renderers/render_utils';
 
-import { uneditableCloseToken } from './mock_data';
+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('renderDefaultBlock', () => {
-    it('should...', () => {
-      const context = { origin: jest.fn() };
-      const result = renderDefaultBlock({}, context);
-
-      expect(context.origin).toHaveBeenCalled();
-      expect(result).toHaveLength(3);
-      expect(result[2]).toStrictEqual(uneditableCloseToken);
+  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('renderEnterExitBlock', () => {
+  describe('renderUneditableBranch', () => {
     let origin;
 
     beforeEach(() => {
-      origin = jest.fn();
+      origin = jest.fn().mockReturnValueOnce(originToken);
     });
 
-    it('should return two tokens as an array when entering', () => {
+    it('should return uneditable block open token followed by the origin token when entering', () => {
       const context = { entering: true, origin };
-      const result = renderEnterExitBlock({}, context);
+      const result = renderUneditableBranch({}, context);
 
-      expect(context.origin).toHaveBeenCalled();
-      expect(result).toHaveLength(2);
+      expect(result).toStrictEqual(buildUneditableOpenTokens(originToken));
     });
 
-    it('should return a single closing token as an object when exiting', () => {
+    it('should return uneditable block closing token when exiting', () => {
       const context = { entering: false, origin };
-      const result = renderEnterExitBlock({}, context);
+      const result = renderUneditableBranch({}, context);
 
-      expect(context.origin).not.toHaveBeenCalled();
       expect(result).toStrictEqual(uneditableCloseToken);
     });
   });