diff options
author | Simon Knox <psimyn@gmail.com> | 2019-07-02 17:51:32 +0300 |
---|---|---|
committer | Simon Knox <psimyn@gmail.com> | 2019-07-04 07:14:38 +0300 |
commit | 824ec018a1f9bafe3d7b5ff5f7db2a04d3cb4993 (patch) | |
tree | 4f01de6818db60ddf2134064dca6c931ef6d25fd /spec | |
parent | 19dc1105524e3d25821670706a750043775588fa (diff) |
Use gl-empty-state for monitor charts
Move a unit test to jest and use snapshot tests
Diffstat (limited to 'spec')
3 files changed, 80 insertions, 101 deletions
diff --git a/spec/frontend/monitoring/__snapshots__/dashboard_state_spec.js.snap b/spec/frontend/monitoring/__snapshots__/dashboard_state_spec.js.snap new file mode 100644 index 00000000000..5f24bab600c --- /dev/null +++ b/spec/frontend/monitoring/__snapshots__/dashboard_state_spec.js.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EmptyState shows gettingStarted state 1`] = ` +<glemptystate-stub + description="Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments." + primarybuttonlink="/clustersPath" + primarybuttontext="Install on clusters" + secondarybuttonlink="/settingsPath" + secondarybuttontext="Configure existing installation" + svgpath="/path/to/getting-started.svg" + title="Get started with performance monitoring" +/> +`; + +exports[`EmptyState shows loading state 1`] = ` +<glemptystate-stub + description="Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available." + primarybuttonlink="/documentationPath" + primarybuttontext="View documentation" + secondarybuttonlink="" + secondarybuttontext="" + svgpath="/path/to/loading.svg" + title="Waiting for performance data" +/> +`; + +exports[`EmptyState shows unableToConnect state 1`] = ` +<glemptystate-stub + description="Ensure connectivity is available from the GitLab server to the Prometheus server" + primarybuttonlink="/documentationPath" + primarybuttontext="View documentation" + secondarybuttonlink="/settingsPath" + secondarybuttontext="Configure Prometheus" + svgpath="/path/to/unable-to-connect.svg" + title="Unable to connect to Prometheus server" +/> +`; diff --git a/spec/frontend/monitoring/dashboard_state_spec.js b/spec/frontend/monitoring/dashboard_state_spec.js new file mode 100644 index 00000000000..950422911eb --- /dev/null +++ b/spec/frontend/monitoring/dashboard_state_spec.js @@ -0,0 +1,43 @@ +import { shallowMount } from '@vue/test-utils'; +import EmptyState from '~/monitoring/components/empty_state.vue'; + +function createComponent(props) { + return shallowMount(EmptyState, { + propsData: { + ...props, + settingsPath: '/settingsPath', + clustersPath: '/clustersPath', + documentationPath: '/documentationPath', + emptyGettingStartedSvgPath: '/path/to/getting-started.svg', + emptyLoadingSvgPath: '/path/to/loading.svg', + emptyNoDataSvgPath: '/path/to/no-data.svg', + emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg', + }, + }); +} + +describe('EmptyState', () => { + it('shows gettingStarted state', () => { + const wrapper = createComponent({ + selectedState: 'gettingStarted', + }); + + expect(wrapper.element).toMatchSnapshot(); + }); + + it('shows loading state', () => { + const wrapper = createComponent({ + selectedState: 'loading', + }); + + expect(wrapper.element).toMatchSnapshot(); + }); + + it('shows unableToConnect state', () => { + const wrapper = createComponent({ + selectedState: 'unableToConnect', + }); + + expect(wrapper.element).toMatchSnapshot(); + }); +}); diff --git a/spec/javascripts/monitoring/dashboard_state_spec.js b/spec/javascripts/monitoring/dashboard_state_spec.js deleted file mode 100644 index 6b2be83aa8c..00000000000 --- a/spec/javascripts/monitoring/dashboard_state_spec.js +++ /dev/null @@ -1,101 +0,0 @@ -import Vue from 'vue'; -import EmptyState from '~/monitoring/components/empty_state.vue'; -import { statePaths } from './mock_data'; - -function createComponent(props) { - const Component = Vue.extend(EmptyState); - - return new Component({ - propsData: { - ...props, - settingsPath: statePaths.settingsPath, - clustersPath: statePaths.clustersPath, - documentationPath: statePaths.documentationPath, - emptyGettingStartedSvgPath: '/path/to/getting-started.svg', - emptyLoadingSvgPath: '/path/to/loading.svg', - emptyNoDataSvgPath: '/path/to/no-data.svg', - emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg', - }, - }).$mount(); -} - -function getTextFromNode(component, selector) { - return component.$el.querySelector(selector).firstChild.nodeValue.trim(); -} - -describe('EmptyState', () => { - describe('Computed props', () => { - it('currentState', () => { - const component = createComponent({ - selectedState: 'gettingStarted', - }); - - expect(component.currentState).toBe(component.states.gettingStarted); - }); - - it('showButtonDescription returns a description with a link for the unableToConnect state', () => { - const component = createComponent({ - selectedState: 'unableToConnect', - }); - - expect(component.showButtonDescription).toEqual(true); - }); - - it('showButtonDescription returns the description without a link for any other state', () => { - const component = createComponent({ - selectedState: 'loading', - }); - - expect(component.showButtonDescription).toEqual(false); - }); - }); - - it('should show the gettingStarted state', () => { - const component = createComponent({ - selectedState: 'gettingStarted', - }); - - expect(component.$el.querySelector('svg')).toBeDefined(); - expect(getTextFromNode(component, '.state-title')).toEqual( - component.states.gettingStarted.title, - ); - - expect(getTextFromNode(component, '.state-description')).toEqual( - component.states.gettingStarted.description, - ); - - expect(getTextFromNode(component, '.btn-success')).toEqual( - component.states.gettingStarted.buttonText, - ); - }); - - it('should show the loading state', () => { - const component = createComponent({ - selectedState: 'loading', - }); - - expect(component.$el.querySelector('svg')).toBeDefined(); - expect(getTextFromNode(component, '.state-title')).toEqual(component.states.loading.title); - expect(getTextFromNode(component, '.state-description')).toEqual( - component.states.loading.description, - ); - - expect(getTextFromNode(component, '.btn-success')).toEqual(component.states.loading.buttonText); - }); - - it('should show the unableToConnect state', () => { - const component = createComponent({ - selectedState: 'unableToConnect', - }); - - expect(component.$el.querySelector('svg')).toBeDefined(); - expect(getTextFromNode(component, '.state-title')).toEqual( - component.states.unableToConnect.title, - ); - - expect(component.$el.querySelector('.state-description a')).toBeDefined(); - expect(getTextFromNode(component, '.btn-success')).toEqual( - component.states.unableToConnect.buttonText, - ); - }); -}); |