1 files changed, 48 insertions, 63 deletions

diff --git a/spec/frontend/groups/components/item_stats_value_spec.js b/spec/frontend/groups/components/item_stats_value_spec.js
index 11246390444..bca233883af 100644
--- a/spec/frontend/groups/components/item_stats_value_spec.js
+++ b/spec/frontend/groups/components/item_stats_value_spec.js
@@ -1,82 +1,67 @@
-import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
+import ItemStatsValue from '~/groups/components/item_stats_value.vue';
 
-import mountComponent from 'helpers/vue_mount_component_helper';
-import itemStatsValueComponent from '~/groups/components/item_stats_value.vue';
+describe('ItemStatsValue', () => {
+  let wrapper;
 
-const createComponent = ({ title, cssClass, iconName, tooltipPlacement, value }) => {
-  const Component = Vue.extend(itemStatsValueComponent);
+  const defaultProps = {
+    title: 'Subgroups',
+    cssClass: 'number-subgroups',
+    iconName: 'folder',
+    tooltipPlacement: 'left',
+  };
 
-  return mountComponent(Component, {
-    title,
-    cssClass,
-    iconName,
-    tooltipPlacement,
-    value,
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(ItemStatsValue, {
+      propsData: { ...defaultProps, ...props },
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
   });
-};
 
-describe('ItemStatsValueComponent', () => {
-  describe('computed', () => {
-    let vm;
-    const itemConfig = {
-      title: 'Subgroups',
-      cssClass: 'number-subgroups',
-      iconName: 'folder',
-      tooltipPlacement: 'left',
-    };
+  const findGlIcon = () => wrapper.find(GlIcon);
+  const findStatValue = () => wrapper.find('[data-testid="itemStatValue"]');
 
-    describe('isValuePresent', () => {
-      it('returns true if non-empty `value` is present', () => {
-        vm = createComponent({ ...itemConfig, value: 10 });
+  describe('template', () => {
+    describe('when `value` is not provided', () => {
+      it('does not render value count', () => {
+        createComponent();
 
-        expect(vm.isValuePresent).toBeTruthy();
+        expect(findStatValue().exists()).toBe(false);
       });
+    });
 
-      it('returns false if empty `value` is present', () => {
-        vm = createComponent(itemConfig);
-
-        expect(vm.isValuePresent).toBeFalsy();
+    describe('when `value` is provided', () => {
+      beforeEach(() => {
+        createComponent({
+          value: 10,
+        });
       });
 
-      afterEach(() => {
-        vm.$destroy();
+      it('renders component element correctly', () => {
+        expect(wrapper.classes()).toContain('number-subgroups');
       });
-    });
-  });
 
-  describe('template', () => {
-    let vm;
-    beforeEach(() => {
-      vm = createComponent({
-        title: 'Subgroups',
-        cssClass: 'number-subgroups',
-        iconName: 'folder',
-        tooltipPlacement: 'left',
-        value: 10,
+      it('renders element tooltip correctly', () => {
+        expect(wrapper.attributes('title')).toBe('Subgroups');
+        expect(wrapper.attributes('data-placement')).toBe('left');
       });
-    });
 
-    afterEach(() => {
-      vm.$destroy();
-    });
-
-    it('renders component element correctly', () => {
-      expect(vm.$el.classList.contains('number-subgroups')).toBeTruthy();
-      expect(vm.$el.querySelectorAll('svg').length).toBeGreaterThan(0);
-      expect(vm.$el.querySelectorAll('.stat-value').length).toBeGreaterThan(0);
-    });
-
-    it('renders element tooltip correctly', () => {
-      expect(vm.$el.dataset.originalTitle).toBe('Subgroups');
-      expect(vm.$el.dataset.placement).toBe('left');
-    });
-
-    it('renders element icon correctly', () => {
-      expect(vm.$el.querySelector('svg').getAttribute('data-testid')).toBe('folder-icon');
-    });
+      it('renders element icon correctly', () => {
+        expect(findGlIcon().exists()).toBe(true);
+        expect(findGlIcon().props('name')).toBe('folder');
+      });
 
-    it('renders value count correctly', () => {
-      expect(vm.$el.querySelector('.stat-value').innerText.trim()).toContain('10');
+      it('renders value count correctly', () => {
+        expect(findStatValue().classes()).toContain('stat-value');
+        expect(findStatValue().text()).toBe('10');
+      });
     });
   });
 });