diff options
Diffstat (limited to 'spec/frontend/monitoring/pages')
-rw-r--r-- | spec/frontend/monitoring/pages/panel_new_page_spec.js | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/spec/frontend/monitoring/pages/panel_new_page_spec.js b/spec/frontend/monitoring/pages/panel_new_page_spec.js new file mode 100644 index 00000000000..83365b754d9 --- /dev/null +++ b/spec/frontend/monitoring/pages/panel_new_page_spec.js @@ -0,0 +1,98 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; +import { DASHBOARD_PAGE, PANEL_NEW_PAGE } from '~/monitoring/router/constants'; +import { createStore } from '~/monitoring/stores'; +import DashboardPanelBuilder from '~/monitoring/components/dashboard_panel_builder.vue'; + +import PanelNewPage from '~/monitoring/pages/panel_new_page.vue'; + +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(); + }); + }); +}); |