Add latest changes from gitlab-org/gitlab@master

3 files changed, 38 insertions, 10 deletions

diff --git a/spec/frontend/vue_shared/components/confidentiality_badge_spec.js b/spec/frontend/vue_shared/components/confidentiality_badge_spec.js
index 92cd7597637..7f6d97e8e68 100644
--- a/spec/frontend/vue_shared/components/confidentiality_badge_spec.js
+++ b/spec/frontend/vue_shared/components/confidentiality_badge_spec.js
@@ -1,15 +1,20 @@
-import { GlBadge } from '@gitlab/ui';
+import { GlBadge, GlIcon } from '@gitlab/ui';
 
 import { shallowMount } from '@vue/test-utils';
 import { TYPE_ISSUE, TYPE_EPIC, WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
 
 import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue';
 
-const createComponent = ({ workspaceType = WORKSPACE_PROJECT, issuableType = TYPE_ISSUE } = {}) =>
+const createComponent = ({
+  workspaceType = WORKSPACE_PROJECT,
+  issuableType = TYPE_ISSUE,
+  hideTextInSmallScreens = false,
+} = {}) =>
   shallowMount(ConfidentialityBadge, {
     propsData: {
       workspaceType,
       issuableType,
+      hideTextInSmallScreens,
     },
   });
 
@@ -20,6 +25,11 @@ describe('ConfidentialityBadge', () => {
     wrapper = createComponent();
   });
 
+  const findConfidentialityBadgeText = () =>
+    wrapper.find('[data-testid="confidential-badge-text"]');
+  const findBadge = () => wrapper.findComponent(GlBadge);
+  const findBadgeIcon = () => wrapper.findComponent(GlIcon);
+
   it.each`
     workspaceType        | issuableType  | expectedTooltip
     ${WORKSPACE_PROJECT} | ${TYPE_ISSUE} | ${'Only project members with at least the Reporter role, the author, and assignees can view or be notified about this issue.'}
@@ -32,14 +42,30 @@ describe('ConfidentialityBadge', () => {
         issuableType,
       });
 
-      const badgeEl = wrapper.findComponent(GlBadge);
-
-      expect(badgeEl.props()).toMatchObject({
-        icon: 'eye-slash',
+      expect(findBadgeIcon().props('name')).toBe('eye-slash');
+      expect(findBadge().props()).toMatchObject({
         variant: 'warning',
       });
-      expect(badgeEl.attributes('title')).toBe(expectedTooltip);
-      expect(badgeEl.text()).toBe('Confidential');
+      expect(findBadge().attributes('title')).toBe(expectedTooltip);
+      expect(findBadge().text()).toBe('Confidential');
     },
   );
+
+  it('does not have `gl-sm-display-block` and `gl-display-none` when `hideTextInSmallScreens` is false', () => {
+    wrapper = createComponent({ hideTextInSmallScreens: false });
+
+    expect(findConfidentialityBadgeText().classes()).not.toContain(
+      'gl-display-none',
+      'gl-sm-display-block',
+    );
+  });
+
+  it('has `gl-sm-display-block` and `gl-display-none` when `hideTextInSmallScreens` is true', () => {
+    wrapper = createComponent({ hideTextInSmallScreens: true });
+
+    expect(findConfidentialityBadgeText().classes()).toContain(
+      'gl-display-none',
+      'gl-sm-display-block',
+    );
+  });
 });
diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js
index 4d08ad54e58..a3d7b244685 100644
--- a/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js
+++ b/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js
@@ -107,6 +107,7 @@ describe('IssuableHeader component', () => {
       expect(findConfidentialityBadge().props()).toEqual({
         issuableType: 'issue',
         workspaceType: 'project',
+        hideTextInSmallScreens: false,
       });
     });
 
diff --git a/spec/frontend/work_items/components/work_item_state_badge_spec.js b/spec/frontend/work_items/components/work_item_state_badge_spec.js
index 888d712cc5a..248f16a4081 100644
--- a/spec/frontend/work_items/components/work_item_state_badge_spec.js
+++ b/spec/frontend/work_items/components/work_item_state_badge_spec.js
@@ -1,4 +1,4 @@
-import { GlBadge } from '@gitlab/ui';
+import { GlBadge, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { STATE_OPEN, STATE_CLOSED } from '~/work_items/constants';
 import WorkItemStateBadge from '~/work_items/components/work_item_state_badge.vue';
@@ -14,6 +14,7 @@ describe('WorkItemStateBadge', () => {
     });
   };
   const findStatusBadge = () => wrapper.findComponent(GlBadge);
+  const findStatusBadgeIcon = () => wrapper.findComponent(GlIcon);
 
   it.each`
     state           | icon              | stateText   | variant
@@ -24,7 +25,7 @@ describe('WorkItemStateBadge', () => {
     ({ state, icon, stateText, variant }) => {
       createComponent({ workItemState: state });
 
-      expect(findStatusBadge().props('icon')).toBe(icon);
+      expect(findStatusBadgeIcon().props('name')).toBe(icon);
       expect(findStatusBadge().props('variant')).toBe(variant);
       expect(findStatusBadge().text()).toBe(stateText);
     },