1 files changed, 44 insertions, 4 deletions
diff --git a/spec/frontend/registry/explorer/components/details_page/details_header_spec.js b/spec/frontend/registry/explorer/components/details_page/details_header_spec.js
index fc93e9094c9..ec883886026 100644
--- a/spec/frontend/registry/explorer/components/details_page/details_header_spec.js
+++ b/spec/frontend/registry/explorer/components/details_page/details_header_spec.js
@@ -7,9 +7,27 @@ import { DETAILS_PAGE_TITLE } from '~/registry/explorer/constants';
 describe('Details Header', () => {
   let wrapper;
 
-  const mountComponent = propsData => {
+  const defaultImage = {
+    name: 'foo',
+    updatedAt: '2020-11-03T13:29:21Z',
+    project: {
+      visibility: 'public',
+    },
+  };
+
+  const findLastUpdatedAndVisibility = () => wrapper.find('[data-testid="updated-and-visibility"]');
+
+  const waitForMetadataItems = async () => {
+    // Metadata items are printed by a loop in the title-area and it takes two ticks for them to be available
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+  };
+
+  const mountComponent = (image = defaultImage) => {
     wrapper = shallowMount(component, {
-      propsData,
+      propsData: {
+        image,
+      },
       stubs: {
         GlSprintf,
         TitleArea,
@@ -23,12 +41,34 @@ describe('Details Header', () => {
   });
 
   it('has the correct title ', () => {
-    mountComponent();
+    mountComponent({ ...defaultImage, name: '' });
     expect(wrapper.text()).toMatchInterpolatedText(DETAILS_PAGE_TITLE);
   });
 
   it('shows imageName in the title', () => {
-    mountComponent({ imageName: 'foo' });
+    mountComponent();
     expect(wrapper.text()).toContain('foo');
   });
+
+  it('has a metadata item with last updated text', async () => {
+    mountComponent();
+    await waitForMetadataItems();
+
+    expect(findLastUpdatedAndVisibility().props('text')).toBe('Last updated 1 month ago');
+  });
+
+  describe('visibility icon', () => {
+    it('shows an eye when the project is public', async () => {
+      mountComponent();
+      await waitForMetadataItems();
+
+      expect(findLastUpdatedAndVisibility().props('icon')).toBe('eye');
+    });
+    it('shows an eye slashed when the project is not public', async () => {
+      mountComponent({ ...defaultImage, project: { visibility: 'private' } });
+      await waitForMetadataItems();
+
+      expect(findLastUpdatedAndVisibility().props('icon')).toBe('eye-slash');
+    });
+  });
 });