Add latest changes from gitlab-org/gitlab@master

1 files changed, 84 insertions, 0 deletions

diff --git a/spec/frontend/lib/utils/breadcrumbs_spec.js b/spec/frontend/lib/utils/breadcrumbs_spec.js
new file mode 100644
index 00000000000..3c29e3723d3
--- /dev/null
+++ b/spec/frontend/lib/utils/breadcrumbs_spec.js
@@ -0,0 +1,84 @@
+import { createWrapper } from '@vue/test-utils';
+import Vue from 'vue';
+import { injectVueAppBreadcrumbs } from '~/lib/utils/breadcrumbs';
+import { resetHTMLFixture, setHTMLFixture } from 'helpers/fixtures';
+import createMockApollo from 'helpers/mock_apollo_helper';
+
+describe('Breadcrumbs utils', () => {
+  const breadcrumbsHTML = `
+    <nav>
+      <ul class="js-breadcrumbs-list">
+        <li>
+          <a href="/group-name" data-testid="existing-crumb">Group name</a>
+        </li>
+        <li>
+          <a href="/group-name/project-name/-/subpage" data-testid="last-crumb">Subpage</a>
+        </li>
+      </ul>
+    </nav>
+  `;
+
+  const emptyBreadcrumbsHTML = `
+    <nav>
+      <ul class="js-breadcrumbs-list" data-testid="breadcumbs-list">
+      </ul>
+    </nav>
+  `;
+
+  const mockRouter = jest.fn();
+  let MockComponent;
+  let mockApolloProvider;
+
+  beforeEach(() => {
+    MockComponent = Vue.component('MockComponent', {
+      render: (createElement) =>
+        createElement('span', {
+          attrs: {
+            'data-testid': 'mock-component',
+          },
+        }),
+    });
+    mockApolloProvider = createMockApollo();
+  });
+
+  afterEach(() => {
+    resetHTMLFixture();
+    MockComponent = null;
+  });
+
+  describe('injectVueAppBreadcrumbs', () => {
+    describe('without any breadcrumbs', () => {
+      beforeEach(() => {
+        setHTMLFixture(emptyBreadcrumbsHTML);
+      });
+
+      it('returns early and stops trying to inject', () => {
+        expect(injectVueAppBreadcrumbs(mockRouter, MockComponent)).toBe(false);
+      });
+    });
+
+    describe('with breadcrumbs', () => {
+      beforeEach(() => {
+        setHTMLFixture(breadcrumbsHTML);
+      });
+
+      describe.each`
+        testLabel    | apolloProvider
+        ${'set'}     | ${mockApolloProvider}
+        ${'not set'} | ${null}
+      `('given the apollo provider is $testLabel', ({ apolloProvider }) => {
+        beforeEach(() => {
+          createWrapper(injectVueAppBreadcrumbs(mockRouter, MockComponent, apolloProvider));
+        });
+
+        it('returns a new breadcrumbs component replacing the inject HTML', () => {
+          // Using `querySelectorAll` because we're not testing a full Vue app.
+          // We are testing a partial Vue app added into the pages HTML.
+          expect(document.querySelectorAll('[data-testid="existing-crumb"]')).toHaveLength(1);
+          expect(document.querySelectorAll('[data-testid="last-crumb"]')).toHaveLength(0);
+          expect(document.querySelectorAll('[data-testid="mock-component"]')).toHaveLength(1);
+        });
+      });
+    });
+  });
+});