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);
+    });
   });
 });