Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

3 files changed, 44 insertions, 10 deletions

diff --git a/spec/frontend/vue_shared/components/registry/__snapshots__/code_instruction_spec.js.snap b/spec/frontend/vue_shared/components/registry/__snapshots__/code_instruction_spec.js.snap
index 16094a42668..ecea151fc8a 100644
--- a/spec/frontend/vue_shared/components/registry/__snapshots__/code_instruction_spec.js.snap
+++ b/spec/frontend/vue_shared/components/registry/__snapshots__/code_instruction_spec.js.snap
@@ -38,7 +38,8 @@ exports[`Package code instruction single line to match the default snapshot 1`]
       data-testid="instruction-button"
     >
       <button
-        class="btn input-group-text btn-secondary btn-md btn-default"
+        aria-label="Copy this value"
+        class="btn input-group-text btn-default btn-md gl-button btn-default-secondary btn-icon"
         data-clipboard-text="npm i @my-package"
         title="Copy npm install command"
         type="button"
@@ -46,13 +47,15 @@ exports[`Package code instruction single line to match the default snapshot 1`]
         <!---->
          
         <svg
-          class="gl-icon s16"
+          class="gl-button-icon gl-icon s16"
           data-testid="copy-to-clipboard-icon"
         >
           <use
             href="#copy-to-clipboard"
           />
         </svg>
+          
+        <!---->
       </button>
     </span>
   </div>
diff --git a/spec/frontend/vue_shared/components/registry/list_item_spec.js b/spec/frontend/vue_shared/components/registry/list_item_spec.js
index e2cfdedb4bf..2a48bf4f2d6 100644
--- a/spec/frontend/vue_shared/components/registry/list_item_spec.js
+++ b/spec/frontend/vue_shared/components/registry/list_item_spec.js
@@ -58,9 +58,9 @@ describe('list item', () => {
 
   describe.each`
     slotNames
-    ${['details_foo']}
-    ${['details_foo', 'details_bar']}
-    ${['details_foo', 'details_bar', 'details_baz']}
+    ${['details-foo']}
+    ${['details-foo', 'details-bar']}
+    ${['details-foo', 'details-bar', 'details-baz']}
   `('$slotNames details slots', ({ slotNames }) => {
     const slotMocks = slotNames.reduce((acc, current) => {
       acc[current] = `<div data-testid="${current}" />`;
@@ -89,7 +89,7 @@ describe('list item', () => {
 
   describe('details toggle button', () => {
     it('is visible when at least one details slot exists', async () => {
-      mountComponent({}, { details_foo: '<span></span>' });
+      mountComponent({}, { 'details-foo': '<span></span>' });
       await wrapper.vm.$nextTick();
       expect(findToggleDetailsButton().exists()).toBe(true);
     });
diff --git a/spec/frontend/vue_shared/components/registry/title_area_spec.js b/spec/frontend/vue_shared/components/registry/title_area_spec.js
index 6740d6097a4..5cb606b58d9 100644
--- a/spec/frontend/vue_shared/components/registry/title_area_spec.js
+++ b/spec/frontend/vue_shared/components/registry/title_area_spec.js
@@ -1,4 +1,4 @@
-import { GlAvatar } from '@gitlab/ui';
+import { GlAvatar, GlSprintf, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import component from '~/vue_shared/components/registry/title_area.vue';
 
@@ -10,10 +10,12 @@ describe('title area', () => {
   const findMetadataSlot = name => wrapper.find(`[data-testid="${name}"]`);
   const findTitle = () => wrapper.find('[data-testid="title"]');
   const findAvatar = () => wrapper.find(GlAvatar);
+  const findInfoMessages = () => wrapper.findAll('[data-testid="info-message"]');
 
   const mountComponent = ({ propsData = { title: 'foo' }, slots } = {}) => {
     wrapper = shallowMount(component, {
       propsData,
+      stubs: { GlSprintf },
       slots: {
         'sub-header': '<div data-testid="sub-header" />',
         'right-actions': '<div data-testid="right-actions" />',
@@ -77,9 +79,9 @@ describe('title area', () => {
 
   describe.each`
     slotNames
-    ${['metadata_foo']}
-    ${['metadata_foo', 'metadata_bar']}
-    ${['metadata_foo', 'metadata_bar', 'metadata_baz']}
+    ${['metadata-foo']}
+    ${['metadata-foo', 'metadata-bar']}
+    ${['metadata-foo', 'metadata-bar', 'metadata-baz']}
   `('$slotNames metadata slots', ({ slotNames }) => {
     const slotMocks = slotNames.reduce((acc, current) => {
       acc[current] = `<div data-testid="${current}" />`;
@@ -95,4 +97,33 @@ describe('title area', () => {
       });
     });
   });
+
+  describe('info-messages', () => {
+    it('shows a message when the props contains one', () => {
+      mountComponent({ propsData: { infoMessages: [{ text: 'foo foo bar bar' }] } });
+
+      const messages = findInfoMessages();
+      expect(messages).toHaveLength(1);
+      expect(messages.at(0).text()).toBe('foo foo bar bar');
+    });
+
+    it('shows a link when the props contains one', () => {
+      mountComponent({
+        propsData: {
+          infoMessages: [{ text: 'foo %{docLinkStart}link%{docLinkEnd}', link: 'bar' }],
+        },
+      });
+
+      const message = findInfoMessages().at(0);
+
+      expect(message.find(GlLink).attributes('href')).toBe('bar');
+      expect(message.text()).toBe('foo link');
+    });
+
+    it('multiple messages generates multiple spans', () => {
+      mountComponent({ propsData: { infoMessages: [{ text: 'foo' }, { text: 'bar' }] } });
+
+      expect(findInfoMessages()).toHaveLength(2);
+    });
+  });
 });