diff options
Diffstat (limited to 'spec/frontend/jira_connect/subscriptions')
5 files changed, 117 insertions, 102 deletions
diff --git a/spec/frontend/jira_connect/subscriptions/components/app_spec.js b/spec/frontend/jira_connect/subscriptions/components/app_spec.js index 15a7e2e4ea0..26a9d07321c 100644 --- a/spec/frontend/jira_connect/subscriptions/components/app_spec.js +++ b/spec/frontend/jira_connect/subscriptions/components/app_spec.js @@ -50,18 +50,6 @@ describe('JiraConnectApp', () => { jest.spyOn(AccessorUtilities, 'canUseCrypto').mockReturnValue(true); }); - it('renders UserLink component', () => { - createComponent(); - - const userLink = findUserLink(); - expect(userLink.exists()).toBe(true); - expect(userLink.props()).toEqual({ - hasSubscriptions: true, - user: null, - userSignedIn: false, - }); - }); - it('renders only Jira Connect app', () => { createComponent(); @@ -79,12 +67,12 @@ describe('JiraConnectApp', () => { }); describe.each` - scenario | currentUser | shouldRenderSignInPage | shouldRenderSubscriptionsPage - ${'user is not signed in'} | ${undefined} | ${true} | ${false} - ${'user is signed in'} | ${mockCurrentUser} | ${false} | ${true} + scenario | currentUser | expectUserLink | expectSignInPage | expectSubscriptionsPage + ${'user is not signed in'} | ${undefined} | ${false} | ${true} | ${false} + ${'user is signed in'} | ${mockCurrentUser} | ${true} | ${false} | ${true} `( 'when $scenario', - ({ currentUser, shouldRenderSignInPage, shouldRenderSubscriptionsPage }) => { + ({ currentUser, expectUserLink, expectSignInPage, expectSubscriptionsPage }) => { beforeEach(() => { createComponent({ initialState: { @@ -93,18 +81,23 @@ describe('JiraConnectApp', () => { }); }); - it(`${shouldRenderSignInPage ? 'renders' : 'does not render'} sign in page`, () => { - expect(findSignInPage().isVisible()).toBe(shouldRenderSignInPage); - if (shouldRenderSignInPage) { + it(`${expectUserLink ? 'renders' : 'does not render'} user link`, () => { + expect(findUserLink().exists()).toBe(expectUserLink); + if (expectUserLink) { + expect(findUserLink().props('user')).toBe(mockCurrentUser); + } + }); + + it(`${expectSignInPage ? 'renders' : 'does not render'} sign in page`, () => { + expect(findSignInPage().isVisible()).toBe(expectSignInPage); + if (expectSignInPage) { expect(findSignInPage().props('hasSubscriptions')).toBe(true); } }); - it(`${ - shouldRenderSubscriptionsPage ? 'renders' : 'does not render' - } subscriptions page`, () => { - expect(findSubscriptionsPage().exists()).toBe(shouldRenderSubscriptionsPage); - if (shouldRenderSubscriptionsPage) { + it(`${expectSubscriptionsPage ? 'renders' : 'does not render'} subscriptions page`, () => { + expect(findSubscriptionsPage().exists()).toBe(expectSubscriptionsPage); + if (expectSubscriptionsPage) { expect(findSubscriptionsPage().props('hasSubscriptions')).toBe(true); } }); diff --git a/spec/frontend/jira_connect/subscriptions/components/user_link_spec.js b/spec/frontend/jira_connect/subscriptions/components/user_link_spec.js index a10e352ed85..77bc1d2004c 100644 --- a/spec/frontend/jira_connect/subscriptions/components/user_link_spec.js +++ b/spec/frontend/jira_connect/subscriptions/components/user_link_spec.js @@ -1,6 +1,5 @@ import { GlSprintf } from '@gitlab/ui'; import UserLink from '~/jira_connect/subscriptions/components/user_link.vue'; -import SignInOauthButton from '~/jira_connect/subscriptions/components/sign_in_oauth_button.vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; @@ -13,42 +12,18 @@ describe('UserLink', () => { provide, stubs: { GlSprintf, - SignInOauthButton, }, }); }; const findGitlabUserLink = () => wrapper.findByTestId('gitlab-user-link'); const findSprintf = () => wrapper.findComponent(GlSprintf); - const findOauthButton = () => wrapper.findComponent(SignInOauthButton); - describe.each` - userSignedIn | hasSubscriptions | expectGlSprintf | expectOauthButton - ${false} | ${false} | ${false} | ${false} - ${false} | ${true} | ${false} | ${true} - ${true} | ${false} | ${true} | ${false} - ${true} | ${true} | ${true} | ${false} - `( - 'when `userSignedIn` is $userSignedIn, `hasSubscriptions` is $hasSubscriptions', - ({ userSignedIn, hasSubscriptions, expectGlSprintf, expectOauthButton }) => { - it('renders template correctly', () => { - createComponent( - { - userSignedIn, - hasSubscriptions, - }, - { - provide: { - oauthMetadata: {}, - }, - }, - ); + it('renders template correctly', () => { + createComponent(); - expect(findSprintf().exists()).toBe(expectGlSprintf); - expect(findOauthButton().exists()).toBe(expectOauthButton); - }); - }, - ); + expect(findSprintf().exists()).toBe(true); + }); describe('gitlab user link', () => { describe.each` @@ -62,14 +37,7 @@ describe('UserLink', () => { beforeEach(() => { window.gon = { current_username, relative_root_url: '' }; - createComponent( - { - userSignedIn: true, - hasSubscriptions: true, - user, - }, - { provide: { gitlabUserPath } }, - ); + createComponent({ user }, { provide: { gitlabUserPath } }); }); it(`sets href to ${expectedUserLink}`, () => { diff --git a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index_spec.js b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index_spec.js index ce6861ff460..93663319e6d 100644 --- a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index_spec.js +++ b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index_spec.js @@ -1,7 +1,6 @@ import { nextTick } from 'vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import SetupInstructions from '~/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/setup_instructions.vue'; import SignInGitlabMultiversion from '~/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index.vue'; import SignInOauthButton from '~/jira_connect/subscriptions/components/sign_in_oauth_button.vue'; import VersionSelectForm from '~/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form.vue'; @@ -23,7 +22,6 @@ describe('SignInGitlabMultiversion', () => { const mockBasePath = 'gitlab.mycompany.com'; - const findSetupInstructions = () => wrapper.findComponent(SetupInstructions); const findSignInOauthButton = () => wrapper.findComponent(SignInOauthButton); const findVersionSelectForm = () => wrapper.findComponent(VersionSelectForm); const findSubtitle = () => wrapper.findByTestId('subtitle'); @@ -68,28 +66,13 @@ describe('SignInGitlabMultiversion', () => { expect(findSubtitle().text()).toBe(SignInGitlabMultiversion.i18n.signInSubtitle); }); - it('renders setup instructions', () => { - expect(findSetupInstructions().exists()).toBe(true); + it('renders sign in button', () => { + expect(findSignInOauthButton().props('gitlabBasePath')).toBe(mockBasePath); }); it('calls setApiBaseURL with correct params', () => { expect(setApiBaseURL).toHaveBeenCalledWith(mockBasePath); }); - - describe('when SetupInstructions emits `next` event', () => { - beforeEach(async () => { - findSetupInstructions().vm.$emit('next'); - await nextTick(); - }); - - it('renders sign in button', () => { - expect(findSignInOauthButton().props('gitlabBasePath')).toBe(mockBasePath); - }); - - it('hides setup instructions', () => { - expect(findSetupInstructions().exists()).toBe(false); - }); - }); }); describe('when on GitLab.com', () => { @@ -98,10 +81,6 @@ describe('SignInGitlabMultiversion', () => { createComponent(); }); - it('does not render setup instructions', () => { - expect(findSetupInstructions().exists()).toBe(false); - }); - it('renders sign in button', () => { expect(findSignInOauthButton().props('gitlabBasePath')).toBe(GITLAB_COM_BASE_PATH); }); diff --git a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/setup_instructions_spec.js b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/setup_instructions_spec.js index 5496cf008c5..40ea6058c70 100644 --- a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/setup_instructions_spec.js +++ b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/setup_instructions_spec.js @@ -7,8 +7,9 @@ import SetupInstructions from '~/jira_connect/subscriptions/pages/sign_in/sign_i describe('SetupInstructions', () => { let wrapper; - const findGlButton = () => wrapper.findComponent(GlButton); const findGlLink = () => wrapper.findComponent(GlLink); + const findBackButton = () => wrapper.findAllComponents(GlButton).at(0); + const findNextButton = () => wrapper.findAllComponents(GlButton).at(1); const createComponent = () => { wrapper = shallowMount(SetupInstructions); @@ -23,12 +24,23 @@ describe('SetupInstructions', () => { expect(findGlLink().attributes('href')).toBe(OAUTH_SELF_MANAGED_DOC_LINK); }); - describe('when button is clicked', () => { + describe('when "Next" button is clicked', () => { it('emits "next" event', () => { expect(wrapper.emitted('next')).toBeUndefined(); - findGlButton().vm.$emit('click'); + findNextButton().vm.$emit('click'); expect(wrapper.emitted('next')).toHaveLength(1); + expect(wrapper.emitted('back')).toBeUndefined(); + }); + }); + + describe('when "Back" button is clicked', () => { + it('emits "back" event', () => { + expect(wrapper.emitted('back')).toBeUndefined(); + findBackButton().vm.$emit('click'); + + expect(wrapper.emitted('back')).toHaveLength(1); + expect(wrapper.emitted('next')).toBeUndefined(); }); }); }); diff --git a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form_spec.js b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form_spec.js index 428aa1d734b..2a08547b048 100644 --- a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form_spec.js +++ b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form_spec.js @@ -1,8 +1,9 @@ import { GlFormInput, GlFormRadioGroup, GlForm } from '@gitlab/ui'; -import { nextTick } from 'vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import VersionSelectForm from '~/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form.vue'; +import SelfManagedAlert from '~/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/self_managed_alert.vue'; +import SetupInstructions from '~/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/setup_instructions.vue'; describe('VersionSelectForm', () => { let wrapper; @@ -10,26 +11,53 @@ describe('VersionSelectForm', () => { const findFormRadioGroup = () => wrapper.findComponent(GlFormRadioGroup); const findForm = () => wrapper.findComponent(GlForm); const findInput = () => wrapper.findComponent(GlFormInput); + const findSelfManagedAlert = () => wrapper.findComponent(SelfManagedAlert); + const findSetupInstructions = () => wrapper.findComponent(SetupInstructions); + const findBackButton = () => wrapper.findByTestId('back-button'); + const findSubmitButton = () => wrapper.findByTestId('submit-button'); const submitForm = () => findForm().vm.$emit('submit', new Event('submit')); + const expectSelfManagedFlowAtStep = (step) => { + // step 0 is for SaaS which doesn't have any of the self-managed elements + const expectSelfManagedAlert = step === 1; + const expectSetupInstructions = step === 2; + const expectSelfManagedInput = step === 3; + + it(`${expectSelfManagedAlert ? 'renders' : 'does not render'} self-managed alert`, () => { + expect(findSelfManagedAlert().exists()).toBe(expectSelfManagedAlert); + }); + + it(`${expectSetupInstructions ? 'renders' : 'does not render'} setup instructions`, () => { + expect(findSetupInstructions().exists()).toBe(expectSetupInstructions); + }); + + it(`${ + expectSelfManagedInput ? 'renders' : 'does not render' + } self-managed instance URL input`, () => { + expect(findInput().exists()).toBe(expectSelfManagedInput); + }); + }; + const createComponent = () => { wrapper = shallowMountExtended(VersionSelectForm); }; - describe('default state', () => { + describe('when "SaaS" radio option is selected (default state)', () => { beforeEach(() => { createComponent(); }); - it('selects saas radio option by default', () => { + it('selects "saas" radio option by default', () => { expect(findFormRadioGroup().vm.$attrs.checked).toBe(VersionSelectForm.radioOptions.saas); }); - it('does not render instance input', () => { - expect(findInput().exists()).toBe(false); + it('renders submit button as "Save"', () => { + expect(findSubmitButton().text()).toBe(VersionSelectForm.i18n.buttonSave); }); + expectSelfManagedFlowAtStep(0); + describe('when form is submitted', () => { it('emits "submit" event with gitlab.com as the payload', () => { submitForm(); @@ -39,26 +67,61 @@ describe('VersionSelectForm', () => { }); }); - describe('when "self-managed" radio option is selected', () => { - beforeEach(async () => { + describe('when "self-managed" radio option is selected (step 1 of 3)', () => { + beforeEach(() => { createComponent(); findFormRadioGroup().vm.$emit('input', VersionSelectForm.radioOptions.selfManaged); - await nextTick(); }); - it('reveals the self-managed input field', () => { - expect(findInput().exists()).toBe(true); + it('renders submit button as "Next"', () => { + expect(findSubmitButton().text()).toBe(VersionSelectForm.i18n.buttonNext); }); - describe('when form is submitted', () => { - it('emits "submit" event with the input field value as the payload', () => { - const mockInstanceUrl = 'https://gitlab.example.com'; + expectSelfManagedFlowAtStep(1); - findInput().vm.$emit('input', mockInstanceUrl); + describe('when user clicks "Next" button (next to step 2 of 3)', () => { + beforeEach(() => { submitForm(); + }); + + expectSelfManagedFlowAtStep(2); + + describe('when SetupInstructions emits `next` event (next to step 3 of 3)', () => { + beforeEach(() => { + findSetupInstructions().vm.$emit('next'); + }); + + expectSelfManagedFlowAtStep(3); + + describe('when form is submitted', () => { + it('emits "submit" event with the input field value as the payload', () => { + const mockInstanceUrl = 'https://gitlab.example.com'; + + findInput().vm.$emit('input', mockInstanceUrl); + submitForm(); + + expect(wrapper.emitted('submit')[0][0]).toBe(mockInstanceUrl); + }); + }); + + describe('when back button is clicked', () => { + beforeEach(() => { + findBackButton().vm.$emit('click', { + preventDefault: jest.fn(), // preventDefault is needed to prevent form submission + }); + }); + + expectSelfManagedFlowAtStep(1); + }); + }); + + describe('when SetupInstructions emits `back` event (back to step 1 of 3)', () => { + beforeEach(() => { + findSetupInstructions().vm.$emit('back'); + }); - expect(wrapper.emitted('submit')[0][0]).toBe(mockInstanceUrl); + expectSelfManagedFlowAtStep(1); }); }); }); |