debian-mirror-gitlab/spec/frontend/profile/preferences/components/profile_preferences_spec.js

164 lines
5 KiB
JavaScript
Raw Normal View History

2021-03-11 19:13:27 +05:30
import { GlButton } from '@gitlab/ui';
2021-01-29 00:20:46 +05:30
import { shallowMount } from '@vue/test-utils';
2021-03-11 19:13:27 +05:30
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
2021-01-29 00:20:46 +05:30
import IntegrationView from '~/profile/preferences/components/integration_view.vue';
2021-03-11 19:13:27 +05:30
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';
2021-01-29 00:20:46 +05:30
describe('ProfilePreferences component', () => {
let wrapper;
const defaultProvide = {
integrationViews: [],
userFields,
2021-03-11 19:13:27 +05:30
bodyClasses,
themes: [{ id: 1, css_class: 'foo' }],
profilePreferencesPath: '/update-profile',
formEl: document.createElement('form'),
2021-01-29 00:20:46 +05:30
};
function createComponent(options = {}) {
2021-03-11 19:13:27 +05:30
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);
2021-01-29 00:20:46 +05:30
}
2021-03-11 19:13:27 +05:30
function findFlashError() {
return document.querySelector('.flash-container .flash-text');
}
beforeEach(() => {
setFixtures('<div class="flash-container"></div>');
});
2021-01-29 00:20:46 +05:30
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('should not render Integrations section', () => {
wrapper = createComponent();
const views = wrapper.findAll(IntegrationView);
2021-03-11 19:13:27 +05:30
const divider = findIntegrationsDivider();
const heading = findIntegrationsHeading();
2021-01-29 00:20:46 +05:30
expect(divider.exists()).toBe(false);
expect(heading.exists()).toBe(false);
expect(views).toHaveLength(0);
});
it('should render Integration section', () => {
wrapper = createComponent({ provide: { integrationViews } });
2021-03-11 19:13:27 +05:30
const divider = findIntegrationsDivider();
const heading = findIntegrationsHeading();
2021-01-29 00:20:46 +05:30
const views = wrapper.findAll(IntegrationView);
expect(divider.exists()).toBe(true);
expect(heading.exists()).toBe(true);
expect(views).toHaveLength(integrationViews.length);
});
2021-03-11 19:13:27 +05:30
describe('form submit', () => {
let form;
2021-01-29 00:20:46 +05:30
2021-03-11 19:13:27 +05:30
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);
});
2021-01-29 00:20:46 +05:30
});
});