diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/panel_resizer_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/panel_resizer_spec.js | 81 |
1 files changed, 43 insertions, 38 deletions
diff --git a/spec/frontend/vue_shared/components/panel_resizer_spec.js b/spec/frontend/vue_shared/components/panel_resizer_spec.js index d8b903e5bfd..0e261124cbf 100644 --- a/spec/frontend/vue_shared/components/panel_resizer_spec.js +++ b/spec/frontend/vue_shared/components/panel_resizer_spec.js @@ -1,12 +1,10 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import panelResizer from '~/vue_shared/components/panel_resizer.vue'; +import { mount } from '@vue/test-utils'; +import PanelResizer from '~/vue_shared/components/panel_resizer.vue'; describe('Panel Resizer component', () => { - let vm; - let PanelResizer; + let wrapper; - const triggerEvent = (eventName, el = vm.$el, clientX = 0) => { + const triggerEvent = (eventName, el = wrapper.element, clientX = 0) => { const event = document.createEvent('MouseEvents'); event.initMouseEvent( eventName, @@ -29,57 +27,64 @@ describe('Panel Resizer component', () => { el.dispatchEvent(event); }; - beforeEach(() => { - PanelResizer = Vue.extend(panelResizer); - }); - afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); it('should render a div element with the correct classes and styles', () => { - vm = mountComponent(PanelResizer, { - startSize: 100, - side: 'left', + wrapper = mount(PanelResizer, { + propsData: { + startSize: 100, + side: 'left', + }, }); - expect(vm.$el.tagName).toEqual('DIV'); - expect(vm.$el.getAttribute('class')).toBe( - 'position-absolute position-top-0 position-bottom-0 drag-handle position-left-0', - ); + expect(wrapper.element.tagName).toEqual('DIV'); + expect(wrapper.classes().sort()).toStrictEqual([ + 'drag-handle', + 'position-absolute', + 'position-bottom-0', + 'position-left-0', + 'position-top-0', + ]); - expect(vm.$el.getAttribute('style')).toBe('cursor: ew-resize;'); + expect(wrapper.element.getAttribute('style')).toBe('cursor: ew-resize;'); }); it('should render a div element with the correct classes for a right side panel', () => { - vm = mountComponent(PanelResizer, { - startSize: 100, - side: 'right', + wrapper = mount(PanelResizer, { + propsData: { + startSize: 100, + side: 'right', + }, }); - expect(vm.$el.tagName).toEqual('DIV'); - expect(vm.$el.getAttribute('class')).toBe( - 'position-absolute position-top-0 position-bottom-0 drag-handle position-right-0', - ); + expect(wrapper.element.tagName).toEqual('DIV'); + expect(wrapper.classes().sort()).toStrictEqual([ + 'drag-handle', + 'position-absolute', + 'position-bottom-0', + 'position-right-0', + 'position-top-0', + ]); }); it('drag the resizer', () => { - vm = mountComponent(PanelResizer, { - startSize: 100, - side: 'left', + wrapper = mount(PanelResizer, { + propsData: { + startSize: 100, + side: 'left', + }, }); - jest.spyOn(vm, '$emit').mockImplementation(() => {}); - triggerEvent('mousedown', vm.$el); + triggerEvent('mousedown'); triggerEvent('mousemove', document); triggerEvent('mouseup', document); - expect(vm.$emit.mock.calls).toEqual([ - ['resize-start', 100], - ['update:size', 100], - ['resize-end', 100], - ]); - - expect(vm.size).toBe(100); + expect(wrapper.emitted()).toEqual({ + 'resize-start': [[100]], + 'update:size': [[100]], + 'resize-end': [[100]], + }); }); }); |