1 files changed, 132 insertions, 0 deletions
diff --git a/spec/frontend/streaming/handle_streamed_anchor_link_spec.js b/spec/frontend/streaming/handle_streamed_anchor_link_spec.js
new file mode 100644
index 00000000000..ef17957b2fc
--- /dev/null
+++ b/spec/frontend/streaming/handle_streamed_anchor_link_spec.js
@@ -0,0 +1,132 @@
+import { resetHTMLFixture, setHTMLFixture } from 'helpers/fixtures';
+import waitForPromises from 'helpers/wait_for_promises';
+import { handleStreamedAnchorLink } from '~/streaming/handle_streamed_anchor_link';
+import { scrollToElement } from '~/lib/utils/common_utils';
+import LineHighlighter from '~/blob/line_highlighter';
+import { TEST_HOST } from 'spec/test_constants';
+
+jest.mock('~/lib/utils/common_utils');
+jest.mock('~/blob/line_highlighter');
+
+describe('handleStreamedAnchorLink', () => {
+  const ANCHOR_START = 'L100';
+  const ANCHOR_END = '300';
+  const findRoot = () => document.querySelector('#root');
+
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
+  describe('when single line anchor is given', () => {
+    beforeEach(() => {
+      delete window.location;
+      window.location = new URL(`${TEST_HOST}#${ANCHOR_START}`);
+    });
+
+    describe('when element is present', () => {
+      beforeEach(() => {
+        setHTMLFixture(`<div id="root"><div id="${ANCHOR_START}"></div></div>`);
+        handleStreamedAnchorLink(findRoot());
+      });
+
+      it('does nothing', async () => {
+        await waitForPromises();
+        expect(scrollToElement).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when element is streamed', () => {
+      let stop;
+      const insertElement = () => {
+        findRoot().insertAdjacentHTML('afterbegin', `<div id="${ANCHOR_START}"></div>`);
+      };
+
+      beforeEach(() => {
+        setHTMLFixture('<div id="root"></div>');
+        stop = handleStreamedAnchorLink(findRoot());
+      });
+
+      afterEach(() => {
+        stop = undefined;
+      });
+
+      it('scrolls to the anchor when inserted', async () => {
+        insertElement();
+        await waitForPromises();
+        expect(scrollToElement).toHaveBeenCalledTimes(1);
+        expect(LineHighlighter).toHaveBeenCalledTimes(1);
+      });
+
+      it("doesn't scroll to the anchor when destroyed", async () => {
+        stop();
+        insertElement();
+        await waitForPromises();
+        expect(scrollToElement).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('when line range anchor is given', () => {
+    beforeEach(() => {
+      delete window.location;
+      window.location = new URL(`${TEST_HOST}#${ANCHOR_START}-${ANCHOR_END}`);
+    });
+
+    describe('when last element is present', () => {
+      beforeEach(() => {
+        setHTMLFixture(`<div id="root"><div id="L${ANCHOR_END}"></div></div>`);
+        handleStreamedAnchorLink(findRoot());
+      });
+
+      it('does nothing', async () => {
+        await waitForPromises();
+        expect(scrollToElement).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when last element is streamed', () => {
+      let stop;
+      const insertElement = () => {
+        findRoot().insertAdjacentHTML(
+          'afterbegin',
+          `<div id="${ANCHOR_START}"></div><div id="L${ANCHOR_END}"></div>`,
+        );
+      };
+
+      beforeEach(() => {
+        setHTMLFixture('<div id="root"></div>');
+        stop = handleStreamedAnchorLink(findRoot());
+      });
+
+      afterEach(() => {
+        stop = undefined;
+      });
+
+      it('scrolls to the anchor when inserted', async () => {
+        insertElement();
+        await waitForPromises();
+        expect(scrollToElement).toHaveBeenCalledTimes(1);
+        expect(LineHighlighter).toHaveBeenCalledTimes(1);
+      });
+
+      it("doesn't scroll to the anchor when destroyed", async () => {
+        stop();
+        insertElement();
+        await waitForPromises();
+        expect(scrollToElement).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('when anchor is not given', () => {
+    beforeEach(() => {
+      setHTMLFixture(`<div id="root"></div>`);
+      handleStreamedAnchorLink(findRoot());
+    });
+
+    it('does nothing', async () => {
+      await waitForPromises();
+      expect(scrollToElement).not.toHaveBeenCalled();
+    });
+  });
+});