Add latest changes from gitlab-org/gitlab@master

2 files changed, 65 insertions, 56 deletions

diff --git a/spec/frontend/content_editor/extensions/attachment_spec.js b/spec/frontend/content_editor/extensions/attachment_spec.js
index 9e7c31cca72..d4f05a25bd6 100644
--- a/spec/frontend/content_editor/extensions/attachment_spec.js
+++ b/spec/frontend/content_editor/extensions/attachment_spec.js
@@ -1,7 +1,5 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import { once } from 'lodash';
-import waitForPromises from 'helpers/wait_for_promises';
 import Attachment from '~/content_editor/extensions/attachment';
 import Image from '~/content_editor/extensions/image';
 import Link from '~/content_editor/extensions/link';
@@ -20,7 +18,6 @@ const PROJECT_WIKI_ATTACHMENT_LINK_HTML = `<p data-sourcepos="1:1-1:26" dir="aut
 
 describe('content_editor/extensions/attachment', () => {
   let tiptapEditor;
-  let eq;
   let doc;
   let p;
   let image;
@@ -33,6 +30,24 @@ describe('content_editor/extensions/attachment', () => {
   const imageFile = new File(['foo'], 'test-file.png', { type: 'image/png' });
   const attachmentFile = new File(['foo'], 'test-file.zip', { type: 'application/zip' });
 
+  const expectDocumentAfterTransaction = ({ number, expectedDoc, action }) => {
+    return new Promise((resolve) => {
+      let counter = 1;
+      const handleTransaction = () => {
+        if (counter === number) {
+          expect(tiptapEditor.state.doc.toJSON()).toEqual(expectedDoc.toJSON());
+          tiptapEditor.off('update', handleTransaction);
+          resolve();
+        }
+
+        counter += 1;
+      };
+
+      tiptapEditor.on('update', handleTransaction);
+      action();
+    });
+  };
+
   beforeEach(() => {
     renderMarkdown = jest.fn();
 
@@ -42,7 +57,6 @@ describe('content_editor/extensions/attachment', () => {
 
     ({
       builders: { doc, p, image, loading, link },
-      eq,
     } = createDocBuilder({
       tiptapEditor,
       names: {
@@ -98,18 +112,14 @@ describe('content_editor/extensions/attachment', () => {
           mock.onPost().reply(httpStatus.OK, successResponse);
         });
 
-        it('inserts an image with src set to the encoded image file and uploading true', (done) => {
+        it('inserts an image with src set to the encoded image file and uploading true', async () => {
           const expectedDoc = doc(p(image({ uploading: true, src: base64EncodedFile })));
 
-          tiptapEditor.on(
-            'update',
-            once(() => {
-              expect(eq(tiptapEditor.state.doc, expectedDoc)).toBe(true);
-              done();
-            }),
-          );
-
-          tiptapEditor.commands.uploadAttachment({ file: imageFile });
+          await expectDocumentAfterTransaction({
+            number: 1,
+            expectedDoc,
+            action: () => tiptapEditor.commands.uploadAttachment({ file: imageFile }),
+          });
         });
 
         it('updates the inserted image with canonicalSrc when upload is successful', async () => {
@@ -124,11 +134,11 @@ describe('content_editor/extensions/attachment', () => {
             ),
           );
 
-          tiptapEditor.commands.uploadAttachment({ file: imageFile });
-
-          await waitForPromises();
-
-          expect(eq(tiptapEditor.state.doc, expectedDoc)).toBe(true);
+          await expectDocumentAfterTransaction({
+            number: 2,
+            expectedDoc,
+            action: () => tiptapEditor.commands.uploadAttachment({ file: imageFile }),
+          });
         });
       });
 
@@ -137,14 +147,14 @@ describe('content_editor/extensions/attachment', () => {
           mock.onPost().reply(httpStatus.INTERNAL_SERVER_ERROR);
         });
 
-        it('resets the doc to orginal state', async () => {
+        it('resets the doc to original state', async () => {
           const expectedDoc = doc(p(''));
 
-          tiptapEditor.commands.uploadAttachment({ file: imageFile });
-
-          await waitForPromises();
-
-          expect(eq(tiptapEditor.state.doc, expectedDoc)).toBe(true);
+          await expectDocumentAfterTransaction({
+            number: 2,
+            expectedDoc,
+            action: () => tiptapEditor.commands.uploadAttachment({ file: imageFile }),
+          });
         });
 
         it('emits an error event that includes an error message', (done) => {
@@ -176,18 +186,14 @@ describe('content_editor/extensions/attachment', () => {
           mock.onPost().reply(httpStatus.OK, successResponse);
         });
 
-        it('inserts a loading mark', (done) => {
+        it('inserts a loading mark', async () => {
           const expectedDoc = doc(p(loading({ label: 'test-file' })));
 
-          tiptapEditor.on(
-            'update',
-            once(() => {
-              expect(eq(tiptapEditor.state.doc, expectedDoc)).toBe(true);
-              done();
-            }),
-          );
-
-          tiptapEditor.commands.uploadAttachment({ file: attachmentFile });
+          await expectDocumentAfterTransaction({
+            number: 1,
+            expectedDoc,
+            action: () => tiptapEditor.commands.uploadAttachment({ file: attachmentFile }),
+          });
         });
 
         it('updates the loading mark with a link with canonicalSrc and href attrs', async () => {
@@ -204,11 +210,11 @@ describe('content_editor/extensions/attachment', () => {
             ),
           );
 
-          tiptapEditor.commands.uploadAttachment({ file: attachmentFile });
-
-          await waitForPromises();
-
-          expect(eq(tiptapEditor.state.doc, expectedDoc)).toBe(true);
+          await expectDocumentAfterTransaction({
+            number: 2,
+            expectedDoc,
+            action: () => tiptapEditor.commands.uploadAttachment({ file: attachmentFile }),
+          });
         });
       });
 
@@ -220,11 +226,11 @@ describe('content_editor/extensions/attachment', () => {
         it('resets the doc to orginal state', async () => {
           const expectedDoc = doc(p(''));
 
-          tiptapEditor.commands.uploadAttachment({ file: attachmentFile });
-
-          await waitForPromises();
-
-          expect(eq(tiptapEditor.state.doc, expectedDoc)).toBe(true);
+          await expectDocumentAfterTransaction({
+            number: 2,
+            expectedDoc,
+            action: () => tiptapEditor.commands.uploadAttachment({ file: attachmentFile }),
+          });
         });
 
         it('emits an error event that includes an error message', (done) => {
diff --git a/spec/frontend/popovers/components/popovers_spec.js b/spec/frontend/popovers/components/popovers_spec.js
index 25c509346d1..2751a878e51 100644
--- a/spec/frontend/popovers/components/popovers_spec.js
+++ b/spec/frontend/popovers/components/popovers_spec.js
@@ -54,17 +54,20 @@ describe('popovers/components/popovers.vue', () => {
       expect(wrapper.findAll(GlPopover)).toHaveLength(1);
     });
 
-    it('supports HTML content', async () => {
-      const content = 'content with <b>HTML</b>';
-      await buildWrapper(
-        createPopoverTarget({
-          content,
-          html: true,
-        }),
-      );
-      const html = wrapper.find(GlPopover).html();
-
-      expect(html).toContain(content);
+    describe('supports HTML content', () => {
+      const svgIcon = '<svg><use xlink:href="icons.svg#test"></use></svg>';
+
+      it.each`
+        description                         | content                          | render
+        ${'renders html content correctly'} | ${'<b>HTML</b>'}                 | ${'<b>HTML</b>'}
+        ${'removes any unsafe content'}     | ${'<script>alert(XSS)</script>'} | ${''}
+        ${'renders svg icons correctly'}    | ${svgIcon}                       | ${svgIcon}
+      `('$description', async ({ content, render }) => {
+        await buildWrapper(createPopoverTarget({ content, html: true }));
+
+        const html = wrapper.find(GlPopover).html();
+        expect(html).toContain(render);
+      });
     });
 
     it.each`