106 lines
3.0 KiB
JavaScript
106 lines
3.0 KiB
JavaScript
import Vue, { nextTick } from 'vue';
|
|
import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
|
|
import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
|
|
import BadgeListRow from '~/badges/components/badge_list_row.vue';
|
|
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(() => {
|
|
setHTMLFixture(`
|
|
<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();
|
|
resetHTMLFixture();
|
|
});
|
|
|
|
it('renders the badge', () => {
|
|
const badgeElement = vm.$el.querySelector('.project-badge');
|
|
|
|
expect(badgeElement).not.toBeNull();
|
|
expect(badgeElement.getAttribute('src')).toBe(badge.renderedImageUrl);
|
|
});
|
|
|
|
it('renders the badge name', () => {
|
|
expect(vm.$el.innerText).toMatch(badge.name);
|
|
});
|
|
|
|
it('renders the badge link', () => {
|
|
expect(vm.$el.innerText).toMatch(badge.linkUrl);
|
|
});
|
|
|
|
it('renders the badge kind', () => {
|
|
expect(vm.$el.innerText).toMatch('Project Badge');
|
|
});
|
|
|
|
it('shows edit and delete buttons', () => {
|
|
const buttons = vm.$el.querySelectorAll('.table-button-footer button');
|
|
|
|
expect(buttons).toHaveLength(2);
|
|
const buttonEditElement = buttons[0];
|
|
|
|
expect(buttonEditElement).toBeVisible();
|
|
expect(buttonEditElement).toHaveSpriteIcon('pencil');
|
|
const buttonDeleteElement = buttons[1];
|
|
|
|
expect(buttonDeleteElement).toBeVisible();
|
|
expect(buttonDeleteElement).toHaveSpriteIcon('remove');
|
|
});
|
|
|
|
it('calls editBadge when clicking then edit button', () => {
|
|
jest.spyOn(vm, 'editBadge').mockImplementation(() => {});
|
|
|
|
const editButton = vm.$el.querySelector('.table-button-footer button:first-of-type');
|
|
editButton.click();
|
|
|
|
expect(vm.editBadge).toHaveBeenCalled();
|
|
});
|
|
|
|
it('calls updateBadgeInModal and shows modal when clicking then delete button', async () => {
|
|
jest.spyOn(vm, 'updateBadgeInModal').mockImplementation(() => {});
|
|
|
|
const deleteButton = vm.$el.querySelector('.table-button-footer button:last-of-type');
|
|
deleteButton.click();
|
|
|
|
await nextTick();
|
|
expect(vm.updateBadgeInModal).toHaveBeenCalled();
|
|
});
|
|
|
|
describe('for a group badge', () => {
|
|
beforeEach(async () => {
|
|
badge.kind = GROUP_BADGE;
|
|
|
|
await nextTick();
|
|
});
|
|
|
|
it('renders the badge kind', () => {
|
|
expect(vm.$el.innerText).toMatch('Group Badge');
|
|
});
|
|
|
|
it('hides edit and delete buttons', () => {
|
|
const buttons = vm.$el.querySelectorAll('.table-button-footer button');
|
|
|
|
expect(buttons).toHaveLength(0);
|
|
});
|
|
});
|
|
});
|