add weight select spec

app/assets/javascripts/boards/components/weight_select.vue

@@ -54,13 +54,13 @@ export default {
       this.board.weight = this.weightInt(weight);
     },
     weightInt(weight) {
-      if (weight === ANY_WEIGHT) {
-        return -1;
+      if (weight > 0) {
+        return weight;
       }
       if (weight === NO_WEIGHT) {
         return 0;
       }
-      return weight
+      return -1;
     }
   },
   mounted() {
@@ -124,7 +124,7 @@ export default {
                 :key="weight"
               >
                 <a
-                  :class="{'is-active': weightInt(weight) == value}"
+                  :class="{'is-active': weight == valueText}"
                   :data-id="weight"
                   href="#"
                 >

spec/javascripts/boards/components/weight_select_spec.js

+/* global IssuableContext */
+
+import Vue from 'vue';
+import WeightSelect from '~/boards/components/weight_select.vue';
+import '~/issuable_context';
+
+let vm;
+let board;
+const weights = ['Any Weight', 'No Weight', 1, 2, 3];
+
+function getSelectedText() {
+  return vm.$el.querySelector('.value').innerText.trim();
+}
+
+function activeDropdownItem() {
+  return vm.$el.querySelector('.is-active').innerText.trim();
+}
+
+describe('WeightSelect', () => {
+  beforeEach((done) => {
+    setFixtures('<div class="test-container"></div>');
+
+    board = {
+      weight: 0,
+      labels: [],
+    };
+
+    // eslint-disable-next-line no-new
+    new IssuableContext();
+
+    const Component = Vue.extend(WeightSelect);
+    vm = new Component({
+      propsData: {
+        board,
+        canEdit: true,
+        weights,
+      },
+    }).$mount('.test-container');
+
+    Vue.nextTick(done);
+  });
+
+  describe('selected value', () => {
+    it('defaults to Any Weight', () => {
+      expect(getSelectedText()).toBe('Any Weight');
+    });
+
+    it('displays Any Weight for value -1', (done) => {
+      vm.value = -1;
+      Vue.nextTick(() => {
+        expect(getSelectedText()).toEqual('Any Weight');
+        done();
+      });
+    });
+
+    it('displays No Weight', (done) => {
+      vm.value = 0;
+      Vue.nextTick(() => {
+        expect(getSelectedText()).toEqual('No Weight');
+        done();
+      });
+    });
+
+    it('weight 1', (done) => {
+      vm.value = 1;
+      Vue.nextTick(() => {
+        expect(getSelectedText()).toEqual('1');
+        done();
+      });
+    });
+  });
+
+  describe('active item in dropdown', () => {
+    it('defaults to Any Weight', (done) => {
+      document.querySelector('.edit-link').click();
+
+      setTimeout(() => {
+        expect(activeDropdownItem()).toEqual('Any Weight');
+        done();
+      });
+    });
+
+    it('shows No Weight', (done) => {
+      vm.value = 0;
+      document.querySelector('.edit-link').click();
+
+      setTimeout(() => {
+        expect(activeDropdownItem()).toEqual('No Weight');
+        done();
+      });
+    });
+
+    it('shows correct weight', (done) => {
+      vm.value = 1;
+      document.querySelector('.edit-link').click();
+
+      setTimeout(() => {
+        expect(activeDropdownItem()).toEqual('1');
+        done();
+      });
+    });
+  });
+
+  describe('changing weight', () => {
+    it('sets value', (done) => {
+      document.querySelector('.edit-link').click();
+
+      setTimeout(() => {
+        document.querySelectorAll('li a')[3].click();
+      });
+
+      setTimeout(() => {
+        expect(activeDropdownItem()).toEqual('2');
+        expect(board.weight).toEqual('2');
+        done();
+      });
+    });
+
+    it('sets Any Weight', (done) => {
+      vm.value = 2;
+      document.querySelector('.edit-link').click();
+
+      setTimeout(() => {
+        document.querySelectorAll('li a')[0].click();
+      });
+
+      setTimeout(() => {
+        expect(activeDropdownItem()).toEqual('Any Weight');
+        expect(board.weight).toEqual(-1);
+        done();
+      });
+    });
+
+    it('sets No Weight', (done) => {
+      vm.value = 2;
+      document.querySelector('.edit-link').click();
+
+      setTimeout(() => {
+        document.querySelectorAll('li a')[1].click();
+      });
+
+      setTimeout(() => {
+        expect(activeDropdownItem()).toEqual('No Weight');
+        expect(board.weight).toEqual(0);
+        done();
+      });
+    });
+  });
+});