Categories: AngularJS, Software Development

Screenshots with Selenium WebDriver

Here we learn to use Protractor with Selenium WebDriver providing the functionality to take screenshots.

Update: Andrew Batz has kindly put together an NPM-installable package with the code in this article. Click here to check it out or download it using npm install screenshot-protractor

As I work with SPAs (Single Page Applications) it becomes more obvious that some parts of a web app can only be inspected visually. As part of an end2end test or user acceptance testing, manually checking screenshots is still faster than manual testing. Screenshots at different steps of a process can be put together into a presentation or PDF and presented to clients or other stakeholders to show them that not only is the backend code working, but the frontend looks and feels right.

So here’s a snippet for taking a screenshot with Protractor, which is designed for AngularJS, and an end2end test that uses Jasmine and Protractor:

https://gist.github.com/rudolfolah/60b03873977551bcf68b

When to take screenshots during an end2end test:

  • to inspect the layout/styling
  • to inspect how the site looks across multiple browsers
  • to verify with client/stakeholders that we’re building the right thing
  • to share with other developers when debugging an issue
Categories: Software Development

Django Unit Testing with Mocks

Here I’m going to talk about how to use mocks when writing unit tests for Django, the Python-based web framework. Using Django test mocks has really opened my eyes on how to write much better unit tests. Previously, and in some cases still do when using 3rd party services, I would use fake API servers to serve fake data for testing end to end. With the mock library, I can easily mock out server responses in Django tests.
Continue reading “Django Unit Testing with Mocks”

Categories: AngularJS

Protractor and Dropdowns: validation

Found a good article on how to test AngularJS with Protractor and dropdown menus: https://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/

The issue with testing dropdowns in protractor is that you are relying on certain web browser behavior to work. In the article, there is code for how to test dropdowns properly.

Here is a snippet of the code distilled to its essence, the selection of the option elements using Protractor’s locators, clicking an option value and then validating a particular option has been chosen.

let dropdown = element(by.id('my-select-dropdown-element'));


// Clicking on the first option of the dropdown
let index = 0;
dropdown.all(by.tagName('option')).then(function(optionElements) {
  optionElements[index].click();
});

// Validating that the option has been selected
let expectedOption = 'first_option';
let checkedOptions = element(by.id('my-select-dropdown-element'))
  .all(by.tagName('option'))
  .filter(function(optionElement) {
    // Filter for checked items and that the exact option value was selected
    return optionElement.getAttribute('checked') == true
      && optionElement.getAttribute('value') == expectedOption;
  });
// Expect that the first option was selected
expect(checkedOptions.count()).toBe(1);

What we’re doing in the above code snippet is we are first selecting the dropdown element. Then we collect all of the option elements of the dropdown and call the click function on the first one.

Afterward, we validate that the correct option was selected by selecting the dropdown element, then searching through the list of options for the checked attribute to be true and the value attribute to have the same value as the expected option.

If you’re interested in Protractor for testing, you may also be interested in using Protractor to take screenshots of what you’re testing with Selenium.

Categories: AngularJS, Web Dev Training

Unit Testing in AngularJS

The modern way of development is to build and deliver web apps that include automated unit test suites. These automated tests exercise your web app to make sure that it works and doesn’t have any bugs. Tests give you the confident to say to your client or project manager or customer, yes we have the right features and yes they all work.

“Test-driven development is a set of techniques that any software engineer can follow, which encourages simple design and test suites that inspire confidence…following these two simple rules can lead us to work much more closely to our potential.

  • Write a failing automated test before you write any code.
  • Remove duplication.”

Kent Beck, Test Driven Development

Unit Tests

Unit testing is essential and of course, AngularJS lets you do some unit testing. In fact, it was built from the ground-up to co-operate with unit testing by using dependency injection.

One of the better tutorials on fully testing your AngularJS app is Full-Spectrum Testing With AngularJS and Karma.

To begin unit testing AngularJS, you need the following:

  • Karma test runner
  • Jasmine or Mocha/Chai test frameworks
  • Sinon for mocking/spies/stubs

The Karma test runner will run whatever tests you have. The Jasmine test framework lets you define tests and has assertions (such as myValue.is.expected.toBe(3)). Personally, I prefer the Mocha framework since it only defines tests, and lets you use whatever assertion library you want to use such as Chai, it also has lots of nice features.

A classic on unit testing is Test Driven Development: By Example, it’s by Kent Beck who was one of the founders of the Extreme Programming movement.

Mocking Dependencies for Integration and Unit Testing AngularJS

Sometimes when you’re writing a test, you want to make sure that your service or provider is making the right calls to another service. The way to do this is with mocks. Mocks are fake objects that keep track of which methods were called on them.

Mocks are not essential for writing tests, but there are cases where they do help. When you’re writing a controller that connects to your web app’s REST API, you want to make sure that it calls methodX and methodY. By creating a mock service and registering it with AngularJS, you can write a unit test that makes sure those two methods have been called. When using external 3rd party REST APIs, you may want to mock the $httpBackend to make sure the right calls are being made and the correct responses are returned.

Sinon is valuable for defining mocks. It lets you create method stubs and it lets you spy on method calls.

ng-modules

Find more modules on ngmodules.org

News

AngularJS Meetups

Alternatives to Acceptance Testing

Alternatives to Acceptance Testing

I like the goal of eliminating defects while you’re writing code rather than fix bugs later on.

When it comes to testing, my goal is to eliminate defects. At least the ones that matter. (Netscape 4.01 users, you’re on your own.) And I’d much rather prevent defects than find and fix them days or weeks later.

I think of defects as coming from four sources: programmer errors, design errors, requirements errors, and systemic errors. When trying to eliminate defects, I look for practices that address these four causes.

He lists some solid methods for preventing defects for each of these classes of errors.

Preventing programming errors is done with test-driven development; unit-tests, focused integration tests and end-to-end integration tests.

Preventing design errors is done by having a simple clean design, incrementally improving the design and architecture and constantly refactoring to ensure it continues to be clean.

Preventing requirements errors:

  • a whole team is required, cross-functional and able to get what they need to finish the project
  • customer examples, using multiple examples can help clarify the general idea of the feature to implement
  • customer review, get the programmers to walk through the new functionality with customer, kinda like the client UAT (User Acceptance Tests) we do at work.
  • push testers to help in the build process rather than relying on them after releases are made. They can work with the customer to figure out requirements or set up automated regression testing (most companies rely on manual regression testing which eats up a lot of time)

This whole article is very good and Mr Shore is an excellent writer. I’d recommend getting his book too, The Art of Agile Development.

Categories: Software Development

End to end tests posing as unit tests

I’ve been reading the excellent book The Art of Agile Development, I started to think more about why Test Driven Development is important and how it affects how you write code.

Using some of the 20%/practice group time we have at work, I started to review my own code to see if I’m living up to the test-driven development methodology. Are there enough unit tests? Yes, there were, code coverage was over 70% in most cases and with a little work I got it to 100% coverage for the most important code (the views and models). Then I started to noticed something about my tests…they’re not unit tests at all! They’re end to end tests! What Django calls unit testing is actually an end to end test. We’re testing from one end, the website, to the other end, the database. This means that we’re testing each view to ensure that it includes the right data, that it uses the right templates, etc. Then we’re testing interaction and checking the results in the database. Continue reading “End to end tests posing as unit tests”