1 files changed, 39 insertions, 5 deletions

diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js
index 979e1500d7d..d12933526bc 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js
@@ -1,6 +1,7 @@
-import { GlIcon, GlSprintf, GlSkeletonLoader } from '@gitlab/ui';
+import { GlIcon, GlSprintf, GlSkeletonLoader, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { mockTracking } from 'helpers/tracking_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import DeleteButton from '~/packages_and_registries/container_registry/explorer/components/delete_button.vue';
 import CleanupStatus from '~/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue';
@@ -12,7 +13,6 @@ import {
   IMAGE_DELETE_SCHEDULED_STATUS,
   IMAGE_MIGRATING_STATE,
   SCHEDULED_STATUS,
-  ROOT_IMAGE_TEXT,
   COPY_IMAGE_PATH_TITLE,
 } from '~/packages_and_registries/container_registry/explorer/constants';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -31,13 +31,15 @@ describe('Image List Row', () => {
   const findCleanupStatus = () => wrapper.findComponent(CleanupStatus);
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findListItemComponent = () => wrapper.findComponent(ListItem);
+  const findShowFullPathButton = () => wrapper.findComponent(GlButton);
 
-  const mountComponent = (props) => {
+  const mountComponent = (props, features = {}) => {
     wrapper = shallowMount(Component, {
       stubs: {
         RouterLink,
         GlSprintf,
         ListItem,
+        GlButton,
       },
       propsData: {
         item,
@@ -45,6 +47,9 @@ describe('Image List Row', () => {
       },
       provide: {
         config: {},
+        glFeatures: {
+          ...features,
+        },
       },
       directives: {
         GlTooltip: createMockDirective(),
@@ -96,10 +101,10 @@ describe('Image List Row', () => {
       });
     });
 
-    it(`when the image has no name appends ${ROOT_IMAGE_TEXT} to the path`, () => {
+    it('when the image has no name lists the path', () => {
       mountComponent({ item: { ...item, name: '' } });
 
-      expect(findDetailsLink().text()).toBe(`${item.path}/ ${ROOT_IMAGE_TEXT}`);
+      expect(findDetailsLink().text()).toBe(item.path);
     });
 
     it('contains a clipboard button', () => {
@@ -144,6 +149,35 @@ describe('Image List Row', () => {
         expect(findClipboardButton().attributes('disabled')).toBe('true');
       });
     });
+
+    describe('when containerRegistryShowShortenedPath feature enabled', () => {
+      let trackingSpy;
+
+      beforeEach(() => {
+        mountComponent({}, { containerRegistryShowShortenedPath: true });
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      });
+
+      it('renders shortened name of image', () => {
+        expect(findShowFullPathButton().exists()).toBe(true);
+        expect(findDetailsLink().text()).toBe('gitlab-test/rails-12009');
+      });
+
+      it('clicking on shortened name of image hides the button & shows full path', async () => {
+        const btn = findShowFullPathButton();
+        const mockFocusFn = jest.fn();
+        wrapper.vm.$refs.imageName.$el.focus = mockFocusFn;
+
+        await btn.trigger('click');
+
+        expect(findShowFullPathButton().exists()).toBe(false);
+        expect(findDetailsLink().text()).toBe(item.path);
+        expect(mockFocusFn).toHaveBeenCalled();
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_show_full_path', {
+          label: 'registry_image_list',
+        });
+      });
+    });
   });
 
   describe('delete button', () => {