2 files changed, 82 insertions, 36 deletions

diff --git a/spec/frontend/jira_connect/components/app_spec.js b/spec/frontend/jira_connect/components/app_spec.js
index d11b66b2089..e2a5cd1be9d 100644
--- a/spec/frontend/jira_connect/components/app_spec.js
+++ b/spec/frontend/jira_connect/components/app_spec.js
@@ -1,10 +1,12 @@
-import { GlAlert, GlButton, GlModal } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlButton, GlModal, GlLink } from '@gitlab/ui';
+import { mount, shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 import JiraConnectApp from '~/jira_connect/components/app.vue';
 import createStore from '~/jira_connect/store';
-import { SET_ERROR_MESSAGE } from '~/jira_connect/store/mutation_types';
+import { SET_ALERT } from '~/jira_connect/store/mutation_types';
+import { persistAlert } from '~/jira_connect/utils';
+import { __ } from '~/locale';
 
 jest.mock('~/jira_connect/api');
 
@@ -13,21 +15,19 @@ describe('JiraConnectApp', () => {
   let store;
 
   const findAlert = () => wrapper.findComponent(GlAlert);
+  const findAlertLink = () => findAlert().find(GlLink);
   const findGlButton = () => wrapper.findComponent(GlButton);
   const findGlModal = () => wrapper.findComponent(GlModal);
   const findHeader = () => wrapper.findByTestId('new-jira-connect-ui-heading');
   const findHeaderText = () => findHeader().text();
 
-  const createComponent = (options = {}) => {
+  const createComponent = ({ provide, mountFn = shallowMount } = {}) => {
     store = createStore();
 
     wrapper = extendedWrapper(
-      shallowMount(JiraConnectApp, {
+      mountFn(JiraConnectApp, {
         store,
-        provide: {
-          glFeatures: { newJiraConnectUi: true },
-        },
-        ...options,
+        provide,
       }),
     );
   };
@@ -49,7 +49,6 @@ describe('JiraConnectApp', () => {
       beforeEach(() => {
         createComponent({
           provide: {
-            glFeatures: { newJiraConnectUi: true },
             usersPath: '/users',
           },
         });
@@ -72,37 +71,72 @@ describe('JiraConnectApp', () => {
       });
     });
 
-    describe('newJiraConnectUi is false', () => {
-      it('does not render new UI', () => {
-        createComponent({
-          provide: {
-            glFeatures: { newJiraConnectUi: false },
-          },
-        });
+    describe('alert', () => {
+      it.each`
+        message          | variant      | alertShouldRender
+        ${'Test error'}  | ${'danger'}  | ${true}
+        ${'Test notice'} | ${'info'}    | ${true}
+        ${''}            | ${undefined} | ${false}
+        ${undefined}     | ${undefined} | ${false}
+      `(
+        'renders correct alert when message is `$message` and variant is `$variant`',
+        async ({ message, alertShouldRender, variant }) => {
+          createComponent();
+
+          store.commit(SET_ALERT, { message, variant });
+          await wrapper.vm.$nextTick();
+
+          const alert = findAlert();
+
+          expect(alert.exists()).toBe(alertShouldRender);
+          if (alertShouldRender) {
+            expect(alert.isVisible()).toBe(alertShouldRender);
+            expect(alert.html()).toContain(message);
+            expect(alert.props('variant')).toBe(variant);
+            expect(findAlertLink().exists()).toBe(false);
+          }
+        },
+      );
+
+      it('hides alert on @dismiss event', async () => {
+        createComponent();
+
+        store.commit(SET_ALERT, { message: 'test message' });
+        await wrapper.vm.$nextTick();
+
+        findAlert().vm.$emit('dismiss');
+        await wrapper.vm.$nextTick();
 
-        expect(findHeader().exists()).toBe(false);
+        expect(findAlert().exists()).toBe(false);
       });
-    });
 
-    it.each`
-      errorMessage    | errorShouldRender
-      ${'Test error'} | ${true}
-      ${''}           | ${false}
-      ${undefined}    | ${false}
-    `(
-      'renders correct alert when errorMessage is `$errorMessage`',
-      async ({ errorMessage, errorShouldRender }) => {
-        createComponent();
+      it('renders link when `linkUrl` is set', async () => {
+        createComponent({ mountFn: mount });
 
-        store.commit(SET_ERROR_MESSAGE, errorMessage);
+        store.commit(SET_ALERT, {
+          message: __('test message %{linkStart}test link%{linkEnd}'),
+          linkUrl: 'https://gitlab.com',
+        });
         await wrapper.vm.$nextTick();
 
-        expect(findAlert().exists()).toBe(errorShouldRender);
-        if (errorShouldRender) {
-          expect(findAlert().isVisible()).toBe(errorShouldRender);
-          expect(findAlert().html()).toContain(errorMessage);
-        }
-      },
-    );
+        const alertLink = findAlertLink();
+
+        expect(alertLink.exists()).toBe(true);
+        expect(alertLink.text()).toContain('test link');
+        expect(alertLink.attributes('href')).toBe('https://gitlab.com');
+      });
+
+      describe('when alert is set in localStoage', () => {
+        it('renders alert on mount', () => {
+          persistAlert({ message: 'error message' });
+          createComponent();
+
+          const alert = findAlert();
+
+          expect(alert.exists()).toBe(true);
+          expect(alert.html()).toContain('error message');
+        });
+      });
+    });
   });
 });
diff --git a/spec/frontend/jira_connect/components/groups_list_item_spec.js b/spec/frontend/jira_connect/components/groups_list_item_spec.js
index bb247534aca..da16223255c 100644
--- a/spec/frontend/jira_connect/components/groups_list_item_spec.js
+++ b/spec/frontend/jira_connect/components/groups_list_item_spec.js
@@ -5,8 +5,11 @@ import waitForPromises from 'helpers/wait_for_promises';
 
 import * as JiraConnectApi from '~/jira_connect/api';
 import GroupsListItem from '~/jira_connect/components/groups_list_item.vue';
+import { persistAlert } from '~/jira_connect/utils';
 import { mockGroup1 } from '../mock_data';
 
+jest.mock('~/jira_connect/utils');
+
 describe('GroupsListItem', () => {
   let wrapper;
   const mockSubscriptionPath = 'subscriptionPath';
@@ -85,7 +88,16 @@ describe('GroupsListItem', () => {
 
       expect(findLinkButton().props('loading')).toBe(true);
 
+      await waitForPromises();
+
       expect(addSubscriptionSpy).toHaveBeenCalledWith(mockSubscriptionPath, mockGroup1.full_path);
+      expect(persistAlert).toHaveBeenCalledWith({
+        linkUrl: '/help/integration/jira_development_panel.html#usage',
+        message:
+          'You should now see GitLab.com activity inside your Jira Cloud issues. %{linkStart}Learn more%{linkEnd}',
+        title: 'Namespace successfully linked',
+        variant: 'success',
+      });
     });
 
     describe('when request is successful', () => {