diff options
Diffstat (limited to 'spec/frontend/jira_connect/components/app_spec.js')
-rw-r--r-- | spec/frontend/jira_connect/components/app_spec.js | 106 |
1 files changed, 70 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'); + }); + }); + }); }); }); |