diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 08:27:35 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 08:27:35 +0000 |
commit | 7e9c479f7de77702622631cff2628a9c8dcbc627 (patch) | |
tree | c8f718a08e110ad7e1894510980d2155a6549197 /spec/frontend/design_management/components/design_scaler_spec.js | |
parent | e852b0ae16db4052c1c567d9efa4facc81146e88 (diff) | |
download | gitlab-ce-0bddc398e06691ecd2db73d0c570a122a6585fe8.tar.gz |
Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42
Diffstat (limited to 'spec/frontend/design_management/components/design_scaler_spec.js')
-rw-r--r-- | spec/frontend/design_management/components/design_scaler_spec.js | 104 |
1 files changed, 65 insertions, 39 deletions
diff --git a/spec/frontend/design_management/components/design_scaler_spec.js b/spec/frontend/design_management/components/design_scaler_spec.js index b06d2f924df..290ec3a18e3 100644 --- a/spec/frontend/design_management/components/design_scaler_spec.js +++ b/spec/frontend/design_management/components/design_scaler_spec.js @@ -1,67 +1,93 @@ import { shallowMount } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; import DesignScaler from '~/design_management/components/design_scaler.vue'; describe('Design management design scaler component', () => { let wrapper; - function createComponent(propsData, data = {}) { - wrapper = shallowMount(DesignScaler, { - propsData, - }); - wrapper.setData(data); - } + const getButtons = () => wrapper.findAll(GlButton); + const getDecreaseScaleButton = () => getButtons().at(0); + const getResetScaleButton = () => getButtons().at(1); + const getIncreaseScaleButton = () => getButtons().at(2); - afterEach(() => { - wrapper.destroy(); - }); + const setScale = scale => wrapper.vm.setScale(scale); - const getButton = type => { - const buttonTypeOrder = ['minus', 'reset', 'plus']; - const buttons = wrapper.findAll('button'); - return buttons.at(buttonTypeOrder.indexOf(type)); + const createComponent = () => { + wrapper = shallowMount(DesignScaler); }; - it('emits @scale event when "plus" button clicked', () => { + beforeEach(() => { createComponent(); + }); - getButton('plus').trigger('click'); - expect(wrapper.emitted('scale')).toEqual([[1.2]]); + afterEach(() => { + wrapper.destroy(); + wrapper = null; }); - it('emits @scale event when "reset" button clicked (scale > 1)', () => { - createComponent({}, { scale: 1.6 }); - return wrapper.vm.$nextTick().then(() => { - getButton('reset').trigger('click'); - expect(wrapper.emitted('scale')).toEqual([[1]]); + describe('when `scale` value is greater than 1', () => { + beforeEach(async () => { + setScale(1.6); + await wrapper.vm.$nextTick(); }); - }); - it('emits @scale event when "minus" button clicked (scale > 1)', () => { - createComponent({}, { scale: 1.6 }); + it('emits @scale event when "reset" button clicked', () => { + getResetScaleButton().vm.$emit('click'); + expect(wrapper.emitted('scale')[1]).toEqual([1]); + }); - return wrapper.vm.$nextTick().then(() => { - getButton('minus').trigger('click'); - expect(wrapper.emitted('scale')).toEqual([[1.4]]); + it('emits @scale event when "decrement" button clicked', async () => { + getDecreaseScaleButton().vm.$emit('click'); + expect(wrapper.emitted('scale')[1]).toEqual([1.4]); }); - }); - it('minus and reset buttons are disabled when scale === 1', () => { - createComponent(); + it('enables the "reset" button', () => { + const resetButton = getResetScaleButton(); + + expect(resetButton.exists()).toBe(true); + expect(resetButton.props('disabled')).toBe(false); + }); + + it('enables the "decrement" button', () => { + const decrementButton = getDecreaseScaleButton(); - expect(wrapper.element).toMatchSnapshot(); + expect(decrementButton.exists()).toBe(true); + expect(decrementButton.props('disabled')).toBe(false); + }); + }); + + it('emits @scale event when "plus" button clicked', () => { + getIncreaseScaleButton().vm.$emit('click'); + expect(wrapper.emitted('scale')).toEqual([[1.2]]); }); - it('minus and reset buttons are enabled when scale > 1', () => { - createComponent({}, { scale: 1.2 }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.element).toMatchSnapshot(); + describe('when `scale` value is 1', () => { + it('disables the "reset" button', () => { + const resetButton = getResetScaleButton(); + + expect(resetButton.exists()).toBe(true); + expect(resetButton.props('disabled')).toBe(true); + }); + + it('disables the "decrement" button', () => { + const decrementButton = getDecreaseScaleButton(); + + expect(decrementButton.exists()).toBe(true); + expect(decrementButton.props('disabled')).toBe(true); }); }); - it('plus button is disabled when scale === 2', () => { - createComponent({}, { scale: 2 }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.element).toMatchSnapshot(); + describe('when `scale` value is 2 (maximum)', () => { + beforeEach(async () => { + setScale(2); + await wrapper.vm.$nextTick(); + }); + + it('disables the "increment" button', () => { + const incrementButton = getIncreaseScaleButton(); + + expect(incrementButton.exists()).toBe(true); + expect(incrementButton.props('disabled')).toBe(true); }); }); }); |