Clicking on "Tap to cancel" is not working and not removing files - filepond

Hey guys I am quite stuck at the moment - I have override the process method however on my front end whenever I click ''Tap to cancel" - nothing happens. I have tried logging in various places but none of them get hit - can you assist?

Same issue was occurring on my project.
In my case I found that I had added "async" to the process function and after removing, the functionality worked as expected.
The filepond api expected return type of object with abort() function but In my case it was returned as a promise because of async keyword.
server={{
process: async(
fieldName,
file,
metadata,
load,
error,
progress,
abort
) => {
// code
return {
abort: () => {
console.log(`aborts`);
abort();
},
};
},
}}
Check codesandbox try removing async and it works

Related

Is there a way to "force" a visit?

I'm using the cy.visit() command but the website i'm visiting (which i don't own) doesn't always fire the load event, although the content itself that i need for testing does appear on the website.
Despite the content appearing, since the load event is not fired sometimes (for some reason which i can't fix since i don't have ownership over this website), the cy.visit() command fails.
Is there a way to "force" it somehow, similar to how we can pass { force: true} for the cy.click() command?
Add the below to your cypress commands file
Cypress.Commands.add('forceVisit', url => {
cy.window().then(win => {
return win.open(url, '_self');
});
});
And in your tests, you can call
cy.forceVisit("www.google.com")
It's hard to simulate the problem, but I think I managed by setting pageLoadTimeout really low (30ms).
You can catch the onLoad fail in an event handler and checking for the page load error message.
I recommend doing it in a beforeEach().
beforeEach(() => {
Cypress.config("pageLoadTimeout", 30) // set this to whatever time length
// you feel is appropriate to start testing
// You'll need to experiment to get this right
// and in CI it will be a lot longer
cy.once('fail', (err) => { // "once" to just catch a single error
const message = err.parsedStack[0].message
if (message.match(/Timed out after waiting `\d+ms` for your remote page to load/)) {
return false
}
throw err // any other error, fail it
})
cy.visit('www.example.com');
})
it('checks the heading of the page', () => {
cy.get('h1').should('have.text', 'Example Domain') // ✅
})
As you can already assume, that is highly discouraged. It also really depends on how it fails and with which errors, but, without any code to reproduce, you may want to try this if you haven't already:
cy.visit('/', {failOnStatusCode: false});
Reference: https://docs.cypress.io/api/commands/visit#Arguments

Expected to find element: #VTK-j_idt1363, but never found it

I am facing an issue on clicking an element. I need an element to be clicked while the network is slow by not using wait() and pause().The page loads after or more than 35sec(350000).Could someone help me to solve the issue,please?
Here is my coding.
it('Test ship',function(){
cy.viewport(1120,800)
cy.visit('url')
cy.get('#LoginForm-nfr_login_authname').type('username')
cy.get('#LoginForm-nfr_login_authid').type('paSSw0rd')
cy.on('uncaught:exception', (err, runnable) => {
return false
})
//These two were the elements present in the same page.The Workspace (first command) gets loaded and error occurs before clicking the second element.
cy.wait[ cy.xpath('//span[normalize-space()="Work Space"]') .click({force: true})]
//here I have used wait
cy.wait(80000)
cy.get('#VTK-j_idt1262').click({force: true})
})
I have tried many possible ways such as alias,etc..,
Please let me know about the solution to wait for page loading without using wait() and pause() command.
error img

Maxfilesexceeded triggers error

I'm having an issue when triggering maxfilesexceeded event, it triggers the error event. I'm handling it this way
this.on("maxfilesexceeded", function (file) {
this.removeAllFiles();
this.addFile(file);
});
But it keeps triggering the error event, which I'm only using for displaying an error response from the server (there's no sense in the message keep being displayed over and over when the files are removed), is there a way to tell the maxfilesexceeded to not trigger the code in error?
problem is with your syntax inner (this) keyword belongs to maxfilesexceeded event thats why you getting error.Use below code to override maxfilesexceeded event:
init:function() {
var myDropzone = this;
this.on("maxfilesexceeded", function (file) {
myDropzone.removeAllFiles();
myDropzone.addFile(file);
});
}

Ember RSVP promise stopped working

