debian-mirror-gitlab/spec/frontend/badges/components/badge_form_spec.js

198 lines
5.3 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import Vue from 'vue';
2018-11-20 20:47:30 +05:30
import MockAdapter from 'axios-mock-adapter';
2020-04-08 14:13:33 +05:30
import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
2018-11-20 20:47:30 +05:30
import axios from '~/lib/utils/axios_utils';
2018-05-09 12:01:36 +05:30
import store from '~/badges/store';
2018-11-20 20:47:30 +05:30
import createEmptyBadge from '~/badges/empty_badge';
2018-05-09 12:01:36 +05:30
import BadgeForm from '~/badges/components/badge_form.vue';
2020-04-08 14:13:33 +05:30
import { DUMMY_IMAGE_URL, TEST_HOST } from 'helpers/test_constants';
2018-11-20 20:47:30 +05:30
// avoid preview background process
BadgeForm.methods.debouncedPreview = () => {};
2018-05-09 12:01:36 +05:30
describe('BadgeForm component', () => {
const Component = Vue.extend(BadgeForm);
2018-11-20 20:47:30 +05:30
let axiosMock;
2018-05-09 12:01:36 +05:30
let vm;
beforeEach(() => {
setFixtures(`
<div id="dummy-element"></div>
`);
2018-11-20 20:47:30 +05:30
axiosMock = new MockAdapter(axios);
2018-05-09 12:01:36 +05:30
});
afterEach(() => {
vm.$destroy();
2018-11-20 20:47:30 +05:30
axiosMock.restore();
2018-05-09 12:01:36 +05:30
});
describe('methods', () => {
beforeEach(() => {
vm = mountComponentWithStore(Component, {
el: '#dummy-element',
store,
props: {
isEditing: false,
},
});
});
describe('onCancel', () => {
it('calls stopEditing', () => {
2020-04-08 14:13:33 +05:30
jest.spyOn(vm, 'stopEditing').mockImplementation(() => {});
2018-05-09 12:01:36 +05:30
vm.onCancel();
expect(vm.stopEditing).toHaveBeenCalled();
});
});
2018-11-20 20:47:30 +05:30
});
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
const sharedSubmitTests = submitAction => {
2020-01-01 13:55:28 +05:30
const nameSelector = '#badge-name';
2018-11-20 20:47:30 +05:30
const imageUrlSelector = '#badge-image-url';
const findImageUrlElement = () => vm.$el.querySelector(imageUrlSelector);
const linkUrlSelector = '#badge-link-url';
const findLinkUrlElement = () => vm.$el.querySelector(linkUrlSelector);
2020-01-01 13:55:28 +05:30
const setValue = (inputElementSelector, value) => {
2018-11-20 20:47:30 +05:30
const inputElement = vm.$el.querySelector(inputElementSelector);
2020-01-01 13:55:28 +05:30
inputElement.value = value;
2018-11-20 20:47:30 +05:30
inputElement.dispatchEvent(new Event('input'));
};
const submitForm = () => {
const submitButton = vm.$el.querySelector('button[type="submit"]');
submitButton.click();
};
const expectInvalidInput = inputElementSelector => {
const inputElement = vm.$el.querySelector(inputElementSelector);
2018-12-13 13:39:08 +05:30
2020-04-08 14:13:33 +05:30
expect(inputElement.checkValidity()).toBe(false);
2018-11-20 20:47:30 +05:30
const feedbackElement = vm.$el.querySelector(`${inputElementSelector} + .invalid-feedback`);
2018-12-13 13:39:08 +05:30
2018-11-20 20:47:30 +05:30
expect(feedbackElement).toBeVisible();
};
2018-05-09 12:01:36 +05:30
2020-04-08 14:13:33 +05:30
beforeEach(done => {
jest.spyOn(vm, submitAction).mockReturnValue(Promise.resolve());
2018-11-20 20:47:30 +05:30
store.replaceState({
...store.state,
badgeInAddForm: createEmptyBadge(),
badgeInEditForm: createEmptyBadge(),
isSaving: false,
});
2018-05-09 12:01:36 +05:30
2020-04-08 14:13:33 +05:30
Vue.nextTick()
.then(() => {
setValue(nameSelector, 'TestBadge');
setValue(linkUrlSelector, `${TEST_HOST}/link/url`);
setValue(imageUrlSelector, `${window.location.origin}${DUMMY_IMAGE_URL}`);
})
.then(done)
.catch(done.fail);
2018-11-20 20:47:30 +05:30
});
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
it('returns immediately if imageUrl is empty', () => {
setValue(imageUrlSelector, '');
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
submitForm();
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
expectInvalidInput(imageUrlSelector);
2018-12-13 13:39:08 +05:30
2018-11-20 20:47:30 +05:30
expect(vm[submitAction]).not.toHaveBeenCalled();
});
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
it('returns immediately if imageUrl is malformed', () => {
setValue(imageUrlSelector, 'not-a-url');
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
submitForm();
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
expectInvalidInput(imageUrlSelector);
2018-12-13 13:39:08 +05:30
2018-11-20 20:47:30 +05:30
expect(vm[submitAction]).not.toHaveBeenCalled();
});
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
it('returns immediately if linkUrl is empty', () => {
setValue(linkUrlSelector, '');
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
submitForm();
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
expectInvalidInput(linkUrlSelector);
2018-12-13 13:39:08 +05:30
2018-11-20 20:47:30 +05:30
expect(vm[submitAction]).not.toHaveBeenCalled();
});
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
it('returns immediately if linkUrl is malformed', () => {
setValue(linkUrlSelector, 'not-a-url');
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
submitForm();
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
expectInvalidInput(linkUrlSelector);
2018-12-13 13:39:08 +05:30
2018-11-20 20:47:30 +05:30
expect(vm[submitAction]).not.toHaveBeenCalled();
});
2018-05-09 12:01:36 +05:30
2018-11-20 20:47:30 +05:30
it(`calls ${submitAction}`, () => {
submitForm();
2018-05-09 12:01:36 +05:30
2020-04-08 14:13:33 +05:30
expect(findImageUrlElement().checkValidity()).toBe(true);
expect(findLinkUrlElement().checkValidity()).toBe(true);
2018-11-20 20:47:30 +05:30
expect(vm[submitAction]).toHaveBeenCalled();
2018-05-09 12:01:36 +05:30
});
2018-11-20 20:47:30 +05:30
};
2018-05-09 12:01:36 +05:30
describe('if isEditing is false', () => {
beforeEach(() => {
vm = mountComponentWithStore(Component, {
el: '#dummy-element',
store,
props: {
isEditing: false,
},
});
});
it('renders one button', () => {
2018-11-20 20:47:30 +05:30
expect(vm.$el.querySelector('.row-content-block')).toBeNull();
const buttons = vm.$el.querySelectorAll('.form-group:last-of-type button');
2018-12-13 13:39:08 +05:30
2018-05-09 12:01:36 +05:30
expect(buttons.length).toBe(1);
const buttonAddElement = buttons[0];
2018-12-13 13:39:08 +05:30
2018-05-09 12:01:36 +05:30
expect(buttonAddElement).toBeVisible();
expect(buttonAddElement).toHaveText('Add badge');
});
2018-11-20 20:47:30 +05:30
sharedSubmitTests('addBadge');
2018-05-09 12:01:36 +05:30
});
describe('if isEditing is true', () => {
beforeEach(() => {
vm = mountComponentWithStore(Component, {
el: '#dummy-element',
store,
props: {
isEditing: true,
},
});
});
it('renders two buttons', () => {
const buttons = vm.$el.querySelectorAll('.row-content-block button');
2018-12-13 13:39:08 +05:30
2018-05-09 12:01:36 +05:30
expect(buttons.length).toBe(2);
const buttonSaveElement = buttons[0];
2018-12-13 13:39:08 +05:30
2018-05-09 12:01:36 +05:30
expect(buttonSaveElement).toBeVisible();
expect(buttonSaveElement).toHaveText('Save changes');
const buttonCancelElement = buttons[1];
2018-12-13 13:39:08 +05:30
2018-05-09 12:01:36 +05:30
expect(buttonCancelElement).toBeVisible();
expect(buttonCancelElement).toHaveText('Cancel');
});
2018-11-20 20:47:30 +05:30
sharedSubmitTests('saveBadge');
2018-05-09 12:01:36 +05:30
});
});