Add latest changes from gitlab-org/gitlab@master

2 files changed, 81 insertions, 93 deletions

diff --git a/spec/frontend/registry/explorer/components/__snapshots__/registry_breadcrumb_spec.js.snap b/spec/frontend/registry/explorer/components/__snapshots__/registry_breadcrumb_spec.js.snap
index feae2f629b7..4be4fce1abf 100644
--- a/spec/frontend/registry/explorer/components/__snapshots__/registry_breadcrumb_spec.js.snap
+++ b/spec/frontend/registry/explorer/components/__snapshots__/registry_breadcrumb_spec.js.snap
@@ -1,28 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Registry Breadcrumb when is rootRoute renders 1`] = `
-<ul>
-  <li
-    class="foo bar"
+exports[`Registry Breadcrumb when is not rootRoute renders 1`] = `
+<div
+  class="gl-breadcrumbs"
+>
+  <ol
+    class="breadcrumb gl-breadcrumb-list"
   >
-    baz
-  </li>
-  <li
-    class="foo bar"
+     
+    <li
+      class="breadcrumb-item gl-breadcrumb-item"
+    >
+      <a
+        class=""
+        href="/"
+        target="_self"
+      />
+    </li>
+     
+    <span
+      class="gl-breadcrumb-separator"
+      data-testid="separator"
+    >
+      <svg
+        aria-hidden="true"
+        class="gl-icon s8"
+        data-testid="angle-right-icon"
+      >
+        <use
+          href="#angle-right"
+        />
+      </svg>
+    </span>
+    <li
+      class="breadcrumb-item gl-breadcrumb-item"
+    >
+      <a
+        class=""
+        href="#"
+        target="_self"
+      />
+    </li>
+     
+    <!---->
+  </ol>
+</div>
+`;
+
+exports[`Registry Breadcrumb when is rootRoute renders 1`] = `
+<div
+  class="gl-breadcrumbs"
+>
+  <ol
+    class="breadcrumb gl-breadcrumb-list"
   >
-    foo
-  </li>
-   
-  <!---->
-   
-  <li>
-    <a
-      class="foo"
+     
+    <li
+      class="breadcrumb-item gl-breadcrumb-item"
     >
-      <a>
-        
-      </a>
-    </a>
-  </li>
-</ul>
+      <a
+        class=""
+        href="/"
+        target="_self"
+      />
+    </li>
+     
+    <!---->
+  </ol>
+</div>
 `;
diff --git a/spec/frontend/registry/explorer/components/registry_breadcrumb_spec.js b/spec/frontend/registry/explorer/components/registry_breadcrumb_spec.js
index e960558265d..487f33594c1 100644
--- a/spec/frontend/registry/explorer/components/registry_breadcrumb_spec.js
+++ b/spec/frontend/registry/explorer/components/registry_breadcrumb_spec.js
@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 
 import component from '~/registry/explorer/components/registry_breadcrumb.vue';
 
@@ -6,45 +6,13 @@ describe('Registry Breadcrumb', () => {
   let wrapper;
   const nameGenerator = jest.fn();
 
-  const crumb = {
-    className: 'foo bar',
-    tagName: 'div',
-    innerHTML: 'baz',
-    querySelector: jest.fn(),
-    children: [
-      {
-        tagName: 'a',
-        className: 'foo',
-      },
-    ],
-  };
-
-  const querySelectorReturnValue = {
-    classList: ['js-divider'],
-    tagName: 'svg',
-    innerHTML: 'foo',
-  };
-
-  const crumbs = [crumb, { ...crumb, innerHTML: 'foo' }, { ...crumb, className: 'baz' }];
-
   const routes = [
-    { name: 'foo', meta: { nameGenerator, root: true } },
-    { name: 'baz', meta: { nameGenerator } },
+    { name: 'list', path: '/', meta: { nameGenerator, root: true } },
+    { name: 'details', path: '/:id', meta: { nameGenerator } },
   ];
 
-  const findDivider = () => wrapper.find('.js-divider');
-  const findRootRoute = () => wrapper.find({ ref: 'rootRouteLink' });
-  const findChildRoute = () => wrapper.find({ ref: 'childRouteLink' });
-  const findLastCrumb = () => wrapper.find({ ref: 'lastCrumb' });
-
   const mountComponent = ($route) => {
-    wrapper = shallowMount(component, {
-      propsData: {
-        crumbs,
-      },
-      stubs: {
-        'router-link': { name: 'router-link', template: '<a><slot></slot></a>', props: ['to'] },
-      },
+    wrapper = mount(component, {
       mocks: {
         $route,
         $router: {
@@ -58,7 +26,6 @@ describe('Registry Breadcrumb', () => {
 
   beforeEach(() => {
     nameGenerator.mockClear();
-    crumb.querySelector = jest.fn();
   });
 
   afterEach(() => {
@@ -75,8 +42,11 @@ describe('Registry Breadcrumb', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('contains a router-link for the child route', () => {
-      expect(findChildRoute().exists()).toBe(true);
+    it('contains only a single router-link to list', () => {
+      const links = wrapper.findAll('a');
+
+      expect(links).toHaveLength(1);
+      expect(links.at(0).attributes('href')).toBe('/');
     });
 
     it('the link text is calculated by nameGenerator', () => {
@@ -86,48 +56,23 @@ describe('Registry Breadcrumb', () => {
 
   describe('when is not rootRoute', () => {
     beforeEach(() => {
-      crumb.querySelector.mockReturnValue(querySelectorReturnValue);
       mountComponent(routes[1]);
     });
 
-    it('renders a divider', () => {
-      expect(findDivider().exists()).toBe(true);
+    it('renders', () => {
+      expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('contains a router-link for the root route', () => {
-      expect(findRootRoute().exists()).toBe(true);
-    });
+    it('contains two router-links to list and details', () => {
+      const links = wrapper.findAll('a');
 
-    it('contains a router-link for the child route', () => {
-      expect(findChildRoute().exists()).toBe(true);
+      expect(links).toHaveLength(2);
+      expect(links.at(0).attributes('href')).toBe('/');
+      expect(links.at(1).attributes('href')).toBe('#');
     });
 
     it('the link text is calculated by nameGenerator', () => {
       expect(nameGenerator).toHaveBeenCalledTimes(2);
     });
   });
-
-  describe('last crumb', () => {
-    const lastChildren = crumb.children[0];
-    beforeEach(() => {
-      nameGenerator.mockReturnValue('foo');
-      mountComponent(routes[0]);
-    });
-
-    it('has the same tag as the last children of the crumbs', () => {
-      expect(findLastCrumb().element.tagName).toBe(lastChildren.tagName.toUpperCase());
-    });
-
-    it('has the same classes as the last children of the crumbs', () => {
-      expect(findLastCrumb().classes().join(' ')).toEqual(lastChildren.className);
-    });
-
-    it('has a link to the current route', () => {
-      expect(findChildRoute().props('to')).toEqual({ to: routes[0].name });
-    });
-
-    it('the link has the correct text', () => {
-      expect(findChildRoute().text()).toEqual('foo');
-    });
-  });
 });