diff options
author | Phil Hughes <me@iamphill.com> | 2018-01-15 14:22:31 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-01-15 14:22:31 +0000 |
commit | abae33a8ec5965a236f2e15ce6e6b6dc88d88537 (patch) | |
tree | ee3e008b5733f23d39e29c9b82b30aae6fc76485 /spec | |
parent | f730a7ac96a9672ca9e63889e5d89b3c273047f1 (diff) | |
parent | ab68111f233bc4f5ccd6eed2ccca83fc92bc0016 (diff) | |
download | gitlab-ce-abae33a8ec5965a236f2e15ce6e6b6dc88d88537.tar.gz |
Merge branch '41856-backport-stacked-progress-bar' into 'master'
Backport StackedProgressBar component from GitLab EE
Closes #41856
See merge request gitlab-org/gitlab-ce!16457
Diffstat (limited to 'spec')
-rw-r--r-- | spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js new file mode 100644 index 00000000000..6940b04573e --- /dev/null +++ b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js @@ -0,0 +1,77 @@ +import Vue from 'vue'; + +import stackedProgressBarComponent from '~/vue_shared/components/stacked_progress_bar.vue'; + +import mountComponent from '../../helpers/vue_mount_component_helper'; + +const createComponent = (config) => { + const Component = Vue.extend(stackedProgressBarComponent); + const defaultConfig = Object.assign({}, { + successLabel: 'Synced', + failureLabel: 'Failed', + neutralLabel: 'Out of sync', + successCount: 10, + failureCount: 5, + totalCount: 20, + }, config); + + return mountComponent(Component, defaultConfig); +}; + +describe('StackedProgressBarComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('computed', () => { + describe('neutralCount', () => { + it('returns neutralCount based on totalCount, successCount and failureCount', () => { + expect(vm.neutralCount).toBe(5); // 20 - 10 - 5 + }); + }); + }); + + describe('methods', () => { + describe('getPercent', () => { + it('returns percentage from provided count based on `totalCount`', () => { + expect(vm.getPercent(10)).toBe(50); + }); + }); + + describe('barStyle', () => { + it('returns style string based on percentage provided', () => { + expect(vm.barStyle(50)).toBe('width: 50%;'); + }); + }); + + describe('getTooltip', () => { + it('returns label string based on label and count provided', () => { + expect(vm.getTooltip('Synced', 10)).toBe('Synced: 10'); + }); + }); + }); + + describe('template', () => { + it('renders container element', () => { + expect(vm.$el.classList.contains('stacked-progress-bar')).toBeTruthy(); + }); + + it('renders empty state when count is unavailable', () => { + const vmX = createComponent({ totalCount: 0, successCount: 0, failureCount: 0 }); + expect(vmX.$el.querySelectorAll('.status-unavailable').length).not.toBe(0); + vmX.$destroy(); + }); + + it('renders bar elements when count is available', () => { + expect(vm.$el.querySelectorAll('.status-green').length).not.toBe(0); + expect(vm.$el.querySelectorAll('.status-neutral').length).not.toBe(0); + expect(vm.$el.querySelectorAll('.status-red').length).not.toBe(0); + }); + }); +}); |