1 files changed, 22 insertions, 68 deletions

diff --git a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js
index 7a27f8fa431..3c997093d46 100644
--- a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlSprintf, GlLink } from '@gitlab/ui';
+import { GlSprintf } from '@gitlab/ui';
 import Component from '~/registry/explorer/components/list_page/registry_header.vue';
 import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import {
@@ -19,12 +19,8 @@ describe('registry_header', () => {
 
   const findTitleArea = () => wrapper.find(TitleArea);
   const findCommandsSlot = () => wrapper.find('[data-testid="commands-slot"]');
-  const findInfoArea = () => wrapper.find('[data-testid="info-area"]');
-  const findIntroText = () => wrapper.find('[data-testid="default-intro"]');
   const findImagesCountSubHeader = () => wrapper.find('[data-testid="images-count"]');
   const findExpirationPolicySubHeader = () => wrapper.find('[data-testid="expiration-policy"]');
-  const findDisabledExpirationPolicyMessage = () =>
-    wrapper.find('[data-testid="expiration-disabled-message"]');
 
   const mountComponent = (propsData, slots) => {
     wrapper = shallowMount(Component, {
@@ -123,44 +119,18 @@ describe('registry_header', () => {
     });
   });
 
-  describe('info area', () => {
-    it('exists', () => {
-      mountComponent();
-
-      expect(findInfoArea().exists()).toBe(true);
-    });
-
+  describe('info messages', () => {
     describe('default message', () => {
-      beforeEach(() => {
-        return mountComponent({ helpPagePath: 'bar' });
-      });
-
-      it('exists', () => {
-        expect(findIntroText().exists()).toBe(true);
-      });
-
-      it('has the correct copy', () => {
-        expect(findIntroText().text()).toMatchInterpolatedText(LIST_INTRO_TEXT);
-      });
+      it('is correctly bound to title_area props', () => {
+        mountComponent({ helpPagePath: 'foo' });
 
-      it('has the correct link', () => {
-        expect(
-          findIntroText()
-            .find(GlLink)
-            .attributes('href'),
-        ).toBe('bar');
+        expect(findTitleArea().props('infoMessages')).toEqual([
+          { text: LIST_INTRO_TEXT, link: 'foo' },
+        ]);
       });
     });
 
     describe('expiration policy info message', () => {
-      describe('when there are no images', () => {
-        it('is hidden', () => {
-          mountComponent();
-
-          expect(findDisabledExpirationPolicyMessage().exists()).toBe(false);
-        });
-      });
-
       describe('when there are images', () => {
         describe('when expiration policy is disabled', () => {
           beforeEach(() => {
@@ -170,43 +140,27 @@ describe('registry_header', () => {
               imagesCount: 1,
             });
           });
-          it('message exist', () => {
-            expect(findDisabledExpirationPolicyMessage().exists()).toBe(true);
-          });
-          it('has the correct copy', () => {
-            expect(findDisabledExpirationPolicyMessage().text()).toMatchInterpolatedText(
-              EXPIRATION_POLICY_DISABLED_MESSAGE,
-            );
-          });
 
-          it('has the correct link', () => {
-            expect(
-              findDisabledExpirationPolicyMessage()
-                .find(GlLink)
-                .attributes('href'),
-            ).toBe('foo');
+          it('the prop is correctly bound', () => {
+            expect(findTitleArea().props('infoMessages')).toEqual([
+              { text: LIST_INTRO_TEXT, link: '' },
+              { text: EXPIRATION_POLICY_DISABLED_MESSAGE, link: 'foo' },
+            ]);
           });
         });
 
-        describe('when expiration policy is enabled', () => {
+        describe.each`
+          desc                                                   | props
+          ${'when there are no images'}                          | ${{ expirationPolicy: { enabled: false }, imagesCount: 0 }}
+          ${'when expiration policy is enabled'}                 | ${{ expirationPolicy: { enabled: true }, imagesCount: 1 }}
+          ${'when the expiration policy is completely disabled'} | ${{ expirationPolicy: { enabled: false }, imagesCount: 1, hideExpirationPolicyData: true }}
+        `('$desc', ({ props }) => {
           it('message does not exist', () => {
-            mountComponent({
-              expirationPolicy: { enabled: true },
-              imagesCount: 1,
-            });
-
-            expect(findDisabledExpirationPolicyMessage().exists()).toBe(false);
-          });
-        });
-        describe('when the expiration policy is completely disabled', () => {
-          it('message does not exist', () => {
-            mountComponent({
-              expirationPolicy: { enabled: true },
-              imagesCount: 1,
-              hideExpirationPolicyData: true,
-            });
+            mountComponent(props);
 
-            expect(findDisabledExpirationPolicyMessage().exists()).toBe(false);
+            expect(findTitleArea().props('infoMessages')).toEqual([
+              { text: LIST_INTRO_TEXT, link: '' },
+            ]);
           });
         });
       });