59 refactor magazines tests to use mocked api routes

demo/App.vue

@@ -7,21 +7,19 @@
         :create='fieldsArticleCreate'
         :edit='fieldsArticleEdit'
         :resourceIdName='resourceIdName'
-        :apiUrl='apiUrl'
+        :apiUrl='articlesApiUrl'
         :redirect='articlesRedirect'
-        >
-      </Resource>
+      />
       <Resource
         name='magazines'
         :list='ListMagazines'
         :show='ShowMagazines'
         :create='CreateMagazines'
         :edit='EditMagazines'
         :resourceIdName='resourceIdName'
-        :apiUrl='apiUrl'
+        :apiUrl='magazinesApiUrl'
         :redirect='magazinesRedirect'
-        >
-      </Resource>
+      />
     </Admin>
 </template>
 
@@ -127,7 +125,8 @@ const magazinesRedirect = articlesRedirect
 //   }
 // }
 
-const apiUrl = 'http://localhost:8080/api/'
+const articlesApiUrl = 'http://localhost:8080/api/'
+const magazinesApiUrl = 'http://localhost:8888/api/'
 
 export default {
   name: "App",
@@ -137,7 +136,8 @@ export default {
   },
   data() {
     return {
-      apiUrl,
+      articlesApiUrl,
+      magazinesApiUrl,
       articlesList,
       articlesShow,
       fieldsArticleCreate,

demo/components/ListMagazines.vue

@@ -59,6 +59,10 @@
       :headers="headers"
       :items="desserts"
       class="elevation-1"
+      disable-initial-sort
+      :pagination.sync="pagination"
+      :dark="true"
+      rows-per-page-text="Magazines per page"
     >
       <template slot="no-data">
         <v-alert :value="true" color="warning" icon="warning">
@@ -68,7 +72,8 @@
 
       <template slot="items" slot-scope="props">
         <td :name="idRowName(props.index)">{{ props.item.id }}</td>
-        <td :name="issueRowName(props.index)" class="text-xs-right">{{ props.item.issue }}</td>
+        <td :name="nameRowName(props.index)" class="text-xs-left">{{ props.item.name }}</td>
+        <td :name="issueRowName(props.index)" class="text-xs-center">{{ props.item.issue }}</td>
         <td :name="publisherRowName(props.index)" class="text-xs-right">{{ props.item.publisher }}</td>
       </template>
 
@@ -78,6 +83,7 @@
 
 <script>
   import UI_NAMES from '@constants/ui.element.names'
+  import { rowsPerPage } from '../constants'
 
   export default {
     name: 'ListMagazines',
@@ -101,14 +107,20 @@
       })
       return {
         idRowName: (index) => buildName('id', index),
+        nameRowName: (index) => buildName('name', index),
         issueRowName: (index) => buildName('issue', index),
-        publisherRowName: (index) => buildName('publisher', index)
+        publisherRowName: (index) => buildName('publisher', index),
+        pagination: {
+          page: 1,
+          rowsPerPage
+        }
       }
     },
     computed: {
       headers: function() {
         return [
           { text: 'ID', align: 'left', sortable: true, value: 'id' },
+          { text: 'Name', value: 'name' },
           { text: 'Issue', value: 'issue' },
           { text: 'Publisher', value: 'publisher' }
         ]

demo/constants/index.js

@@ -0,0 +1,2 @@
+
+export const rowsPerPage = 14

tests/e2e/factory/store/initial.getters.js

@@ -1,8 +1,7 @@
 import { initialResourcesRoutes } from './common.utils'
 
-
 /**
- * Annonymous Function - Creates a simualtion of initial vuex crud getters
+ * Anonymous Function - Creates a simualtion of initial vuex crud getters
  *
  * @return {Object} The expected Vuex Crud mocked getters
  */

tests/e2e/factory/store/initial.state.js

@@ -1,7 +1,7 @@
 import { initialResourcesRoutes } from './common.utils'
 
 /**
- * Annonymous Function - Creates a simualtion of initial vuex crud state
+ * Anonymous Function - Creates a simualtion of initial vuex crud state
  *
  * @return {Object} The expected Vuex Crud mocked state
  */