Merge pull request #48 from jeisele2/testing

Added tests and mutations for adding state/actions to active component

Author: jeisele2

.gitignore

@@ -6,7 +6,8 @@ node_modules
 /src-cordova/node_modules
 /src-cordova/platforms
 /src-cordova/plugins
-/src-cordova/www
+/src-cordova/www\
+/test/jest/coverage
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

src/store/mutations.js

@@ -198,7 +198,13 @@ const mutations = {
     delete state.componentMap[payload.componentName]
     state.routes[state.activeRoute] = compArr
     console.log('new state', state)
-    
+  },
+  [types.ADD_TO_COMPONENT_ACTIONS]: (state, payload) => {
+    state.componentMap[state.activeComponent].componentActions.push(payload)
+  },
+  [types.ADD_TO_COMPONENT_STATE]: (state, payload) => {
+    state.componentMap[state.activeComponent].componentState.push(payload)
+
   },
   [types.ADD_USER_ACTION]: (state, payload) => {
     if (typeof(payload)==='string') state.userActions.push(payload);

src/store/state/index.js

@@ -23,6 +23,8 @@ const newState = {
     HomeView: []
     // NewView: []
   },
+  userActions: [],
+  userState: {},
   /**
    *
    */

src/store/types.js

@@ -41,6 +41,8 @@ export const UPDATE_OPEN_MODAL = 'UPDATE_OPEN_MODAL'
 export const PARENT_SELECTED = 'PARENT_SELECTED'
 export const DELETE_ROUTE = 'DELETE_ROUTE'
 export const DELETE_COMPONENT = 'DELETE_COMPONENT'
+export const ADD_TO_COMPONENT_ACTIONS = 'ADD_TO_COMPONENT_ACTIONS'
+export const ADD_TO_COMPONENT_STATE = 'ADD_TO_COMPONENT_STATE'
 export const ADD_USER_ACTION = 'ADD_USER_ACTION'
 export const ADD_TO_USER_STORE = 'ADD_TO_USER_STORE'
 

test/jest/__tests__/App.spec.js

@@ -7,7 +7,6 @@ import { mount, createLocalVue, shallowMount } from '@vue/test-utils'
 import Vuex from 'vuex';
 import QBUTTON from './demo/QBtn-demo.vue'
 import * as All from 'quasar'
-
 // import langEn from 'quasar/lang/en-us' // change to any language you wish! => this breaks wallaby :(
 const { Quasar, date } = All
 
@@ -22,50 +21,37 @@ const components = Object.keys(All).reduce((object, key) => {
   }
   return object
 }, {})
-/*
-describe('Mount Quasar', () => {
-  const localVue = createLocalVue()
-  localVue.use(Quasar, { components }) // , lang: langEn
-
-  const wrapper = mount(QBUTTON, {
-    localVue
-  })
-  const vm = wrapper.vm
-
-  it('passes the sanity check and creates a wrapper', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-
-  it('has a created hook', () => {
-    expect(typeof vm.increment).toBe('function')
-  })
 
-  it('accesses the shallowMount', () => {
-    expect(vm.$el.textContent).toContain('rocket muffin')
-    expect(wrapper.text()).toContain('rocket muffin') // easier
-    expect(wrapper.find('p').text()).toContain('rocket muffin')
-  })
-
-  it('sets the correct default data', () => {
-    expect(typeof vm.counter).toBe('number')
-    const defaultData2 = QBUTTON.data()
-    expect(defaultData2.counter).toBe(0)
+describe('Adding actions and state to components', () => {
+  let state;
+  beforeEach(() => {
+    state = {
+      componentMap: {
+        testComponent: {
+          componentName: 'testComponent',
+          children: [],
+          htmlList: [],
+          componentActions: [],
+          componentState: []
+        }
+      },
+      activeComponent: 'testComponent'
+    }
   })
-
-  it('correctly updates data when button is pressed', () => {
-    const button = wrapper.find('button')
-    button.trigger('click')
-    expect(vm.counter).toBe(1)
+  describe('Adding actions to components', () => {
+    it('should add a single action to active component', () => {
+      mutations.ADD_TO_COMPONENT_ACTIONS(state, 'testAction')
+      expect(state.componentMap[state.activeComponent].componentActions).toEqual(['testAction'])
+    })
   })
-
-  it('formats a date without throwing exception', () => {
-    // test will automatically fail if an exception is thrown
-    // MMMM and MMM require that a language is 'installed' in Quasar
-    let formattedString = date.formatDate(Date.now(), 'YYYY MMMM MMM DD')
-    console.log('formattedString', formattedString)
+  describe('Adding state to components', () => {
+    it('should add a single state string to active component', () => {
+      mutations.ADD_TO_COMPONENT_STATE(state, 'testState')
+      expect(state.componentMap[state.activeComponent].componentState).toEqual(['testState'])
+    })
   })
 })
-*/
+
 describe('userActions mutation', () => {
   let actions;
   let store;
@@ -112,4 +98,4 @@ describe('userStore mutation', () => {
     mutations.ADD_TO_USER_STORE(store, { string: 'string'})
     expect(store.userStore.string).toBe('string')
   })
-});
+});

test/jest/coverage/clover.xml

@@ -432,7 +432,7 @@ <h1>
   font-size: 12px;
 }
 .codesnippet-container {
-  margin-bottom: 1rem;  
+  margin-bottom: 1rem;
 }
 ::-webkit-scrollbar {
     display: none;

test/jest/coverage/coverage-final.json

@@ -615,7 +615,7 @@ <h1>
     },
 <span class="fstat-no" title="function not covered" >    childList () {</span>
 <span class="cstat-no" title="statement not covered" >      return this.componentMap[componentData.componentName].children</span>
-    }, 
+    },
 <span class="fstat-no" title="function not covered" >    options () {</span>
       // PROBLEM: the objects on childrenmultiselectvalue are applied
 <span class="cstat-no" title="statement not covered" >      const routes = Object.keys(this.routes)</span>

test/jest/coverage/lcov-report/src/components/CodeSnippet.vue.html

@@ -456,11 +456,11 @@ <h1>
   background: #11120F;
 }
 .toolbar-background {
-  background: black;  
+  background: black;
 }
 .full-footer {
   // height: 100vh;
-  padding-bottom: 0px;  
+  padding-bottom: 0px;
 }
 &lt;/style&gt;
 &nbsp;</pre></td></tr>