Fixed up failing JS tests

Added upcoming tests

app/assets/javascripts/boards/components/boards_selector.js

@@ -96,7 +96,7 @@ require('./board_new_form');
       },
       updateMilestoneFilterDropdown() {
         const $milestoneDropdown = $('.dropdown-menu-milestone');
-        const hideElements = this.board.milestone === null || this.board.milestone.id === -1;
+        const hideElements = this.board.milestone === undefined || this.board.milestone_id === -1;
 
         $milestoneDropdown.find('.dropdown-input, .dropdown-footer-list')
           .toggle(hideElements);

app/assets/javascripts/boards/components/milestone_select.js

@@ -26,8 +26,8 @@ module.exports = Vue.extend({
         },
         {
           id: -2,
-          title: 'Upcoming'
-        }
+          title: 'Upcoming',
+        },
       ],
     };
   },

spec/features/boards/board_with_milestone_spec.rb

@@ -58,6 +58,20 @@ describe 'Multiple Issue Boards', :feature, :js do
       expect(find('.js-milestone-select')).not_to have_content(milestone.title)
       expect(all('.board')[1]).to have_selector('.card', count: 2)
     end
+
+    it 'sets board to any milestone' do
+      update_board_milestone('Any Milestone')
+
+      expect(find('.js-milestone-select')).not_to have_content(milestone.title)
+      expect(all('.board')[1]).to have_selector('.card', count: 2)
+    end
+
+    it 'sets board to upcoming milestone' do
+      update_board_milestone('Upcoming')
+
+      expect(find('.js-milestone-select')).not_to have_content(milestone.title)
+      expect(all('.board')[1]).to have_selector('.card', count: 0)
+    end
   end
 
   def create_board_with_milestone

spec/javascripts/boards/milestone_select_spec.js

@@ -37,8 +37,9 @@ describe('Milestone select component', () => {
     it('sets default data', () => {
       expect(vm.loading).toBe(false);
       expect(vm.milestones.length).toBe(0);
-      expect(vm.extraMilestones.length).toBe(1);
+      expect(vm.extraMilestones.length).toBe(2);
       expect(vm.extraMilestones[0].title).toBe('Any Milestone');
+      expect(vm.extraMilestones[1].title).toBe('Upcoming');
     });
   });
 
@@ -58,9 +59,9 @@ describe('Milestone select component', () => {
 
       it('renders the milestone list', () => {
         expect(vm.$el.querySelector('.fa-spinner')).toBeNull();
-        expect(vm.$el.querySelectorAll('.board-milestone-list li').length).toBe(3);
+        expect(vm.$el.querySelectorAll('.board-milestone-list li').length).toBe(4);
         expect(
-          vm.$el.querySelectorAll('.board-milestone-list li')[2].textContent,
+          vm.$el.querySelectorAll('.board-milestone-list li')[3].textContent,
         ).toContain('test');
       });
 
@@ -73,9 +74,18 @@ describe('Milestone select component', () => {
         });
       });
 
-      it('selects fetched milestone', () => {
+      it('selects upcoming milestone', () => {
         vm.$el.querySelectorAll('.board-milestone-list a')[1].click();
 
+        expect(selectMilestoneSpy).toHaveBeenCalledWith({
+          id: -2,
+          title: 'Upcoming',
+        });
+      });
+
+      it('selects fetched milestone', () => {
+        vm.$el.querySelectorAll('.board-milestone-list a')[2].click();
+
         expect(selectMilestoneSpy).toHaveBeenCalledWith({
           id: 1,
           title: 'test',