feat: test file upload, close #5

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 cypress/videos
+.DS_Store

app.js

@@ -1,6 +1,7 @@
-/* global Vue, Vuex, axios */
+/* global Vue, Vuex, axios, FileReader */
 ;(function () {
   Vue.use(Vuex)
+  Vue.use(window['bootstrap-vue'])
 
   function randomId () {
     return Math.random()
@@ -84,6 +85,9 @@
   // app Vue instance
   const app = new Vue({
     store,
+    data: {
+      file: null
+    },
     el: '.todoapp',
 
     created () {
@@ -116,6 +120,20 @@
 
       removeTodo (todo) {
         this.$store.dispatch('removeTodo', todo)
+      },
+
+      uploadTodos (e) {
+        // either set component data.file to test file
+        // or read it off the native event
+        const f = this.file || e.target.files[0]
+        const reader = new FileReader()
+        reader.onload = e => {
+          const list = JSON.parse(e.target.result)
+          list.forEach(todo => {
+            this.$store.commit('ADD_TODO', todo)
+          })
+        }
+        reader.readAsText(f)
       }
     }
   })

cypress/fixtures/example.json

@@ -1,5 +1,17 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}
+[{
+  "id": "1",
+  "title": "do first thing",
+  "completed": false
+}, {
+  "id": "2",
+  "title": "do second thing",
+  "completed": true
+}, {
+  "id": "3",
+  "title": "one more thing",
+  "completed": false
+}, {
+  "id": "4",
+  "title": "last item on the agenda",
+  "completed": false
+}]

cypress/integration/api-spec.js

@@ -96,7 +96,10 @@ describe('API', () => {
   beforeEach(stubMathRandom)
 
   it('receives empty list of items', () => {
-    cy.request('todos').its('body').should('deep.equal', [])
+    cy
+      .request('todos')
+      .its('body')
+      .should('deep.equal', [])
   })
 
   it('adds two items', () => {
@@ -150,11 +153,14 @@ describe('API', () => {
 
     // thanks to stubbed random id generator
     // we can "predict" what the TODO object is going to look like
-    cy.wait('@postTodo').its('request.body').should('deep.equal', {
-      title: 'first item',
-      completed: false,
-      id: '1'
-    })
+    cy
+      .wait('@postTodo')
+      .its('request.body')
+      .should('deep.equal', {
+        title: 'first item',
+        completed: false,
+        id: '1'
+      })
   })
 
   it('is deleting a todo item', () => {
@@ -168,7 +174,10 @@ describe('API', () => {
 
     // go through the UI
     enterTodo('first item') // id "1"
-    getTodoItems().first().find('.destroy').click({ force: true })
+    getTodoItems()
+      .first()
+      .find('.destroy')
+      .click({ force: true })
 
     cy.wait('@deleteTodo')
   })