Example of test written to cover file uploads implemented in blueimp/jQuery-File-Upload

File_Upload_Example.coffee

describe "Answer Files List [0d0]", ->
  before -> @visit()

  beforeEach ->
    cy
      .server()
      .fixture("answer_photos").as("answerFiles")
      .fixture("answer").as("answer")
      .then ->
        @answerModel = App.request "new:answer:entity", @answer.item

  context "upload photo [150]", ->
    beforeEach ->
      cy
        .route(/^\/answers\/\d+\/answer_files\?/, "@answerFiles").as("getAnswerFiles")
        .then ->
          App.as("admin").vent.trigger("list:answer:files", @answerModel)
        .wait("@getAnswerFiles")
        .region("#main")
        .then ->
          @file = remote.dataURLtoBlob(logo)
          @file.name = "InspectAll-Logo.png"

          ## need to get 2nd in jquery ui
          @upload = $(@mainRegionObj.currentView.ui.uploadInput[1])
        .get("input[type='file']:last").as("uploadInput")

    ## need this test only on desktop browsers
    it "allows for multiple files [153]", ->
      cy.get("@uploadInput").should('have.attr', "multiple")

    context "after upload selection [o95]", ->
      beforeEach ->
        cy
          .route({
            method: "POST"
            url: /^\/answers\/\d+\/answer_files$/
            response: "fixture:image/logo"
          }).as("postPhoto")

        @addUpload = =>
          df = $.Deferred()

          @upload.fileupload("add", files: @file)
          ## defer all these events since they happen prior to our callback functions
          ## we need them to trigger afterwards
          @upload.one "fileuploadprocessdone", (e, data) -> _.defer -> df.notify(data, "process")
          @upload.one "fileuploadprogress", (e, data) -> _.defer -> df.notify(data, "progress")
          @upload.one "fileuploaddone", (e, data) -> _.defer -> df.resolve(data, "done")
          @upload.one "fileuploadfail", (e, data) -> _.defer -> df.reject(data, "fail")

          df

      it "inserts into the last row while uploading [158]", (done) ->
        @addUpload().progress (data, state) =>
          if state is "progress"
            cy
              .get("@mainRegion").find("li:last").contains("Logo.png")
              .then ->
                done()

      it "updates the count of total files [156]", (done) ->
        cy
          .get("@mainRegion").view().then (view) ->
            @count = view.collection.meta.count
          .then ->
            @addUpload().progress (data, state) =>
              if state is "progress"
                cy
                  .get("@mainRegion").find("[data-js='total-files']").contains(@count + 1)
                  .then ->
                    done()

      it "displays a progress bar [15a]", (done) ->
        @addUpload().progress (data, state) =>
          if state is "progress"
            cy.get("@mainRegion").find(".progress-bar").then ->
              done()

      it "updates the progress bar's progress [15b]", (done) ->
        cy.route("POST", /^\/answers\/\d+\/answer_files$/, item: {})

        @addUpload().progress (data, state) =>
          if state is "progress"
            cy
              .get("@mainRegion").find("li:last .progress-bar")
                .should("have.prop", "style").and("have.property", "width", "100%").then ->
                  done()

      it "removes the progress bar on done [15e]", (done) ->
        cy
          .route("POST", /^\/answers\/\d+\/answer_files$/, item: id: 123).as("postFile")
          .then ->
            @addUpload().done (data, state) =>
          .wait("@postFile")
          .get("@mainRegion").find("li:last .progress-bar").should("not.exist")
          .then ->
            done()

      it "flashes when complete [01y]", (done) ->
        show = @agents.spy $.prototype, "show"

        cy.route("POST", /^\/answers\/\d+\/answer_files$/, item: id: 123)

        @addUpload().done =>
          expect(show).to.be.calledWith "highlight"
          done()