For some reason an RSVP promise I created in an action stopped working for me and I can't figure out what when wrong where to make it stop working.
I have a component that sends an action and waits for a response
// COMPONENT IN ITEM ROUTE
callAjaxAction() {
this.setProperties({working:true});
Ember.RSVP.cast(this.attrs.action()).finally(() => {
Ember.$('.draggable').animate({
left: 0
});
this.setProperties({working:false});
});
}
This particular instance of the component calls this action in the controller
// IN ITEM CONTROLLER
placeBid() {
return new Ember.RSVP.Promise((resolve,reject) => {
if(this.get('winning')) {
this.get('notification')._confirm({message: "You are currently the highest bidder, would you like to continue with your bid?",isConfirm: true}).then(()=>{
console.log('confirmed');
this.send('placeBidActual').then(()=>{
resolve();
}).catch(()=>{
reject();
});
return true;
}).catch(()=>{
resolve();
console.log('denied');
return false;
});
} else {
setTimeout(()=>{
this.send('placeBidActual').then(()=>{
resolve();
}).catch(()=>{
reject();
});
},500);
}
});
}
This action is calling a confirm method on a service and waiting for the user to hit yes in the case of the user already winning this item. Otherwise I'm just calling the actual ajax action right away, that action looks like this
// IN ITEM CONTROLLER
placeBidActual() {
return new Ember.RSVP.Promise((resolve,reject) => {
Ember.$.ajax({
...
}).then((response)=>{
(do some stuff with the response)
resolve();
}, (reason)=>{
(do something with rejection reason)
reject(reason);
});
});
}
In the console I'm getting the error
Uncaught TypeError: Cannot read property 'then' of undefined
On the line where it states this.send('placeBidActual')
UPDATE:
Here is maybe a better explanation to the expected process flow.
The user attempts to place a bid, the user swipes a component over to indicate they wish to bid. The UI at this point shows a loading indicator and waits for the ajax action to complete before it resets the UI.
If the user is not already the highest bidder of the item it will go straight to the ajax action and upon completion signifies to the component to reset the UI.
However, if the user is the highest bidder of the item it should instead show a confirm message (using the notification service I have setup) and wait for the user to either confirm or deny. If they deny it just cancels and signifies to the component to reset the UI. If the user confirms then it calls the ajax action and upon completion signifies to the component to reset the UI.
Updated answer:
This isn't working because send doesn't return the value of the action.
I suggest moving the placeBidActual action to a method on the controller and call it like any normal method. This way you will get the return value and be able to call .then on it.
You should pass a function, whithout invoke it.
Instead this:
Ember.RSVP.cast(this.attrs.action()).finally(() =>
Try it:
Ember.RSVP.cast(this.attrs.action).finally(() =>
Invoking the funcion this.attrs.action() does it pass undefined for the Promise.

Backbone model save triggers error callback on Chrome/FF

Noob question here:
I'm using ASP.NET MVC 3 and I'm trying to save an entity through Backbone. Here's what I have:
I defined my Backbone model (Program) as such:
var Program = Backbone.Model.extend({
defaults: function () {
return { name: "" };
},
initialize: function (attrs) {
this.set('name', attrs.name);
},
urlRoot: '/program/add'
});
Then I hook up the model save on the click event of a button:
$('.add-program').click(function () {
var programName = $('.program-name').val();
var program = new Program({ name: programName });
program.save(null, {
success: function (model, response) {
alert('success');
},
error: function (model, response) {
alert('error');
}
});
});
It works on IE (surprisingly!) - ProgramController.Add(string name) gets called fine and I get a success response. But I'm having issues on Chrome and FF - They both trigger the error callback with the slight difference that on Chrome my Controller Action doesn't even get hit at all (it does on FF though). The funny thing is that my action breakpoint does get hit on FF, with the appropriate param value, but still get the error callback.
I'm not sure what's going on here. I tried debugging through Firebug/Chromebug and don't see much on the error callback params (the errorStatus is just ... well... "error"!). I also tried looking at the Network tab and Fiddler and I don't see anything that rings a bell (maybe I'm not looking at the right place). I also tried doing a straight jquery ajax call to the controller and still get the same weird behavior.
Just in case, here's the MVC action (although I don't think the issue is here):
[HttpPost]
public JsonResult Add(string name)
{
var stubbedResponse = new {id = Guid.NewGuid()};
return Json(stubbedResponse);
}
Any ideas what could be causing this?
A Fiddle http://jsfiddle.net/Uj5Ae/2 with your client code seems to be OK. Something with your server response? Or Backbone and Underscore versions not matching?
Or maybe the return false at the end of the click handler, if the event propagation is not handled elsewhere.
Spoiler : that was the event propagation :)

Resources