1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
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();
});
});
});
|
