debian-mirror-gitlab/spec/frontend/releases/components/app_index_spec.js

151 lines
4.8 KiB
JavaScript
Raw Normal View History

2020-04-08 14:13:33 +05:30
import { range as rge } from 'lodash';
2019-02-15 15:39:39 +05:30
import Vue from 'vue';
2020-06-23 00:09:42 +05:30
import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
2020-03-13 15:44:24 +05:30
import app from '~/releases/components/app_index.vue';
import createStore from '~/releases/stores';
import listModule from '~/releases/stores/modules/list';
2019-02-15 15:39:39 +05:30
import api from '~/api';
2020-03-13 15:44:24 +05:30
import { resetStore } from '../stores/modules/list/helpers';
2020-01-01 13:55:28 +05:30
import {
pageInfoHeadersWithoutPagination,
pageInfoHeadersWithPagination,
2020-06-23 00:09:42 +05:30
release2 as release,
2020-01-01 13:55:28 +05:30
releases,
2020-03-13 15:44:24 +05:30
} from '../mock_data';
2020-04-08 14:13:33 +05:30
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
2020-06-23 00:09:42 +05:30
import waitForPromises from 'helpers/wait_for_promises';
2019-02-15 15:39:39 +05:30
describe('Releases App ', () => {
const Component = Vue.extend(app);
let store;
let vm;
2020-01-01 13:55:28 +05:30
let releasesPagination;
2019-02-15 15:39:39 +05:30
const props = {
projectId: 'gitlab-ce',
2020-04-08 14:13:33 +05:30
documentationPath: 'help/releases',
2019-02-15 15:39:39 +05:30
illustrationPath: 'illustration/path',
};
beforeEach(() => {
2020-04-08 14:13:33 +05:30
store = createStore({ modules: { list: listModule } });
releasesPagination = rge(21).map(index => ({
...convertObjectPropsToCamelCase(release, { deep: true }),
tagName: `${index}.00`,
}));
2019-02-15 15:39:39 +05:30
});
afterEach(() => {
resetStore(store);
vm.$destroy();
});
describe('while loading', () => {
beforeEach(() => {
2020-06-23 00:09:42 +05:30
jest
.spyOn(api, 'releases')
// Need to defer the return value here to the next stack,
// otherwise the loading state disappears before our test even starts.
.mockImplementation(() => waitForPromises().then(() => ({ data: [], headers: {} })));
2019-02-15 15:39:39 +05:30
vm = mountComponentWithStore(Component, { props, store });
});
2020-06-23 00:09:42 +05:30
it('renders loading icon', () => {
2019-02-15 15:39:39 +05:30
expect(vm.$el.querySelector('.js-loading')).not.toBeNull();
expect(vm.$el.querySelector('.js-empty-state')).toBeNull();
expect(vm.$el.querySelector('.js-success-state')).toBeNull();
2020-01-01 13:55:28 +05:30
expect(vm.$el.querySelector('.gl-pagination')).toBeNull();
2019-02-15 15:39:39 +05:30
2020-06-23 00:09:42 +05:30
return waitForPromises();
2019-02-15 15:39:39 +05:30
});
});
describe('with successful request', () => {
beforeEach(() => {
2020-06-23 00:09:42 +05:30
jest
.spyOn(api, 'releases')
.mockResolvedValue({ data: releases, headers: pageInfoHeadersWithoutPagination });
2020-01-01 13:55:28 +05:30
vm = mountComponentWithStore(Component, { props, store });
});
2020-06-23 00:09:42 +05:30
it('renders success state', () => {
expect(vm.$el.querySelector('.js-loading')).toBeNull();
expect(vm.$el.querySelector('.js-empty-state')).toBeNull();
expect(vm.$el.querySelector('.js-success-state')).not.toBeNull();
expect(vm.$el.querySelector('.gl-pagination')).toBeNull();
2020-01-01 13:55:28 +05:30
});
});
describe('with successful request and pagination', () => {
beforeEach(() => {
2020-06-23 00:09:42 +05:30
jest
.spyOn(api, 'releases')
.mockResolvedValue({ data: releasesPagination, headers: pageInfoHeadersWithPagination });
2019-02-15 15:39:39 +05:30
vm = mountComponentWithStore(Component, { props, store });
});
2020-06-23 00:09:42 +05:30
it('renders success state', () => {
expect(vm.$el.querySelector('.js-loading')).toBeNull();
expect(vm.$el.querySelector('.js-empty-state')).toBeNull();
expect(vm.$el.querySelector('.js-success-state')).not.toBeNull();
expect(vm.$el.querySelector('.gl-pagination')).not.toBeNull();
2019-02-15 15:39:39 +05:30
});
});
describe('with empty request', () => {
beforeEach(() => {
2020-06-23 00:09:42 +05:30
jest.spyOn(api, 'releases').mockResolvedValue({ data: [], headers: {} });
2019-02-15 15:39:39 +05:30
vm = mountComponentWithStore(Component, { props, store });
});
2020-06-23 00:09:42 +05:30
it('renders empty state', () => {
expect(vm.$el.querySelector('.js-loading')).toBeNull();
expect(vm.$el.querySelector('.js-empty-state')).not.toBeNull();
expect(vm.$el.querySelector('.js-success-state')).toBeNull();
expect(vm.$el.querySelector('.gl-pagination')).toBeNull();
2020-04-08 14:13:33 +05:30
});
});
describe('"New release" button', () => {
const findNewReleaseButton = () => vm.$el.querySelector('.js-new-release-btn');
beforeEach(() => {
2020-06-23 00:09:42 +05:30
jest.spyOn(api, 'releases').mockResolvedValue({ data: [], headers: {} });
2020-04-08 14:13:33 +05:30
});
const factory = additionalProps => {
vm = mountComponentWithStore(Component, {
props: {
...props,
...additionalProps,
},
store,
});
};
describe('when the user is allowed to create a new Release', () => {
const newReleasePath = 'path/to/new/release';
beforeEach(() => {
factory({ newReleasePath });
});
2020-06-23 00:09:42 +05:30
it('renders the "New release" button', () => {
expect(findNewReleaseButton()).not.toBeNull();
2020-04-08 14:13:33 +05:30
});
2020-06-23 00:09:42 +05:30
it('renders the "New release" button with the correct href', () => {
expect(findNewReleaseButton().getAttribute('href')).toBe(newReleasePath);
2020-04-08 14:13:33 +05:30
});
});
describe('when the user is not allowed to create a new Release', () => {
beforeEach(() => factory());
2020-06-23 00:09:42 +05:30
it('does not render the "New release" button', () => {
expect(findNewReleaseButton()).toBeNull();
2020-04-08 14:13:33 +05:30
});
2019-02-15 15:39:39 +05:30
});
});
});