I am wondering if anyone has experience with an automated accessibility testing tool for Angular Single Page Applications (SPA).
I have tried pa11y and it does not seem to be working consistently. Just wondering if there are any other tools out there which are comparable to pa11y in ease of use, but which work with Angular.
#Estus raised a good point in the comment — "does not seem to be working consistently" is not a lot to go on. Regardless, a couple options:
Take a look at protractor-accessibility-plugin for NPM which can lean on the Chrome Accessibility Developer Tools or Tenon.
Related, there is a tutorial on using Tenon as a Grunt task.
Level Access offers an implementation example of Continuum called 'Continuum for Protractor' that might be a good place to get started. It's available for free at webaccessibility.com. You can use it as a template or as a reference to integrate automated accessibility testing into your existing Protractor tests. Here's some more information if you're interested. I also help maintain Continuum Explorer, which is a free extension for Google Chrome that is framework-agnostic and more interactive if you think that might be a better match for your use case.
Related
Google knows best… but they're inconsistent!
The official ng CLI generates a scaffold one way, whereas the official tutorial chooses a different way.
I'm not talking just directory layout, typings.json vs types in package.json choices are also particularly worrisome.
What style am I meant to work with?
Angular 2's tutorial basically just shows the quickest and easiest way to get up and running with the framework. It omits mentioning things that could scare away a potential newcomer to the ecosystem, it is meant to be simple.
angular-cli on the other hand actively incorporates best practices, latest technologies like Webpack 2 Beta and tries to give developers a piece of software to quickly scaffold and develop scalable production apps without worrying about build-tools and configuration.
QuickStart
This is not the perfect arrangement for your application. It is not designed for production. It exists primarily to get you started quickly with learning and prototyping in Angular
angular/quickstart/README.md
angular-cli
The Angular2 CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!
https://cli.angular.io
See also: https://angular.io/styleguide
I'm starting to wonder what is the best way to work with a moderately sized AngularJS project. I'm wanting to find where a directive or service is used without having to do a 'Ctrl+F' and search the project manually. Are there any IDEs that offer this feature, or does anyone have some approaches for working with these projects that they could share?
I didn't try it personally, so my answer is going to be pretty short, but I think you should look at TypeScript (http://www.typescriptlang.org/). I've seen many mentions of it being a good fit for Angular, and it allows for "Intellisense" features in IDE that should meet your needs.
Basically it means rewriting your code in an "augmented" version of JavaScript that makes your code typed and therefore should make it easier to handle a large codebase and run static analysis.
Here's some information about TypeScript support in IntelliJ, if that's your IDE: https://www.jetbrains.com/idea/help/typescript-support.html
I'm sorry if this question isn't appropriate: I'm new to test-driven development, especially on JavaScript.
I have a working Backbone.js application, and I'd like to add some JavaScript tests to it. But I don't really know where to start.
Specifically, I'd like to write tests that are passed a URL, and check that the rendered page contains particular DOM elements. (So functional tests, rather than unit tests, I guess.)
What is a good way to do this? Could anyone recommend good practical resources for getting tests like this up and running?
Apologies for the newbie question.
I have faced the same problem lately and Ryan Roemer book Backbone.js Testing (http://backbone-testing.com/) is a great place to start.
His process is not purely TDD, but he gives some nice tips.
When taking it to practice, I will recommend a Yeoman generator like:
https://github.com/mrichard/generator-marionette (Marionette)
https://github.com/revathskumar/generator-backbone-mocha (Backbone and Mocha)
https://github.com/richistron/generator-cornelio (Karma and Backbone)
They will save you some time on the setup. Also, if you are using Rails, Konacha https://github.com/jfirebaugh/konacha has been pretty handy for me.
Good testing!
Selenium is on de-factor way to run functional tests in the browser. Selenium has a firefox plugin that will record actions and replay them. That would be the easiest way to start. You can look at Selenium's API docs to write code to interact with the browser.
Sause Labs (http://saucelabs.com/docs/quickstart) has selenium in the cloud which is useful so you don't need to have a browser window open on you desktop and run the tests. PhantomJS can also run a "headless" browser (it does't open a window on you computer, just runs in the background).
Once you have selenium working you might want to look into acceptance testing. The tests are written in plain english use Gherkin (or similar) syntax and it runs functions to run the test and output reports if there were errors or not.
I wrote an article how to use Selenium for Acceptance Testing http://alex-craft.com/blog/2014/acceptance-testing-for-web-app
Tools: WebDriver (Selenium or Phantom.js), wd.js, node.js, mocha.js.
There's an example with explanation how to use meaningful names instead of CSS selectors, eventual conditions, etc.
I started working with sample sencha apps. I find it really hard to find typo and errors in my code.
I added the eclipse plugin for auto-complete during coding. Buts its a trial version just like the sencha architect. Am really confused on how the sencha app should be developed.
I want to know the tools that sencha developers are using so that I can deploy and debug effeciently.
Thanks in advance.
The workflow / tools choice when developing an application is a subjective matter so I'm going to talk about my experience, having been a Sencha Touch developer for the last year.
I find it really hard to find typo and errors in my code.
...
Am really confused on how the sencha app should be developed.
This is not a matter of tools in my opinion. Sencha Touch has an unavoidable steep learning curve. You should start with simple examples, and you could ask here when you have specific programming issues (I personally found Sencha Touch forums less useful than stackoverflow).
The most important thing is understanding the basics concepts:
Sencha Touch class system (http://www.sencha.com/learn/sencha-class-system),
How Sencha implements MVC (http://docs.sencha.com/touch/2.2.1/#!/guide/controllers)
(http://docs.sencha.com/touch/2.2.1/#!/guide/views),
Sencha Touch Layouts (http://docs.sencha.com/touch/2.2.1/#!/guide/layouts),
Sencha Touch Components (http://docs.sencha.com/touch/2.2.1/#!/guide/components)
Also all of these guides will be very useful, make sure you understand them and learn to use Sencha Docs, which definetely has some obscure, non explained properties, but should still be your main resource when developing a Sencha Touch app.
Debugging will always be tricky, unfortunately sometimes setting the wrong property on a Component, or misunderstanding how a Component is meant to work, ends up with some obscure var is not defined error. Do not fear to check Sencha Touch source code when this happens, code is well written and usually easy to understand.
Here the tools to use are again Sencha Touch Docs (when hovering on a class title you can examine directly its source code, plus your browser debugging console. Use frequent console.debug() messages, and when something weird happens inside framework classes stop execution with debugger; and step inside source code).
Now back to your question: I have been using the following tools:
NetBeans,
Chrome DevTools,
Chrome Ripple Extension,
Sencha Command (optional)
Compass CSS authoring framework
a couple shell scripts
The IDE is a matter of personal choice, Netbeans has some nice Javascript suggestions: it highlights variables when they are used but not defined in the current scope, or defined but not used, which really helps a lot against typos. It is very heavy in terms of memory usage. I guess Eclipse, or even a lighter one could be equally good.
Chrome is kinda a forced choice if you are on Windows, their DevTools are excellent, make sure you master them, they will be your main working tools. Once again: lot of RAM helps.
Ripple is an invaluable extension that allows you to test your mobile app on different devices and if you are using Phonegap for native deployment it emulates a part of its API on the browser.
Compass is the tool suggested by Sencha to compile their sass files. There is a detailed tutorial on how to setup compass on Sencha Docs.
I have been using Sencha Command but it's not strictly necessary, if you don't care about resources minification (but you should) you will not miss much about it. If you are developing a native app you can make up for the lack of Sencha Command deploy function with a simple shell script that copies html/js/css resources to the assets folder of your Phonegap project.
Another script activates automatically compass watch on the /resources/sass folder at startup, to avoid having to manually do that each time.
Just my two cents, hope it helps.
Anubis covered majority of the bee knees in hand coding Sencha Touch.
I'd like to add a couple more cents into the kitty.
My personal preference for IDE is Sublime Text. Searching through entire projects of code for anything, I've not seen an equal for effectiveness and speed. You can customise everything - especially colours and keybindings. It also has a ludicrous wealth of plugins, including working in correlation to Chrome, as well as Github.
SENCHA GUIDES
Miami Coder Tutorials - great collection of practical tutorials which will help you understand development patterns faster than most other guides. Great for starters.
Figleaf Training can be a little unconventional, but a great free means of learning Sencha Touch and almost everything it is capable of. Great for starters too.
Druck IT - solid collection of guides and ST information. Has links to many other useful sites such as these listed.
Mitchell Simoens - Mitchell is Sencha staff, a quality coder, and his site has some great advice and snippets to help learn. This is where you'll truly learn how to code ST well. Helps towards getting a grasp, but mainly for mid+ knowledge.
Ladysign - one of the Sencha Trainers. Has content that clears up "how to" in many facets other sites and books never even mention. Quality information. This info will get you above basic and flesh out your knowledge and understanding.
Modus Create - Jay Garcia is one of the devs of ST. Modus Create is his enterprise, which contains some useful guides within the blog.
Custom Font Icons - complete guide for 2.2. Very useful.
There's a few other sites that were incredible sources of tidbits through to information on how to code ST professionally. These links above will help immensely though. Above all, read the source code. It is very well documented, as well as being an example in itself of how to use the code. I have learnt ludicrous amounts this way.
GRUNT (with NPM/Node.js)!
Use Grunt! This will automate the vast majority of what you want to do. For example, typing "grunt" in the command line could jshint/jslint your code, concatenate all .js files together, all css files together (including all the compass joy), obfuscate, compress, run a comprehensive set of unit tests (especially Phantom), output to desired location, then add a cherry on top by refreshing your browser window. Add in the grunt watch plugin, and it'll do that every time a file is saved in defined directories. Any bugs in your code - you get accurate specific line numbers where it is broken.
The beauty of grunt is extended by optional alternate commandlines for different tasks. Also, you can specify in the package.json file of a few kB the precise list of plugins you wish to use with the gruntfile you've created, saving megabytes of file transfer. NPM can process that file, and download and install all that is required to operate. Makes for fast setup on another computer.
Side note: Touch Node has come of age. This permits all ST's class structure to develop your serverside javascript.
Want to include Sencha Cmd?
Sencha Cmd (finally) does do a decent job of collecting only the dependent classes from the full library.
grunt-sencha-build
grunt-senchacmd
Alternative for Sencha Cmd
Extend Grunt with Matt Goldspink's grunt-sencha-dependencies which works for both ST and ExtJS, or use grunt-sencha-resolver - this latter one I haven't used.
I need to test an angular application and I'm thinking which testing framework to use.
Can someone please list the differences between those 2 testing framework, what is good / bad in each. when should each of them should be used? can the one replace the second?
Edit 1:
I'll try to focus my question. what I'm really interested in is the technical abilities of the 2 frameworks.
for example, some of the differences I have found:
selenium webdriver has the ability to run on grid in parallel on multiple machines, on the other side, angular scenarios runs much faster than selenium.
with selenium I can use keyboard keys such as Enter, Backspace and more and also do drag and drop actions.
selenium is not dependent on the app technology, angular is for angular apps only
Those are the type of differences I'm looking for - what can be done with one and can't be done with the other
thanks
Both should be used for testing an angular application. However, in my experience, they serve different purposes.
Angular e2e tests are your best friends when integrating new features into your application, or changing already existing features. They are there to make sure your application still behaves as expected if you are making changes to your code. These tests are much faster than selenium, do not need to be as in-depth, and, in my experience, are best executed before you push a new feature to your version control server.
Selenium tests should be used for regression testing. These tests should be far more in-depth than Angular e2e tests, and should be performed before pushing code into production.
UPDATE: This question may be less relevant now. As of January 2014, Angular plans to move from their own E2E suite to the protractor library for function tests, which use Selenium Webdriver.
If you're starting a new Angular project, you may want to look into using Protractor, as it is going to replace the current method of E2E Testing in the near future.
(Source: http://docs.angularjs.org/guide/dev_guide.e2e-testing)
I am struggling with this question as well.
Here is my thinking today:
1) Use Angular e2e testing for integration/regression testing the UI with mocks of your external dependencies (like the app server).
2) Use Selenium for integration/regression testing the complete system in a test/qa environment.
It seems Angular e2e testing helps fill in the gaps that unit testing leaves in testing view and controller logic that is tied to UI events. All of the Angular tests should mock external dependencies.
Selenium seems like the best fit for testing the entire system as the user will experience it.
This is such a subjective question, and therefore I'd first tell you to do some research. There is not much difference.
It is a very new project, whereas Selenium is a lot more mature. For instance, the JSON Wire Protocol that WebDriver is built on top of, is an actual W3C spec. This shows the project is very mature and very stable.
Due to the above, Selenium has a much much wider set of documentation, and a much wider community.
With Selenium you have a variety of different languages to use to code the tests in, as well as use the IDE. Angular limits use to pure JavaScript. For a lot of manual testers, this is a skill most do not have.
Both Selenium and Angular are open source, which (believe me) helps tremendously in debugging problems and understanding design decisions in their respective API's.