Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42

1 files changed, 51 insertions, 0 deletions

diff --git a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
index c50cf7cb076..5aba6982886 100644
--- a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
@@ -1,13 +1,19 @@
+import { GlBadge, GlLink, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import { securityReportMergeRequestDownloadPathsQueryResponse } from 'jest/vue_shared/security_reports/mock_data';
 import axios from '~/lib/utils/axios_utils';
 import { setFaviconOverlay } from '~/lib/utils/favicon';
 import notify from '~/lib/utils/notify';
 import SmartInterval from '~/smart_interval';
+import {
+  registerExtension,
+  registeredExtensions,
+} from '~/vue_merge_request_widget/components/extensions';
 import { SUCCESS } from '~/vue_merge_request_widget/components/deployment/constants';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import MrWidgetOptions from '~/vue_merge_request_widget/mr_widget_options.vue';
@@ -15,6 +21,7 @@ import { stateKey } from '~/vue_merge_request_widget/stores/state_maps';
 import securityReportMergeRequestDownloadPathsQuery from '~/vue_shared/security_reports/graphql/queries/security_report_merge_request_download_paths.query.graphql';
 import { faviconDataUrl, overlayDataUrl } from '../lib/utils/mock_data';
 import mockData from './mock_data';
+import testExtension from './test_extension';
 
 jest.mock('~/smart_interval');
 
@@ -879,4 +886,48 @@ describe('MrWidgetOptions', () => {
       });
     });
   });
+
+  describe('mock extension', () => {
+    beforeEach(() => {
+      registerExtension(testExtension);
+
+      createComponent();
+    });
+
+    afterEach(() => {
+      registeredExtensions.extensions = [];
+    });
+
+    it('renders collapsed data', async () => {
+      await waitForPromises();
+
+      expect(wrapper.text()).toContain('Test extension summary count: 1');
+    });
+
+    it('renders full data', async () => {
+      await waitForPromises();
+
+      wrapper
+        .find('[data-testid="widget-extension"] [data-testid="toggle-button"]')
+        .trigger('click');
+
+      await Vue.nextTick();
+
+      const collapsedSection = wrapper.find('[data-testid="widget-extension-collapsed-section"]');
+      expect(collapsedSection.exists()).toBe(true);
+      expect(collapsedSection.text()).toContain('Hello world');
+
+      // Renders icon in the row
+      expect(collapsedSection.find(GlIcon).exists()).toBe(true);
+      expect(collapsedSection.find(GlIcon).props('name')).toBe('status-failed');
+
+      // Renders badge in the row
+      expect(collapsedSection.find(GlBadge).exists()).toBe(true);
+      expect(collapsedSection.find(GlBadge).text()).toBe('Closed');
+
+      // Renders a link in the row
+      expect(collapsedSection.find(GlLink).exists()).toBe(true);
+      expect(collapsedSection.find(GlLink).text()).toBe('GitLab.com');
+    });
+  });
 });