I have a react application which is making ajax requests for data.
Since adding my components to React Storybook my components do not render data.
Instead of providing default prop types, is it possible to render the actual data being used for my components?
Can I import Axios into storybook and make requests or something along these lines?
Using moxios you can set url capturing regexes to wait for certain requests, and pass back whatever mock data you want to the api calls.
For example:
// Route like /user/{id}/settings/{somesettingname}
moxios.stubRequest(/user\/[0-9a-zA-Z]+\/settings\/[^\/]/, {
response: mockUserSettings,
status: 200,
});
Related
I am using Spatie's Media Library (Pro), and we have an SPA that requires all the calls from the front-end to use an auth token with some "context" information.
(Our front-end is Nuxt.js/Vue.js; we send the calls to a micros-service gateway, but that's not really part of the issue here, only explaining why we can't do the "normal" way )
When I use the MediaLibraryAttachment or MediaLibraryCollection, dragging a new file to the dropzone fires the /upload call...but I can't attach my own token to it.
There is a withCredentials prop on those components, but they seem to only generate cookies.
Googling for a couple of days gives me zero hits on this, which makes me think I'm completely misunderstanding something. Does it make sense to be trying to do this, and if so, how?
Alternatively, loading the image but stopping the upload from firing would work, since I prefer to submit my own. I can stop the upload, but then it doesn't pre-load the image
Try something like:
<media-library-attachment
name="avatar"
:headers="headers"
/>
const headers = {
Authorization: `Bearer ${JWT_Token}`
};
I am testing Vue application. In some cases my application have to submit(not just after click submit button but programmatically) POST form and redirect to 3rd party server with some body parameters. Like in best practice written I am trying to avoid of using redirect to real server.
For my certain test it will be sufficient to just make sure that request was sent with certain parameters, but I don't now how to catch this body request parameters for assertion, because cypress does not allow to stub non-XHR requests and I can't do like this:
cy.route('POST', '/posts').as('post')
cy.get("#post").should(req => {
// check body params
});
I also thought about stub vue component method to intercept form submitting, but it only seems to work with global objects like Math.
I truly appreciate any new ideas how to test functionality like this.
Since Cypress 5.1 you can stub other requests type using cy.route2()(https://docs.cypress.io/guides/references/changelog.html#5-1-0).
Im working on an application who use Angular route service.
I also make a lot of $http get request to load a lot of datas in the background of my application.
But while the data is loading I can't change route I need to wait all data to be loaded to change my route.
Is there any way to prioritize the route request to change pages and still load data in background?
You can try to wrap each $http call in timeout, something like:
$timeout(function() {
$http.get('test.json').success(function() {
});
}, 0);
I have this simple page that just needs to show contents that is loaded from an external url (ajax request, response in json format)
I should say I'm a AngularJS newbie.
I've googled a bunch and found different ways of doing this and couldn't manage to determine which is the correct/simple/up-to-date way to achieve this.
My 2 challenges -
Making the AJAX request run on startup (I can load the page before that happens and just load the contents one the ajax request finishes. Maybe show a 'Loading..' indicator)
Doing a ajax request correctly.
Here is my attempt. I know that the ajax request is never made because its not setup correctly.
You are getting into .error function:
http://jsbin.com/oDUsuVA/3/edit
For jsonp your response should be something like:
callback([
{
"title":"License Title 1",
"licenseUrl":"http://cnn.com",
"licenseText": " test"
}]);
Edit:
You can simply do .get() request too, but if you had to use jsonp request interface, you would have to correct response.
A Jsonp request always wraps the logic into a json callback wrapper function.
I just did $http.get instead of your $http.jsonp and it did work for me.
My current setup is AngularJS + Django 1.5 and I have completely thrown away the use of Django's template engine (ie. the backend is pretty much an API server).
Since I am not using the csrf_token template tag, Django, in turn, does not set and send the csrftoken cookie in response. As instructed by the official docs, the ensure_csrf_cookie() decorator should be used to force the decorated view to send the csrftoken cookie.
I have applied the ensure_csrf_cookie() decorator to the view, which serves the first GET request that my web client calls at bootstrapping. With that, my web client gets a hold of the CSRF token and henceforth is allowed to call unsafe methods (ex. POST) to the server.
The above setup works fine only if the CSRF token remains the same until the browsing session ends.
Question: Does Django's CSRF token get updated during the course of a browsing session? If 'yes', does that mean I would need to apply the ensure_csrf_cookie() decorator to all the views I have?
1) Does Django's CSRF token get updated during the course of a browsing session?
Looks like the CSRF token is unique per session, but it is based in my observations, I have no "official" source. With Angular.js I use the following code without problems:
angular.module('app', ...)
.config(function($httpProvider) {
var cookies = document.cookie.split(';');
var csrftoken = _.find(cookies, function(v) {
return v.trim().indexOf('csrftoken=') == 0;
});
if(csrftoken) {
$httpProvider.defaults.headers.common['X-CSRFToken'] = csrftoken.split('=')[1];
}
})
Since I serve the HTML from Django, by the time Angular bootstraps the cookie is already there.
2) If 'yes', does that mean I would need to apply the ensure_csrf_cookie() decorator to all the views I have?
You can try CORS instead if CSRF. Otto Yiu maintains the django-cors-headers package, which is known to work correctly with REST framework APIs.
Some (untested) ideas to apply ensure_csrf_cookie():
monkey-patch APIView
create a CSRFCookie mixin and add it to your views
apply ensure_csrf_cookie() to your base classes
Giving support to the #Paulo Scardine ideas of applying the ensure_csrf_cookie() (which I consider valid, and useful), I would like to add a new one possible solution to it, if you definitely have to ensure_csrf_cookie() in all your views. You could write a custom middleware, and implement the logic that is there inside the ensure_csrf_cookie. Something like this:
On your app.middleware.py:
from django.middleware.csrf import get_token
class EnsureCsrfCookie(object):
def process_request(self, request):
# Forces process_response to send the cookie
get_token(request)
and of courses on your settings file add the middleware to the MIDDLEWARE_CLASSES:
MIDDLEWARE_CLASSES = (
.,
.,
.,
'app.middleware.EnsureCsrfCookie',
.,
.,
.,
)
It is just one idea more to face this problem. I hope it can be useful for somebody in the future.