Add tests for form ticket component

Fix some linting issues

Author: ArayB

src/events/form/form-tickets.vue

@@ -9,7 +9,6 @@
   </div>
 </template>
 <script>
-  // import { mutations, getters } from '@/events/event-store';
   import EventStore from '@/events/event-store';
 
   export default {
@@ -33,15 +32,6 @@
       };
     },
 
-    methods: {
-      createTicket() {
-        return {
-          name: this.label,
-          type: this.type,
-          quantity: this.quantity,
-        };
-      },
-    },
     computed: {
       ticketQuantity: {
         get() {

src/users/cd-create-account.vue

@@ -5,7 +5,7 @@
       <div class="cd-create-account__info">
         <p>
           <i class="fa fa-info-circle"></i>
-          {{ $t('If you are a parent/guardian and want to book tickets for a child under 13, please fill in your own details.') }} <br/> 
+          {{ $t('If you are a parent/guardian and want to book tickets for a child under 13, please fill in your own details.') }} <br/>
           {{ $t('We collect this information so we can contact you with updates about the events you\'re booking tickets for.') }}
         </p>
       </div>
@@ -42,7 +42,7 @@
             :proportions="[2, 2, 3]"></vue-dob-picker>
         </div>
         <p v-if="isUnderage" class="cd-create-account__dob-error text-danger">
-          {{ $t('Sorry :( Since you are under 13, you\'re not yet allowed to book event tickets yourself.') }} 
+          {{ $t('Sorry :( Since you are under 13, you\'re not yet allowed to book event tickets yourself.') }}
           {{ $t('Please ask your parent or guardian to book for you.') }}
         </p>
         <p class="cd-create-account__dob-error text-danger"
@@ -163,7 +163,9 @@
           return false;
         }
         if (!this.recaptchaResponse) {
+          /* eslint-disable no-alert */
           alert('Please complete the reCAPTCHA');
+          /* eslint-enable no-alert */
           return false;
         }
         try {
@@ -194,7 +196,9 @@
               this.errors.add('registration', 'Nick exists', 'nick-exists');
               return;
             }
+            /* eslint-disable no-alert */
             alert(err);
+            /* eslint-enable no-alert */
           }
         }
       },

test/unit/specs/events/cd-event-form.spec.js

@@ -32,8 +32,6 @@ describe('Event Form component', () => {
 
     MockEventStore = {
       commit: sinon.stub(),
-      mutations: {
-      },
       getters: {
         address: sinon.stub().resolves('123 Fake Street'),
       },
@@ -111,10 +109,6 @@ describe('Event Form component', () => {
               },
             };
 
-            MockEventStore.mutations = {
-              setEvent: sinon.stub(),
-            };
-
             await vm.$lifecycleMethods.created();
 
             expect(MockDojosService.getDojoById).to.have.been.calledOnce

test/unit/specs/events/event-store.spec.js

@@ -57,7 +57,6 @@ describe('Event Store', () => {
         const event = { id: 1, name: 'Event name' };
         EventStore.commit('setEvent', event);
 
-        console.log(EventStore.state.event);
         expect(EventStore.state.event).to.deep.equal({
           id: 1,
           name: 'Event name',

test/unit/specs/events/form-tickets.spec.js

@@ -1,24 +1,41 @@
 import vueUnitHelper from 'vue-unit-helper';
-import formTicket from '@/events/form/form-tickets';
+import formTicket from '!!vue-loader?inject!@/events/form/form-tickets';
 
 describe('Form Ticket component', () => {
+  let FormTicketWithMocks;
+  let MockEventStore;
+
+  beforeEach(() => {
+    MockEventStore = {
+      commit: sinon.stub(),
+      getters: {
+        ticketQuantity: sinon.stub().returns(5),
+      },
+    };
+
+    FormTicketWithMocks = formTicket({
+      '@/events/event-store': MockEventStore,
+    });
+  });
+
+
   afterEach(() => {
     sinon.restore();
   });
 
-  describe('lifecycle functions', () => {
+  describe('computed', () => {
+    describe('ticketQuantity', () => {
+      it('returns value from event store', () => {
+        const vm = vueUnitHelper(FormTicketWithMocks);
+        expect(vm.ticketQuantity).to.eql(5);
+      });
+      it('updates value to event store', () => {
+        const vm = vueUnitHelper(FormTicketWithMocks);
+        vm.type = 'ticket-type';
+        vm.ticketQuantity = 6;
+        expect(MockEventStore.commit).to.have.been.calledOnce
+          .and.calledWith('updateTicketQuantity', { quantity: 6, type: 'ticket-type' });
+      });
+    });
   });
-
-  // describe('computed', () => {
-  //   describe('tickets', () => {
-  //     it('should reference dom elements', () => {
-  //       const vm = vueUnitHelper(FormTicketWithMocks);
-  //       vm.$refs = {
-  //         youthTickets: 'one',
-  //         mentorTickets: 'two',
-  //       };
-  //       expect(vm.tickets).to.eql(['one', 'two']);
-  //     });
-  //   });
-  // });
 });