diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2017-09-22 11:39:47 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-09-22 11:39:47 +0300 |
commit | 55f772bb98a67ad346442a2cacb5646f6719b987 (patch) | |
tree | fdcda42d5ee9c746b5654a50fa88a0fd1464d3a8 /spec | |
parent | d103e95513704314a38ab8ae441851524031c4a1 (diff) |
Resolve "Better SVG Usage in the Frontend"
Diffstat (limited to 'spec')
-rw-r--r-- | spec/helpers/icons_helper_spec.rb | 19 | ||||
-rw-r--r-- | spec/javascripts/commit/pipelines/pipelines_spec.js | 8 | ||||
-rw-r--r-- | spec/javascripts/fixtures/pipelines.html.haml | 2 | ||||
-rw-r--r-- | spec/javascripts/lib/utils/common_utils_spec.js | 10 | ||||
-rw-r--r-- | spec/javascripts/monitoring/dashboard_state_spec.js | 24 | ||||
-rw-r--r-- | spec/javascripts/pipelines/empty_state_spec.js | 1 | ||||
-rw-r--r-- | spec/javascripts/pipelines/error_state_spec.js | 6 |
7 files changed, 69 insertions, 1 deletions
diff --git a/spec/helpers/icons_helper_spec.rb b/spec/helpers/icons_helper_spec.rb index 91c8faea7fd..3d79dac284f 100644 --- a/spec/helpers/icons_helper_spec.rb +++ b/spec/helpers/icons_helper_spec.rb @@ -16,6 +16,25 @@ describe IconsHelper do end end + describe 'sprite_icon' do + icon_name = 'clock' + + it 'returns svg icon html' do + expect(sprite_icon(icon_name).to_s) + .to eq "<svg><use xlink:href=\"/images/icons.svg##{icon_name}\"></use></svg>" + end + + it 'returns svg icon html + size classes' do + expect(sprite_icon(icon_name, size: 72).to_s) + .to eq "<svg class=\"s72\"><use xlink:href=\"/images/icons.svg##{icon_name}\"></use></svg>" + end + + it 'returns svg icon html + size classes + additional class' do + expect(sprite_icon(icon_name, size: 72, css_class: 'icon-danger').to_s) + .to eq "<svg class=\"s72 icon-danger\"><use xlink:href=\"/images/icons.svg##{icon_name}\"></use></svg>" + end + end + describe 'file_type_icon_class' do it 'returns folder class' do expect(file_type_icon_class('folder', 0, 'folder_name')).to eq 'folder' diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js b/spec/javascripts/commit/pipelines/pipelines_spec.js index 454f187ccbc..9fc047b1f5e 100644 --- a/spec/javascripts/commit/pipelines/pipelines_spec.js +++ b/spec/javascripts/commit/pipelines/pipelines_spec.js @@ -29,6 +29,8 @@ describe('Pipelines table in Commits and Merge requests', () => { propsData: { endpoint: 'endpoint', helpPagePath: 'foo', + emptyStateSvgPath: 'foo', + errorStateSvgPath: 'foo', autoDevopsHelpPath: 'foo', }, }).$mount(); @@ -65,6 +67,8 @@ describe('Pipelines table in Commits and Merge requests', () => { propsData: { endpoint: 'endpoint', helpPagePath: 'foo', + emptyStateSvgPath: 'foo', + errorStateSvgPath: 'foo', autoDevopsHelpPath: 'foo', }, }).$mount(); @@ -117,6 +121,8 @@ describe('Pipelines table in Commits and Merge requests', () => { propsData: { endpoint: 'endpoint', helpPagePath: 'foo', + emptyStateSvgPath: 'foo', + errorStateSvgPath: 'foo', autoDevopsHelpPath: 'foo', }, }).$mount(); @@ -139,6 +145,8 @@ describe('Pipelines table in Commits and Merge requests', () => { propsData: { endpoint: 'endpoint', helpPagePath: 'foo', + emptyStateSvgPath: 'foo', + errorStateSvgPath: 'foo', autoDevopsHelpPath: 'foo', }, }).$mount(); diff --git a/spec/javascripts/fixtures/pipelines.html.haml b/spec/javascripts/fixtures/pipelines.html.haml index 418a38a0e2e..97b0c25c923 100644 --- a/spec/javascripts/fixtures/pipelines.html.haml +++ b/spec/javascripts/fixtures/pipelines.html.haml @@ -2,6 +2,8 @@ #pipelines-list-vue{ data: { endpoint: 'foo', "css-class" => 'foo', "help-page-path" => 'foo', + "empty-state-svg-path" => 'foo', + "error-state-svg-path" => 'foo', "new-pipeline-path" => 'foo', "can-create-pipeline" => 'true', "all-path" => 'foo', diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js index fd5b7d4e5da..787b405de47 100644 --- a/spec/javascripts/lib/utils/common_utils_spec.js +++ b/spec/javascripts/lib/utils/common_utils_spec.js @@ -411,5 +411,15 @@ describe('common_utils', () => { commonUtils.ajaxPost(requestURL, data); expect(ajaxSpy.calls.allArgs()[0][0].type).toEqual('POST'); }); + + describe('gl.utils.spriteIcon', () => { + beforeEach(() => { + window.gon.sprite_icons = 'icons.svg'; + }); + + it('should return the svg for a linked icon', () => { + expect(gl.utils.spriteIcon('test')).toEqual('<svg><use xlink:href="icons.svg#test" /></svg>'); + }); + }); }); }); diff --git a/spec/javascripts/monitoring/dashboard_state_spec.js b/spec/javascripts/monitoring/dashboard_state_spec.js index e8f7042e131..3319eeb3f31 100644 --- a/spec/javascripts/monitoring/dashboard_state_spec.js +++ b/spec/javascripts/monitoring/dashboard_state_spec.js @@ -21,6 +21,9 @@ describe('EmptyState', () => { selectedState: 'gettingStarted', settingsPath: statePaths.settingsPath, documentationPath: statePaths.documentationPath, + emptyGettingStartedSvgPath: 'foo', + emptyLoadingSvgPath: 'foo', + emptyUnableToConnectSvgPath: 'foo', }); expect(component.currentState).toBe(component.states.gettingStarted); @@ -31,6 +34,9 @@ describe('EmptyState', () => { selectedState: 'gettingStarted', settingsPath: statePaths.settingsPath, documentationPath: statePaths.documentationPath, + emptyGettingStartedSvgPath: 'foo', + emptyLoadingSvgPath: 'foo', + emptyUnableToConnectSvgPath: 'foo', }); expect(component.buttonPath).toEqual(statePaths.settingsPath); @@ -42,6 +48,9 @@ describe('EmptyState', () => { selectedState: 'loading', settingsPath: statePaths.settingsPath, documentationPath: statePaths.documentationPath, + emptyGettingStartedSvgPath: 'foo', + emptyLoadingSvgPath: 'foo', + emptyUnableToConnectSvgPath: 'foo', }); expect(component.buttonPath).toEqual(statePaths.documentationPath); @@ -53,6 +62,9 @@ describe('EmptyState', () => { selectedState: 'unableToConnect', settingsPath: statePaths.settingsPath, documentationPath: statePaths.documentationPath, + emptyGettingStartedSvgPath: 'foo', + emptyLoadingSvgPath: 'foo', + emptyUnableToConnectSvgPath: 'foo', }); expect(component.showButtonDescription).toEqual(true); @@ -63,6 +75,9 @@ describe('EmptyState', () => { selectedState: 'loading', settingsPath: statePaths.settingsPath, documentationPath: statePaths.documentationPath, + emptyGettingStartedSvgPath: 'foo', + emptyLoadingSvgPath: 'foo', + emptyUnableToConnectSvgPath: 'foo', }); expect(component.showButtonDescription).toEqual(false); @@ -74,6 +89,9 @@ describe('EmptyState', () => { selectedState: 'gettingStarted', settingsPath: statePaths.settingsPath, documentationPath: statePaths.documentationPath, + emptyGettingStartedSvgPath: 'foo', + emptyLoadingSvgPath: 'foo', + emptyUnableToConnectSvgPath: 'foo', }); expect(component.$el.querySelector('svg')).toBeDefined(); @@ -87,6 +105,9 @@ describe('EmptyState', () => { selectedState: 'loading', settingsPath: statePaths.settingsPath, documentationPath: statePaths.documentationPath, + emptyGettingStartedSvgPath: 'foo', + emptyLoadingSvgPath: 'foo', + emptyUnableToConnectSvgPath: 'foo', }); expect(component.$el.querySelector('svg')).toBeDefined(); @@ -100,6 +121,9 @@ describe('EmptyState', () => { selectedState: 'unableToConnect', settingsPath: statePaths.settingsPath, documentationPath: statePaths.documentationPath, + emptyGettingStartedSvgPath: 'foo', + emptyLoadingSvgPath: 'foo', + emptyUnableToConnectSvgPath: 'foo', }); expect(component.$el.querySelector('svg')).toBeDefined(); diff --git a/spec/javascripts/pipelines/empty_state_spec.js b/spec/javascripts/pipelines/empty_state_spec.js index bb47a28d9fe..6611b74594f 100644 --- a/spec/javascripts/pipelines/empty_state_spec.js +++ b/spec/javascripts/pipelines/empty_state_spec.js @@ -11,6 +11,7 @@ describe('Pipelines Empty State', () => { component = new EmptyStateComponent({ propsData: { helpPagePath: 'foo', + emptyStateSvgPath: 'foo', }, }).$mount(); }); diff --git a/spec/javascripts/pipelines/error_state_spec.js b/spec/javascripts/pipelines/error_state_spec.js index f667d351f72..a402857a4d1 100644 --- a/spec/javascripts/pipelines/error_state_spec.js +++ b/spec/javascripts/pipelines/error_state_spec.js @@ -8,7 +8,11 @@ describe('Pipelines Error State', () => { beforeEach(() => { ErrorStateComponent = Vue.extend(errorStateComp); - component = new ErrorStateComponent().$mount(); + component = new ErrorStateComponent({ + propsData: { + errorStateSvgPath: 'foo', + }, + }).$mount(); }); it('should render error state SVG', () => { |