164 lines
4.7 KiB
JavaScript
164 lines
4.7 KiB
JavaScript
import { GlButton, GlCard } from '@gitlab/ui';
|
|
import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
|
|
import Vuex from 'vuex';
|
|
import { TEST_HOST } from 'helpers/test_constants';
|
|
import EmbedGroup from '~/monitoring/components/embeds/embed_group.vue';
|
|
import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
|
|
import {
|
|
addModuleAction,
|
|
initialEmbedGroupState,
|
|
singleEmbedProps,
|
|
dashboardEmbedProps,
|
|
multipleEmbedProps,
|
|
} from './mock_data';
|
|
|
|
const localVue = createLocalVue();
|
|
localVue.use(Vuex);
|
|
|
|
describe('Embed Group', () => {
|
|
let wrapper;
|
|
let store;
|
|
const metricsWithDataGetter = jest.fn();
|
|
|
|
function mountComponent({ urls = [TEST_HOST], shallow = true, stubs } = {}) {
|
|
const mountMethod = shallow ? shallowMount : mount;
|
|
wrapper = mountMethod(EmbedGroup, {
|
|
localVue,
|
|
store,
|
|
propsData: {
|
|
urls,
|
|
},
|
|
stubs,
|
|
});
|
|
}
|
|
|
|
beforeEach(() => {
|
|
store = new Vuex.Store({
|
|
modules: {
|
|
embedGroup: {
|
|
namespaced: true,
|
|
actions: { addModule: jest.fn() },
|
|
getters: { metricsWithData: metricsWithDataGetter },
|
|
state: initialEmbedGroupState,
|
|
},
|
|
},
|
|
});
|
|
store.registerModule = jest.fn();
|
|
jest.spyOn(store, 'dispatch');
|
|
});
|
|
|
|
afterEach(() => {
|
|
metricsWithDataGetter.mockReset();
|
|
if (wrapper) {
|
|
wrapper.destroy();
|
|
}
|
|
});
|
|
|
|
describe('interactivity', () => {
|
|
it('hides the component when no chart data is loaded', () => {
|
|
metricsWithDataGetter.mockReturnValue([]);
|
|
mountComponent();
|
|
|
|
expect(wrapper.find(GlCard).isVisible()).toBe(false);
|
|
});
|
|
|
|
it('shows the component when chart data is loaded', () => {
|
|
metricsWithDataGetter.mockReturnValue([1]);
|
|
mountComponent();
|
|
|
|
expect(wrapper.find(GlCard).isVisible()).toBe(true);
|
|
});
|
|
|
|
it('is expanded by default', () => {
|
|
metricsWithDataGetter.mockReturnValue([1]);
|
|
mountComponent({ shallow: false, stubs: { MetricEmbed: true } });
|
|
|
|
expect(wrapper.find('.gl-card-body').classes()).not.toContain('d-none');
|
|
});
|
|
|
|
it('collapses when clicked', (done) => {
|
|
metricsWithDataGetter.mockReturnValue([1]);
|
|
mountComponent({ shallow: false, stubs: { MetricEmbed: true } });
|
|
|
|
wrapper.find(GlButton).trigger('click');
|
|
|
|
wrapper.vm.$nextTick(() => {
|
|
expect(wrapper.find('.gl-card-body').classes()).toContain('d-none');
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('single metrics', () => {
|
|
beforeEach(() => {
|
|
metricsWithDataGetter.mockReturnValue([1]);
|
|
mountComponent();
|
|
});
|
|
|
|
it('renders an Embed component', () => {
|
|
expect(wrapper.find(MetricEmbed).exists()).toBe(true);
|
|
});
|
|
|
|
it('passes the correct props to the Embed component', () => {
|
|
expect(wrapper.find(MetricEmbed).props()).toEqual(singleEmbedProps());
|
|
});
|
|
|
|
it('adds the monitoring dashboard module', () => {
|
|
expect(store.dispatch).toHaveBeenCalledWith(addModuleAction, 'monitoringDashboard/0');
|
|
});
|
|
});
|
|
|
|
describe('dashboard metrics', () => {
|
|
beforeEach(() => {
|
|
metricsWithDataGetter.mockReturnValue([2]);
|
|
mountComponent();
|
|
});
|
|
|
|
it('passes the correct props to the dashboard Embed component', () => {
|
|
expect(wrapper.find(MetricEmbed).props()).toEqual(dashboardEmbedProps());
|
|
});
|
|
|
|
it('adds the monitoring dashboard module', () => {
|
|
expect(store.dispatch).toHaveBeenCalledWith(addModuleAction, 'monitoringDashboard/0');
|
|
});
|
|
});
|
|
|
|
describe('multiple metrics', () => {
|
|
beforeEach(() => {
|
|
metricsWithDataGetter.mockReturnValue([1, 1]);
|
|
mountComponent({ urls: [TEST_HOST, TEST_HOST] });
|
|
});
|
|
|
|
it('creates Embed components', () => {
|
|
expect(wrapper.findAll(MetricEmbed)).toHaveLength(2);
|
|
});
|
|
|
|
it('passes the correct props to the Embed components', () => {
|
|
expect(wrapper.findAll(MetricEmbed).wrappers.map((item) => item.props())).toEqual(
|
|
multipleEmbedProps(),
|
|
);
|
|
});
|
|
|
|
it('adds multiple monitoring dashboard modules', () => {
|
|
expect(store.dispatch).toHaveBeenCalledWith(addModuleAction, 'monitoringDashboard/0');
|
|
expect(store.dispatch).toHaveBeenCalledWith(addModuleAction, 'monitoringDashboard/1');
|
|
});
|
|
});
|
|
|
|
describe('button text', () => {
|
|
it('has a singular label when there is one embed', () => {
|
|
metricsWithDataGetter.mockReturnValue([1]);
|
|
mountComponent({ shallow: false, stubs: { MetricEmbed: true } });
|
|
|
|
expect(wrapper.find(GlButton).text()).toBe('Hide chart');
|
|
});
|
|
|
|
it('has a plural label when there are multiple embeds', () => {
|
|
metricsWithDataGetter.mockReturnValue([2]);
|
|
mountComponent({ shallow: false, stubs: { MetricEmbed: true } });
|
|
|
|
expect(wrapper.find(GlButton).text()).toBe('Hide charts');
|
|
});
|
|
});
|
|
});
|