debian-mirror-gitlab/spec/frontend/clusters/components/application_row_spec.js

490 lines
16 KiB
JavaScript
Raw Normal View History

2018-03-17 18:26:18 +05:30
import Vue from 'vue';
2019-07-31 22:56:46 +05:30
import { shallowMount } from '@vue/test-utils';
2020-01-01 13:55:28 +05:30
import mountComponent from 'helpers/vue_mount_component_helper';
2018-03-17 18:26:18 +05:30
import eventHub from '~/clusters/event_hub';
2019-07-31 22:56:46 +05:30
import { APPLICATION_STATUS } from '~/clusters/constants';
2018-03-17 18:26:18 +05:30
import applicationRow from '~/clusters/components/application_row.vue';
2019-07-31 22:56:46 +05:30
import UninstallApplicationConfirmationModal from '~/clusters/components/uninstall_application_confirmation_modal.vue';
2018-03-17 18:26:18 +05:30
import { DEFAULT_APPLICATION_STATE } from '../services/mock_data';
describe('Application Row', () => {
let vm;
let ApplicationRow;
beforeEach(() => {
ApplicationRow = Vue.extend(applicationRow);
});
afterEach(() => {
vm.$destroy();
});
describe('Title', () => {
it('shows title', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
titleLink: null,
});
const title = vm.$el.querySelector('.js-cluster-application-title');
expect(title.tagName).toEqual('SPAN');
expect(title.textContent.trim()).toEqual(DEFAULT_APPLICATION_STATE.title);
});
it('shows title link', () => {
expect(DEFAULT_APPLICATION_STATE.titleLink).toBeDefined();
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
});
const title = vm.$el.querySelector('.js-cluster-application-title');
expect(title.tagName).toEqual('A');
expect(title.textContent.trim()).toEqual(DEFAULT_APPLICATION_STATE.title);
});
});
describe('Install button', () => {
it('has indeterminate state on page load', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: null,
});
expect(vm.installButtonLabel).toBeUndefined();
});
2019-03-02 22:35:43 +05:30
it('has install button', () => {
const installationBtn = vm.$el.querySelector('.js-cluster-application-install-button');
expect(installationBtn).not.toBe(null);
});
2018-11-18 11:00:15 +05:30
it('has disabled "Install" when APPLICATION_STATUS.NOT_INSTALLABLE', () => {
2018-03-17 18:26:18 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2018-11-18 11:00:15 +05:30
status: APPLICATION_STATUS.NOT_INSTALLABLE,
2018-03-17 18:26:18 +05:30
});
expect(vm.installButtonLabel).toEqual('Install');
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(true);
});
2018-11-18 11:00:15 +05:30
it('has enabled "Install" when APPLICATION_STATUS.INSTALLABLE', () => {
2018-03-17 18:26:18 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2018-11-18 11:00:15 +05:30
status: APPLICATION_STATUS.INSTALLABLE,
2018-03-17 18:26:18 +05:30
});
expect(vm.installButtonLabel).toEqual('Install');
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(false);
});
2018-11-18 11:00:15 +05:30
it('has loading "Installing" when APPLICATION_STATUS.INSTALLING', () => {
2018-03-17 18:26:18 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2018-11-18 11:00:15 +05:30
status: APPLICATION_STATUS.INSTALLING,
2018-03-17 18:26:18 +05:30
});
expect(vm.installButtonLabel).toEqual('Installing');
expect(vm.installButtonLoading).toEqual(true);
expect(vm.installButtonDisabled).toEqual(true);
});
2019-07-31 22:56:46 +05:30
it('has disabled "Installed" when application is installed and not uninstallable', () => {
2018-03-17 18:26:18 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2018-11-18 11:00:15 +05:30
status: APPLICATION_STATUS.INSTALLED,
2019-07-31 22:56:46 +05:30
installed: true,
uninstallable: false,
2018-03-17 18:26:18 +05:30
});
expect(vm.installButtonLabel).toEqual('Installed');
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(true);
});
2019-07-31 22:56:46 +05:30
it('hides when application is installed and uninstallable', () => {
2018-12-13 13:39:08 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2019-07-31 22:56:46 +05:30
status: APPLICATION_STATUS.INSTALLED,
installed: true,
uninstallable: true,
2018-12-13 13:39:08 +05:30
});
2019-07-31 22:56:46 +05:30
const installBtn = vm.$el.querySelector('.js-cluster-application-install-button');
2018-12-13 13:39:08 +05:30
2019-07-31 22:56:46 +05:30
expect(installBtn).toBe(null);
2018-12-13 13:39:08 +05:30
});
2019-07-31 22:56:46 +05:30
it('has enabled "Install" when install fails', () => {
2018-03-17 18:26:18 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2019-07-31 22:56:46 +05:30
status: APPLICATION_STATUS.INSTALLABLE,
installFailed: true,
2018-03-17 18:26:18 +05:30
});
expect(vm.installButtonLabel).toEqual('Install');
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(false);
});
it('has enabled "Install" when REQUEST_FAILURE (so you can try installing again)', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2018-11-18 11:00:15 +05:30
status: APPLICATION_STATUS.INSTALLABLE,
2018-03-17 18:26:18 +05:30
});
expect(vm.installButtonLabel).toEqual('Install');
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(false);
});
it('clicking install button emits event', () => {
2019-07-07 11:18:12 +05:30
jest.spyOn(eventHub, '$emit');
2018-03-17 18:26:18 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2018-11-18 11:00:15 +05:30
status: APPLICATION_STATUS.INSTALLABLE,
2018-03-17 18:26:18 +05:30
});
const installButton = vm.$el.querySelector('.js-cluster-application-install-button');
installButton.click();
2018-11-08 19:23:39 +05:30
expect(eventHub.$emit).toHaveBeenCalledWith('installApplication', {
id: DEFAULT_APPLICATION_STATE.id,
params: {},
});
});
it('clicking install button when installApplicationRequestParams are provided emits event', () => {
2019-07-07 11:18:12 +05:30
jest.spyOn(eventHub, '$emit');
2018-11-08 19:23:39 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2018-11-18 11:00:15 +05:30
status: APPLICATION_STATUS.INSTALLABLE,
2018-11-08 19:23:39 +05:30
installApplicationRequestParams: { hostname: 'jupyter' },
});
const installButton = vm.$el.querySelector('.js-cluster-application-install-button');
installButton.click();
expect(eventHub.$emit).toHaveBeenCalledWith('installApplication', {
id: DEFAULT_APPLICATION_STATE.id,
params: { hostname: 'jupyter' },
});
2018-03-17 18:26:18 +05:30
});
it('clicking disabled install button emits nothing', () => {
2019-07-07 11:18:12 +05:30
jest.spyOn(eventHub, '$emit');
2018-03-17 18:26:18 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2018-11-18 11:00:15 +05:30
status: APPLICATION_STATUS.INSTALLING,
2018-03-17 18:26:18 +05:30
});
const installButton = vm.$el.querySelector('.js-cluster-application-install-button');
expect(vm.installButtonDisabled).toEqual(true);
installButton.click();
expect(eventHub.$emit).not.toHaveBeenCalled();
});
});
2019-07-31 22:56:46 +05:30
describe('Uninstall button', () => {
it('displays button when app is installed and uninstallable', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
installed: true,
uninstallable: true,
status: APPLICATION_STATUS.NOT_INSTALLABLE,
});
const uninstallButton = vm.$el.querySelector('.js-cluster-application-uninstall-button');
expect(uninstallButton).toBeTruthy();
});
it('displays a success toast message if application uninstall was successful', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
title: 'GitLab Runner',
uninstallSuccessful: false,
});
vm.$toast = { show: jest.fn() };
vm.uninstallSuccessful = true;
return vm.$nextTick(() => {
expect(vm.$toast.show).toHaveBeenCalledWith('GitLab Runner uninstalled successfully.');
});
});
});
describe('when confirmation modal triggers confirm event', () => {
let wrapper;
beforeEach(() => {
wrapper = shallowMount(ApplicationRow, {
propsData: {
...DEFAULT_APPLICATION_STATE,
},
});
});
afterEach(() => {
wrapper.destroy();
});
it('triggers uninstallApplication event', () => {
jest.spyOn(eventHub, '$emit');
wrapper.find(UninstallApplicationConfirmationModal).vm.$emit('confirm');
expect(eventHub.$emit).toHaveBeenCalledWith('uninstallApplication', {
id: DEFAULT_APPLICATION_STATE.id,
});
});
});
2019-09-04 21:01:54 +05:30
describe('Update button', () => {
2019-03-02 22:35:43 +05:30
it('has indeterminate state on page load', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: null,
});
2019-09-04 21:01:54 +05:30
const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button');
2019-03-02 22:35:43 +05:30
2019-09-04 21:01:54 +05:30
expect(updateBtn).toBe(null);
2019-03-02 22:35:43 +05:30
});
2019-09-04 21:01:54 +05:30
it('has enabled "Update" when "updateAvailable" is true', () => {
2019-03-02 22:35:43 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2019-09-04 21:01:54 +05:30
updateAvailable: true,
2019-03-02 22:35:43 +05:30
});
2019-09-04 21:01:54 +05:30
const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button');
2019-03-02 22:35:43 +05:30
2019-09-04 21:01:54 +05:30
expect(updateBtn).not.toBe(null);
expect(updateBtn.innerHTML).toContain('Update');
2019-03-02 22:35:43 +05:30
});
2019-07-31 22:56:46 +05:30
it('has enabled "Retry update" when update process fails', () => {
2019-03-02 22:35:43 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2019-07-31 22:56:46 +05:30
status: APPLICATION_STATUS.INSTALLED,
updateFailed: true,
2019-03-02 22:35:43 +05:30
});
2019-09-04 21:01:54 +05:30
const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button');
2019-03-02 22:35:43 +05:30
2019-09-04 21:01:54 +05:30
expect(updateBtn).not.toBe(null);
expect(updateBtn.innerHTML).toContain('Retry update');
2019-03-02 22:35:43 +05:30
});
2019-07-07 11:18:12 +05:30
it('has disabled "Updating" when APPLICATION_STATUS.UPDATING', () => {
2019-03-02 22:35:43 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.UPDATING,
});
2019-09-04 21:01:54 +05:30
const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button');
2019-03-02 22:35:43 +05:30
2019-09-04 21:01:54 +05:30
expect(updateBtn).not.toBe(null);
expect(vm.isUpdating).toBe(true);
expect(updateBtn.innerHTML).toContain('Updating');
2019-03-02 22:35:43 +05:30
});
2019-09-04 21:01:54 +05:30
it('clicking update button emits event', () => {
2019-07-07 11:18:12 +05:30
jest.spyOn(eventHub, '$emit');
2019-03-02 22:35:43 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2019-07-31 22:56:46 +05:30
status: APPLICATION_STATUS.INSTALLED,
2019-09-04 21:01:54 +05:30
updateAvailable: true,
2019-03-02 22:35:43 +05:30
});
2019-09-04 21:01:54 +05:30
const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button');
2019-03-02 22:35:43 +05:30
2019-09-04 21:01:54 +05:30
updateBtn.click();
2019-03-02 22:35:43 +05:30
2019-09-04 21:01:54 +05:30
expect(eventHub.$emit).toHaveBeenCalledWith('updateApplication', {
2019-03-02 22:35:43 +05:30
id: DEFAULT_APPLICATION_STATE.id,
params: {},
});
});
2019-09-04 21:01:54 +05:30
it('clicking disabled update button emits nothing', () => {
2019-07-07 11:18:12 +05:30
jest.spyOn(eventHub, '$emit');
2019-03-02 22:35:43 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.UPDATING,
});
2019-09-04 21:01:54 +05:30
const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button');
2019-03-02 22:35:43 +05:30
2019-09-04 21:01:54 +05:30
updateBtn.click();
2019-03-02 22:35:43 +05:30
expect(eventHub.$emit).not.toHaveBeenCalled();
});
2019-09-04 21:01:54 +05:30
it('displays an error message if application update failed', () => {
2019-03-02 22:35:43 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
title: 'GitLab Runner',
2019-07-31 22:56:46 +05:30
status: APPLICATION_STATUS.INSTALLED,
updateFailed: true,
2019-03-02 22:35:43 +05:30
});
2019-09-04 21:01:54 +05:30
const failureMessage = vm.$el.querySelector('.js-cluster-application-update-details');
2019-03-02 22:35:43 +05:30
expect(failureMessage).not.toBe(null);
expect(failureMessage.innerHTML).toContain(
2019-07-07 11:18:12 +05:30
'Update failed. Please check the logs and try again.',
2019-03-02 22:35:43 +05:30
);
});
2019-07-31 22:56:46 +05:30
2019-09-04 21:01:54 +05:30
it('displays a success toast message if application update was successful', () => {
2019-07-31 22:56:46 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
title: 'GitLab Runner',
updateSuccessful: false,
});
vm.$toast = { show: jest.fn() };
vm.updateSuccessful = true;
return vm.$nextTick(() => {
2019-09-04 21:01:54 +05:30
expect(vm.$toast.show).toHaveBeenCalledWith('GitLab Runner updated successfully.');
2019-07-31 22:56:46 +05:30
});
});
2019-03-02 22:35:43 +05:30
});
describe('Version', () => {
2019-09-04 21:01:54 +05:30
it('displays a version number if application has been updated', () => {
2019-03-02 22:35:43 +05:30
const version = '0.1.45';
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2019-07-31 22:56:46 +05:30
status: APPLICATION_STATUS.INSTALLED,
updateSuccessful: true,
2019-03-02 22:35:43 +05:30
version,
});
2019-09-04 21:01:54 +05:30
const updateDetails = vm.$el.querySelector('.js-cluster-application-update-details');
const versionEl = vm.$el.querySelector('.js-cluster-application-update-version');
2019-03-02 22:35:43 +05:30
2019-09-04 21:01:54 +05:30
expect(updateDetails.innerHTML).toContain('Updated');
2019-03-02 22:35:43 +05:30
expect(versionEl).not.toBe(null);
expect(versionEl.innerHTML).toContain(version);
});
2019-09-04 21:01:54 +05:30
it('contains a link to the chart repo if application has been updated', () => {
2019-03-02 22:35:43 +05:30
const version = '0.1.45';
2019-12-04 20:38:33 +05:30
const chartRepo = 'https://gitlab.com/gitlab-org/charts/gitlab-runner';
2019-03-02 22:35:43 +05:30
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2019-07-31 22:56:46 +05:30
status: APPLICATION_STATUS.INSTALLED,
updateSuccessful: true,
2019-03-02 22:35:43 +05:30
chartRepo,
version,
});
2019-09-04 21:01:54 +05:30
const versionEl = vm.$el.querySelector('.js-cluster-application-update-version');
2019-03-02 22:35:43 +05:30
expect(versionEl.href).toEqual(chartRepo);
expect(versionEl.target).toEqual('_blank');
});
2019-09-04 21:01:54 +05:30
it('does not display a version number if application update failed', () => {
2019-03-02 22:35:43 +05:30
const version = '0.1.45';
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
2019-07-31 22:56:46 +05:30
status: APPLICATION_STATUS.INSTALLED,
updateFailed: true,
2019-03-02 22:35:43 +05:30
version,
});
2019-09-04 21:01:54 +05:30
const updateDetails = vm.$el.querySelector('.js-cluster-application-update-details');
const versionEl = vm.$el.querySelector('.js-cluster-application-update-version');
2019-03-02 22:35:43 +05:30
2019-09-04 21:01:54 +05:30
expect(updateDetails.innerHTML).toContain('failed');
2019-03-02 22:35:43 +05:30
expect(versionEl).toBe(null);
});
});
2018-03-17 18:26:18 +05:30
describe('Error block', () => {
2019-07-31 22:56:46 +05:30
describe('when nothing fails', () => {
it('does not show error block', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
});
const generalErrorMessage = vm.$el.querySelector(
'.js-cluster-application-general-error-message',
);
expect(generalErrorMessage).toBeNull();
2018-03-17 18:26:18 +05:30
});
});
2019-07-31 22:56:46 +05:30
describe('when install or uninstall fails', () => {
2018-03-17 18:26:18 +05:30
const statusReason = 'We broke it 0.0';
2019-07-31 22:56:46 +05:30
const requestReason = 'We broke the request 0.0';
beforeEach(() => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.ERROR,
statusReason,
requestReason,
installFailed: true,
});
2018-03-17 18:26:18 +05:30
});
2018-12-13 13:39:08 +05:30
2019-07-31 22:56:46 +05:30
it('shows status reason if it is available', () => {
const statusErrorMessage = vm.$el.querySelector(
'.js-cluster-application-status-error-message',
);
expect(statusErrorMessage.textContent.trim()).toEqual(statusReason);
});
2018-03-17 18:26:18 +05:30
2019-07-31 22:56:46 +05:30
it('shows request reason if it is available', () => {
const requestErrorMessage = vm.$el.querySelector(
'.js-cluster-application-request-error-message',
);
expect(requestErrorMessage.textContent.trim()).toEqual(requestReason);
});
2018-03-17 18:26:18 +05:30
});
2019-07-31 22:56:46 +05:30
describe('when install fails', () => {
beforeEach(() => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.ERROR,
installFailed: true,
});
2018-03-17 18:26:18 +05:30
});
2018-12-13 13:39:08 +05:30
2019-07-31 22:56:46 +05:30
it('shows a general message indicating the installation failed', () => {
const generalErrorMessage = vm.$el.querySelector(
'.js-cluster-application-general-error-message',
);
expect(generalErrorMessage.textContent.trim()).toEqual(
`Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`,
);
});
});
describe('when uninstall fails', () => {
beforeEach(() => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.ERROR,
uninstallFailed: true,
});
});
it('shows a general message indicating the uninstalling failed', () => {
const generalErrorMessage = vm.$el.querySelector(
'.js-cluster-application-general-error-message',
);
2018-03-17 18:26:18 +05:30
2019-07-31 22:56:46 +05:30
expect(generalErrorMessage.textContent.trim()).toEqual(
`Something went wrong while uninstalling ${DEFAULT_APPLICATION_STATE.title}`,
);
});
2018-03-17 18:26:18 +05:30
});
});
});