Protractor E2E test of ng-file-upload

Question

How to E2E test a ng-file-upload?

<div id="fileBTSToUpload"  ngf-drop ngf-select ng-model="fileBTS"  class="drop-box" ngf-accept="'.txt'" ngf-drag-over-class="'dragover'"> Drag and Drop here
        </div>

Answer 1

The problem is that, with Protractor alone, you cannot do the actual drag and drop of a file to a designated are on a page. And, another problem is that if you manage to open the browser's upload dialog window, you would not be able to control it via Protractor/WebDriverJS.

A common approach is to find the input element with type="file" and send keys to it containing the absolute path to the file you want to upload. The input has to be on the page for upload to work, though commonly the input is hidden and you would need to make it visible in order to perform "send keys". See sample solutions here:

• How to upload file in angularjs e2e protractor testing

Answer 2

Set your Protractor version to "1.6.1" and ng-file-upload to "9.0.1". To do these, act as follows: npm install protractor@1.6.1

Edit file: bower.json and set the version:

"ng-file-upload": "~9.0.1",

And then execute the following:

bower install

The Angular code must also contains a button in it to work:

<div id="fileBTSToUpload"  ngf-drop ngf-select ng-model="fileBTS"  class="drop-box" ngf-accept="'.txt'" ngf-drag-over-class="'dragover'"> Drag and Drop
        </div>

        <button id="btn2" ng-click="uploadFileToUrl(fileBTS, btsUrl);">upload</button>

The Jasmine code for E2E testing is as follows:

it('a sample test...',function(){
//Assemble
browser.get('/the_page_url');
//Act
var fileToUpload = './some-file.csv';
var path = require('path');
var absolutePath = path.resolve(__dirname,fileToUpload);
var input = element(by.css('input[type=file]'));
input.sendKeys(absolutePath);
element(by.id('btn2')).click();
browser.waitForAngular();  
//Assert
expect(2).toEqual(2);
//browser.sleep(5000);
//browser.pause();  
});

And for path to be installed, do this:

npm install path