knownasilya / ember-plupload

Ember component for handling uploads using plupload
MIT License
87 stars 53 forks source link

Acceptance testing file uploads #45

Closed mydea closed 8 years ago

mydea commented 9 years ago

Is there a way to use this in acceptace tests? I have a form with a required file upload, however I do not now how to address this field in my acceptance tests.

tim-evans commented 8 years ago

Not at the moment. I haven't thought about the best way to do this. I'll try to see if an upload helper would be useful / feasible. Any help would be welcomed!

mydea commented 8 years ago

I implemented a workaround. I extended the pl-uploader component:

import Ember from 'ember';
import PLUploader from "ember-plupload/components/pl-uploader";
import config from "./../../../config/environment";

var BASE_URL = config.PLUPLOAD_BASE_URL;

if (BASE_URL == null) {
    if (config.baseURL.slice(-1) === '/') {
        BASE_URL = config.baseURL + 'assets/';
    } else {
        BASE_URL = config.baseURL + '/assets/';
    }
}

export default PLUploader.extend({
    BASE_URL: BASE_URL,

    _checkTesting: function () {
        if (config.environment === "test") {

            let $testElFilename = Ember.$("<input class='plupload-test__filename' />");
            let $testElFilesize = Ember.$("<input class='plupload-test__filesize' />");
            let $testElFileSend = Ember.$("<button class='plupload-test__upload'>Upload File for Test</button>");

            this.$().append($testElFilename);
            this.$().append($testElFilesize);
            this.$().append($testElFileSend);

            $testElFileSend.on("click", (e) => {
                e.preventDefault();
                this.sendAction("onfileadd", {
                    name: $testElFilename.val(),
                    size: $testElFilesize.val(),
                    upload: function (options) {
                        return new Ember.RSVP.Promise((resolve, reject) => {
                            Ember.$.ajax({
                                url: options.url,
                                type: "post",
                                data: options.data
                            }).then(function (response, textStatus, jqXHR) {
                                Ember.run(() => {
                                    let headerString = jqXHR.getAllResponseHeaders();
                                    let headersArray = headerString.split("\n");
                                    let headers = {};
                                    headersArray.forEach((header) => {
                                        let parts = header.split(":");
                                        if (parts && typeof parts.length !== "undefined" && parts.length === 2) {
                                            headers[parts[0].trim()] = parts[1].trim();
                                        }
                                    });

                                    resolve({
                                        body: response,
                                        headers: headers,
                                        status: jqXHR.status
                                    });
                                });
                            }, function (e) {
                                Ember.run(() => {
                                    reject(e);
                                });
                            });
                        });
                    }
                });
            });
        }
    }.on("didInsertElement")

});

So basically, what I did was check if the app is running in test environment, and if so I include two regular input fields and a button in the component. When clicking the button, I then mock the ajax call. I handle the request with ember-cli-mirage. Of course, no actual file is uploaded, but it works well enough for my tests. If this is something that would work for other people as well, I could prepare a PR.

tim-evans commented 8 years ago

I dug into this quickly, and have an idea of what may be nice to do here:

  1. Have a test helper that adds a file to an uploader
  2. Allow stubbing out the boundary point that starts the upload and return a response like pretender that will resolve / reject the upload.
tim-evans commented 8 years ago

See https://github.com/tim-evans/ember-plupload#acceptance-tests for a solution to this. Thanks for the inspiration and initial work~