Skip to content

G
gitlab-ce
Commit 02f310f6 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Merge branch '207322-use-vue-test-utils-for-application-row-tests' into 'master' 

Use vue-test-utils for application row tests

See merge request gitlab-org/gitlab!33934
parents 156c3306 4032fc49
Hide whitespace changes
Inline Side-by-side
Showing with 157 additions and 292 deletions
app/assets/javascripts/clusters/components/application_row.vue
View file @ 02f310f6
...@@ -282,12 +282,16 @@ export default { ...@@ -282,12 +282,16 @@ export default {
}, },
methods: { methods: {
installClicked() { installClicked() {
if (this.disabled || this.installButtonDisabled) return;
eventHub.$emit('installApplication', { eventHub.$emit('installApplication', {
id: this.id, id: this.id,
params: this.installApplicationRequestParams, params: this.installApplicationRequestParams,
}); });
}, },
updateConfirmed() { updateConfirmed() {
if (this.isUpdating) return;
eventHub.$emit('updateApplication', { eventHub.$emit('updateApplication', {
id: this.id, id: this.id,
params: this.installApplicationRequestParams, params: this.installApplicationRequestParams,
......
spec/frontend/clusters/components/application_row_spec.js
View file @ 02f310f6
import Vue from 'vue';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import mountComponent from 'helpers/vue_mount_component_helper';
import eventHub from '~/clusters/event_hub'; import eventHub from '~/clusters/event_hub';
import { APPLICATION_STATUS, ELASTIC_STACK } from '~/clusters/constants'; import { APPLICATION_STATUS, ELASTIC_STACK } from '~/clusters/constants';
import applicationRow from '~/clusters/components/application_row.vue'; import ApplicationRow from '~/clusters/components/application_row.vue';
import UninstallApplicationConfirmationModal from '~/clusters/components/uninstall_application_confirmation_modal.vue'; import UninstallApplicationConfirmationModal from '~/clusters/components/uninstall_application_confirmation_modal.vue';
import UpdateApplicationConfirmationModal from '~/clusters/components/update_application_confirmation_modal.vue'; import UpdateApplicationConfirmationModal from '~/clusters/components/update_application_confirmation_modal.vue';
import { DEFAULT_APPLICATION_STATE } from '../services/mock_data'; import { DEFAULT_APPLICATION_STATE } from '../services/mock_data';
describe('Application Row', () => { describe('Application Row', () => {
let vm; let wrapper;
let ApplicationRow;
beforeEach(() => {
ApplicationRow = Vue.extend(applicationRow);
});
afterEach(() => { afterEach(() => {
vm.$destroy(); wrapper.destroy();
}); });
const mountComponent = data => {
wrapper = shallowMount(ApplicationRow, {
propsData: {
...DEFAULT_APPLICATION_STATE,
...data,
},
});
};
describe('Title', () => { describe('Title', () => {
it('shows title', () => { it('shows title', () => {
vm = mountComponent(ApplicationRow, { mountComponent({ titleLink: null });
...DEFAULT_APPLICATION_STATE,
titleLink: null,
});
const title = vm.$el.querySelector('.js-cluster-application-title');
expect(title.tagName).toEqual('SPAN'); const title = wrapper.find('.js-cluster-application-title');
expect(title.textContent.trim()).toEqual(DEFAULT_APPLICATION_STATE.title);
expect(title.element).toBeInstanceOf(HTMLSpanElement);
expect(title.text()).toEqual(DEFAULT_APPLICATION_STATE.title);
}); });
it('shows title link', () => { it('shows title link', () => {
expect(DEFAULT_APPLICATION_STATE.titleLink).toBeDefined(); expect(DEFAULT_APPLICATION_STATE.titleLink).toBeDefined();
mountComponent();
const title = wrapper.find('.js-cluster-application-title');
vm = mountComponent(ApplicationRow, { expect(title.element).toBeInstanceOf(HTMLAnchorElement);
...DEFAULT_APPLICATION_STATE, expect(title.text()).toEqual(DEFAULT_APPLICATION_STATE.title);
});
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', () => { describe('Install button', () => {
const button = () => wrapper.find('.js-cluster-application-install-button');
const checkButtonState = (label, loading, disabled) => {
expect(button().props('label')).toEqual(label);
expect(button().props('loading')).toEqual(loading);
expect(button().props('disabled')).toEqual(disabled);
};
it('has indeterminate state on page load', () => { it('has indeterminate state on page load', () => {
vm = mountComponent(ApplicationRow, { mountComponent({ status: null });
...DEFAULT_APPLICATION_STATE,
status: null,
});
expect(vm.installButtonLabel).toBeUndefined(); expect(button().props('label')).toBeUndefined();
}); });
it('has install button', () => { it('has install button', () => {
const installationBtn = vm.$el.querySelector('.js-cluster-application-install-button'); mountComponent();
expect(installationBtn).not.toBe(null); expect(button().exists()).toBe(true);
}); });
it('has disabled "Install" when APPLICATION_STATUS.NOT_INSTALLABLE', () => { it('has disabled "Install" when APPLICATION_STATUS.NOT_INSTALLABLE', () => {
vm = mountComponent(ApplicationRow, { mountComponent({ status: APPLICATION_STATUS.NOT_INSTALLABLE });
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.NOT_INSTALLABLE,
});
expect(vm.installButtonLabel).toEqual('Install'); checkButtonState('Install', false, true);
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(true);
}); });
it('has enabled "Install" when APPLICATION_STATUS.INSTALLABLE', () => { it('has enabled "Install" when APPLICATION_STATUS.INSTALLABLE', () => {
vm = mountComponent(ApplicationRow, { mountComponent({ status: APPLICATION_STATUS.INSTALLABLE });
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLABLE,
});
expect(vm.installButtonLabel).toEqual('Install'); checkButtonState('Install', false, false);
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(false);
}); });
it('has loading "Installing" when APPLICATION_STATUS.INSTALLING', () => { it('has loading "Installing" when APPLICATION_STATUS.INSTALLING', () => {
vm = mountComponent(ApplicationRow, { mountComponent({ status: APPLICATION_STATUS.INSTALLING });
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLING,
});
expect(vm.installButtonLabel).toEqual('Installing'); checkButtonState('Installing', true, true);
expect(vm.installButtonLoading).toEqual(true);
expect(vm.installButtonDisabled).toEqual(true);
}); });
it('has disabled "Installed" when application is installed and not uninstallable', () => { it('has disabled "Installed" when application is installed and not uninstallable', () => {
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLED, status: APPLICATION_STATUS.INSTALLED,
installed: true, installed: true,
uninstallable: false, uninstallable: false,
}); });
expect(vm.installButtonLabel).toEqual('Installed'); checkButtonState('Installed', false, true);
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(true);
}); });
it('hides when application is installed and uninstallable', () => { it('hides when application is installed and uninstallable', () => {
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLED, status: APPLICATION_STATUS.INSTALLED,
installed: true, installed: true,
uninstallable: true, uninstallable: true,
}); });
const installBtn = vm.$el.querySelector('.js-cluster-application-install-button');
expect(installBtn).toBe(null); expect(button().exists()).toBe(false);
}); });
it('has enabled "Install" when install fails', () => { it('has enabled "Install" when install fails', () => {
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLABLE, status: APPLICATION_STATUS.INSTALLABLE,
installFailed: true, installFailed: true,
}); });
expect(vm.installButtonLabel).toEqual('Install'); checkButtonState('Install', false, false);
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(false);
}); });
it('has enabled "Install" when REQUEST_FAILURE (so you can try installing again)', () => { it('has enabled "Install" when REQUEST_FAILURE (so you can try installing again)', () => {
vm = mountComponent(ApplicationRow, { mountComponent({ status: APPLICATION_STATUS.INSTALLABLE });
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLABLE,
});
expect(vm.installButtonLabel).toEqual('Install'); checkButtonState('Install', false, false);
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(false);
}); });
it('clicking install button emits event', () => { it('clicking install button emits event', () => {
jest.spyOn(eventHub, '$emit'); const spy = jest.spyOn(eventHub, '$emit');
vm = mountComponent(ApplicationRow, { mountComponent({ status: APPLICATION_STATUS.INSTALLABLE });
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLABLE,
});
const installButton = vm.$el.querySelector('.js-cluster-application-install-button');
installButton.click(); button().vm.$emit('click');
expect(eventHub.$emit).toHaveBeenCalledWith('installApplication', { expect(spy).toHaveBeenCalledWith('installApplication', {
id: DEFAULT_APPLICATION_STATE.id, id: DEFAULT_APPLICATION_STATE.id,
params: {}, params: {},
}); });
}); });
it('clicking install button when installApplicationRequestParams are provided emits event', () => { it('clicking install button when installApplicationRequestParams are provided emits event', () => {
jest.spyOn(eventHub, '$emit'); const spy = jest.spyOn(eventHub, '$emit');
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLABLE, status: APPLICATION_STATUS.INSTALLABLE,
installApplicationRequestParams: { hostname: 'jupyter' }, installApplicationRequestParams: { hostname: 'jupyter' },
}); });
const installButton = vm.$el.querySelector('.js-cluster-application-install-button');
installButton.click(); button().vm.$emit('click');
expect(eventHub.$emit).toHaveBeenCalledWith('installApplication', { expect(spy).toHaveBeenCalledWith('installApplication', {
id: DEFAULT_APPLICATION_STATE.id, id: DEFAULT_APPLICATION_STATE.id,
params: { hostname: 'jupyter' }, params: { hostname: 'jupyter' },
}); });
}); });
it('clicking disabled install button emits nothing', () => { it('clicking disabled install button emits nothing', () => {
jest.spyOn(eventHub, '$emit'); const spy = jest.spyOn(eventHub, '$emit');
vm = mountComponent(ApplicationRow, { mountComponent({ status: APPLICATION_STATUS.INSTALLING });
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLING,
});
const installButton = vm.$el.querySelector('.js-cluster-application-install-button');
expect(vm.installButtonDisabled).toEqual(true); expect(button().props('disabled')).toEqual(true);
installButton.click(); button().vm.$emit('click');
expect(eventHub.$emit).not.toHaveBeenCalled(); expect(spy).not.toHaveBeenCalled();
}); });
}); });
describe('Uninstall button', () => { describe('Uninstall button', () => {
it('displays button when app is installed and uninstallable', () => { it('displays button when app is installed and uninstallable', () => {
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
installed: true, installed: true,
uninstallable: true, uninstallable: true,
status: APPLICATION_STATUS.NOT_INSTALLABLE, status: APPLICATION_STATUS.NOT_INSTALLABLE,
}); });
const uninstallButton = vm.$el.querySelector('.js-cluster-application-uninstall-button'); const uninstallButton = wrapper.find('.js-cluster-application-uninstall-button');
expect(uninstallButton).toBeTruthy(); expect(uninstallButton.exists()).toBe(true);
}); });
it('displays a success toast message if application uninstall was successful', () => { it('displays a success toast message if application uninstall was successful', async () => {
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
title: 'GitLab Runner', title: 'GitLab Runner',
uninstallSuccessful: false, uninstallSuccessful: false,
}); });
vm.$toast = { show: jest.fn() }; wrapper.vm.$toast = { show: jest.fn() };
vm.uninstallSuccessful = true; wrapper.setProps({ uninstallSuccessful: true });
return vm.$nextTick(() => { await wrapper.vm.$nextTick();
expect(vm.$toast.show).toHaveBeenCalledWith('GitLab Runner uninstalled successfully.'); expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(
}); 'GitLab Runner uninstalled successfully.',
);
}); });
}); });
describe('when confirmation modal triggers confirm event', () => { describe('when confirmation modal triggers confirm event', () => {
let wrapper;
beforeEach(() => {
wrapper = shallowMount(ApplicationRow, {
propsData: {
...DEFAULT_APPLICATION_STATE,
},
});
});
afterEach(() => {
wrapper.destroy();
});
it('triggers uninstallApplication event', () => { it('triggers uninstallApplication event', () => {
jest.spyOn(eventHub, '$emit'); jest.spyOn(eventHub, '$emit');
mountComponent();
wrapper.find(UninstallApplicationConfirmationModal).vm.$emit('confirm'); wrapper.find(UninstallApplicationConfirmationModal).vm.$emit('confirm');
expect(eventHub.$emit).toHaveBeenCalledWith('uninstallApplication', { expect(eventHub.$emit).toHaveBeenCalledWith('uninstallApplication', {
...@@ -247,126 +196,91 @@ describe('Application Row', () => { ...@@ -247,126 +196,91 @@ describe('Application Row', () => {
}); });
describe('Update button', () => { describe('Update button', () => {
const button = () => wrapper.find('.js-cluster-application-update-button');
it('has indeterminate state on page load', () => { it('has indeterminate state on page load', () => {
vm = mountComponent(ApplicationRow, { mountComponent();
...DEFAULT_APPLICATION_STATE,
status: null,
});
const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button');
expect(updateBtn).toBe(null); expect(button().exists()).toBe(false);
}); });
it('has enabled "Update" when "updateAvailable" is true', () => { it('has enabled "Update" when "updateAvailable" is true', () => {
vm = mountComponent(ApplicationRow, { mountComponent({ updateAvailable: true });
...DEFAULT_APPLICATION_STATE,
updateAvailable: true,
});
const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button');
expect(updateBtn).not.toBe(null); expect(button().exists()).toBe(true);
expect(updateBtn.innerHTML).toContain('Update'); expect(button().props('label')).toContain('Update');
}); });
it('has enabled "Retry update" when update process fails', () => { it('has enabled "Retry update" when update process fails', () => {
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLED, status: APPLICATION_STATUS.INSTALLED,
updateFailed: true, updateFailed: true,
}); });
const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button');
expect(updateBtn).not.toBe(null); expect(button().exists()).toBe(true);
expect(updateBtn.innerHTML).toContain('Retry update'); expect(button().props('label')).toContain('Retry update');
}); });
it('has disabled "Updating" when APPLICATION_STATUS.UPDATING', () => { it('has disabled "Updating" when APPLICATION_STATUS.UPDATING', () => {
vm = mountComponent(ApplicationRow, { mountComponent({ status: APPLICATION_STATUS.UPDATING });
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.UPDATING,
});
const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button');
expect(updateBtn).not.toBe(null); expect(button().exists()).toBe(true);
expect(vm.isUpdating).toBe(true); expect(button().props('label')).toContain('Updating');
expect(updateBtn.innerHTML).toContain('Updating');
}); });
it('clicking update button emits event', () => { it('clicking update button emits event', () => {
jest.spyOn(eventHub, '$emit'); const spy = jest.spyOn(eventHub, '$emit');
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLED, status: APPLICATION_STATUS.INSTALLED,
updateAvailable: true, updateAvailable: true,
}); });
const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button');
updateBtn.click(); button().vm.$emit('click');
expect(eventHub.$emit).toHaveBeenCalledWith('updateApplication', { expect(spy).toHaveBeenCalledWith('updateApplication', {
id: DEFAULT_APPLICATION_STATE.id, id: DEFAULT_APPLICATION_STATE.id,
params: {}, params: {},
}); });
}); });
it('clicking disabled update button emits nothing', () => { it('clicking disabled update button emits nothing', () => {
jest.spyOn(eventHub, '$emit'); const spy = jest.spyOn(eventHub, '$emit');
vm = mountComponent(ApplicationRow, { mountComponent({ status: APPLICATION_STATUS.UPDATING });
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.UPDATING,
});
const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button');
updateBtn.click(); button().vm.$emit('click');
expect(eventHub.$emit).not.toHaveBeenCalled(); expect(spy).not.toHaveBeenCalled();
}); });
it('displays an error message if application update failed', () => { it('displays an error message if application update failed', () => {
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
title: 'GitLab Runner', title: 'GitLab Runner',
status: APPLICATION_STATUS.INSTALLED, status: APPLICATION_STATUS.INSTALLED,
updateFailed: true, updateFailed: true,
}); });
const failureMessage = vm.$el.querySelector('.js-cluster-application-update-details'); const failureMessage = wrapper.find('.js-cluster-application-update-details');
expect(failureMessage).not.toBe(null); expect(failureMessage.exists()).toBe(true);
expect(failureMessage.innerHTML).toContain( expect(failureMessage.text()).toContain(
'Update failed. Please check the logs and try again.', 'Update failed. Please check the logs and try again.',
); );
}); });
it('displays a success toast message if application update was successful', () => { it('displays a success toast message if application update was successful', async () => {
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
title: 'GitLab Runner', title: 'GitLab Runner',
updateSuccessful: false, updateSuccessful: false,
}); });
vm.$toast = { show: jest.fn() }; wrapper.vm.$toast = { show: jest.fn() };
vm.updateSuccessful = true; wrapper.setProps({ updateSuccessful: true });
return vm.$nextTick(() => { await wrapper.vm.$nextTick();
expect(vm.$toast.show).toHaveBeenCalledWith('GitLab Runner updated successfully.'); expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('GitLab Runner updated successfully.');
});
}); });
describe('when updating does not require confirmation', () => { describe('when updating does not require confirmation', () => {
let wrapper; beforeEach(() => mountComponent({ updateAvailable: true }));
beforeEach(() => {
wrapper = shallowMount(ApplicationRow, {
propsData: {
...DEFAULT_APPLICATION_STATE,
updateAvailable: true,
},
});
});
afterEach(() => {
wrapper.destroy();
});
it('the modal is not rendered', () => { it('the modal is not rendered', () => {
expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false); expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false);
...@@ -378,23 +292,14 @@ describe('Application Row', () => { ...@@ -378,23 +292,14 @@ describe('Application Row', () => {
}); });
describe('when updating requires confirmation', () => { describe('when updating requires confirmation', () => {
let wrapper;
beforeEach(() => { beforeEach(() => {
wrapper = shallowMount(ApplicationRow, { mountComponent({
propsData: { updateAvailable: true,
...DEFAULT_APPLICATION_STATE, id: ELASTIC_STACK,
updateAvailable: true, version: '1.1.2',
id: ELASTIC_STACK,
version: '1.1.2',
},
}); });
}); });
afterEach(() => {
wrapper.destroy();
});
it('displays a modal', () => { it('displays a modal', () => {
expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(true); expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(true);
}); });
...@@ -415,60 +320,37 @@ describe('Application Row', () => { ...@@ -415,60 +320,37 @@ describe('Application Row', () => {
}); });
describe('updating Elastic Stack special case', () => { describe('updating Elastic Stack special case', () => {
let wrapper;
afterEach(() => {
wrapper.destroy();
});
it('needs confirmation if version is lower than 3.0.0', () => { it('needs confirmation if version is lower than 3.0.0', () => {
wrapper = shallowMount(ApplicationRow, { mountComponent({
propsData: { updateAvailable: true,
...DEFAULT_APPLICATION_STATE, id: ELASTIC_STACK,
updateAvailable: true, version: '1.1.2',
id: ELASTIC_STACK,
version: '1.1.2',
},
}); });
wrapper.vm.$nextTick(() => { expect(wrapper.contains("[data-qa-selector='update_button_with_confirmation']")).toBe(true);
expect(wrapper.contains("[data-qa-selector='update_button_with_confirmation']")).toBe( expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(true);
true,
);
expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(true);
});
}); });
it('does not need confirmation is version is 3.0.0', () => { it('does not need confirmation is version is 3.0.0', () => {
wrapper = shallowMount(ApplicationRow, { mountComponent({
propsData: { updateAvailable: true,
...DEFAULT_APPLICATION_STATE, id: ELASTIC_STACK,
updateAvailable: true, version: '3.0.0',
id: ELASTIC_STACK,
version: '3.0.0',
},
}); });
wrapper.vm.$nextTick(() => { expect(wrapper.contains("[data-qa-selector='update_button']")).toBe(true);
expect(wrapper.contains("[data-qa-selector='update_button']")).toBe(true); expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false);
expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false);
});
}); });
it('does not need confirmation if version is higher than 3.0.0', () => { it('does not need confirmation if version is higher than 3.0.0', () => {
wrapper = shallowMount(ApplicationRow, { mountComponent({
propsData: { updateAvailable: true,
...DEFAULT_APPLICATION_STATE, id: ELASTIC_STACK,
updateAvailable: true, version: '5.2.1',
id: ELASTIC_STACK,
version: '5.2.1',
},
}); });
wrapper.vm.$nextTick(() => { expect(wrapper.contains("[data-qa-selector='update_button']")).toBe(true);
expect(wrapper.contains("[data-qa-selector='update_button']")).toBe(true); expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false);
expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false);
});
}); });
}); });
}); });
...@@ -476,63 +358,57 @@ describe('Application Row', () => { ...@@ -476,63 +358,57 @@ describe('Application Row', () => {
describe('Version', () => { describe('Version', () => {
it('displays a version number if application has been updated', () => { it('displays a version number if application has been updated', () => {
const version = '0.1.45'; const version = '0.1.45';
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLED, status: APPLICATION_STATUS.INSTALLED,
updateSuccessful: true, updateSuccessful: true,
version, version,
}); });
const updateDetails = vm.$el.querySelector('.js-cluster-application-update-details'); const updateDetails = wrapper.find('.js-cluster-application-update-details');
const versionEl = vm.$el.querySelector('.js-cluster-application-update-version'); const versionEl = wrapper.find('.js-cluster-application-update-version');
expect(updateDetails.innerHTML).toContain('Updated'); expect(updateDetails.text()).toContain('Updated');
expect(versionEl).not.toBe(null); expect(versionEl.exists()).toBe(true);
expect(versionEl.innerHTML).toContain(version); expect(versionEl.text()).toContain(version);
}); });
it('contains a link to the chart repo if application has been updated', () => { it('contains a link to the chart repo if application has been updated', () => {
const version = '0.1.45'; const version = '0.1.45';
const chartRepo = 'https://gitlab.com/gitlab-org/charts/gitlab-runner'; const chartRepo = 'https://gitlab.com/gitlab-org/charts/gitlab-runner';
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLED, status: APPLICATION_STATUS.INSTALLED,
updateSuccessful: true, updateSuccessful: true,
chartRepo, chartRepo,
version, version,
}); });
const versionEl = vm.$el.querySelector('.js-cluster-application-update-version'); const versionEl = wrapper.find('.js-cluster-application-update-version');
expect(versionEl.href).toEqual(chartRepo); expect(versionEl.attributes('href')).toEqual(chartRepo);
expect(versionEl.target).toEqual('_blank'); expect(versionEl.props('target')).toEqual('_blank');
}); });
it('does not display a version number if application update failed', () => { it('does not display a version number if application update failed', () => {
const version = '0.1.45'; const version = '0.1.45';
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLED, status: APPLICATION_STATUS.INSTALLED,
updateFailed: true, updateFailed: true,
version, version,
}); });
const updateDetails = vm.$el.querySelector('.js-cluster-application-update-details'); const updateDetails = wrapper.find('.js-cluster-application-update-details');
const versionEl = vm.$el.querySelector('.js-cluster-application-update-version'); const versionEl = wrapper.find('.js-cluster-application-update-version');
expect(updateDetails.innerHTML).toContain('failed'); expect(updateDetails.text()).toContain('failed');
expect(versionEl).toBe(null); expect(versionEl.exists()).toBe(false);
}); });
}); });
describe('Error block', () => { describe('Error block', () => {
const generalErrorMessage = () => wrapper.find('.js-cluster-application-general-error-message');
describe('when nothing fails', () => { describe('when nothing fails', () => {
it('does not show error block', () => { it('does not show error block', () => {
vm = mountComponent(ApplicationRow, { mountComponent();
...DEFAULT_APPLICATION_STATE,
});
const generalErrorMessage = vm.$el.querySelector(
'.js-cluster-application-general-error-message',
);
expect(generalErrorMessage).toBeNull(); expect(generalErrorMessage().exists()).toBe(false);
}); });
}); });
...@@ -541,8 +417,7 @@ describe('Application Row', () => { ...@@ -541,8 +417,7 @@ describe('Application Row', () => {
const requestReason = 'We broke the request 0.0'; const requestReason = 'We broke the request 0.0';
beforeEach(() => { beforeEach(() => {
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.ERROR, status: APPLICATION_STATUS.ERROR,
statusReason, statusReason,
requestReason, requestReason,
...@@ -551,37 +426,28 @@ describe('Application Row', () => { ...@@ -551,37 +426,28 @@ describe('Application Row', () => {
}); });
it('shows status reason if it is available', () => { it('shows status reason if it is available', () => {
const statusErrorMessage = vm.$el.querySelector( const statusErrorMessage = wrapper.find('.js-cluster-application-status-error-message');
'.js-cluster-application-status-error-message',
);
expect(statusErrorMessage.textContent.trim()).toEqual(statusReason); expect(statusErrorMessage.text()).toEqual(statusReason);
}); });
it('shows request reason if it is available', () => { it('shows request reason if it is available', () => {
const requestErrorMessage = vm.$el.querySelector( const requestErrorMessage = wrapper.find('.js-cluster-application-request-error-message');
'.js-cluster-application-request-error-message',
);
expect(requestErrorMessage.textContent.trim()).toEqual(requestReason); expect(requestErrorMessage.text()).toEqual(requestReason);
}); });
}); });
describe('when install fails', () => { describe('when install fails', () => {
beforeEach(() => { beforeEach(() => {
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.ERROR, status: APPLICATION_STATUS.ERROR,
installFailed: true, installFailed: true,
}); });
}); });
it('shows a general message indicating the installation failed', () => { it('shows a general message indicating the installation failed', () => {
const generalErrorMessage = vm.$el.querySelector( expect(generalErrorMessage().text()).toEqual(
'.js-cluster-application-general-error-message',
);
expect(generalErrorMessage.textContent.trim()).toEqual(
`Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`, `Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`,
); );
}); });
...@@ -589,19 +455,14 @@ describe('Application Row', () => { ...@@ -589,19 +455,14 @@ describe('Application Row', () => {
describe('when uninstall fails', () => { describe('when uninstall fails', () => {
beforeEach(() => { beforeEach(() => {
vm = mountComponent(ApplicationRow, { mountComponent({
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.ERROR, status: APPLICATION_STATUS.ERROR,
uninstallFailed: true, uninstallFailed: true,
}); });
}); });
it('shows a general message indicating the uninstalling failed', () => { it('shows a general message indicating the uninstalling failed', () => {
const generalErrorMessage = vm.$el.querySelector( expect(generalErrorMessage().text()).toEqual(
'.js-cluster-application-general-error-message',
);
expect(generalErrorMessage.textContent.trim()).toEqual(
`Something went wrong while uninstalling ${DEFAULT_APPLICATION_STATE.title}`, `Something went wrong while uninstalling ${DEFAULT_APPLICATION_STATE.title}`,
); );
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7