1 files changed, 45 insertions, 105 deletions
diff --git a/spec/frontend/badges/components/badge_spec.js b/spec/frontend/badges/components/badge_spec.js
index 19b3a9f23a6..b468e38f19e 100644
--- a/spec/frontend/badges/components/badge_spec.js
+++ b/spec/frontend/badges/components/badge_spec.js
@@ -1,138 +1,78 @@
-import Vue, { nextTick } from 'vue';
-import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+
 import { DUMMY_IMAGE_URL, TEST_HOST } from 'spec/test_constants';
 import Badge from '~/badges/components/badge.vue';
 
 describe('Badge component', () => {
-  const Component = Vue.extend(Badge);
   const dummyProps = {
     imageUrl: DUMMY_IMAGE_URL,
     linkUrl: `${TEST_HOST}/badge/link/url`,
   };
-  let vm;
+  let wrapper;
 
   const findElements = () => {
-    const buttons = vm.$el.querySelectorAll('button');
+    const buttons = wrapper.findAll('button');
     return {
-      badgeImage: vm.$el.querySelector('img.project-badge'),
-      loadingIcon: vm.$el.querySelector('.gl-spinner'),
-      reloadButton: buttons[buttons.length - 1],
+      badgeImage: wrapper.find('img.project-badge'),
+      loadingIcon: wrapper.find('.gl-spinner'),
+      reloadButton: buttons.at(buttons.length - 1),
     };
   };
 
-  const createComponent = (props, el = null) => {
-    vm = mountComponent(Component, props, el);
-    const { badgeImage } = findElements();
-    return new Promise((resolve) => {
-      badgeImage.addEventListener('load', resolve);
-      // Manually dispatch load event as it is not triggered
-      badgeImage.dispatchEvent(new Event('load'));
-    }).then(() => nextTick());
+  const createComponent = (propsData) => {
+    wrapper = mount(Badge, { propsData });
   };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  describe('watchers', () => {
-    describe('imageUrl', () => {
-      it('sets isLoading and resets numRetries and hasError', async () => {
-        const props = { ...dummyProps };
-        await createComponent(props);
-        expect(vm.isLoading).toBe(false);
-        vm.hasError = true;
-        vm.numRetries = 42;
-
-        vm.imageUrl = `${props.imageUrl}#something/else`;
-        await nextTick();
-        expect(vm.isLoading).toBe(true);
-        expect(vm.numRetries).toBe(0);
-        expect(vm.hasError).toBe(false);
-      });
-    });
+  beforeEach(() => {
+    return createComponent({ ...dummyProps }, '#dummy-element');
   });
 
-  describe('methods', () => {
-    beforeEach(async () => {
-      await createComponent({ ...dummyProps });
-    });
+  it('shows a badge image after loading', async () => {
+    const { badgeImage, loadingIcon, reloadButton } = findElements();
+    badgeImage.element.dispatchEvent(new Event('load'));
 
-    it('onError resets isLoading and sets hasError', () => {
-      vm.hasError = false;
-      vm.isLoading = true;
+    await nextTick();
 
-      vm.onError();
+    expect(badgeImage.isVisible()).toBe(true);
+    expect(loadingIcon.isVisible()).toBe(false);
+    expect(reloadButton.isVisible()).toBe(false);
+    expect(wrapper.find('.btn-group').isVisible()).toBe(false);
+  });
 
-      expect(vm.hasError).toBe(true);
-      expect(vm.isLoading).toBe(false);
-    });
+  it('shows a loading icon when loading', () => {
+    const { badgeImage, loadingIcon, reloadButton } = findElements();
 
-    it('onLoad sets isLoading', () => {
-      vm.isLoading = true;
+    expect(badgeImage.isVisible()).toBe(false);
+    expect(loadingIcon.isVisible()).toBe(true);
+    expect(reloadButton.isVisible()).toBe(false);
+    expect(wrapper.find('.btn-group').isVisible()).toBe(false);
+  });
 
-      vm.onLoad();
+  it('shows an error and reload button if loading failed', async () => {
+    const { badgeImage, loadingIcon, reloadButton } = findElements();
+    badgeImage.element.dispatchEvent(new Event('error'));
 
-      expect(vm.isLoading).toBe(false);
-    });
+    await nextTick();
 
-    it('reloadImage resets isLoading and hasError and increases numRetries', () => {
-      vm.hasError = true;
-      vm.isLoading = false;
-      vm.numRetries = 0;
+    expect(badgeImage.isVisible()).toBe(false);
+    expect(loadingIcon.isVisible()).toBe(false);
+    expect(reloadButton.isVisible()).toBe(true);
+    expect(reloadButton.element).toHaveSpriteIcon('retry');
+    expect(wrapper.text()).toBe('No badge image');
+  });
 
-      vm.reloadImage();
+  it('retries an image when loading failed and reload button is clicked', async () => {
+    const { badgeImage, reloadButton } = findElements();
+    badgeImage.element.dispatchEvent(new Event('error'));
+    await nextTick();
 
-      expect(vm.hasError).toBe(false);
-      expect(vm.isLoading).toBe(true);
-      expect(vm.numRetries).toBe(1);
-    });
-  });
+    await reloadButton.trigger('click');
 
-  describe('behavior', () => {
-    beforeEach(() => {
-      setHTMLFixture('<div id="dummy-element"></div>');
-      return createComponent({ ...dummyProps }, '#dummy-element');
-    });
-
-    afterEach(() => {
-      resetHTMLFixture();
-    });
-
-    it('shows a badge image after loading', () => {
-      expect(vm.isLoading).toBe(false);
-      expect(vm.hasError).toBe(false);
-      const { badgeImage, loadingIcon, reloadButton } = findElements();
-
-      expect(badgeImage).toBeVisible();
-      expect(loadingIcon).toBeHidden();
-      expect(reloadButton).toBeHidden();
-      expect(vm.$el.querySelector('.btn-group')).toBeHidden();
-    });
-
-    it('shows a loading icon when loading', async () => {
-      vm.isLoading = true;
-
-      await nextTick();
-      const { badgeImage, loadingIcon, reloadButton } = findElements();
-
-      expect(badgeImage).toBeHidden();
-      expect(loadingIcon).toBeVisible();
-      expect(reloadButton).toBeHidden();
-      expect(vm.$el.querySelector('.btn-group')).toBeHidden();
-    });
-
-    it('shows an error and reload button if loading failed', async () => {
-      vm.hasError = true;
-
-      await nextTick();
-      const { badgeImage, loadingIcon, reloadButton } = findElements();
-
-      expect(badgeImage).toBeHidden();
-      expect(loadingIcon).toBeHidden();
-      expect(reloadButton).toBeVisible();
-      expect(reloadButton).toHaveSpriteIcon('retry');
-      expect(vm.$el.innerText.trim()).toBe('No badge image');
-    });
+    expect(badgeImage.attributes('src')).toBe(`${dummyProps.imageUrl}#retries=1`);
   });
 });