My team is moving to use Cypress for integration testing rather than Embers Acceptance tests. Before, we would just run ember test which set the environment to "test". Now, I don't want to run embers testing suite but I still want the "test" version of our app. So I want to be able to run ember serve --environment=test. However, I noticed that when I did this, I just get a blank screen. The weirdest thing is that when I change it to ember serve --environment=haha (haha being a random environment name that never existed before), I start seeing the app hit my routes like I would expect. I start actually getting application errors in code we wrote in the source, whereas with the test environment, I couldn't even hit a console.log in the application route.
I want to be able to serve my app with the test environment because we're using it for testing. Is this possible? I'm specifically wondering if there's a bunch of magic under the hood with that environment that makes this impossible or if it's just something else I need to do that I'm missing.
I'm not sure what side effects this would have, but you can get your app running with ember serve --environment=test if you comment out two lines in your config/environment.js file:
if (environment === 'test') {
// ENV.APP.rootElement = '#ember-testing'
// ENV.APP.autoboot = false
}
Related
We're using CakePHP v3.1.x with the CakeDC Users plugin.
We're trying to set up our unit tests to help prevent accidentally allowing non-admins to do things they should not be allowed to do. For example, imagine that a developer creates a new admin feature with a new action in a controller. During development she sets the permissions very lax so she doesn't have to log in each time to test it (or something... you get the idea). I'm trying to write a test that will fail if she tries to push this...
Here's my idea for how to do it:
Create a test that loops over all controllers / actions in the app, and checks to see if a non-admin user is authorized.
The test has a list of every action that a non-admin user can do.
The test fails if a non-admin is allowed to do anything that's not on the list.
The idea is that every time we intentionally let non-admin users do something, the test fails, and reminds us to go update the list of exceptions. But if we accidentally allow an action without knowing it, the test fails and we fix the mistake. It's a safety catch.
My question: Is this the right way to do this? And if so, how can we dynamically generate a list of all of the apps controllers/actions?
Is this the right way to do this?
Fix the problem not the symptoms: Fix your developers behavior of committing "test" and "debug" code or whatever you want to name it. Do peer reviews or have your team leader review the commits. You could try to ask on https://workplace.stackexchange.com/ about how to deal with this situation the best. Check this question for an example.
And if so, how can we dynamically generate a list of all of the apps controllers/actions?
Use this to get a list of folders with controllers:
App::path('Controller'); // App
App::path('Controller', 'MyPlugin'); // Some plugin
Use Plugin::loaded() to get a list of all plugins.
Then use the information to read the controller classes from all the folders. You can then generate test cases (maybe trough a new task of the bake shell?) automatically because you've got a list of controllers from your app and plugin. Use reflections to get a list of public methods from the controllers and filter known public methods like initialize().
Setting up testing auth is described here.
If you write a custom test that uses an array structure describing the controllers and actions and their permissions I'm pretty sure that you'll be able to automate it by running over that array structure and using the information to run the auth tests. But honestly, I'm not going to do that work here.
Or instead of testing the code directly use Codeception acceptance testing. CakePHP has plugin for that. This will allow you to test the "real" site by having automated click-through testing. It should be pretty easy to set up a specific users session and then test against URLs for access by expecting a redirect to the login action or whatever you do.
I am a Django developer just getting started with adding React to one page of my app, and really enjoying it so far. (It's a normal Django app with a home page, an about page, etc, but also a "chart" page with an interactive chart, and I want to build the interactive part in React.)
The problem is that I've started with the downloadable React starter kit and I'm not sure how to do things the 'right' way, and it's complicated by using Django to serve my project (all the tutorials seem to assume you're using node, which I'm not).
Right now I just have this in my Django template:
<div id="myapp"></div>
<script src="/static/js/vendor/react.js"></script>
<script src="/static/js/vendor/JSXTransform.js"></script>
<script src="/static/js/myapp.js"></script>
And myapp.js has all the React code. I'm aware this isn't really the grown-up modern JS way of doing things.
Now I want to use React Bootstrap, but it seems that the only sensible way to do that is with npm. So it's time to make the switch, but I'm not completely sure how.
I have run npm install react and npm install react-bootstrap from inside my static/js directory in Django. This has created a node_modules folder with various files inside.
So three questions from a confused newbie:
Where should I put my React code to work with these npm modules (should I use var React = require('react')?
Do I need to compile this code somehow (using webpack?)
How do I then integrate this with Django? Should I compile it all to myapp.js and just include that in my HTML template?
I'm also doing the same thing right now - moving away from embedded HTML script tags into require land. Here is the tutorial I am following, and here is my file system so far. I am doing it in Node but it shouldn't be that different for a Django project as the React frontend code is decoupled from any backend other than API URL's.
Your node_modules folder contains react-bootstrap. In your myapp.js, use the require('react-bootstrap') to load up the library which is contained in your node_modules folder.
Where should I put my React code to work with these npm modules (should I use var React = require('react')?
You can put the code anywhere. If your file system looks like this:
project/
react/
myapp.js
node_modules/
react source code
react bootstrap stuff
Then you can just do var React = require('react'); in myapp.js.
Do I need to compile this code somehow (using webpack?)
Yes, I would consult the webpack tutorial I linked earlier, it should explain how to compile all your React code into a single bundle.js. Here is also another good tutorial. This bundle.js file contains all the source code of your requires. So if your myapp.js looks something like
var React = require('react');
var ReactBootstrap = require('react-bootstrap');
then the bundle.js now contains all of the React and react-bootstrap javascript code, along with the myapp.js source code.
How do I then integrate this with Django? Should I compile it all to myapp.js and just include that in my HTML template?
I've only done work on Nodejs, but my React code so far hasn't touched any Node code, and I don't think it will touch any Django code (again I've never done Django so I might be wrong). All you need to do is compile with webpack, which spits out a bundle.js. You put that bundle.js in your HTML and it'll load up myapp.js.
ReactJS code is still JS code. Even though you do require/import/other module based syntax when coding, in browser you will still load the JS code by a script tag.
The problem is how to let the script generated by webpack(bundle.js) to work with other 'VanillaJS' script. For example, if you only write an individual component using React, like a small table. And its data(props/state) will depend on another element/event written in VanillaJS, e.g, a click listener on a button render by django template. Then the question is, how they communicate with each other.
So far, the solution I know is:
when you write React Code, instead of calling ReactDOM.render explicitly with preset props/state, you can store that in a global function, the arguments could be the props. You load this script first, then the other script can use this global function to trigger the React render Component.
I'm using Django Rest Framework to build an API and then connect to that API from React (using simple Create react app), this way the front end and back end are separated and the application is very scalable. The second way to do this, is call create react app then run build and point your django settings to that react build, this way the front end is not separated from the backend. I hope this helped, good luck.
So, my current Ember project is built using Ember App Kit. My tests are using the wonderful httpRespond to mock out ajax requests.
However, I have started to notice that while httpRespond is great, you really only test how your app responds to responses from the API and not so much how your app responds to interactions from the user. An example of this I guess is submitting a form with server side field validations.
With httpRespond you mock out the response, which will be returned regardless of what the request looked like. So, I can essentially click the submit button on my form and successfully submit the form without having filled in any fields. This feels like we're missing something.
Enter Trek's Pretender. This is a bit like a sup'ed up version of httpRespond. It looks a little like a mock server but is just mocking out the xhr like httpRespond. Except you get access to the request which you can inspect before deciding what response to return.
I like this idea a lot and I want to use it. However....
Pretender is not yet Ember Testing aware. httpRepond understands the async workings of Ember and will wait for async events in Ember to finish before carrying on in the test. Pretender however, does not do this yet.
For instance, if I click a link in my Ember app which kicks off a few different async events, my test will not wait for these async events to finish before continuing and therefore, the test finishes executing before the async events have finished.
Which brings me to my question...
How do we go about making Pretender Ember Testing aware?
Trek has mentioned that this is something he has yet to do, but I'm not sure when he might have time to get to it. So I'd love to get it going if possible.
Does anyone have any thoughts how we might about attempting this?
I'm having a lot of success with ember-cli-mirage. It sits on top of pretender and allows you to create both fixtures for development and factories for use in tests. If you're still having trouble with this, or for anyone else, this is a really easy way to get control over your apps development data.
What is the best approach to use EAK and ember-data-tastypie-adapter?
I am currently trying the following:
Django running on localhost:7000
EAK running on localhost:8000
Added ember-data-tastypie-adapter to bower.json
Added both JS files to index.html
<script src="/vendor/ember-data-tastypie-adapter/packages/ember-data-tastypie-adapter/lib/tastypie_adapter.js"></script>
<script src="/vendor/ember-data-tastypie-adapter/packages/ember-data-tastypie-adapter/lib/tastypie_serializer.js"></script>
Created everything needed on Django side
I figured that I had to create serializers/application.js and put in it:
export default DS.DjangoTastypieSerializer.extend();
Also adapters/application.js needed adjustments:
export default DS.DjangoTastypieAdapter.extend({
serverDomain: 'http://localhost:7000',
});
Requests go to Django and responses are sent.
However in EAK this gives "Sorry, something went wrong" message without any further information (empty error message box). No errors in console either.
If I remove serializers/application.js I get similar message, in this case with information about the error:
Assertion Failed: Nested controllers need be referenced as [/django/tastypie],
instead of [_djangoTastypie].
Refer documentation: http://iamstef.net/ember-app-kit/guides/naming-conventions.html
Do I have to define defaultSerializer in adapters/application.js? If so, what is it, /django/tastypie or something else?
What am I missing to integrate ember-data-tastypie-adapter in EAK? Trouble is, I have not seen any example where EAK and tastypie would be working together.
Of course this two local server system is development environment. Production is planned like here, both API and JS is served by one Django instance.
UPDATE:
Creating deployment code by grunt dist and serving it using Django works.
I suspect that problem lies with different JSON origin.
Turns out, that EAK has API proxy option.
Updated package.json to my API settings:
"proxyURL": "http://localhost:7000",
"proxyPath": "/api/v1",
Removed custom settings from adapters/application.js.
Now running grunt server:proxy gets data from Django. And ember.js app works without errors, not being same origin was most likely the problem.
I'm running some integration tests on my Ember app with Konacha.
Because of the nature of the tests, the Ember run loop is not disabled.
The tests work, but it seems that because I have not disabled the run loop (as outlined in the ember testing guide), I get this error in my console when the tests run:
Assertion failed: The URL '/' did match any routes in your application
But the tests do succeed regardless of this "error."
I've been playing around trying to remove the error from the console so that testing can be easier to see changes in, but I can't find a direct link between my tests and the error. The error happens whenever the Ember App object is initialized.
Do you have a match for all at the end of your router?
this.route("matchall", {
path: '*:'
});
Might help if you posted some sample routes and tests too.