While uploading a file with ng-file-upload I like to test (with protractor) if cancelling it works. However, during upload no assertions and actions are evaluated, and only after the upload is done the test will fail. That's because I'm expecting something like status == uploading, where the assertions will be evaluated only after the upload, whereas the status == done.
Versions I'm using:
"ng-file-upload": "~10.0.2",
"angular": "~1.4.2",
"gulp-protractor": "~1.0.0"
How can I overcome this temporarily blurring of the browser window (so it seems) during file upload?
This is how far I got:
html:
<div class="btn btn-default" ngf-select ngf-reset-on-click="false" ng-model="upload.file" name="file" id="file" ngf-pattern="application/zip" accept="application/zip">
{{upload.file.name || 'Select location...'}}
</div>
<button class="btn btn-primary" ng-click="upload.upload(upload.file)" ng-disabled="upload.status === 'loading' || !upload.file">
{{upload.status === 'loading' ? 'Uploading...' : 'Upload'}}
</button>
<a ng-click="upload.abort()" class="cancel" ng-class="{'disabled': upload.status !== 'loading'}">Cancel</a>
page objects:
this.uploadButton = element(by.buttonText('Upload'));
this.cancelButton = element(by.css('.cancel'));
this.selectButton = element.all(by.css('[ngf-select]')).get(0);
this.fileInput = element(by.css('input[type="file"]'));
jasmine:
it('aborts an upload', function() {
var fileToUpload = './valid.zip';
var uploadFilePath = path.resolve(__dirname, fileToUpload);
page.fileInput.sendKeys(uploadFilePath).then(() => {
expect(page.selectButton.getText()).toBe('valid.zip');
expect(page.uploadButton.isEnabled()).toBe(true);
expect(page.cancelButton.getAttribute('class')).toBe('cancel disabled');
// Upload the file
page.uploadButton.click().then(() => {
//expect(page.cancelButton.getAttribute('class')).toBe('cancel');
//page.cancelButton.click().then(() => {
expect(page.cancelButton.getAttribute('class')).toBe('cancel disabled');
//});
});
});
});
With the commented lines it validates. In the browser (chrome) manually it's clear the disabled class is removed from the button, but for some reason it cannot validate while in progress uploading the file.
It could use some optimizing (especially the page objects), but I don't think it explains why I receive a timeout?