2 files changed, 30 insertions, 4 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');
+  });
 });
diff --git a/spec/frontend_integration/ide/helpers/ide_helper.js b/spec/frontend_integration/ide/helpers/ide_helper.js
index 8c5ff816c74..20a1e5aceb2 100644
--- a/spec/frontend_integration/ide/helpers/ide_helper.js
+++ b/spec/frontend_integration/ide/helpers/ide_helper.js
@@ -46,14 +46,14 @@ export const findMonacoDiffEditor = () =>
 
 export const findAndSetEditorValue = async (value) => {
   const editor = await findMonacoEditor();
-  const uri = editor.getAttribute('data-uri');
+  const { uri } = editor.dataset;
 
   monacoEditor.getModel(uri).setValue(value);
 };
 
 export const getEditorValue = async () => {
   const editor = await findMonacoEditor();
-  const uri = editor.getAttribute('data-uri');
+  const { uri } = editor.dataset;
 
   return monacoEditor.getModel(uri).getValue();
 };
@@ -207,10 +207,10 @@ export const commit = async ({ newBranch = false, newMR = false, newBranchName =
 
   if (!newBranch) {
     const option = await screen.findByLabelText(/Commit to .+ branch/);
-    option.click();
+    await option.click();
   } else {
     const option = await screen.findByLabelText('Create a new branch');
-    option.click();
+    await option.click();
 
     const branchNameInput = await screen.findByTestId('ide-new-branch-name');
     fireEvent.input(branchNameInput, { target: { value: newBranchName } });