Skip to content

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

Merge branch '36129_01-update-tests' into 'master' 

Refactor some Geo Node tests with vue-test-utils

See merge request gitlab-org/gitlab!27150
parents 17249ad9 047f4c6a
Show whitespace changes
Inline Side-by-side
Showing with 209 additions and 173 deletions
ee/spec/frontend/geo_nodes/components/geo_node_detail_item_spec.js
View file @ e285fc7f
import Vue from 'vue';
import { shallowMount } from '@vue/test-utils';
import Icon from '~/vue_shared/components/icon.vue';
import StackedProgressBar from '~/vue_shared/components/stacked_progress_bar.vue';
import GeoNodeDetailItemComponent from 'ee/geo_nodes/components/geo_node_detail_item.vue';
import GeoNodeSyncSettings from 'ee/geo_nodes/components/geo_node_sync_settings.vue';
import GeoNodeEventStatus from 'ee/geo_nodes/components/geo_node_event_status.vue';
import geoNodeDetailItemComponent from 'ee/geo_nodes/components/geo_node_detail_item.vue';
import { VALUE_TYPE, CUSTOM_TYPE } from 'ee/geo_nodes/constants';
import mountComponent from 'helpers/vue_mount_component_helper';
import { rawMockNodeDetails } from '../mock_data';
const createComponent = config => {
const Component = Vue.extend(geoNodeDetailItemComponent);
const defaultConfig = Object.assign(
{
describe('GeoNodeDetailItemComponent', () => {
let wrapper;
const defaultProps = {
itemTitle: 'GitLab version',
cssClass: 'node-version',
itemValue: '10.4.0-pre',
......@@ -16,75 +20,96 @@ const createComponent = config => {
failureLabel: 'Failed',
neutralLabel: 'Out of sync',
itemValueType: VALUE_TYPE.PLAIN,
};
const createComponent = (props = {}) => {
wrapper = shallowMount(GeoNodeDetailItemComponent, {
propsData: {
...defaultProps,
...props,
},
config,
);
});
};
return mountComponent(Component, defaultConfig);
};
afterEach(() => {
wrapper.destroy();
});
describe('GeoNodeDetailItemComponent', () => {
describe('template', () => {
it('renders container elements correctly', () => {
const vm = createComponent();
beforeEach(() => {
createComponent();
});
expect(vm.$el.classList.contains('node-detail-item')).toBeTruthy();
expect(vm.$el.querySelectorAll('.node-detail-title').length).not.toBe(0);
expect(vm.$el.querySelector('.node-detail-title').innerText.trim()).toBe('GitLab version');
vm.$destroy();
it('renders container elements correctly', () => {
expect(wrapper.vm.$el.classList.contains('node-detail-item')).toBeTruthy();
expect(wrapper.vm.$el.querySelectorAll('.node-detail-title').length).not.toBe(0);
expect(wrapper.vm.$el.querySelector('.node-detail-title').innerText.trim()).toBe(
'GitLab version',
);
});
it('renders plain item value', () => {
const vm = createComponent();
expect(vm.$el.querySelectorAll('.node-detail-value').length).not.toBe(0);
expect(vm.$el.querySelector('.node-detail-value').innerText.trim()).toBe('10.4.0-pre');
vm.$destroy();
expect(wrapper.vm.$el.querySelectorAll('.node-detail-value').length).not.toBe(0);
expect(wrapper.vm.$el.querySelector('.node-detail-value').innerText.trim()).toBe(
'10.4.0-pre',
);
});
it('renders item title help info icon and popover with help info', () => {
const helpInfo = {
describe('with help info', () => {
beforeEach(() => {
createComponent({
helpInfo: {
title: 'Foo title tooltip',
url: 'https://docs.gitlab.com',
urlText: 'Help',
};
const vm = createComponent({ helpInfo });
const helpTextIconEl = vm.$el.querySelector('.node-detail-help-text');
},
});
});
expect(helpTextIconEl).not.toBeNull();
expect(helpTextIconEl.querySelector('use').getAttribute('xlink:href')).toContain('question');
vm.$destroy();
it('renders item title help info icon', () => {
const helpTextIconEl = wrapper.find(Icon);
expect(helpTextIconEl.exists()).toBeTruthy();
expect(helpTextIconEl.attributes('name')).toBe('question');
});
});
it('renders graph item value', () => {
const vm = createComponent({
describe('when graph item value', () => {
beforeEach(() => {
createComponent({
itemValueType: VALUE_TYPE.GRAPH,
itemValue: { successCount: 5, failureCount: 3, totalCount: 10 },
});
});
expect(vm.$el.querySelectorAll('.stacked-progress-bar').length).not.toBe(0);
vm.$destroy();
it('renders progress bar', () => {
expect(wrapper.find(StackedProgressBar).exists()).toBeTruthy();
});
it('renders stale information status icon when `itemValueStale` prop is true', () => {
describe('with itemValueStale prop', () => {
const itemValueStaleTooltip = 'Data is out of date from 8 hours ago';
const vm = createComponent({
beforeEach(() => {
createComponent({
itemValueType: VALUE_TYPE.GRAPH,
itemValue: { successCount: 5, failureCount: 3, totalCount: 10 },
itemValueStale: true,
itemValueStaleTooltip,
});
});
const iconEl = vm.$el.querySelector('.text-warning-500');
it('renders stale information icon', () => {
const iconEl = wrapper.find('.text-warning-500');
expect(iconEl).not.toBeNull();
expect(iconEl.dataset.originalTitle).toBe(itemValueStaleTooltip);
expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('time-out');
vm.$destroy();
expect(iconEl.attributes('data-original-title')).toBe(itemValueStaleTooltip);
expect(iconEl.attributes('name')).toBe('time-out');
});
});
});
it('renders sync settings item value', () => {
const vm = createComponent({
describe('when custom type is sync', () => {
beforeEach(() => {
createComponent({
itemValueType: VALUE_TYPE.CUSTOM,
customType: CUSTOM_TYPE.SYNC,
itemValue: {
......@@ -99,13 +124,16 @@ describe('GeoNodeDetailItemComponent', () => {
},
},
});
});
expect(vm.$el.querySelectorAll('.node-sync-settings').length).not.toBe(0);
vm.$destroy();
it('renders sync settings item value', () => {
expect(wrapper.find(GeoNodeSyncSettings).exists()).toBeTruthy();
});
});
it('renders event status item value', () => {
const vm = createComponent({
describe('when custom type is event', () => {
beforeEach(() => {
createComponent({
itemValueType: VALUE_TYPE.CUSTOM,
customType: CUSTOM_TYPE.EVENT,
itemValue: {
......@@ -113,18 +141,23 @@ describe('GeoNodeDetailItemComponent', () => {
eventTimeStamp: rawMockNodeDetails.last_event_timestamp,
},
});
});
expect(vm.$el.querySelectorAll('.event-status-timestamp').length).not.toBe(0);
vm.$destroy();
it('renders event status item value', () => {
expect(wrapper.find(GeoNodeEventStatus).exists()).toBeTruthy();
});
});
it('does not render if featureDisabled is true', () => {
const vm = createComponent({
describe('when featureDisabled is true', () => {
beforeEach(() => {
createComponent({
featureDisabled: true,
});
});
expect(vm.$el.innerHTML).toBeUndefined();
vm.$destroy();
it('does not render', () => {
expect(wrapper.vm.$el.innerHTML).toBeUndefined();
});
});
});
});
ee/spec/frontend/geo_nodes/components/node_detail_sections/node_details_section_sync_spec.js
View file @ e285fc7f
import Vue from 'vue';
import { shallowMount } from '@vue/test-utils';
import NodeDetailsSectionSyncComponent from 'ee/geo_nodes/components/node_detail_sections/node_details_section_sync.vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import { mockNodeDetails } from '../../mock_data';
import SectionRevealButton from 'ee/geo_nodes/components/node_detail_sections/section_reveal_button.vue';
const createComponent = (nodeDetails = Object.assign({}, mockNodeDetails)) => {
const Component = Vue.extend(NodeDetailsSectionSyncComponent);
return mountComponent(Component, {
nodeDetails,
});
};
import { mockNode, mockNodeDetails } from '../../mock_data';
describe('NodeDetailsSectionSync', () => {
let vm;
let wrapper;
const propsData = {
node: mockNode,
nodeDetails: mockNodeDetails,
};
const createComponent = () => {
wrapper = shallowMount(NodeDetailsSectionSyncComponent, {
stubs: {
geoNodeSyncProgress: true,
},
propsData,
});
};
beforeEach(() => {
gon.features = gon.features || {};
vm = createComponent();
createComponent();
});
afterEach(() => {
vm.$destroy();
wrapper.destroy();
});
describe('data', () => {
it('returns default data props', () => {
expect(vm.showSectionItems).toBe(false);
expect(Array.isArray(vm.nodeDetailItems)).toBe(true);
expect(vm.nodeDetailItems.length).toBeGreaterThan(0);
expect(wrapper.vm.showSectionItems).toBe(false);
expect(Array.isArray(wrapper.vm.nodeDetailItems)).toBe(true);
expect(wrapper.vm.nodeDetailItems.length).toBeGreaterThan(0);
});
});
describe('methods', () => {
describe('syncSettings', () => {
it('returns sync settings object', done => {
vm.nodeDetails.syncStatusUnavailable = true;
Vue.nextTick()
.then(() => {
const syncSettings = vm.syncSettings();
it('returns sync settings object', () => {
wrapper.vm.nodeDetails.syncStatusUnavailable = true;
return wrapper.vm.$nextTick(() => {
const syncSettings = wrapper.vm.syncSettings();
expect(syncSettings.syncStatusUnavailable).toBe(true);
expect(syncSettings.namespaces).toBe(mockNodeDetails.namespaces);
expect(syncSettings.lastEvent).toBe(mockNodeDetails.lastEvent);
expect(syncSettings.cursorLastEvent).toBe(mockNodeDetails.cursorLastEvent);
})
.then(done)
.catch(done.fail);
});
});
});
describe('dbReplicationLag', () => {
it('returns DB replication lag time duration', () => {
expect(vm.dbReplicationLag()).toBe('0m');
expect(wrapper.vm.dbReplicationLag()).toBe('0m');
});
it('returns `Unknown` when `dbReplicationLag` is null', done => {
vm.nodeDetails.dbReplicationLag = null;
Vue.nextTick()
.then(() => {
expect(vm.dbReplicationLag()).toBe('Unknown');
})
.then(done)
.catch(done.fail);
it('returns `Unknown` when `dbReplicationLag` is null', () => {
wrapper.vm.nodeDetails.dbReplicationLag = null;
return wrapper.vm.$nextTick(() => {
expect(wrapper.vm.dbReplicationLag()).toBe('Unknown');
});
});
});
describe('lastEventStatus', () => {
it('returns event status object', () => {
expect(vm.lastEventStatus().eventId).toBe(mockNodeDetails.lastEvent.id);
expect(vm.lastEventStatus().eventTimeStamp).toBe(mockNodeDetails.lastEvent.timeStamp);
expect(wrapper.vm.lastEventStatus().eventId).toBe(mockNodeDetails.lastEvent.id);
expect(wrapper.vm.lastEventStatus().eventTimeStamp).toBe(
mockNodeDetails.lastEvent.timeStamp,
);
});
});
describe('cursorLastEventStatus', () => {
it('returns event status object', () => {
expect(vm.cursorLastEventStatus().eventId).toBe(mockNodeDetails.cursorLastEvent.id);
expect(vm.cursorLastEventStatus().eventTimeStamp).toBe(
expect(wrapper.vm.cursorLastEventStatus().eventId).toBe(mockNodeDetails.cursorLastEvent.id);
expect(wrapper.vm.cursorLastEventStatus().eventTimeStamp).toBe(
mockNodeDetails.cursorLastEvent.timeStamp,
);
});
......@@ -85,19 +87,18 @@ describe('NodeDetailsSectionSync', () => {
describe('template', () => {
it('renders component container element', () => {
expect(vm.$el.classList.contains('sync-section')).toBe(true);
expect(wrapper.vm.$el.classList.contains('sync-section')).toBe(true);
});
it('renders show section button element', () => {
expect(vm.$el.querySelector('.btn-link')).not.toBeNull();
expect(vm.$el.querySelector('.btn-link > span').innerText.trim()).toBe('Sync information');
expect(wrapper.find(SectionRevealButton).exists()).toBeTruthy();
expect(wrapper.find(SectionRevealButton).attributes('buttontitle')).toBe('Sync information');
});
it('renders section items container element', done => {
vm.showSectionItems = true;
Vue.nextTick(() => {
expect(vm.$el.querySelector('.section-items-container')).not.toBeNull();
done();
it('renders section items container element', () => {
wrapper.vm.showSectionItems = true;
return wrapper.vm.$nextTick(() => {
expect(wrapper.vm.$el.querySelector('.section-items-container')).not.toBeNull();
});
});
});
......
ee/spec/frontend/geo_nodes/components/node_detail_sections/node_details_section_verification_spec.js
View file @ e285fc7f
import Vue from 'vue';
import { shallowMount } from '@vue/test-utils';
import NodeDetailsSectionVerificationComponent from 'ee/geo_nodes/components/node_detail_sections/node_details_section_verification.vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import SectionRevealButton from 'ee/geo_nodes/components/node_detail_sections/section_reveal_button.vue';
import { mockNodeDetails } from '../../mock_data';
const createComponent = ({ nodeDetails = mockNodeDetails, nodeTypePrimary = false }) => {
const Component = Vue.extend(NodeDetailsSectionVerificationComponent);
describe('NodeDetailsSectionVerification', () => {
let wrapper;
return mountComponent(Component, {
nodeDetails,
nodeTypePrimary,
});
};
const propsData = {
nodeDetails: mockNodeDetails,
nodeTypePrimary: false,
};
describe('NodeDetailsSectionVerification', () => {
let vm;
const createComponent = () => {
wrapper = shallowMount(NodeDetailsSectionVerificationComponent, {
propsData,
});
};
beforeEach(() => {
vm = createComponent({});
createComponent();
});
afterEach(() => {
vm.$destroy();
wrapper.destroy();
});
describe('data', () => {
it('returns default data props', () => {
expect(vm.showSectionItems).toBe(false);
expect(Array.isArray(vm.primaryNodeDetailItems)).toBe(true);
expect(Array.isArray(vm.secondaryNodeDetailItems)).toBe(true);
expect(vm.primaryNodeDetailItems.length).toBeGreaterThan(0);
expect(vm.secondaryNodeDetailItems.length).toBeGreaterThan(0);
expect(wrapper.vm.showSectionItems).toBe(false);
expect(Array.isArray(wrapper.vm.primaryNodeDetailItems)).toBe(true);
expect(Array.isArray(wrapper.vm.secondaryNodeDetailItems)).toBe(true);
expect(wrapper.vm.primaryNodeDetailItems.length).toBeGreaterThan(0);
expect(wrapper.vm.secondaryNodeDetailItems.length).toBeGreaterThan(0);
});
});
......@@ -48,7 +51,7 @@ describe('NodeDetailsSectionVerification', () => {
];
it('returns array containing items to show under primary node', () => {
const actualPrimaryItems = vm.getPrimaryNodeDetailItems();
const actualPrimaryItems = wrapper.vm.getPrimaryNodeDetailItems();
primaryItems.forEach((item, index) => {
expect(actualPrimaryItems[index].itemTitle).toBe(item.title);
expect(actualPrimaryItems[index].itemValue).toBe(mockNodeDetails[item.valueProp]);
......@@ -69,7 +72,7 @@ describe('NodeDetailsSectionVerification', () => {
];
it('returns array containing items to show under secondary node', () => {
const actualSecondaryItems = vm.getSecondaryNodeDetailItems();
const actualSecondaryItems = wrapper.vm.getSecondaryNodeDetailItems();
secondaryItems.forEach((item, index) => {
expect(actualSecondaryItems[index].itemTitle).toBe(item.title);
expect(actualSecondaryItems[index].itemValue).toBe(mockNodeDetails[item.valueProp]);
......@@ -80,21 +83,20 @@ describe('NodeDetailsSectionVerification', () => {
describe('template', () => {
it('renders component container element', () => {
expect(vm.$el.classList.contains('verification-section')).toBe(true);
expect(wrapper.vm.$el.classList.contains('verification-section')).toBe(true);
});
it('renders show section button element', () => {
expect(vm.$el.querySelector('.btn-link')).not.toBeNull();
expect(vm.$el.querySelector('.btn-link > span').innerText.trim()).toBe(
expect(wrapper.find(SectionRevealButton).exists()).toBeTruthy();
expect(wrapper.find(SectionRevealButton).attributes('buttontitle')).toBe(
'Verification information',
);
});
it('renders section items container element', done => {
vm.showSectionItems = true;
Vue.nextTick(() => {
expect(vm.$el.querySelector('.section-items-container')).not.toBeNull();
done();
it('renders section items container element', () => {
wrapper.vm.showSectionItems = true;
return wrapper.vm.$nextTick(() => {
expect(wrapper.vm.$el.querySelector('.section-items-container')).not.toBeNull();
});
});
});
......
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