diff options
Diffstat (limited to 'spec/frontend/jira_connect/subscriptions/components/app_spec.js')
| -rw-r--r-- | spec/frontend/jira_connect/subscriptions/components/app_spec.js | 176 |
1 files changed, 100 insertions, 76 deletions
diff --git a/spec/frontend/jira_connect/subscriptions/components/app_spec.js b/spec/frontend/jira_connect/subscriptions/components/app_spec.js index 8915a7697a5..8e464968453 100644 --- a/spec/frontend/jira_connect/subscriptions/components/app_spec.js +++ b/spec/frontend/jira_connect/subscriptions/components/app_spec.js @@ -1,14 +1,17 @@ -import { GlAlert, GlButton, GlModal, GlLink } from '@gitlab/ui'; +import { GlAlert, GlLink, GlEmptyState } from '@gitlab/ui'; import { mount, shallowMount } from '@vue/test-utils'; import JiraConnectApp from '~/jira_connect/subscriptions/components/app.vue'; +import AddNamespaceButton from '~/jira_connect/subscriptions/components/add_namespace_button.vue'; +import SignInButton from '~/jira_connect/subscriptions/components/sign_in_button.vue'; +import SubscriptionsList from '~/jira_connect/subscriptions/components/subscriptions_list.vue'; import createStore from '~/jira_connect/subscriptions/store'; import { SET_ALERT } from '~/jira_connect/subscriptions/store/mutation_types'; import { __ } from '~/locale'; +import { mockSubscription } from '../mock_data'; jest.mock('~/jira_connect/subscriptions/utils', () => ({ retrieveAlert: jest.fn().mockReturnValue({ message: 'error message' }), - getLocation: jest.fn(), })); describe('JiraConnectApp', () => { @@ -17,8 +20,10 @@ describe('JiraConnectApp', () => { const findAlert = () => wrapper.findComponent(GlAlert); const findAlertLink = () => findAlert().findComponent(GlLink); - const findGlButton = () => wrapper.findComponent(GlButton); - const findGlModal = () => wrapper.findComponent(GlModal); + const findSignInButton = () => wrapper.findComponent(SignInButton); + const findAddNamespaceButton = () => wrapper.findComponent(AddNamespaceButton); + const findSubscriptionsList = () => wrapper.findComponent(SubscriptionsList); + const findEmptyState = () => wrapper.findComponent(GlEmptyState); const createComponent = ({ provide, mountFn = shallowMount } = {}) => { store = createStore(); @@ -34,96 +39,115 @@ describe('JiraConnectApp', () => { }); describe('template', () => { - describe('when user is not logged in', () => { - beforeEach(() => { - createComponent({ - provide: { - usersPath: '/users', - }, + describe.each` + scenario | usersPath | subscriptions | expectSignInButton | expectEmptyState | expectNamespaceButton | expectSubscriptionsList + ${'user is not signed in with subscriptions'} | ${'/users'} | ${[mockSubscription]} | ${true} | ${false} | ${false} | ${true} + ${'user is not signed in without subscriptions'} | ${'/users'} | ${undefined} | ${true} | ${false} | ${false} | ${false} + ${'user is signed in with subscriptions'} | ${undefined} | ${[mockSubscription]} | ${false} | ${false} | ${true} | ${true} + ${'user is signed in without subscriptions'} | ${undefined} | ${undefined} | ${false} | ${true} | ${false} | ${false} + `( + 'when $scenario', + ({ + usersPath, + expectSignInButton, + subscriptions, + expectEmptyState, + expectNamespaceButton, + expectSubscriptionsList, + }) => { + beforeEach(() => { + createComponent({ + provide: { + usersPath, + subscriptions, + }, + }); }); - }); - it('renders "Sign in" button', () => { - expect(findGlButton().text()).toBe('Sign in to add namespaces'); - expect(findGlModal().exists()).toBe(false); - }); - }); + it(`${expectSignInButton ? 'renders' : 'does not render'} sign in button`, () => { + expect(findSignInButton().exists()).toBe(expectSignInButton); + }); - describe('when user is logged in', () => { - beforeEach(() => { - createComponent(); - }); + it(`${expectEmptyState ? 'renders' : 'does not render'} empty state`, () => { + expect(findEmptyState().exists()).toBe(expectEmptyState); + }); - it('renders "Add" button and modal', () => { - expect(findGlButton().text()).toBe('Add namespace'); - expect(findGlModal().exists()).toBe(true); - }); - }); + it(`${ + expectNamespaceButton ? 'renders' : 'does not render' + } button to add namespace`, () => { + expect(findAddNamespaceButton().exists()).toBe(expectNamespaceButton); + }); + + it(`${expectSubscriptionsList ? 'renders' : 'does not render'} subscriptions list`, () => { + expect(findSubscriptionsList().exists()).toBe(expectSubscriptionsList); + }); + }, + ); + }); - 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 () => { + 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: 'test message' }); + store.commit(SET_ALERT, { message, variant }); await wrapper.vm.$nextTick(); - findAlert().vm.$emit('dismiss'); - await wrapper.vm.$nextTick(); + const alert = findAlert(); - expect(findAlert().exists()).toBe(false); - }); + 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('renders link when `linkUrl` is set', async () => { - createComponent({ mountFn: mount }); + it('hides alert on @dismiss event', async () => { + createComponent(); - store.commit(SET_ALERT, { - message: __('test message %{linkStart}test link%{linkEnd}'), - linkUrl: 'https://gitlab.com', - }); - await wrapper.vm.$nextTick(); + store.commit(SET_ALERT, { message: 'test message' }); + await wrapper.vm.$nextTick(); + + findAlert().vm.$emit('dismiss'); + await wrapper.vm.$nextTick(); + + expect(findAlert().exists()).toBe(false); + }); - const alertLink = findAlertLink(); + it('renders link when `linkUrl` is set', async () => { + createComponent({ mountFn: mount }); - expect(alertLink.exists()).toBe(true); - expect(alertLink.text()).toContain('test link'); - expect(alertLink.attributes('href')).toBe('https://gitlab.com'); + store.commit(SET_ALERT, { + message: __('test message %{linkStart}test link%{linkEnd}'), + linkUrl: 'https://gitlab.com', }); + await wrapper.vm.$nextTick(); - describe('when alert is set in localStoage', () => { - it('renders alert on mount', () => { - createComponent(); + const alertLink = findAlertLink(); - const alert = findAlert(); + expect(alertLink.exists()).toBe(true); + expect(alertLink.text()).toContain('test link'); + expect(alertLink.attributes('href')).toBe('https://gitlab.com'); + }); - expect(alert.exists()).toBe(true); - expect(alert.html()).toContain('error message'); - }); + describe('when alert is set in localStoage', () => { + it('renders alert on mount', () => { + createComponent(); + + const alert = findAlert(); + + expect(alert.exists()).toBe(true); + expect(alert.html()).toContain('error message'); }); }); }); |