debian-mirror-gitlab/spec/frontend/badges/components/badge_spec.js

153 lines
4.2 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import Vue from 'vue';
2020-04-08 14:13:33 +05:30
import mountComponent from 'helpers/vue_mount_component_helper';
2018-05-09 12:01:36 +05:30
import { DUMMY_IMAGE_URL, TEST_HOST } from 'spec/test_constants';
2020-01-01 13:55:28 +05:30
import Badge from '~/badges/components/badge.vue';
2018-05-09 12:01:36 +05:30
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'),
2019-10-12 21:52:04 +05:30
loadingIcon: vm.$el.querySelector('.gl-spinner'),
2018-05-09 12:01:36 +05:30
reloadButton: buttons[buttons.length - 1],
};
};
const createComponent = (props, el = null) => {
vm = mountComponent(Component, props, el);
const { badgeImage } = findElements();
2021-03-08 18:12:59 +05:30
return new Promise((resolve) => {
2020-04-08 14:13:33 +05:30
badgeImage.addEventListener('load', resolve);
// Manually dispatch load event as it is not triggered
badgeImage.dispatchEvent(new Event('load'));
}).then(() => Vue.nextTick());
2018-05-09 12:01:36 +05:30
};
afterEach(() => {
vm.$destroy();
});
describe('watchers', () => {
describe('imageUrl', () => {
2021-03-08 18:12:59 +05:30
it('sets isLoading and resets numRetries and hasError', (done) => {
2018-05-09 12:01:36 +05:30
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', () => {
2021-03-08 18:12:59 +05:30
beforeEach((done) => {
2018-05-09 12:01:36 +05:30
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', () => {
2021-03-08 18:12:59 +05:30
beforeEach((done) => {
2018-05-09 12:01:36 +05:30
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();
2018-12-13 13:39:08 +05:30
2018-05-09 12:01:36 +05:30
expect(badgeImage).toBeVisible();
expect(loadingIcon).toBeHidden();
expect(reloadButton).toBeHidden();
2020-04-08 14:13:33 +05:30
expect(vm.$el.querySelector('.btn-group')).toBeHidden();
2018-05-09 12:01:36 +05:30
});
2021-03-08 18:12:59 +05:30
it('shows a loading icon when loading', (done) => {
2018-05-09 12:01:36 +05:30
vm.isLoading = true;
Vue.nextTick()
.then(() => {
const { badgeImage, loadingIcon, reloadButton } = findElements();
2018-12-13 13:39:08 +05:30
2018-05-09 12:01:36 +05:30
expect(badgeImage).toBeHidden();
expect(loadingIcon).toBeVisible();
expect(reloadButton).toBeHidden();
2020-04-08 14:13:33 +05:30
expect(vm.$el.querySelector('.btn-group')).toBeHidden();
2018-05-09 12:01:36 +05:30
})
.then(done)
.catch(done.fail);
});
2021-03-08 18:12:59 +05:30
it('shows an error and reload button if loading failed', (done) => {
2018-05-09 12:01:36 +05:30
vm.hasError = true;
Vue.nextTick()
.then(() => {
const { badgeImage, loadingIcon, reloadButton } = findElements();
2018-12-13 13:39:08 +05:30
2018-05-09 12:01:36 +05:30
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);
});
});
});