Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

1 files changed, 37 insertions, 0 deletions

diff --git a/spec/frontend/pipelines/components/pipelines_list/pipeline_stage_spec.js b/spec/frontend/pipelines/components/pipelines_list/pipeline_stage_spec.js
index 6d0e99ff63e..1ff32b03344 100644
--- a/spec/frontend/pipelines/components/pipelines_list/pipeline_stage_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_list/pipeline_stage_spec.js
@@ -5,6 +5,7 @@ import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import axios from '~/lib/utils/axios_utils';
 import PipelineStage from '~/pipelines/components/pipelines_list/pipeline_stage.vue';
 import eventHub from '~/pipelines/event_hub';
+import waitForPromises from 'helpers/wait_for_promises';
 import { stageReply } from '../../mock_data';
 
 const dropdownPath = 'path.json';
@@ -55,7 +56,10 @@ describe('Pipelines stage component', () => {
   const findDropdownToggle = () => wrapper.find('button.dropdown-toggle');
   const findDropdownMenu = () =>
     wrapper.find('[data-testid="mini-pipeline-graph-dropdown-menu-list"]');
+  const findDropdownMenuTitle = () =>
+    wrapper.find('[data-testid="pipeline-stage-dropdown-menu-title"]');
   const findMergeTrainWarning = () => wrapper.find('[data-testid="warning-message-merge-trains"]');
+  const findLoadingState = () => wrapper.find('[data-testid="pipeline-stage-loading-state"]');
 
   const openStageDropdown = () => {
     findDropdownToggle().trigger('click');
@@ -64,6 +68,27 @@ describe('Pipelines stage component', () => {
     });
   };
 
+  describe('loading state', () => {
+    beforeEach(async () => {
+      createComponent({ updateDropdown: true });
+
+      mock.onGet(dropdownPath).reply(200, stageReply);
+
+      await openStageDropdown();
+    });
+
+    it('displays loading state while jobs are being fetched', () => {
+      expect(findLoadingState().exists()).toBe(true);
+      expect(findLoadingState().text()).toBe(PipelineStage.i18n.loadingText);
+    });
+
+    it('does not display loading state after jobs have been fetched', async () => {
+      await waitForPromises();
+
+      expect(findLoadingState().exists()).toBe(false);
+    });
+  });
+
   describe('default appearance', () => {
     beforeEach(() => {
       createComponent();
@@ -78,6 +103,17 @@ describe('Pipelines stage component', () => {
       expect(findDropdownToggle().exists()).toBe(true);
       expect(findCiIcon().exists()).toBe(true);
     });
+
+    it('should render a borderless ci-icon', () => {
+      expect(findCiIcon().exists()).toBe(true);
+      expect(findCiIcon().props('isBorderless')).toBe(true);
+      expect(findCiIcon().classes('borderless')).toBe(true);
+    });
+
+    it('should render a ci-icon with a custom border class', () => {
+      expect(findCiIcon().exists()).toBe(true);
+      expect(findCiIcon().classes('gl-border')).toBe(true);
+    });
   });
 
   describe('when update dropdown is changed', () => {
@@ -97,6 +133,7 @@ describe('Pipelines stage component', () => {
 
     it('should render the received data and emit `clickedDropdown` event', async () => {
       expect(findDropdownMenu().text()).toContain(stageReply.latest_statuses[0].name);
+      expect(findDropdownMenuTitle().text()).toContain(stageReply.name);
       expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown');
     });