gitlab-org--gitlab-foss/spec/frontend/badges/components/badge_spec.js

152 lines
4.2 KiB
JavaScript

import Vue from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import { DUMMY_IMAGE_URL, TEST_HOST } from 'spec/test_constants';
import Badge from '~/badges/components/badge.vue';
describe('Badge component', () => {
const Component = Vue.extend(Badge);
const dummyProps = {
imageUrl: DUMMY_IMAGE_URL,
linkUrl: `${TEST_HOST}/badge/link/url`,
};
let vm;
const findElements = () => {
const buttons = vm.$el.querySelectorAll('button');
return {
badgeImage: vm.$el.querySelector('img.project-badge'),
loadingIcon: vm.$el.querySelector('.gl-spinner'),
reloadButton: buttons[buttons.length - 1],
};
};
const createComponent = (props, el = null) => {
vm = mountComponent(Component, props, el);
const { badgeImage } = findElements();
return new Promise(resolve => {
badgeImage.addEventListener('load', resolve);
// Manually dispatch load event as it is not triggered
badgeImage.dispatchEvent(new Event('load'));
}).then(() => Vue.nextTick());
};
afterEach(() => {
vm.$destroy();
});
describe('watchers', () => {
describe('imageUrl', () => {
it('sets isLoading and resets numRetries and hasError', done => {
const props = { ...dummyProps };
createComponent(props)
.then(() => {
expect(vm.isLoading).toBe(false);
vm.hasError = true;
vm.numRetries = 42;
vm.imageUrl = `${props.imageUrl}#something/else`;
return Vue.nextTick();
})
.then(() => {
expect(vm.isLoading).toBe(true);
expect(vm.numRetries).toBe(0);
expect(vm.hasError).toBe(false);
})
.then(done)
.catch(done.fail);
});
});
});
describe('methods', () => {
beforeEach(done => {
createComponent({ ...dummyProps })
.then(done)
.catch(done.fail);
});
it('onError resets isLoading and sets hasError', () => {
vm.hasError = false;
vm.isLoading = true;
vm.onError();
expect(vm.hasError).toBe(true);
expect(vm.isLoading).toBe(false);
});
it('onLoad sets isLoading', () => {
vm.isLoading = true;
vm.onLoad();
expect(vm.isLoading).toBe(false);
});
it('reloadImage resets isLoading and hasError and increases numRetries', () => {
vm.hasError = true;
vm.isLoading = false;
vm.numRetries = 0;
vm.reloadImage();
expect(vm.hasError).toBe(false);
expect(vm.isLoading).toBe(true);
expect(vm.numRetries).toBe(1);
});
});
describe('behavior', () => {
beforeEach(done => {
setFixtures('<div id="dummy-element"></div>');
createComponent({ ...dummyProps }, '#dummy-element')
.then(done)
.catch(done.fail);
});
it('shows a badge image after loading', () => {
expect(vm.isLoading).toBe(false);
expect(vm.hasError).toBe(false);
const { badgeImage, loadingIcon, reloadButton } = findElements();
expect(badgeImage).toBeVisible();
expect(loadingIcon).toBeHidden();
expect(reloadButton).toBeHidden();
expect(vm.$el.querySelector('.btn-group')).toBeHidden();
});
it('shows a loading icon when loading', done => {
vm.isLoading = true;
Vue.nextTick()
.then(() => {
const { badgeImage, loadingIcon, reloadButton } = findElements();
expect(badgeImage).toBeHidden();
expect(loadingIcon).toBeVisible();
expect(reloadButton).toBeHidden();
expect(vm.$el.querySelector('.btn-group')).toBeHidden();
})
.then(done)
.catch(done.fail);
});
it('shows an error and reload button if loading failed', done => {
vm.hasError = true;
Vue.nextTick()
.then(() => {
const { badgeImage, loadingIcon, reloadButton } = findElements();
expect(badgeImage).toBeHidden();
expect(loadingIcon).toBeHidden();
expect(reloadButton).toBeVisible();
expect(reloadButton).toHaveSpriteIcon('retry');
expect(vm.$el.innerText.trim()).toBe('No badge image');
})
.then(done)
.catch(done.fail);
});
});
});