chore: add firefox testing to ci build command (#565)

Author: Zé Bateira

DEVELOPING_TUTORIALS.md

@@ -590,7 +590,7 @@ const run = async (files) => {
 Behind the scenes, the uploaded files have been saved as `window.uploadedFiles` for use both in your user's code and in your own validation. In your `validate` function, we recommend saving the files to a variable and allowing for the fact that they may not be present. For example:
 
 ```js
-const uploadedFiles = window.uploadedFiles || false
+const uploadedFiles = window.uploadedFiles || []
 ```
 
 Remember that these files are stored as browser file objects. Reference the [Files documentation](https://developer.mozilla.org/en-US/docs/Web/API/File#Properties) to see what properties are available to both you and the user, including `name` and `type`.

cypress.json

@@ -1,6 +1,5 @@
 {
    "baseUrl": "http://localhost:3000",
-   "responseTimeout": 60000,
-   "defaultCommandTimeout": 60000,
+   "defaultCommandTimeout": 30000,
    "video": false
 }

cypress/integration/tutorials.spec.js

@@ -201,6 +201,7 @@ function testMultipleChoiceOptions (tutorialId, lessonNr) {
   const lesson = tutorials[tutorialId].lessons[parseInt(lessonNr) - 1]
   const choices = lesson.logic.choices
   const correctChoiceIndex = choices.findIndex(choice => choice.correct === true)
+
   it(`displays right number of choices lesson ${lessonNr} and displays as not yet started`, function () {
     cy.visit(`/${tutorialName}/${lessonNr}`)
     cy.get('[data-cy=choice]').should('have.length', choices.length)
@@ -209,28 +210,33 @@ function testMultipleChoiceOptions (tutorialId, lessonNr) {
     cy.get(`[data-cy=progress-not-yet-started]`).should('be.visible')
     cy.get(`[data-cy=progress-icon-not-yet-started]`).should('be.visible')
   })
+
   function testChoice (choice, index) {
     let choiceType = index === correctChoiceIndex ? 'RIGHT' : 'WRONG'
     let correctOutput = index === correctChoiceIndex ? 'output-success' : 'output-fail'
     let incorrectOutput = index === correctChoiceIndex ? 'output-fail' : 'output-success'
     let correctButton = index === correctChoiceIndex ? 'not.be.disabled' : 'be.disabled'
     let correctProgress = index === correctChoiceIndex ? 'passed' : 'in-progress'
+
     describe(`${choiceType} choice ${index}`, function () {
       it(`shows correct completion status and button state`, function () {
         cy.get('[data-cy=choice]').eq(index).click()
         cy.get(`[data-cy=progress-${correctProgress}]`).should('be.visible')
         cy.get(`[data-cy=progress-icon-${correctProgress}]`).should('be.visible')
         cy.get('[data-cy=next-lesson-mult-choice]').should(correctButton)
       })
+
       it(`displays answer correctly`, function () {
         cy.get('[data-cy=choice]').eq(index).should('contain', parseTextForMarkdown(choice.answer))
       })
+
       it(`displays feedback correctly`, function () {
         cy.get(`[data-cy=${incorrectOutput}]`).should('not.exist')
         cy.get(`[data-cy=${correctOutput}]`).should('contain', parseTextForMarkdown(choice.feedback))
       })
     })
   }
+
   //  test correct answer first to ensure passed status will be cleared afterward
   testChoice(choices[correctChoiceIndex], correctChoiceIndex)
   //  test all incorrect answers
@@ -372,19 +378,21 @@ function advanceThroughLessons (tutorialId) {
       function uploadSingleFile () {
         it(`uploads a single file`, function () {
           cy.fixture(fixtures.png).then(fileContent => {
-            cy.get('[data-cy=file-upload]').upload({ fileContent, fileName: fixtures.png, mimeType: 'image/png' })
+            cy.get('[data-cy=file-upload]').attachFile({ fileContent, fileName: fixtures.png, mimeType: 'image/png' })
           })
         })
       }
       function uploadMultipleFiles () {
         it(`uploads 2 files`, function () {
-          cy.fixture(fixtures.json, 'base64').then(exampleJson => {
-            cy.fixture(fixtures.png, 'base64').then(faviconPng => {
+          cy.fixture(fixtures.json).then(exampleJson => {
+            cy.fixture(fixtures.png).then(faviconPng => {
               const files = [
                 { fileName: fixtures.json, fileContent: exampleJson, mimeType: 'application/json' },
                 { fileName: fixtures.png, fileContent: faviconPng, mimeType: 'image/png' }
               ]
-              cy.get('[data-cy=file-upload]').upload(files, { uploadType: 'input' })
+              cy.get('[data-cy=file-upload]')
+                .attachFile(files[0], { uploadType: 'input' })
+                .attachFile(files[1], { uploadType: 'input' })
             })
           })
         })
@@ -536,7 +544,7 @@ describe('SHOULD ADVANCE LESSONS WITH TRAILING SLASHES', () => {
     cy.get('[data-cy=code-editor-ready]').should('be.visible') // wait for editor to be updated
 
     cy.fixture(fixtures.png).then(fileContent => {
-      cy.get('[data-cy=file-upload]').upload({ fileContent, fileName: fixtures.png, mimeType: 'image/png' })
+      cy.get('[data-cy=file-upload]').attachFile({ fileContent, fileName: fixtures.png, mimeType: 'image/png' })
     })
     cy.get(`[data-cy=next-lesson-code]`).should('not.be.visible')
     cy.get('[data-cy=replace-with-solution]').click({ force: true })

package-lock.json

@@ -9,9 +9,10 @@
     "build:docs": "npm-run-all build:docs:design build:docs:develop",
     "build:docs:design": "markdown-toc -i DESIGNING_TUTORIALS.md",
     "build:docs:develop": "markdown-toc -i DEVELOPING_TUTORIALS.md",
-    "build:fleek": "npm ci && npm run sitemap && npm run scripts:build:data -- --dry-run=false && npm run test:jest && npm run build && start-server-and-test cy:serve http://localhost:3000 cy:run",
+    "build:fleek": "npm ci && npm run sitemap && npm run scripts:build:data -- --dry-run=false && npm run test:jest && npm run build && npm run cy:run:ci",
     "cy:open": "cypress open",
     "cy:run": "cypress run --browser chrome",
+    "cy:run:ci": "start-server-and-test cy:serve http://localhost:3000 \"cypress run --browser chrome\" && start-server-and-test cy:serve http://localhost:3000 \"cypress run --browser firefox\"",
     "cy:serve": "serve -l 3000 dist",
     "install-protowizard": "npm i ./ -g",
     "scripts:build:data": "node scripts/commands/build-data",
@@ -63,8 +64,8 @@
     "@vue/cli-service": "^3.12.1",
     "babel-eslint": "^8.2.6",
     "cli-table": "^0.3.1",
-    "cypress": "^5.4.0",
-    "cypress-file-upload": "^3.5.3",
+    "cypress": "^5.5.0",
+    "cypress-file-upload": "^4.1.1",
     "del": "^5.1.0",
     "dotenv": "^8.2.0",
     "eslint": "^5.16.0",
@@ -132,4 +133,4 @@
     }
   },
   "license": "Apache-2.0 AND MIT"
-}
+}

package.json

@@ -43,6 +43,11 @@ export default {
       let elem = document.querySelector('input#file')
       elem.click()
     },
+    onFilesReset: function () {
+      let elem = document.querySelector('input#file')
+      elem.value = ''
+      delete elem.files
+    },
     onFiles: function (files) {
       this.uploadedFiles = files
       window.uploadedFiles = files

src/components/FileLesson.vue

@@ -3,11 +3,11 @@
     <div class="f5 fw7 mt4 mb2">
       Step 1: Upload files
       <span class="pl1">
-        <img v-if="uploadedFiles" src="../static/images/complete.svg" alt="complete" style="height: 1.2rem;" class="v-mid" />
+        <img v-if="uploadedFiles.length" src="../static/images/complete.svg" alt="complete" style="height: 1.2rem;" class="v-mid" />
       </span>
     </div>
     <input type="file" multiple id="file" class="dn" data-cy="file-upload"/>
-    <div v-if="!uploadedFiles"
+    <div v-if="uploadedFiles.length === 0"
       @click="onFileClick" @drop="onFileDrop"
       @dragenter="dragging=true" @dragend="dragging=false" @dragleave="dragging=false" @dragover.prevent
       class="dropfile mb2 pa2 w-100 br3 shadow-4 bg-white color-navy" :class="{dragging: dragging}">
@@ -44,7 +44,7 @@ export default {
     onFileClick: Function,
     onFileDrop: Function,
     resetFileUpload: Function,
-    uploadedFiles: [Boolean, Array]
+    uploadedFiles: Array
   },
   data: self => {
     return {

src/components/FileUpload.vue

@@ -254,7 +254,7 @@ export default {
       editorReady: false,
       isFileLesson: self.isFileLesson,
       isMultipleChoiceLesson: self.isMultipleChoiceLesson,
-      uploadedFiles: window.uploadedFiles || false,
+      uploadedFiles: window.uploadedFiles || [],
       choice: localStorage[self.cacheKey] || '',
       cachedChoice: !!localStorage['cached' + routePath],
       output: self.output,
@@ -364,7 +364,7 @@ export default {
 
       const code = this.editor.getValue()
 
-      if (this.isFileLesson && this.uploadedFiles === false && auto === true) {
+      if (this.isFileLesson && this.uploadedFiles.length === 0 && auto === true) {
         this.showUploadInfo = true
         this.isSubmitting = false
         return
@@ -491,7 +491,8 @@ export default {
       countly.trackEvent(countly.events.CODE_RESET, this.trackingData)
     },
     resetFileUpload: function () {
-      this.uploadedFiles = false
+      this.uploadedFiles = []
+      this.onFilesReset()
       delete this.output.test
     },
     clearPassed: function () {

src/components/Lesson.vue

@@ -12,11 +12,11 @@
       </div>
       <div v-else-if="lessonPassed && !isSubmitting">
         <span class="disabled-btn-wrapper">
-          <span v-if="isFileLesson && !uploadedFiles" class="mr2 red lh-copy o-0" data-cy="need-new-files-msg">
+          <span v-if="isFileLesson && uploadedFiles.length === 0" class="mr2 red lh-copy o-0" data-cy="need-new-files-msg">
             You must upload a file before submitting.
           </span>
-          <Button v-if="(isFileLesson && !output) || (isFileLesson && !uploadedFiles)"
-            :disabled="!uploadedFiles"
+          <Button v-if="(isFileLesson && !output) || (isFileLesson && uploadedFiles.length ===0)"
+            :disabled="uploadedFiles.length === 0"
             :click="run"
             class="mr2 bg-navy white"
             style="minWidth: 90px"
@@ -32,14 +32,14 @@
         />
       </div>
       <div v-else>
-        <span v-if="(isFileLesson && !uploadedFiles) || isSubmitting" class="disabled-btn-wrapper">
-          <span v-if="isFileLesson && !uploadedFiles" class="mr2 red lh-copy o-0" data-cy="need-files-msg">
+        <span v-if="(isFileLesson && uploadedFiles.length === 0) || isSubmitting" class="disabled-btn-wrapper">
+          <span v-if="isFileLesson && uploadedFiles.length === 0" class="mr2 red lh-copy o-0" data-cy="need-files-msg">
             You must upload a file before submitting.
           </span>
           <Button
             :click="next"
             :loading="isSubmitting"
-            :disabled="isFileLesson && !uploadedFiles"
+            :disabled="isFileLesson && uploadedFiles.length === 0"
             class="bg-navy white"
             data-cy="submit-disabled"
             text="Submit"
@@ -111,7 +111,7 @@ export default {
     challenge: String,
     isFileLesson: Boolean,
     isMultipleChoiceLesson: Boolean,
-    uploadedFiles: [Boolean, Array],
+    uploadedFiles: Array,
     lessonPassed: Boolean,
     output: Object,
     isResources: Boolean,

src/components/Validator.vue

@@ -46,7 +46,7 @@ const validate = async (result, ipfs) => {
     }
   }
 
-  if (uploadedFiles === false) {
+  if (uploadedFiles.length === 0) {
     // Shouldn't happen because you can't hit submit without uploading files
     return { fail: 'Oops! You forgot to upload files to work with :(' }
   }