diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-11 12:09:45 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-11 12:09:45 +0300 |
commit | c7ba7b997608a103a0a9165b2e5cef9530c4ef53 (patch) | |
tree | 3af88eaacba25539b97da4ad358418b6a69c11d7 /spec/frontend/vue_shared/components/stacked_progress_bar_spec.js | |
parent | a031b1f4f34470fba578856dc7ab735a6f54733a (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/vue_shared/components/stacked_progress_bar_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/stacked_progress_bar_spec.js | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js b/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js new file mode 100644 index 00000000000..bc86ee5a0c6 --- /dev/null +++ b/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js @@ -0,0 +1,104 @@ +import Vue from 'vue'; + +import mountComponent from 'helpers/vue_mount_component_helper'; +import stackedProgressBarComponent from '~/vue_shared/components/stacked_progress_bar.vue'; + +const createComponent = config => { + const Component = Vue.extend(stackedProgressBarComponent); + const defaultConfig = { + successLabel: 'Synced', + failureLabel: 'Failed', + neutralLabel: 'Out of sync', + successCount: 25, + failureCount: 10, + totalCount: 5000, + ...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(4965); // 5000 - 25 - 10 + }); + }); + }); + + describe('methods', () => { + describe('getPercent', () => { + it('returns percentage from provided count based on `totalCount`', () => { + expect(vm.getPercent(500)).toBe(10); + }); + + it('returns percentage with decimal place from provided count based on `totalCount`', () => { + expect(vm.getPercent(67)).toBe(1.3); + }); + + it('returns percentage as `< 1` from provided count based on `totalCount` when evaluated value is less than 1', () => { + expect(vm.getPercent(10)).toBe('< 1'); + }); + + it('returns 0 if totalCount is falsy', () => { + vm = createComponent({ totalCount: 0 }); + + expect(vm.getPercent(100)).toBe(0); + }); + }); + + describe('barStyle', () => { + it('returns style string based on percentage provided', () => { + expect(vm.barStyle(50)).toBe('width: 50%;'); + }); + }); + + describe('getTooltip', () => { + describe('when hideTooltips is false', () => { + it('returns label string based on label and count provided', () => { + expect(vm.getTooltip('Synced', 10)).toBe('Synced: 10'); + }); + }); + + describe('when hideTooltips is true', () => { + beforeEach(() => { + vm = createComponent({ hideTooltips: true }); + }); + + it('returns an empty string', () => { + expect(vm.getTooltip('Synced', 10)).toBe(''); + }); + }); + }); + }); + + 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); + }); + }); +}); |