1 files changed, 26 insertions, 0 deletions
diff --git a/spec/frontend_integration/content_editor/content_editor_integration_spec.js b/spec/frontend_integration/content_editor/content_editor_integration_spec.js
index 1b45c0d43a3..89b8d8d6d94 100644
--- a/spec/frontend_integration/content_editor/content_editor_integration_spec.js
+++ b/spec/frontend_integration/content_editor/content_editor_integration_spec.js
@@ -60,4 +60,30 @@ describe('content_editor', () => {
       });
     });
   });
+
+  it('renders footnote ids alongside the footnote definition', async () => {
+    buildWrapper();
+
+    renderMarkdown.mockResolvedValue(`
+    <p data-sourcepos="3:1-3:56" dir="auto">
+      This reference tag is a mix of letters and numbers. <sup class="footnote-ref"><a href="#fn-footnote-2717" id="fnref-footnote-2717" data-footnote-ref="">2</a></sup>
+    </p>
+    <section class="footnotes" data-footnotes>
+      <ol>
+        <li id="fn-footnote-2717">
+        <p data-sourcepos="6:7-6:31">This is another footnote. <a href="#fnref-footnote-2717" aria-label="Back to content" class="footnote-backref" data-footnote-backref=""><gl-emoji title="leftwards arrow with hook" data-name="leftwards_arrow_with_hook" data-unicode-version="1.1">↩</gl-emoji></a></p>
+        </li>
+      </ol>
+    </section>
+    `);
+
+    await contentEditorService.setSerializedContent(`
+    This reference tag is a mix of letters and numbers [^footnote].
+
+    [^footnote]: This is another footnote.
+    `);
+    await nextTick();
+
+    expect(wrapper.text()).toContain('footnote: This is another footnote');
+  });
 });