2018-05-09 12:01:36 +05:30
|
|
|
import Vue from 'vue';
|
2020-04-08 14:13:33 +05:30
|
|
|
import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
|
2021-03-11 19:13:27 +05:30
|
|
|
import BadgeListRow from '~/badges/components/badge_list_row.vue';
|
2018-05-09 12:01:36 +05:30
|
|
|
import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
|
|
|
|
import store from '~/badges/store';
|
|
|
|
import { createDummyBadge } from '../dummy_badge';
|
|
|
|
|
|
|
|
describe('BadgeListRow component', () => {
|
|
|
|
const Component = Vue.extend(BadgeListRow);
|
|
|
|
let badge;
|
|
|
|
let vm;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
setFixtures(`
|
|
|
|
<div id="delete-badge-modal" class="modal"></div>
|
|
|
|
<div id="dummy-element"></div>
|
|
|
|
`);
|
|
|
|
store.replaceState({
|
|
|
|
...store.state,
|
|
|
|
kind: PROJECT_BADGE,
|
|
|
|
});
|
|
|
|
badge = createDummyBadge();
|
|
|
|
vm = mountComponentWithStore(Component, {
|
|
|
|
el: '#dummy-element',
|
|
|
|
store,
|
|
|
|
props: { badge },
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
vm.$destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders the badge', () => {
|
|
|
|
const badgeElement = vm.$el.querySelector('.project-badge');
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2018-05-09 12:01:36 +05:30
|
|
|
expect(badgeElement).not.toBeNull();
|
|
|
|
expect(badgeElement.getAttribute('src')).toBe(badge.renderedImageUrl);
|
|
|
|
});
|
|
|
|
|
2020-01-01 13:55:28 +05:30
|
|
|
it('renders the badge name', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
expect(vm.$el.innerText).toMatch(badge.name);
|
2020-01-01 13:55:28 +05:30
|
|
|
});
|
|
|
|
|
2018-05-09 12:01:36 +05:30
|
|
|
it('renders the badge link', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
expect(vm.$el.innerText).toMatch(badge.linkUrl);
|
2018-05-09 12:01:36 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('renders the badge kind', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
expect(vm.$el.innerText).toMatch('Project Badge');
|
2018-05-09 12:01:36 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('shows edit and delete buttons', () => {
|
|
|
|
const buttons = vm.$el.querySelectorAll('.table-button-footer button');
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2018-05-09 12:01:36 +05:30
|
|
|
expect(buttons).toHaveLength(2);
|
|
|
|
const buttonEditElement = buttons[0];
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2018-05-09 12:01:36 +05:30
|
|
|
expect(buttonEditElement).toBeVisible();
|
|
|
|
expect(buttonEditElement).toHaveSpriteIcon('pencil');
|
|
|
|
const buttonDeleteElement = buttons[1];
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2018-05-09 12:01:36 +05:30
|
|
|
expect(buttonDeleteElement).toBeVisible();
|
|
|
|
expect(buttonDeleteElement).toHaveSpriteIcon('remove');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('calls editBadge when clicking then edit button', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
jest.spyOn(vm, 'editBadge').mockImplementation(() => {});
|
2018-05-09 12:01:36 +05:30
|
|
|
|
|
|
|
const editButton = vm.$el.querySelector('.table-button-footer button:first-of-type');
|
|
|
|
editButton.click();
|
|
|
|
|
|
|
|
expect(vm.editBadge).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2021-03-08 18:12:59 +05:30
|
|
|
it('calls updateBadgeInModal and shows modal when clicking then delete button', (done) => {
|
2020-04-08 14:13:33 +05:30
|
|
|
jest.spyOn(vm, 'updateBadgeInModal').mockImplementation(() => {});
|
2018-05-09 12:01:36 +05:30
|
|
|
|
|
|
|
const deleteButton = vm.$el.querySelector('.table-button-footer button:last-of-type');
|
|
|
|
deleteButton.click();
|
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
Vue.nextTick()
|
|
|
|
.then(() => {
|
|
|
|
expect(vm.updateBadgeInModal).toHaveBeenCalled();
|
|
|
|
})
|
|
|
|
.then(done)
|
|
|
|
.catch(done.fail);
|
2018-05-09 12:01:36 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
describe('for a group badge', () => {
|
2021-03-08 18:12:59 +05:30
|
|
|
beforeEach((done) => {
|
2018-05-09 12:01:36 +05:30
|
|
|
badge.kind = GROUP_BADGE;
|
|
|
|
|
2021-03-08 18:12:59 +05:30
|
|
|
Vue.nextTick().then(done).catch(done.fail);
|
2018-05-09 12:01:36 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('renders the badge kind', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
expect(vm.$el.innerText).toMatch('Group Badge');
|
2018-05-09 12:01:36 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('hides edit and delete buttons', () => {
|
|
|
|
const buttons = vm.$el.querySelectorAll('.table-button-footer button');
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2018-05-09 12:01:36 +05:30
|
|
|
expect(buttons).toHaveLength(0);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|