diff options
author | Phil Hughes <me@iamphill.com> | 2019-06-24 12:51:40 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-06-24 12:52:00 +0100 |
commit | 039117deacf730286d6e1b0b6bc116d62c3b9c31 (patch) | |
tree | 98a86c75bcfe12161e4817100cb568eaf51b6cbd /spec | |
parent | 88c8d177f835983a0a47796529906c69376d159d (diff) | |
download | gitlab-ce-039117deacf730286d6e1b0b6bc116d62c3b9c31.tar.gz |
Render branch divergance graph with Vue
Diffstat (limited to 'spec')
3 files changed, 193 insertions, 0 deletions
diff --git a/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap b/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap new file mode 100644 index 00000000000..511c027dbc2 --- /dev/null +++ b/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Branch divergence graph component renders ahead and behind count 1`] = ` +<div + class="divergence-graph px-2 d-none d-md-block" + title="10 commits behind master, 10 commits ahead" +> + <graphbar-stub + count="10" + maxcommits="100" + position="left" + /> + + <div + class="graph-separator pull-left mt-1" + /> + + <graphbar-stub + count="10" + maxcommits="100" + position="right" + /> +</div> +`; + +exports[`Branch divergence graph component renders distance count 1`] = ` +<div + class="divergence-graph px-2 d-none d-md-block" + title="More than 900 commits different with master" +> + <graphbar-stub + count="900" + maxcommits="100" + position="full" + /> +</div> +`; diff --git a/spec/frontend/branches/components/divergence_graph_spec.js b/spec/frontend/branches/components/divergence_graph_spec.js new file mode 100644 index 00000000000..b54b2ceb233 --- /dev/null +++ b/spec/frontend/branches/components/divergence_graph_spec.js @@ -0,0 +1,67 @@ +import { shallowMount } from '@vue/test-utils'; +import DivergenceGraph from '~/branches/components/divergence_graph.vue'; +import GraphBar from '~/branches/components/graph_bar.vue'; + +let vm; + +function factory(propsData = {}) { + vm = shallowMount(DivergenceGraph, { propsData }); +} + +describe('Branch divergence graph component', () => { + afterEach(() => { + vm.destroy(); + }); + + it('renders ahead and behind count', () => { + factory({ + defaultBranch: 'master', + aheadCount: 10, + behindCount: 10, + maxCommits: 100, + }); + + expect(vm.findAll(GraphBar).length).toBe(2); + expect(vm.element).toMatchSnapshot(); + }); + + it('sets title for ahead and behind count', () => { + factory({ + defaultBranch: 'master', + aheadCount: 10, + behindCount: 10, + maxCommits: 100, + }); + + expect(vm.attributes('title')).toBe('10 commits behind master, 10 commits ahead'); + }); + + it('renders distance count', () => { + factory({ + defaultBranch: 'master', + aheadCount: 0, + behindCount: 0, + distance: 900, + maxCommits: 100, + }); + + expect(vm.findAll(GraphBar).length).toBe(1); + expect(vm.element).toMatchSnapshot(); + }); + + it.each` + distance | titleText + ${900} | ${'900'} + ${1100} | ${'999+'} + `('sets title for $distance as $titleText', ({ distance, titleText }) => { + factory({ + defaultBranch: 'master', + aheadCount: 0, + behindCount: 0, + distance, + maxCommits: 100, + }); + + expect(vm.attributes('title')).toBe(`More than ${titleText} commits different with master`); + }); +}); diff --git a/spec/frontend/branches/components/graph_bar_spec.js b/spec/frontend/branches/components/graph_bar_spec.js new file mode 100644 index 00000000000..61c051b49c6 --- /dev/null +++ b/spec/frontend/branches/components/graph_bar_spec.js @@ -0,0 +1,89 @@ +import { shallowMount } from '@vue/test-utils'; +import GraphBar from '~/branches/components/graph_bar.vue'; + +let vm; + +function factory(propsData = {}) { + vm = shallowMount(GraphBar, { propsData }); +} + +describe('Branch divergence graph bar component', () => { + afterEach(() => { + vm.destroy(); + }); + + it.each` + position | positionClass + ${'left'} | ${'position-right-0'} + ${'right'} | ${'position-left-0'} + ${'full'} | ${'position-left-0'} + `( + 'sets position class as $positionClass for position $position', + ({ position, positionClass }) => { + factory({ + position, + count: 10, + maxCommits: 100, + }); + + expect(vm.find('.js-graph-bar').classes()).toContain(positionClass); + }, + ); + + it.each` + position | textAlignmentClass + ${'left'} | ${'text-right'} + ${'right'} | ${'text-left'} + ${'full'} | ${'text-center'} + `( + 'sets text alignment class as $textAlignmentClass for position $position', + ({ position, textAlignmentClass }) => { + factory({ + position, + count: 10, + maxCommits: 100, + }); + + expect(vm.find('.js-graph-count').classes()).toContain(textAlignmentClass); + }, + ); + + it.each` + position | roundedClass + ${'left'} | ${'rounded-left'} + ${'right'} | ${'rounded-right'} + ${'full'} | ${'rounded'} + `('sets rounded class as $roundedClass for position $position', ({ position, roundedClass }) => { + factory({ + position, + count: 10, + maxCommits: 100, + }); + + expect(vm.find('.js-graph-bar').classes()).toContain(roundedClass); + }); + + it.each` + count | label + ${100} | ${'100'} + ${1000} | ${'999+'} + `('renders label as $roundedClass for $count', ({ count, label }) => { + factory({ + position: 'left', + count, + maxCommits: 1000, + }); + + expect(vm.find('.js-graph-count').text()).toContain(label); + }); + + it('sets width of bar', () => { + factory({ + position: 'left', + count: 100, + maxCommits: 1000, + }); + + expect(vm.find('.js-graph-bar').attributes('style')).toEqual('width: 10%;'); + }); +}); |