98 lines
2.4 KiB
JavaScript
98 lines
2.4 KiB
JavaScript
import { GlButton } from '@gitlab/ui';
|
|
import { shallowMount } from '@vue/test-utils';
|
|
import DashboardPanelBuilder from '~/monitoring/components/dashboard_panel_builder.vue';
|
|
import PanelNewPage from '~/monitoring/pages/panel_new_page.vue';
|
|
import { DASHBOARD_PAGE, PANEL_NEW_PAGE } from '~/monitoring/router/constants';
|
|
import { createStore } from '~/monitoring/stores';
|
|
|
|
const dashboard = 'dashboard.yml';
|
|
|
|
// Button stub that can accept `to` as router links do
|
|
// https://bootstrap-vue.org/docs/components/button#comp-ref-b-button-props
|
|
const GlButtonStub = {
|
|
extends: GlButton,
|
|
props: {
|
|
to: [String, Object],
|
|
},
|
|
};
|
|
|
|
describe('monitoring/pages/panel_new_page', () => {
|
|
let store;
|
|
let wrapper;
|
|
let $route;
|
|
let $router;
|
|
|
|
const mountComponent = (propsData = {}, route) => {
|
|
$route = route ?? { name: PANEL_NEW_PAGE, params: { dashboard } };
|
|
$router = {
|
|
push: jest.fn(),
|
|
};
|
|
|
|
wrapper = shallowMount(PanelNewPage, {
|
|
propsData,
|
|
store,
|
|
stubs: {
|
|
GlButton: GlButtonStub,
|
|
},
|
|
mocks: {
|
|
$router,
|
|
$route,
|
|
},
|
|
});
|
|
};
|
|
|
|
const findBackButton = () => wrapper.find(GlButtonStub);
|
|
const findPanelBuilder = () => wrapper.find(DashboardPanelBuilder);
|
|
|
|
beforeEach(() => {
|
|
store = createStore();
|
|
mountComponent();
|
|
});
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
});
|
|
|
|
describe('back to dashboard button', () => {
|
|
it('is rendered', () => {
|
|
expect(findBackButton().exists()).toBe(true);
|
|
expect(findBackButton().props('icon')).toBe('go-back');
|
|
});
|
|
|
|
it('links back to the dashboard', () => {
|
|
expect(findBackButton().props('to')).toEqual({
|
|
name: DASHBOARD_PAGE,
|
|
params: { dashboard },
|
|
});
|
|
});
|
|
|
|
it('links back to the dashboard while preserving query params', () => {
|
|
$route = {
|
|
name: PANEL_NEW_PAGE,
|
|
params: { dashboard },
|
|
query: { another: 'param' },
|
|
};
|
|
|
|
mountComponent({}, $route);
|
|
|
|
expect(findBackButton().props('to')).toEqual({
|
|
name: DASHBOARD_PAGE,
|
|
params: { dashboard },
|
|
query: { another: 'param' },
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('dashboard panel builder', () => {
|
|
it('is rendered', () => {
|
|
expect(findPanelBuilder().exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('page routing', () => {
|
|
it('route is not updated by default', () => {
|
|
expect($router.push).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|