Refactor design scaler tests

This commit is in light of the previous commit,
where GlButtonGroup is now used in the component.

app/assets/javascripts/design_management/components/design_scaler.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlButtonGroup, GlButton } from '@gitlab/ui';
 
 const SCALE_STEP_SIZE = 0.2;
 const DEFAULT_SCALE = 1;
@@ -8,7 +8,8 @@ const MAX_SCALE = 2;
 
 export default {
   components: {
-    GlIcon,
+    GlButtonGroup,
+    GlButton,
   },
   data() {
     return {
@@ -49,17 +50,9 @@ export default {
 </script>
 
 <template>
-  <div class="design-scaler btn-group" role="group">
-    <button class="btn" :disabled="disableDecrease" @click="decrementScale">
-      <span class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16">
-        –
-      </span>
-    </button>
-    <button class="btn" :disabled="disableReset" @click="resetScale">
-      <gl-icon name="redo" />
-    </button>
-    <button class="btn" :disabled="disableIncrease" @click="incrementScale">
-      <gl-icon name="plus" />
-    </button>
-  </div>
+  <gl-button-group class="gl-z-index-1">
+    <gl-button icon="dash" :disabled="disableDecrease" @click="decrementScale" />
+    <gl-button icon="redo" :disabled="disableReset" @click="resetScale" />
+    <gl-button icon="plus" :disabled="disableIncrease" @click="incrementScale" />
+  </gl-button-group>
 </template>

app/assets/stylesheets/components/design_management/design.scss

@@ -75,10 +75,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
   left: 0;
 }
 
-.design-scaler {
-  z-index: 1;
-}
-
 .design-scaler-wrapper {
   bottom: 0;
   left: 50%;

changelogs/unreleased/update-design-scaler-component.yml

+---
+title: Refresh design zooming buttons
+merge_request: 46205
+author:
+type: changed

spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Design management design scaler component minus and reset buttons are disabled when scale === 1 1`] = `
-<div
-  class="design-scaler btn-group"
-  role="group"
->
-  <button
-    class="btn"
-    disabled="disabled"
-  >
-    <span
-      class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16"
-    >
-      
-      –
-    
-    </span>
-  </button>
-   
-  <button
-    class="btn"
-    disabled="disabled"
-  >
-    <gl-icon-stub
-      name="redo"
-      size="16"
-    />
-  </button>
-   
-  <button
-    class="btn"
-  >
-    <gl-icon-stub
-      name="plus"
-      size="16"
-    />
-  </button>
-</div>
-`;
-
-exports[`Design management design scaler component minus and reset buttons are enabled when scale > 1 1`] = `
-<div
-  class="design-scaler btn-group"
-  role="group"
->
-  <button
-    class="btn"
-  >
-    <span
-      class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16"
-    >
-      
-      –
-    
-    </span>
-  </button>
-   
-  <button
-    class="btn"
-  >
-    <gl-icon-stub
-      name="redo"
-      size="16"
-    />
-  </button>
-   
-  <button
-    class="btn"
-  >
-    <gl-icon-stub
-      name="plus"
-      size="16"
-    />
-  </button>
-</div>
-`;
-
-exports[`Design management design scaler component plus button is disabled when scale === 2 1`] = `
-<div
-  class="design-scaler btn-group"
-  role="group"
->
-  <button
-    class="btn"
-  >
-    <span
-      class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16"
-    >
-      
-      –
-    
-    </span>
-  </button>
-   
-  <button
-    class="btn"
-  >
-    <gl-icon-stub
-      name="redo"
-      size="16"
-    />
-  </button>
-   
-  <button
-    class="btn"
-    disabled="disabled"
-  >
-    <gl-icon-stub
-      name="plus"
-      size="16"
-    />
-  </button>
-</div>
-`;

spec/frontend/design_management/components/design_scaler_spec.js

 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);
     });
   });
 });