diff options
author | Phil Hughes <me@iamphill.com> | 2018-03-06 21:13:33 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-03-06 21:13:33 +0300 |
commit | 2d00d6d459164f9c51f9e04fe56aecdca5edfe24 (patch) | |
tree | 97d5d477c23e2ab9eeb0b4e9b364a7ca76adec83 /spec/javascripts | |
parent | d12f60a5c07f942d187ef840ef0a65784bb3b119 (diff) | |
parent | 226d43b31733f4c61b2f2c54cf7a5c4374c801a6 (diff) |
Merge branch 'cluster-monitoring-changes-ce-backport' into 'master'
Cluster monitoring changes CE backport
See merge request gitlab-org/gitlab-ce!17547
Diffstat (limited to 'spec/javascripts')
-rw-r--r-- | spec/javascripts/fixtures/environments.rb | 30 | ||||
-rw-r--r-- | spec/javascripts/monitoring/dashboard_spec.js | 67 |
2 files changed, 52 insertions, 45 deletions
diff --git a/spec/javascripts/fixtures/environments.rb b/spec/javascripts/fixtures/environments.rb deleted file mode 100644 index d2457d75419..00000000000 --- a/spec/javascripts/fixtures/environments.rb +++ /dev/null @@ -1,30 +0,0 @@ -require 'spec_helper' - -describe Projects::EnvironmentsController, '(JavaScript fixtures)', type: :controller do - include JavaScriptFixturesHelpers - - let(:admin) { create(:admin) } - let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} - let(:project) { create(:project_empty_repo, namespace: namespace, path: 'environments-project') } - let(:environment) { create(:environment, name: 'production', project: project) } - - render_views - - before(:all) do - clean_frontend_fixtures('environments/metrics') - end - - before do - sign_in(admin) - end - - it 'environments/metrics/metrics.html.raw' do |example| - get :metrics, - namespace_id: project.namespace, - project_id: project, - id: environment.id - - expect(response).to be_success - store_frontend_fixture(response, example.description) - end -end diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js index eb8f6bbe50d..29b355307ef 100644 --- a/spec/javascripts/monitoring/dashboard_spec.js +++ b/spec/javascripts/monitoring/dashboard_spec.js @@ -5,24 +5,35 @@ import axios from '~/lib/utils/axios_utils'; import { metricsGroupsAPIResponse, mockApiEndpoint } from './mock_data'; describe('Dashboard', () => { - const fixtureName = 'environments/metrics/metrics.html.raw'; let DashboardComponent; - let component; - preloadFixtures(fixtureName); + + const propsData = { + hasMetrics: false, + documentationPath: '/path/to/docs', + settingsPath: '/path/to/settings', + clustersPath: '/path/to/clusters', + tagsPath: '/path/to/tags', + projectPath: '/path/to/project', + metricsEndpoint: mockApiEndpoint, + deploymentEndpoint: null, + emptyGettingStartedSvgPath: '/path/to/getting-started.svg', + emptyLoadingSvgPath: '/path/to/loading.svg', + emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg', + }; beforeEach(() => { - loadFixtures(fixtureName); + setFixtures('<div class="prometheus-graphs"></div>'); DashboardComponent = Vue.extend(Dashboard); }); describe('no metrics are available yet', () => { it('shows a getting started empty state when no metrics are present', () => { - component = new DashboardComponent({ - el: document.querySelector('#prometheus-graphs'), + const component = new DashboardComponent({ + el: document.querySelector('.prometheus-graphs'), + propsData, }); - component.$mount(); - expect(component.$el.querySelector('#prometheus-graphs')).toBe(null); + expect(component.$el.querySelector('.prometheus-graphs')).toBe(null); expect(component.state).toEqual('gettingStarted'); }); }); @@ -30,11 +41,8 @@ describe('Dashboard', () => { describe('requests information to the server', () => { let mock; beforeEach(() => { - document.querySelector('#prometheus-graphs').setAttribute('data-has-metrics', 'true'); mock = new MockAdapter(axios); - mock.onGet(mockApiEndpoint).reply(200, { - metricsGroupsAPIResponse, - }); + mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse); }); afterEach(() => { @@ -42,14 +50,43 @@ describe('Dashboard', () => { }); it('shows up a loading state', (done) => { - component = new DashboardComponent({ - el: document.querySelector('#prometheus-graphs'), + const component = new DashboardComponent({ + el: document.querySelector('.prometheus-graphs'), + propsData: { ...propsData, hasMetrics: true }, }); - component.$mount(); + Vue.nextTick(() => { expect(component.state).toEqual('loading'); done(); }); }); + + it('hides the legend when showLegend is false', (done) => { + const component = new DashboardComponent({ + el: document.querySelector('.prometheus-graphs'), + propsData: { ...propsData, hasMetrics: true, showLegend: false }, + }); + + setTimeout(() => { + expect(component.showEmptyState).toEqual(false); + expect(component.$el.querySelector('.legend-group')).toEqual(null); + expect(component.$el.querySelector('.prometheus-graph-group')).toBeTruthy(); + done(); + }); + }); + + it('hides the group panels when showPanels is false', (done) => { + const component = new DashboardComponent({ + el: document.querySelector('.prometheus-graphs'), + propsData: { ...propsData, hasMetrics: true, showPanels: false }, + }); + + setTimeout(() => { + expect(component.showEmptyState).toEqual(false); + expect(component.$el.querySelector('.prometheus-panel')).toEqual(null); + expect(component.$el.querySelector('.prometheus-graph-group')).toBeTruthy(); + done(); + }); + }); }); }); |