1 files changed, 125 insertions, 22 deletions

diff --git a/spec/frontend/profile/preferences/components/profile_preferences_spec.js b/spec/frontend/profile/preferences/components/profile_preferences_spec.js
index 82c41178410..9e6f5594d26 100644
--- a/spec/frontend/profile/preferences/components/profile_preferences_spec.js
+++ b/spec/frontend/profile/preferences/components/profile_preferences_spec.js
@@ -1,10 +1,19 @@
 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import IntegrationView from '~/profile/preferences/components/integration_view.vue';
 import ProfilePreferences from '~/profile/preferences/components/profile_preferences.vue';
 import { i18n } from '~/profile/preferences/constants';
-import { integrationViews, userFields, bodyClasses } from '../mock_data';
+import {
+  integrationViews,
+  userFields,
+  bodyClasses,
+  themes,
+  lightModeThemeId1,
+  darkModeThemeId,
+  lightModeThemeId2,
+} from '../mock_data';
 
 const expectedUrl = '/foo';
 
@@ -14,7 +23,7 @@ describe('ProfilePreferences component', () => {
     integrationViews: [],
     userFields,
     bodyClasses,
-    themes: [{ id: 1, css_class: 'foo' }],
+    themes,
     profilePreferencesPath: '/update-profile',
     formEl: document.createElement('form'),
   };
@@ -49,6 +58,30 @@ describe('ProfilePreferences component', () => {
     return document.querySelector('.flash-container .flash-text');
   }
 
+  function createThemeInput(themeId = lightModeThemeId1) {
+    const input = document.createElement('input');
+    input.setAttribute('name', 'user[theme_id]');
+    input.setAttribute('type', 'radio');
+    input.setAttribute('value', themeId.toString());
+    input.setAttribute('checked', 'checked');
+    return input;
+  }
+
+  function createForm(themeInput = createThemeInput()) {
+    const form = document.createElement('form');
+    form.setAttribute('url', expectedUrl);
+    form.setAttribute('method', 'put');
+    form.appendChild(themeInput);
+    return form;
+  }
+
+  function setupBody() {
+    const div = document.createElement('div');
+    div.classList.add('container-fluid');
+    document.body.appendChild(div);
+    document.body.classList.add('content-wrapper');
+  }
+
   beforeEach(() => {
     setFixtures('<div class="flash-container"></div>');
   });
@@ -84,30 +117,15 @@ describe('ProfilePreferences component', () => {
     let form;
 
     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);
-
+      setupBody();
+      form = createForm();
       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();
+      await nextTick();
       const button = findSubmitButton();
       expect(button.props('disabled')).toBe(true);
     });
@@ -116,7 +134,7 @@ describe('ProfilePreferences component', () => {
       const successEvent = new CustomEvent('ajax:success');
       form.dispatchEvent(successEvent);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       const button = findSubmitButton();
       expect(button.props('disabled')).toBe(false);
     });
@@ -125,7 +143,7 @@ describe('ProfilePreferences component', () => {
       const errorEvent = new CustomEvent('ajax:error');
       form.dispatchEvent(errorEvent);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       const button = findSubmitButton();
       expect(button.props('disabled')).toBe(false);
     });
@@ -160,4 +178,89 @@ describe('ProfilePreferences component', () => {
       expect(findFlashError().innerText.trim()).toEqual(message);
     });
   });
+
+  describe('theme changes', () => {
+    const { location } = window;
+
+    let themeInput;
+    let form;
+
+    function setupWrapper() {
+      wrapper = createComponent({ provide: { formEl: form }, attachTo: document.body });
+    }
+
+    function selectThemeId(themeId) {
+      themeInput.setAttribute('value', themeId.toString());
+    }
+
+    function dispatchBeforeSendEvent() {
+      const beforeSendEvent = new CustomEvent('ajax:beforeSend');
+      form.dispatchEvent(beforeSendEvent);
+    }
+
+    function dispatchSuccessEvent() {
+      const successEvent = new CustomEvent('ajax:success');
+      form.dispatchEvent(successEvent);
+    }
+
+    beforeAll(() => {
+      delete window.location;
+      window.location = {
+        ...location,
+        reload: jest.fn(),
+      };
+    });
+
+    afterAll(() => {
+      window.location = location;
+    });
+
+    beforeEach(() => {
+      setupBody();
+      themeInput = createThemeInput();
+      form = createForm(themeInput);
+    });
+
+    it('reloads the page when switching from light to dark mode', async () => {
+      selectThemeId(lightModeThemeId1);
+      setupWrapper();
+
+      selectThemeId(darkModeThemeId);
+      dispatchBeforeSendEvent();
+      await nextTick();
+
+      dispatchSuccessEvent();
+      await nextTick();
+
+      expect(window.location.reload).toHaveBeenCalledTimes(1);
+    });
+
+    it('reloads the page when switching from dark to light mode', async () => {
+      selectThemeId(darkModeThemeId);
+      setupWrapper();
+
+      selectThemeId(lightModeThemeId1);
+      dispatchBeforeSendEvent();
+      await nextTick();
+
+      dispatchSuccessEvent();
+      await nextTick();
+
+      expect(window.location.reload).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not reload the page when switching between light mode themes', async () => {
+      selectThemeId(lightModeThemeId1);
+      setupWrapper();
+
+      selectThemeId(lightModeThemeId2);
+      dispatchBeforeSendEvent();
+      await nextTick();
+
+      dispatchSuccessEvent();
+      await nextTick();
+
+      expect(window.location.reload).not.toHaveBeenCalled();
+    });
+  });
 });