Cypress testing and waiting for axios requests - reactjs

Can anyone explain how or why my test isn't waiting for my data from an axios request before moving on? I'm completely new to this but have most simple stuff worked out but can't seem to navigate the docs to find where i'm going wrong.
Here's the relevant info..
cy.get('.day').eq(4).click() //Change the day
cy.route('/api/practice/available-slots').as('apiCheck') //Get available slots for that day
cy.wait('#apiCheck') //Wait for the days available slots to be returned
So you can see below I click the fourth day and my post URL is showing and getting data like it normally does but then my wait function throws that error. I like to think i'm close but as I said i'm new and not entirely sure what's going wrong. Thanks
For what it's worth here's the axios request:
axios
.post(this.props.reqProto + this.props.reqHost + '/api/practice/available-slots', {
startDate: this.state.appointmentSlotsDate,
})
.then((res) => {
....
}
})

Thanks Hiram,
That was one issue. Also the order of my code was incorrect. I need to allow cypress to anticipate the POST request instead of it trying to double back to it. This seems to work
cy.route({
method: 'POST',
url: '/api/practice/available-slots',
}).as('apiCheck')
cy.get('.day').eq(4).click()
cy.wait('#apiCheck')

Related

React native axios crashing and werid behaviour

Axios is behaving weird on my react native webview if you have any idea how to solve or how i can track the problem it would be of much help.
On the onMessage of the webview i recieve the html of the website so i can get a specific link. I send the message when the user taps anywhere on screen.
Injected js:
var body_of_html = document.body;
body_of_html.addEventListener('click',function(e){
window.ReactNativeWebView.postMessage(document.documentElement.innerHTML)
},false);
Case 1
This doesnt console.log anything and after some time crashes the app.
onMessage={event => {
// console.log('asdas');
var regex = new RegExp('token=[a-zA-z0-9]+');
if (event.nativeEvent.data.toString().match(regex) != null) {
let asd =
'https://fvs.io/redirector?' +
event.nativeEvent.data.toString().match(regex);
axios.get(asd).then(rs => {
console.log(rs);
});
Case 2
This one works perfectly fine and logs "Anything".
onMessage={event => {
var regex = new RegExp('token=[a-zA-z0-9]+');
if (event.nativeEvent.data.toString().match(regex) != null) {
let asd =
'https://fvs.io/redirector?' +
event.nativeEvent.data.toString().match(regex);
axios.get(asd).then(console.log("Anything"));
As you can see from the above cases i am unable to get the response from the axios call. Which always after some time crashes the app. Am i doing something wrong on reciving the response ?
Edit: I think I know what might have caused my application to crash but this is just what I found after looking at the data consumed. The link i was sending to the axios.get was retriving bits of a video until it fully buffered. But the way my code was , it would do this action each time i tapped the screen. I guess at some point axios couldnt handle reciving 10x + videos at 1080p at the same time. Just to clarify my intention was just to get the redirection link i didnt know it would cause the video to buffer.
As in all promises, in order to debug the error, e.g. in cases where event.nativeEvent.data may be undefined, causing .toString() to throw error, use a catch block.
axios.get(asd).then(rs => {
console.log(rs);
}).catch(error => console.log("error from axios", error))

patch request using axios fail in directusCMS

i am trying to send a patch request to update or maybe change the image in directus CMS.. (changing it require only id of the item and the file which is already solved.. in this link
Make Multiple Post Requests In Axios then get all the response to make another request)
below is the simplified code of it because the thing i am trying to achieve is making an item that have name, email, date, etc. then sending file or an image to the files ..
then i need to patch the item that i just made which is where i am not able to do yet..
for information only.. i am using gatsbyjs..
i have already tried it in postman and it works.. maybe there is something wrong with my code. thanks..
axios.patch( `${process.env.GATSBY_DIRECTUS_API_URL}/gemaclc/items/pendaftar/49?access_token=${process.env.GATSBY_DIRECTUS_TOKEN}`, {
data: JSON.stringify( {
kartu_keluarga: 1,
}),
})
i deleted JSON.stringify and it works
axios( `${process.env.GATSBY_DIRECTUS_API_URL}/gemaclc/items/pendaftar/50?access_token=${process.env.GATSBY_DIRECTUS_TOKEN}`,
{
method:"patch",
data :{
kartu_keluarga: 1,
nama: "zidsadanaaa"
},
}
)

React, how to debug (axios) 404 error?

Using React, I am trying to make a request using axios.
In the console it shows me that I get an 404 error, but I would like to know how and why this is happening. Can anybody advice me on where to begin looking to solve this problem?
One of my main questions is, where is the following url coming from?
GET http://127.0.0.1:3000/en/order/account/[object%20Object] 404 (Not Found)
It seems like a request is being made to the above url, while that is not the url that is supposed to be requested. The url that should be requested is printed out, to check if it is correct.
On the (Django) development server, running at :8000, I am checking if a request is coming in. There I can see that indeed no request is coming in, not at the intended url (the one being logged to the console).
I have taken a look at the lines in the files being pointed at by the error line on the console (createError.js:16, settle.js:18, xhr.js:77), but that doesn't make it much clearer what happened. I guess this is just saying that that is the error is formed with the code in 'createError.js'.
This is what I see in the Chrome console:
Here is the part of the code that performs the axios request:
handleSubmit(submittedValues) {
console.log("submit")
console.log(submittedValues)
// event.preventDefault();
this.register(submittedValues).then(
function (data) {
console.log(data)
}
)
console.log("this.props.match.params.locale: " + this.props.match.params.locale)
let url = 'http://127.0.0.1:8000/customer_portal/set_locale/' + this.props.match.params.locale
console.log("url: " + url)
return axios.get({
url: url,
method: 'get',
})
.then(function(response) {
console.log(response)
})
.catch(function(error) {
console.log("error", error)
})
}
Try
axios.get(url)
axios.get() takes a string as an argument, but you're giving it an object so it is inserting the default URL path automatically before inserting the object.

CSRF Validation Failed in Drupal 7

I've been searching and searching, including the many topics here, for a solution to my problem. I've had no luck thus far.
A bit of a backstory: I'm writing an AngularJS app with Drupal 7 as a backend. I'm able to login without problem, save Session Name and Session ID, and put them together for a Cookie header (I had to use this "hack"). Further, if I made a login call in the Postman app, then tried to update the node, it'd work. It makes me think that there's a problem with session authentication, but I still can't figure it out.
That being said, I'm at a roadblock. Whenever I try to PUT to update a node, I get the following error:
401 (Unauthorized : CSRF validation failed)
Now, my ajax call looks like this:
$http({
method: 'PUT',
url: CONSTANTS.SITE_URL+"/update/node/"+target_nid,
headers:{
'Content-Type': CONSTANTS.CONTENT_TYPE,
'Authentication': CONSTANTS.SESS_NAME +"="+CONSTANTS.SESS_ID,
'X-CSRF-Token' : CONSTANTS.TOKEN
},
data: {
(JSON stuff)
}
})
The CONTENT_TYPE is "application/json", the "Authentication" is the band-aid for the Cookie header problem, and the "X-CSRF-Token" is what is (presumably) giving me the problem. SESS_NAME, SESS_ID, and TOKEN are all gathered from the response at Login. I can pull lists made by users on the website, I can pull the list of all of the nodes of a certain type on the website as well. I only run into a problem when I attempt to PUT to update the node.
If I missed any information, let me know and I'll add it!
EDIT: I'm using AngularJS version 1.5.3.
After trying everything else, I followed one of the comments in the thread I linked at the beginning of my original post. They had to comment out a line in Services.module :
if ($non_safe_method_called && !drupal_valid_token($csrf_token, 'services')) {
//return t('CSRF validation failed');
}
It's around line 590, plus or minus a few depending on how much you've messed with the file. I don't like doing it this way, but I can't for the life of me figure out why the token's not working right. It's a temporary fix, for sure, but if someone runs across this with the same problem in the future it'll hopefully help you out!
Instead of removing the line you could also add a true to drupal_valid_token
if ($non_safe_method_called && !drupal_valid_token($csrf_token, 'services',true)) {
return t('CSRF validation failed');
}

Angularjs Service performing a POST request randomly gets cancelled

I have a service that makes a simple POST:
saveVersion: function(styleGuideId, data){
return $http({method: 'post', url: '/style_guides/' + styleGuideId + '/new_version', data: data}).then(function(project){
console.log('request completed')
});
},
In the console, if I fire this request, it works fine.
But when I click a button in my ui that makes this request, I see on my server the request gets completed with a 200 but on the client side the browser says it is cancelled.
The extra GET is also a mystery. In the console, I trigger the request like this:
angular.element(document.body).injector().get('StyleGuides').saveVersion(sg_id, data)
//sg_id and data are local variables that I got like this:
sg_id = angular.element($0).scope().project.style_guide_id
Just figured it out. Stupid Mistake
The button that triggers the save looked like this:
Save
See the typo? changing javacript:// to javascript:// fixed the issue.

Resources