2017-08-11 16:36:59 +00:00
|
|
|
import Vue from 'vue';
|
2018-06-21 12:22:40 +00:00
|
|
|
import createStore from '~/notes/stores';
|
2017-12-04 16:19:07 +00:00
|
|
|
import awardsNote from '~/notes/components/note_awards_list.vue';
|
2017-11-30 22:44:41 +00:00
|
|
|
import { noteableDataMock, notesDataMock } from '../mock_data';
|
2017-08-11 16:36:59 +00:00
|
|
|
|
2017-12-04 16:19:07 +00:00
|
|
|
describe('note_awards_list component', () => {
|
2018-06-21 12:22:40 +00:00
|
|
|
let store;
|
2017-08-11 16:36:59 +00:00
|
|
|
let vm;
|
|
|
|
let awardsMock;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
const Component = Vue.extend(awardsNote);
|
|
|
|
|
2018-06-21 12:22:40 +00:00
|
|
|
store = createStore();
|
2017-11-30 22:44:41 +00:00
|
|
|
store.dispatch('setNoteableData', noteableDataMock);
|
2017-08-11 16:36:59 +00:00
|
|
|
store.dispatch('setNotesData', notesDataMock);
|
|
|
|
awardsMock = [
|
|
|
|
{
|
|
|
|
name: 'flag_tz',
|
|
|
|
user: { id: 1, name: 'Administrator', username: 'root' },
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'cartwheel_tone3',
|
|
|
|
user: { id: 12, name: 'Bobbie Stehr', username: 'erin' },
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
vm = new Component({
|
|
|
|
store,
|
|
|
|
propsData: {
|
|
|
|
awards: awardsMock,
|
|
|
|
noteAuthorId: 2,
|
2018-09-07 13:39:20 +00:00
|
|
|
noteId: '545',
|
2018-04-06 18:19:37 +00:00
|
|
|
canAwardEmoji: true,
|
2019-09-18 14:02:45 +00:00
|
|
|
toggleAwardPath: '/gitlab-org/gitlab-foss/notes/545/toggle_award_emoji',
|
2017-08-11 16:36:59 +00:00
|
|
|
},
|
|
|
|
}).$mount();
|
|
|
|
});
|
2017-08-04 15:51:35 +00:00
|
|
|
|
2017-08-11 16:36:59 +00:00
|
|
|
afterEach(() => {
|
|
|
|
vm.$destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should render awarded emojis', () => {
|
2017-08-11 23:35:44 +00:00
|
|
|
expect(vm.$el.querySelector('.js-awards-block button [data-name="flag_tz"]')).toBeDefined();
|
2018-06-21 12:22:40 +00:00
|
|
|
expect(
|
|
|
|
vm.$el.querySelector('.js-awards-block button [data-name="cartwheel_tone3"]'),
|
|
|
|
).toBeDefined();
|
2017-08-04 15:51:35 +00:00
|
|
|
});
|
|
|
|
|
2018-04-06 18:19:37 +00:00
|
|
|
it('should be possible to remove awarded emoji', () => {
|
2017-08-11 16:36:59 +00:00
|
|
|
spyOn(vm, 'handleAward').and.callThrough();
|
2018-04-06 18:19:37 +00:00
|
|
|
spyOn(vm, 'toggleAwardRequest').and.callThrough();
|
2017-08-11 16:36:59 +00:00
|
|
|
vm.$el.querySelector('.js-awards-block button').click();
|
2017-08-04 15:51:35 +00:00
|
|
|
|
2017-08-11 16:36:59 +00:00
|
|
|
expect(vm.handleAward).toHaveBeenCalledWith('flag_tz');
|
2018-04-06 18:19:37 +00:00
|
|
|
expect(vm.toggleAwardRequest).toHaveBeenCalled();
|
2017-08-04 15:51:35 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should be possible to add new emoji', () => {
|
2017-08-11 16:36:59 +00:00
|
|
|
expect(vm.$el.querySelector('.js-add-award')).toBeDefined();
|
2017-08-04 15:51:35 +00:00
|
|
|
});
|
2018-04-06 18:19:37 +00:00
|
|
|
|
2019-11-26 18:06:33 +00:00
|
|
|
describe('when the user name contains special HTML characters', () => {
|
|
|
|
const createAwardEmoji = (_, index) => ({
|
|
|
|
name: 'art',
|
|
|
|
user: { id: index, name: `&<>"\`'-${index}`, username: `user-${index}` },
|
|
|
|
});
|
|
|
|
|
|
|
|
const mountComponent = () => {
|
|
|
|
const Component = Vue.extend(awardsNote);
|
|
|
|
vm = new Component({
|
|
|
|
store,
|
|
|
|
propsData: {
|
|
|
|
awards: awardsMock,
|
|
|
|
noteAuthorId: 0,
|
|
|
|
noteId: '545',
|
|
|
|
canAwardEmoji: true,
|
|
|
|
toggleAwardPath: '/gitlab-org/gitlab-foss/notes/545/toggle_award_emoji',
|
|
|
|
},
|
|
|
|
}).$mount();
|
|
|
|
};
|
|
|
|
|
|
|
|
const findTooltip = () =>
|
|
|
|
vm.$el.querySelector('[data-original-title]').getAttribute('data-original-title');
|
|
|
|
|
|
|
|
it('should only escape & and " characters', () => {
|
|
|
|
awardsMock = [...new Array(1)].map(createAwardEmoji);
|
|
|
|
mountComponent();
|
|
|
|
const escapedName = awardsMock[0].user.name.replace(/&/g, '&').replace(/"/g, '"');
|
|
|
|
|
|
|
|
expect(vm.$el.querySelector('[data-original-title]').outerHTML).toContain(escapedName);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not escape special HTML characters twice when only 1 person awarded', () => {
|
|
|
|
awardsMock = [...new Array(1)].map(createAwardEmoji);
|
|
|
|
mountComponent();
|
|
|
|
|
|
|
|
awardsMock.forEach(award => {
|
|
|
|
expect(findTooltip()).toContain(award.user.name);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not escape special HTML characters twice when 2 people awarded', () => {
|
|
|
|
awardsMock = [...new Array(2)].map(createAwardEmoji);
|
|
|
|
mountComponent();
|
|
|
|
|
|
|
|
awardsMock.forEach(award => {
|
|
|
|
expect(findTooltip()).toContain(award.user.name);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not escape special HTML characters twice when more than 10 people awarded', () => {
|
|
|
|
awardsMock = [...new Array(11)].map(createAwardEmoji);
|
|
|
|
mountComponent();
|
|
|
|
|
|
|
|
// Testing only the first 10 awards since 11 onward will not be displayed.
|
|
|
|
awardsMock.slice(0, 10).forEach(award => {
|
|
|
|
expect(findTooltip()).toContain(award.user.name);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-04-06 18:19:37 +00:00
|
|
|
describe('when the user cannot award emoji', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
const Component = Vue.extend(awardsNote);
|
|
|
|
|
|
|
|
vm = new Component({
|
|
|
|
store,
|
|
|
|
propsData: {
|
|
|
|
awards: awardsMock,
|
|
|
|
noteAuthorId: 2,
|
2018-09-07 13:39:20 +00:00
|
|
|
noteId: '545',
|
2018-04-06 18:19:37 +00:00
|
|
|
canAwardEmoji: false,
|
2019-09-18 14:02:45 +00:00
|
|
|
toggleAwardPath: '/gitlab-org/gitlab-foss/notes/545/toggle_award_emoji',
|
2018-04-06 18:19:37 +00:00
|
|
|
},
|
|
|
|
}).$mount();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not be possible to remove awarded emoji', () => {
|
|
|
|
spyOn(vm, 'toggleAwardRequest').and.callThrough();
|
|
|
|
|
|
|
|
vm.$el.querySelector('.js-awards-block button').click();
|
|
|
|
|
|
|
|
expect(vm.toggleAwardRequest).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not be possible to add new emoji', () => {
|
|
|
|
expect(vm.$el.querySelector('.js-add-award')).toBeNull();
|
|
|
|
});
|
|
|
|
});
|
2017-08-09 19:13:00 +00:00
|
|
|
});
|