add CSV file parsing example

examples/file-upload-react/README.md

@@ -20,7 +20,7 @@ const file = e.nativeEvent.testFile || e.nativeEvent.target.files[0]
 
 We can confirm that the file gets uploaded by stubbing either XHR request or intercepting the `axios` library method used by the application's code to actually perform the file upload. See the `spec.js` how to:
 
-- Stub remote server using [`cy.route()`](https://on.cypress.io/route)
+- Stub network calls using [`cy.intercept()`](https://on.cypress.io/intercept)
 - Alternatively stub `axios.post` method using [`cy.stub()`](https://on.cypress.io/stub)
 
 ### [upload-plugin-spec.js](cypress/integration/upload-plugin-spec.js)
@@ -74,3 +74,7 @@ The rest of the application's code runs "normally" without any stubbing.
 ![Application stubbing](images/stub-app-method.png)
 
 Check out a blog post that describes this technique in general ["Shrink the Untestable Code With App Actions And Effects"](https://www.cypress.io/blog/2019/02/28/shrink-the-untestable-code-with-app-actions-and-effects/)
+
+### [csv-file-spec.js](./cypress/integration/csv-file-spec.js)
+
+Attaches the CSV fixture using the `cypress-file-upload`. The attached file is parsed by the application using the [papaparse](https://www.papaparse.com/) library. The test then validates the parsed results.

examples/file-upload-react/cypress/fixtures/list.csv

@@ -0,0 +1,3 @@
+First name,Last name
+Joe,Bravo
+Mike,Smith

examples/file-upload-react/cypress/integration/csv-file-spec.js

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+describe('CSV file', () => {
+  it('parses', () => {
+    cy.visit('index.html')
+    cy.get('input#csv-file').attachFile('list.csv')
+    // the CSV fixture file will be parsed and
+    // the results will be set in the "window" property
+    cy.window().should('have.prop', '__csvResults')
+    .and('have.keys', ['data', 'errors', 'meta'])
+    .its('errors').should('be.empty')
+
+    // validate the parsed list
+    cy.window().its('__csvResults.data').should('deep.equal',
+      [{
+        'First name': 'Joe',
+        'Last name': 'Bravo',
+      },
+      { 'First name': 'Mike', 'Last name': 'Smith' }])
+  })
+})

examples/file-upload-react/cypress/integration/spec.js

@@ -6,10 +6,8 @@ describe('File upload', () => {
   })
 
   it('uploads mock file and stubs the server', () => {
-    // see how to mock a remote server
-    // https://on.cypress.io/route
-    cy.server()
-    cy.route('POST', 'https://some-server.com/upload', 200).as('upload')
+    // mock the network call using https://on.cypress.io/intercept
+    cy.intercept('POST', 'https://some-server.com/upload', {}).as('upload')
     // load mock data from a fixture or construct here
     const testFile = new File(['data to upload'], 'upload.txt')
 

examples/file-upload-react/cypress/integration/upload-plugin-spec.js

@@ -7,10 +7,9 @@ describe('cypress-upload-file plugin', () => {
   })
 
   it('uploads mock file', () => {
-    // see how to mock a remote server
-    // https://on.cypress.io/route
-    cy.server()
-    cy.route('POST', 'https://some-server.com/upload', 200).as('upload')
+    // see how to mock network calls
+    // https://on.cypress.io/intercept
+    cy.intercept('POST', 'https://some-server.com/upload', {}).as('upload')
 
     // finds file at cypress/fixtures/test.txt
     cy.get('#file1').attachFile('test.txt')

examples/file-upload-react/cypress/integration/upload-via-app-spec.js

@@ -6,8 +6,8 @@ describe('File upload', () => {
   })
 
   it('uploads file by stubbing application code', () => {
-    cy.server()
-    cy.route('POST', 'https://some-server.com/upload', 200).as('upload')
+    cy.intercept('POST', 'https://some-server.com/upload', {}).as('upload')
+
     // load mock data from a fixture or construct here
     const testFile = new File(['data to upload'], 'upload.txt')
 

examples/file-upload-react/index.html

@@ -16,14 +16,23 @@
     <script src="https://fb.me/react-dom-15.0.0.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="https://unpkg.com/papaparse@latest/papaparse.min.js"></script>
+
     <script type="text/babel">
       let FileUploadApp = React.createClass({
         render: function() {
           return (
-            <div>
-              <h3>File upload</h3>
-              <input id="file1" type="file" onChange={this.fileUpload}/>
-            </div>
+            <main>
+              <div>
+                <h3>File upload</h3>
+                <input id="file1" type="file" onChange={this.fileUpload}/>
+              </div>
+
+              <div>
+                <h3>CSV File parse</h3>
+                <input id="csv-file" type="file" onChange={this.csvFileParse}/>
+              </div>
+            </main>
           )
         },
 
@@ -45,6 +54,25 @@ <h3>File upload</h3>
           // FormData.append(name, value, filename)
           data.append("file", file, file.name)
           axios.post('https://some-server.com/upload', data)
+        },
+
+        csvFileParse (e) {
+          const file = e.nativeEvent.target.files[0];
+          console.log('file', file)
+          // parse CSV file using
+          // https://www.papaparse.com/
+          Papa.parse(file, {
+            delimiter: ',',
+            header: true,
+            skipEmptyLines: true,
+            complete (results) {
+              console.log('finished parsing CSV file')
+              console.log(results)
+              // set the results on the window object
+              // and the tests can verify them
+              window.__csvResults = results
+            }
+          })
         }
       });
 

package.json

@@ -110,7 +110,7 @@
     "cypress-axe": "0.12.2",
     "cypress-expect-n-assertions": "1.0.0",
     "cypress-failed-log": "2.9.1",
-    "cypress-file-upload": "4.1.1",
+    "cypress-file-upload": "5.0.7",
     "cypress-iframe": "1.0.1",
     "cypress-pipe": "2.0.0",
     "cypress-plugin-snapshots": "1.4.4",

renovate.json

@@ -36,7 +36,8 @@
         "@cypress/snapshot",
         "@cypress/webpack-preprocessor",
         "start-server-and-test",
-        "typescript"
+        "typescript",
+        "cypress-file-upload"
       ],
       "enabled": false
     }