diff options
Diffstat (limited to 'spec/frontend/profile/preferences/components/profile_preferences_spec.js')
-rw-r--r-- | spec/frontend/profile/preferences/components/profile_preferences_spec.js | 142 |
1 files changed, 124 insertions, 18 deletions
diff --git a/spec/frontend/profile/preferences/components/profile_preferences_spec.js b/spec/frontend/profile/preferences/components/profile_preferences_spec.js index fcc27d8faaf..82c41178410 100644 --- a/spec/frontend/profile/preferences/components/profile_preferences_spec.js +++ b/spec/frontend/profile/preferences/components/profile_preferences_spec.js @@ -1,27 +1,58 @@ +import { GlButton } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; - -import ProfilePreferences from '~/profile/preferences/components/profile_preferences.vue'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import IntegrationView from '~/profile/preferences/components/integration_view.vue'; -import { integrationViews, userFields } from '../mock_data'; +import ProfilePreferences from '~/profile/preferences/components/profile_preferences.vue'; +import { i18n } from '~/profile/preferences/constants'; +import { integrationViews, userFields, bodyClasses } from '../mock_data'; + +const expectedUrl = '/foo'; describe('ProfilePreferences component', () => { let wrapper; const defaultProvide = { integrationViews: [], userFields, + bodyClasses, + themes: [{ id: 1, css_class: 'foo' }], + profilePreferencesPath: '/update-profile', + formEl: document.createElement('form'), }; function createComponent(options = {}) { - const { props = {}, provide = {} } = options; - return shallowMount(ProfilePreferences, { - provide: { - ...defaultProvide, - ...provide, - }, - propsData: props, - }); + const { props = {}, provide = {}, attachTo } = options; + return extendedWrapper( + shallowMount(ProfilePreferences, { + provide: { + ...defaultProvide, + ...provide, + }, + propsData: props, + attachTo, + }), + ); + } + + function findIntegrationsDivider() { + return wrapper.findByTestId('profile-preferences-integrations-rule'); + } + + function findIntegrationsHeading() { + return wrapper.findByTestId('profile-preferences-integrations-heading'); + } + + function findSubmitButton() { + return wrapper.findComponent(GlButton); } + function findFlashError() { + return document.querySelector('.flash-container .flash-text'); + } + + beforeEach(() => { + setFixtures('<div class="flash-container"></div>'); + }); + afterEach(() => { wrapper.destroy(); wrapper = null; @@ -30,8 +61,8 @@ describe('ProfilePreferences component', () => { it('should not render Integrations section', () => { wrapper = createComponent(); const views = wrapper.findAll(IntegrationView); - const divider = wrapper.find('[data-testid="profile-preferences-integrations-rule"]'); - const heading = wrapper.find('[data-testid="profile-preferences-integrations-heading"]'); + const divider = findIntegrationsDivider(); + const heading = findIntegrationsHeading(); expect(divider.exists()).toBe(false); expect(heading.exists()).toBe(false); @@ -40,8 +71,8 @@ describe('ProfilePreferences component', () => { it('should render Integration section', () => { wrapper = createComponent({ provide: { integrationViews } }); - const divider = wrapper.find('[data-testid="profile-preferences-integrations-rule"]'); - const heading = wrapper.find('[data-testid="profile-preferences-integrations-heading"]'); + const divider = findIntegrationsDivider(); + const heading = findIntegrationsHeading(); const views = wrapper.findAll(IntegrationView); expect(divider.exists()).toBe(true); @@ -49,9 +80,84 @@ describe('ProfilePreferences component', () => { expect(views).toHaveLength(integrationViews.length); }); - it('should render ProfilePreferences properly', () => { - wrapper = createComponent({ provide: { integrationViews } }); + describe('form submit', () => { + let form; - expect(wrapper.element).toMatchSnapshot(); + beforeEach(() => { + const div = document.createElement('div'); + div.classList.add('container-fluid'); + document.body.appendChild(div); + document.body.classList.add('content-wrapper'); + + form = document.createElement('form'); + form.setAttribute('url', expectedUrl); + form.setAttribute('method', 'put'); + + const input = document.createElement('input'); + input.setAttribute('name', 'user[theme_id]'); + input.setAttribute('type', 'radio'); + input.setAttribute('value', '1'); + input.setAttribute('checked', 'checked'); + form.appendChild(input); + + wrapper = createComponent({ provide: { formEl: form }, attachTo: document.body }); + + const beforeSendEvent = new CustomEvent('ajax:beforeSend'); + form.dispatchEvent(beforeSendEvent); + }); + + it('disables the submit button', async () => { + await wrapper.vm.$nextTick(); + const button = findSubmitButton(); + expect(button.props('disabled')).toBe(true); + }); + + it('success re-enables the submit button', async () => { + const successEvent = new CustomEvent('ajax:success'); + form.dispatchEvent(successEvent); + + await wrapper.vm.$nextTick(); + const button = findSubmitButton(); + expect(button.props('disabled')).toBe(false); + }); + + it('error re-enables the submit button', async () => { + const errorEvent = new CustomEvent('ajax:error'); + form.dispatchEvent(errorEvent); + + await wrapper.vm.$nextTick(); + const button = findSubmitButton(); + expect(button.props('disabled')).toBe(false); + }); + + it('displays the default success message', () => { + const successEvent = new CustomEvent('ajax:success'); + form.dispatchEvent(successEvent); + + expect(findFlashError().innerText.trim()).toEqual(i18n.defaultSuccess); + }); + + it('displays the custom success message', () => { + const message = 'foo'; + const successEvent = new CustomEvent('ajax:success', { detail: [{ message }] }); + form.dispatchEvent(successEvent); + + expect(findFlashError().innerText.trim()).toEqual(message); + }); + + it('displays the default error message', () => { + const errorEvent = new CustomEvent('ajax:error'); + form.dispatchEvent(errorEvent); + + expect(findFlashError().innerText.trim()).toEqual(i18n.defaultError); + }); + + it('displays the custom error message', () => { + const message = 'bar'; + const errorEvent = new CustomEvent('ajax:error', { detail: [{ message }] }); + form.dispatchEvent(errorEvent); + + expect(findFlashError().innerText.trim()).toEqual(message); + }); }); }); |