1 files changed, 147 insertions, 0 deletions
diff --git a/spec/javascripts/badges/components/badge_spec.js b/spec/javascripts/badges/components/badge_spec.js
new file mode 100644
index 00000000000..fd1ecc9cdd8
--- /dev/null
+++ b/spec/javascripts/badges/components/badge_spec.js
@@ -0,0 +1,147 @@
+import Vue from 'vue';
+import Badge from '~/badges/components/badge.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { DUMMY_IMAGE_URL, TEST_HOST } from 'spec/test_constants';
+
+describe('Badge component', () => {
+  const Component = Vue.extend(Badge);
+  const dummyProps = {
+    imageUrl: DUMMY_IMAGE_URL,
+    linkUrl: `${TEST_HOST}/badge/link/url`,
+  };
+  let vm;
+
+  const findElements = () => {
+    const buttons = vm.$el.querySelectorAll('button');
+    return {
+      badgeImage: vm.$el.querySelector('img.project-badge'),
+      loadingIcon: vm.$el.querySelector('.fa-spinner'),
+      reloadButton: buttons[buttons.length - 1],
+    };
+  };
+
+  const createComponent = (props, el = null) => {
+    vm = mountComponent(Component, props, el);
+    const { badgeImage } = findElements();
+    return new Promise(resolve => badgeImage.addEventListener('load', resolve)).then(() =>
+      Vue.nextTick(),
+    );
+  };
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('watchers', () => {
+    describe('imageUrl', () => {
+      it('sets isLoading and resets numRetries and hasError', done => {
+        const props = { ...dummyProps };
+        createComponent(props)
+          .then(() => {
+            expect(vm.isLoading).toBe(false);
+            vm.hasError = true;
+            vm.numRetries = 42;
+
+            vm.imageUrl = `${props.imageUrl}#something/else`;
+
+            return Vue.nextTick();
+          })
+          .then(() => {
+            expect(vm.isLoading).toBe(true);
+            expect(vm.numRetries).toBe(0);
+            expect(vm.hasError).toBe(false);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    beforeEach(done => {
+      createComponent({ ...dummyProps })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('onError resets isLoading and sets hasError', () => {
+      vm.hasError = false;
+      vm.isLoading = true;
+
+      vm.onError();
+
+      expect(vm.hasError).toBe(true);
+      expect(vm.isLoading).toBe(false);
+    });
+
+    it('onLoad sets isLoading', () => {
+      vm.isLoading = true;
+
+      vm.onLoad();
+
+      expect(vm.isLoading).toBe(false);
+    });
+
+    it('reloadImage resets isLoading and hasError and increases numRetries', () => {
+      vm.hasError = true;
+      vm.isLoading = false;
+      vm.numRetries = 0;
+
+      vm.reloadImage();
+
+      expect(vm.hasError).toBe(false);
+      expect(vm.isLoading).toBe(true);
+      expect(vm.numRetries).toBe(1);
+    });
+  });
+
+  describe('behavior', () => {
+    beforeEach(done => {
+      setFixtures('<div id="dummy-element"></div>');
+      createComponent({ ...dummyProps }, '#dummy-element')
+        .then(done)
+        .catch(done.fail);
+    });
+
+    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.innerText).toBe('');
+    });
+
+    it('shows a loading icon when loading', done => {
+      vm.isLoading = true;
+
+      Vue.nextTick()
+        .then(() => {
+          const { badgeImage, loadingIcon, reloadButton } = findElements();
+          expect(badgeImage).toBeHidden();
+          expect(loadingIcon).toBeVisible();
+          expect(reloadButton).toBeHidden();
+          expect(vm.$el.innerText).toBe('');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('shows an error and reload button if loading failed', done => {
+      vm.hasError = true;
+
+      Vue.nextTick()
+        .then(() => {
+          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');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});