Started tests

app/assets/javascripts/boards/boards_bundle.js.es6

@@ -14,12 +14,13 @@
 //= require ./components/board
 //= require ./components/board_sidebar
 //= require ./components/new_list_dropdown
-//= require ./components/modal/modal
+//= require ./components/modal/index
 //= require ./vue_resource_interceptor
 
 $(() => {
   const $boardApp = document.getElementById('board-app');
   const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
 
@@ -73,10 +74,8 @@ $(() => {
           this.loading = false;
 
           if (this.state.lists.length > 0) {
-            Store.modal.selectedList = this.state.lists[0];
+            ModalStore.store.selectedList = this.state.lists[0];
           }
-
-          Store.modal.showAddIssuesModal = true;
         });
     }
   });
@@ -97,6 +96,6 @@ $(() => {
     .on('click', '.js-show-add-issues', (e) => {
       e.preventDefault();
 
-      Store.modal.showAddIssuesModal = true;
+      ModalStore.store.showAddIssuesModal = true;
     });
 });

app/assets/javascripts/boards/components/modal/dismiss.js.es6

@@ -7,7 +7,7 @@
 
   gl.issueBoards.DismissModal = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     methods: {
       toggleModal(toggle) {

app/assets/javascripts/boards/components/modal/footer.js.es6

@@ -8,7 +8,7 @@
 
   gl.issueBoards.ModalFooter = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     computed: {
       submitDisabled() {

app/assets/javascripts/boards/components/modal/header.js.es6

-//= require ./dismiss
+/* global Vue */
 //= require ./tabs
+//= require ./dismiss
 //= require ./search
-/* global Vue */
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
@@ -10,7 +10,7 @@
 
   gl.issueBoards.IssuesModalHeader = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     components: {
       'modal-dismiss': gl.issueBoards.DismissModal,

app/assets/javascripts/boards/components/modal/modal.es6 → app/assets/javascripts/boards/components/modal/index.js.es6

+/* global Vue */
 //= require ./header
 //= require ./list
 //= require ./footer
-/* global Vue */
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
@@ -10,7 +10,7 @@
 
   gl.issueBoards.IssuesModal = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     watch: {
       searchTerm() {

app/assets/javascripts/boards/components/modal/list.js.es6

@@ -10,7 +10,7 @@
 
   gl.issueBoards.ModalList = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     watch: {
       activeTab() {

app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6

 /* global Vue */
 (() => {
+  const ModalStore = gl.issueBoards.ModalStore;
   const Store = gl.issueBoards.BoardsStore;
 
   window.gl = window.gl || {};
@@ -8,7 +9,7 @@
   gl.issueBoards.ModalFooterListsDropdown = Vue.extend({
     data() {
       return {
-        modal: Store.modal,
+        modal: ModalStore.store,
         state: Store.state,
       };
     },

app/assets/javascripts/boards/components/modal/search.js.es6

@@ -7,7 +7,7 @@
 
   gl.issueBoards.ModalSearch = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     computed: {
       selectAllText() {

app/assets/javascripts/boards/components/modal/tabs.js.es6

@@ -7,7 +7,7 @@
 
   gl.issueBoards.ModalTabs = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     methods: {
       changeTab(tab) {

app/assets/javascripts/boards/stores/boards_store.js.es6

@@ -12,15 +12,6 @@
     detail: {
       issue: {}
     },
-    modal: {
-      issues: [],
-      selectedIssues: [],
-      showAddIssuesModal: false,
-      activeTab: 'all',
-      selectedList: {},
-      searchTerm: '',
-      loading: false,
-    },
     moving: {
       issue: {},
       list: {}

app/assets/javascripts/boards/stores/modal_store.js.es6

@@ -4,11 +4,19 @@
 
   class ModalStore {
     constructor() {
-      this.globalStore = gl.issueBoards.BoardsStore.modal;
+      this.store = {
+        issues: [],
+        selectedIssues: [],
+        showAddIssuesModal: false,
+        activeTab: 'all',
+        selectedList: {},
+        searchTerm: '',
+        loading: false,
+      };
     }
 
     selectedCount() {
-      return this.globalStore.selectedIssues.length;
+      return this.store.selectedIssues.length;
     }
 
     toggleIssue(issueObj) {
@@ -23,9 +31,9 @@
     }
 
     toggleAll() {
-      const select = this.selectedCount() !== this.globalStore.issues.length;
+      const select = this.selectedCount() !== this.store.issues.length;
 
-      this.globalStore.issues.forEach((issue) => {
+      this.store.issues.forEach((issue) => {
         const issueUpdate = issue;
 
         if (issueUpdate.selected !== select) {
@@ -41,20 +49,20 @@
     }
 
     addSelectedIssue(issue) {
-      this.globalStore.selectedIssues.push(issue);
+      this.store.selectedIssues.push(issue);
     }
 
     removeSelectedIssue(issue) {
       const index = this.selectedIssueIndex(issue);
-      this.globalStore.selectedIssues.splice(index, 1);
+      this.store.selectedIssues.splice(index, 1);
     }
 
     selectedIssueIndex(issue) {
-      return this.globalStore.selectedIssues.indexOf(issue);
+      return this.store.selectedIssues.indexOf(issue);
     }
 
     findSelectedIssue(issue) {
-      return this.globalStore.selectedIssues
+      return this.store.selectedIssues
         .filter(filteredIssue => filteredIssue.id === issue.id)[0];
     }
   }

spec/features/boards/add_issues_modal_spec.rb

+require 'rails_helper'
+
+describe 'Issue Boards add issue modal', :feature, :js do
+  include WaitForAjax
+  include WaitForVueResource
+
+  let(:project) { create(:empty_project, :public) }
+  let(:board) { create(:board, project: project) }
+  let(:user) { create(:user) }
+  let!(:planning) { create(:label, project: project, name: 'Planning') }
+  let!(:label) { create(:label, project: project) }
+  let!(:list1) { create(:list, board: board, label: planning, position: 0) }
+  let!(:issue) { create(:issue, project: project) }
+  let!(:issue2) { create(:issue, project: project) }
+
+  before do
+    project.team << [user, :master]
+
+    login_as(user)
+
+    visit namespace_project_board_path(project.namespace, project, board)
+    wait_for_vue_resource
+  end
+
+  context 'modal interaction' do
+    it 'opens modal' do
+      click_button('Add issues')
+
+      expect(page).to have_selector('.add-issues-modal')
+    end
+
+    it 'closes modal' do
+      click_button('Add issues')
+
+      page.within('.add-issues-modal') do
+        find('.close').click
+      end
+
+      expect(page).not_to have_selector('.add-issues-modal')
+    end
+
+    it 'closes modal if cancel button clicked' do
+      click_button('Add issues')
+
+      page.within('.add-issues-modal') do
+        click_button 'Cancel'
+      end
+
+      expect(page).not_to have_selector('.add-issues-modal')
+    end
+  end
+
+  context 'issues list' do
+    before do
+      click_button('Add issues')
+
+      wait_for_vue_resource
+    end
+
+    it 'loads issues' do
+      page.within('.add-issues-modal') do
+        page.within('.nav-links') do
+          expect(page).to have_content('2')
+        end
+
+        expect(page).to have_selector('.card', count: 2)
+      end
+    end
+
+    it 'shows selected issues' do
+      page.within('.add-issues-modal') do
+        click_link 'Selected issues'
+
+        expect(page).not_to have_selector('.card')
+      end
+    end
+
+    context 'search' do
+      it 'returns issues' do
+        page.within('.add-issues-modal') do
+          find('.form-control').native.send_keys(issue.title)
+
+          expect(page).to have_selector('.card', count: 1)
+        end
+      end
+
+      it 'returns no issues' do
+        page.within('.add-issues-modal') do
+          find('.form-control').native.send_keys('testing search')
+
+          expect(page).not_to have_selector('.card')
+        end
+      end
+    end
+
+    context 'selecing issues' do
+      it 'selects single issue' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          page.within('.nav-links') do
+            expect(page).to have_content('Selected issues 1')
+          end
+        end
+      end
+
+      it 'changes button text' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          expect(first('.add-issues-footer .btn')).to have_content('Add 1 issue')
+        end
+      end
+
+      it 'changes button text with plural' do
+        page.within('.add-issues-modal') do
+          all('.card').each do |el|
+            el.click
+          end
+
+          expect(first('.add-issues-footer .btn')).to have_content('Add 2 issues')
+        end
+      end
+
+      it 'shows only selected issues on selected tab' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          click_link 'Selected issues'
+
+          expect(page).to have_selector('.card', count: 1)
+        end
+      end
+
+      it 'selects all issues' do
+        page.within('.add-issues-modal') do
+          click_button 'Select all'
+
+          expect(page).to have_selector('.is-active', count: 2)
+        end
+      end
+
+      it 'un-selects all issues' do
+        page.within('.add-issues-modal') do
+          click_button 'Select all'
+
+          expect(page).to have_selector('.is-active', count: 2)
+
+          click_button 'Un-select all'
+
+          expect(page).not_to have_selector('.is-active')
+        end
+      end
+
+      it 'selects all that arent already selected' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          expect(page).to have_selector('.is-active', count: 1)
+
+          click_button 'Select all'
+
+          expect(page).to have_selector('.is-active', count: 2)
+        end
+      end
+
+      it 'unselects from selected tab' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          click_link 'Selected issues'
+
+          first('.card').click
+
+          expect(page).not_to have_selector('.card')
+        end
+      end
+    end
+
+    context 'adding issues' do
+      it 'adds to board' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          click_button 'Add 1 issue'
+        end
+
+        page.within(first('.board')) do
+          expect(page).to have_selector('.card')
+        end
+      end
+
+      it 'adds to second list' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          click_button planning.title
+
+          click_link label.title
+
+          click_button 'Add 1 issue'
+        end
+
+        page.within(find('.board:nth-child(2)')) do
+          expect(page).to have_selector('.card')
+        end
+      end
+    end
+  end
+end