diff options
Diffstat (limited to 'spec/javascripts/monitoring/components/graph_group_spec.js')
-rw-r--r-- | spec/javascripts/monitoring/components/graph_group_spec.js | 107 |
1 files changed, 76 insertions, 31 deletions
diff --git a/spec/javascripts/monitoring/components/graph_group_spec.js b/spec/javascripts/monitoring/components/graph_group_spec.js index 04371091ca8..43ca17c3cbc 100644 --- a/spec/javascripts/monitoring/components/graph_group_spec.js +++ b/spec/javascripts/monitoring/components/graph_group_spec.js @@ -1,16 +1,18 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import GraphGroup from '~/monitoring/components/graph_group.vue'; +import Icon from '~/vue_shared/components/icon.vue'; const localVue = createLocalVue(); describe('Graph group component', () => { - let graphGroup; + let wrapper; - const findPrometheusGroup = () => graphGroup.find('.prometheus-graph-group'); - const findPrometheusPanel = () => graphGroup.find('.prometheus-panel'); + const findGroup = () => wrapper.find({ ref: 'graph-group' }); + const findContent = () => wrapper.find({ ref: 'graph-group-content' }); + const findCaretIcon = () => wrapper.find(Icon); const createComponent = propsData => { - graphGroup = shallowMount(localVue.extend(GraphGroup), { + wrapper = shallowMount(localVue.extend(GraphGroup), { propsData, sync: false, localVue, @@ -18,57 +20,100 @@ describe('Graph group component', () => { }; afterEach(() => { - graphGroup.destroy(); + wrapper.destroy(); }); - describe('When groups can be collapsed', () => { + describe('When group is not collapsed', () => { beforeEach(() => { createComponent({ name: 'panel', - collapseGroup: true, + collapseGroup: false, }); }); - it('should show the angle-down caret icon when collapseGroup is true', () => { - expect(graphGroup.vm.caretIcon).toBe('angle-down'); + it('should show the angle-down caret icon', () => { + expect(findContent().isVisible()).toBe(true); + expect(findCaretIcon().props('name')).toBe('angle-down'); }); - it('should show the angle-right caret icon when collapseGroup is false', () => { - graphGroup.vm.collapse(); + it('should show the angle-right caret icon when the user collapses the group', done => { + wrapper.vm.collapse(); - expect(graphGroup.vm.caretIcon).toBe('angle-right'); + wrapper.vm.$nextTick(() => { + expect(findContent().isVisible()).toBe(false); + expect(findCaretIcon().props('name')).toBe('angle-right'); + done(); + }); }); - }); - describe('When groups can not be collapsed', () => { - beforeEach(() => { - createComponent({ - name: 'panel', + it('should show the open the group when collapseGroup is set to true', done => { + wrapper.setProps({ collapseGroup: true, - showPanels: false, + }); + + wrapper.vm.$nextTick(() => { + expect(findContent().isVisible()).toBe(true); + expect(findCaretIcon().props('name')).toBe('angle-down'); + done(); }); }); - it('should not contain a prometheus-panel container when showPanels is false', () => { - expect(findPrometheusPanel().exists()).toBe(false); + describe('When group is collapsed', () => { + beforeEach(() => { + createComponent({ + name: 'panel', + collapseGroup: true, + }); + }); + + it('should show the angle-down caret icon when collapseGroup is true', () => { + expect(wrapper.vm.caretIcon).toBe('angle-right'); + }); + + it('should show the angle-right caret icon when collapseGroup is false', () => { + wrapper.vm.collapse(); + + expect(wrapper.vm.caretIcon).toBe('angle-down'); + }); }); - }); - describe('When collapseGroup prop is updated', () => { - beforeEach(() => { - createComponent({ name: 'panel', collapseGroup: false }); + describe('When groups can not be collapsed', () => { + beforeEach(() => { + createComponent({ + name: 'panel', + showPanels: false, + collapseGroup: false, + }); + }); + + it('should not have a container when showPanels is false', () => { + expect(findGroup().exists()).toBe(false); + expect(findContent().exists()).toBe(true); + }); }); - it('previously collapsed group should respond to the prop change', done => { - expect(findPrometheusGroup().exists()).toBe(false); + describe('When group does not show a panel heading', () => { + beforeEach(() => { + createComponent({ + name: 'panel', + showPanels: false, + collapseGroup: false, + }); + }); - graphGroup.setProps({ - collapseGroup: true, + it('should collapse the panel content', () => { + expect(findContent().isVisible()).toBe(true); + expect(findCaretIcon().exists()).toBe(false); }); - graphGroup.vm.$nextTick(() => { - expect(findPrometheusGroup().exists()).toBe(true); - done(); + it('should show the panel content when clicked', done => { + wrapper.vm.collapse(); + + wrapper.vm.$nextTick(() => { + expect(findContent().isVisible()).toBe(true); + expect(findCaretIcon().exists()).toBe(false); + done(); + }); }); }); }); |