Convert note_actions_spec.js to Vue test utils

This commit is contained in:
Winnie Hellmann 2019-01-25 10:59:22 +01:00
parent a71d02bb16
commit 8e6d2cca24

View file

@ -1,20 +1,19 @@
import Vue from 'vue'; import Vue from 'vue';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import createStore from '~/notes/stores'; import createStore from '~/notes/stores';
import noteActions from '~/notes/components/note_actions.vue'; import noteActions from '~/notes/components/note_actions.vue';
import { userDataMock } from '../mock_data'; import { userDataMock } from '../mock_data';
describe('issue_note_actions component', () => { describe('noteActions', () => {
let vm; let wrapper;
let store; let store;
let Component;
beforeEach(() => { beforeEach(() => {
Component = Vue.extend(noteActions);
store = createStore(); store = createStore();
}); });
afterEach(() => { afterEach(() => {
vm.$destroy(); wrapper.destroy();
}); });
describe('user is logged in', () => { describe('user is logged in', () => {
@ -36,45 +35,57 @@ describe('issue_note_actions component', () => {
store.dispatch('setUserData', userDataMock); store.dispatch('setUserData', userDataMock);
vm = new Component({ const localVue = createLocalVue();
wrapper = shallowMount(noteActions, {
store, store,
propsData: props, propsData: props,
}).$mount(); localVue,
sync: false,
});
}); });
it('should render access level badge', () => { it('should render access level badge', () => {
expect(vm.$el.querySelector('.note-role').textContent.trim()).toEqual(props.accessLevel); expect(
wrapper
.find('.note-role')
.text()
.trim(),
).toEqual(props.accessLevel);
}); });
it('should render emoji link', () => { it('should render emoji link', () => {
expect(vm.$el.querySelector('.js-add-award')).toBeDefined(); expect(wrapper.find('.js-add-award').exists()).toBe(true);
}); });
describe('actions dropdown', () => { describe('actions dropdown', () => {
it('should be possible to edit the comment', () => { it('should be possible to edit the comment', () => {
expect(vm.$el.querySelector('.js-note-edit')).toBeDefined(); expect(wrapper.find('.js-note-edit').exists()).toBe(true);
}); });
it('should be possible to report abuse to GitLab', () => { it('should be possible to report abuse to GitLab', () => {
expect(vm.$el.querySelector(`a[href="${props.reportAbusePath}"]`)).toBeDefined(); expect(wrapper.find(`a[href="${props.reportAbusePath}"]`).exists()).toBe(true);
}); });
it('should be possible to copy link to a note', () => { it('should be possible to copy link to a note', () => {
expect(vm.$el.querySelector('.js-btn-copy-note-link')).not.toBeNull(); expect(wrapper.find('.js-btn-copy-note-link').exists()).toBe(true);
}); });
it('should not show copy link action when `noteUrl` prop is empty', done => { it('should not show copy link action when `noteUrl` prop is empty', done => {
vm.noteUrl = ''; wrapper.setProps({
...props,
noteUrl: '',
});
Vue.nextTick() Vue.nextTick()
.then(() => { .then(() => {
expect(vm.$el.querySelector('.js-btn-copy-note-link')).toBeNull(); expect(wrapper.find('.js-btn-copy-note-link').exists()).toBe(false);
}) })
.then(done) .then(done)
.catch(done.fail); .catch(done.fail);
}); });
it('should be possible to delete comment', () => { it('should be possible to delete comment', () => {
expect(vm.$el.querySelector('.js-note-delete')).toBeDefined(); expect(wrapper.find('.js-note-delete').exists()).toBe(true);
}); });
}); });
}); });
@ -96,18 +107,21 @@ describe('issue_note_actions component', () => {
reportAbusePath: reportAbusePath:
'/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26', '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26',
}; };
vm = new Component({ const localVue = createLocalVue();
wrapper = shallowMount(noteActions, {
store, store,
propsData: props, propsData: props,
}).$mount(); localVue,
sync: false,
});
}); });
it('should not render emoji link', () => { it('should not render emoji link', () => {
expect(vm.$el.querySelector('.js-add-award')).toEqual(null); expect(wrapper.find('.js-add-award').exists()).toBe(false);
}); });
it('should not render actions dropdown', () => { it('should not render actions dropdown', () => {
expect(vm.$el.querySelector('.more-actions')).toEqual(null); expect(wrapper.find('.more-actions').exists()).toBe(false);
}); });
}); });
}); });