1 files changed, 86 insertions, 0 deletions
diff --git a/spec/frontend/packages/shared/components/package_path_spec.js b/spec/frontend/packages/shared/components/package_path_spec.js
new file mode 100644
index 00000000000..40d455ac77c
--- /dev/null
+++ b/spec/frontend/packages/shared/components/package_path_spec.js
@@ -0,0 +1,86 @@
+import { shallowMount } from '@vue/test-utils';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import PackagePath from '~/packages/shared/components/package_path.vue';
+
+describe('PackagePath', () => {
+  let wrapper;
+
+  const mountComponent = (propsData = { path: 'foo' }) => {
+    wrapper = shallowMount(PackagePath, {
+      propsData,
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+    });
+  };
+
+  const BASE_ICON = 'base-icon';
+  const ROOT_LINK = 'root-link';
+  const ROOT_CHEVRON = 'root-chevron';
+  const ELLIPSIS_ICON = 'ellipsis-icon';
+  const ELLIPSIS_CHEVRON = 'ellipsis-chevron';
+  const LEAF_LINK = 'leaf-link';
+
+  const findItem = name => wrapper.find(`[data-testid="${name}"]`);
+  const findTooltip = w => getBinding(w.element, 'gl-tooltip');
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe.each`
+    path                       | rootUrl       | shouldExist                                                   | shouldNotExist
+    ${'foo/bar'}               | ${'/foo/bar'} | ${[]}                                                         | ${[ROOT_CHEVRON, ELLIPSIS_ICON, ELLIPSIS_CHEVRON, LEAF_LINK]}
+    ${'foo/bar/baz'}           | ${'/foo/bar'} | ${[ROOT_CHEVRON, LEAF_LINK]}                                  | ${[ELLIPSIS_ICON, ELLIPSIS_CHEVRON]}
+    ${'foo/bar/baz/baz2'}      | ${'/foo/bar'} | ${[ROOT_CHEVRON, LEAF_LINK, ELLIPSIS_ICON, ELLIPSIS_CHEVRON]} | ${[]}
+    ${'foo/bar/baz/baz2/bar2'} | ${'/foo/bar'} | ${[ROOT_CHEVRON, LEAF_LINK, ELLIPSIS_ICON, ELLIPSIS_CHEVRON]} | ${[]}
+  `('given path $path', ({ path, shouldExist, shouldNotExist, rootUrl }) => {
+    const pathPieces = path.split('/').slice(1);
+    const hasTooltip = shouldExist.includes(ELLIPSIS_ICON);
+
+    beforeEach(() => {
+      mountComponent({ path });
+    });
+
+    it('should have a base icon', () => {
+      expect(findItem(BASE_ICON).exists()).toBe(true);
+    });
+
+    it('should have a root link', () => {
+      const root = findItem(ROOT_LINK);
+      expect(root.exists()).toBe(true);
+      expect(root.attributes('href')).toBe(rootUrl);
+    });
+
+    if (hasTooltip) {
+      it('should have a tooltip', () => {
+        const tooltip = findTooltip(findItem(ELLIPSIS_ICON));
+        expect(tooltip).toBeDefined();
+        expect(tooltip.value).toMatchObject({
+          title: path,
+        });
+      });
+    }
+
+    if (shouldExist.length) {
+      it.each(shouldExist)(`should have %s`, element => {
+        expect(findItem(element).exists()).toBe(true);
+      });
+    }
+
+    if (shouldNotExist.length) {
+      it.each(shouldNotExist)(`should not have %s`, element => {
+        expect(findItem(element).exists()).toBe(false);
+      });
+    }
+
+    if (shouldExist.includes(LEAF_LINK)) {
+      it('the last link should be the last piece of the path', () => {
+        const leaf = findItem(LEAF_LINK);
+        expect(leaf.attributes('href')).toBe(`/${path}`);
+        expect(leaf.text()).toBe(pathPieces[pathPieces.length - 1]);
+      });
+    }
+  });
+});