In this project, Udacity provided a web-based application that reads RSS feeds. It has Jasmine included and I completed the tests that were originally TODOs and added an additional test for future functionality. The original project is at http://github.com/udacity/frontend-nanodegree-feedreader and it is a part of Udacity's Front-end Web Developer Nanodegree
You can view the project results online at http://kellim.github.io/feed-reader-testing
- Click the
Download Zip
button to download the project. - Open
index.html
which currently has Jasmine included at the bottom for convenience.
Note: As mentioned below, all the tests pass except the last 2 which are marked as pending for functionality that is not implemented yet.
The tests I wrote live in the Jasmine Spec file at /jasmine/spec/feedreader.js. Tests were created for the TODOs to:
- Loop through each feed in the allFeeds object and ensure it has a URL defined and that the URL is not empty.
- Loop through each feed in the allFeeds object and ensure it has a name defined and that the name is not empty.
- Ensure the menu element is hidden by default.
- Ensure the menu changes visibility when the menu icon is clicked. This test has two expectations: does the menu display when clicked and does it hide when clicked again.
- Ensure when the loadFeed function is called and completes its work, there is at least a single .entry element within the .feed container. Note: loadFeed() is asynchronous so this test and the next one use Jasmine's beforeEach and asynchronous done() function.
- Ensure when a new feed is loaded by the asynchronous loadFeed function that the content actually changes.
I created an additional Test Suite called 'Site Color' with two tests to ensure that when a visitor clicks a link to change the site background color to purple that it acutally updates the sliding sidebar menu and the header with the css to change the background color to the new purple color. These are the only 2 tests that will currently fail because the site does not have the functionality to change background color yet. For that reason, I used xit to mark the tests as pending so they won't run.
- JavaScript Testing Course (Udacity.com)
- Jasmine Documentation (GitHub)
- JavaScript Testing with Jasmine Video Tutorials (YouTube)
- JavaScript Koans - the Koans use Jasmine to teach JavaScript concepts and are good Jasmine Practice. They go through some of the Koans in the JavaScript Testing with Jasmine Video Tutorials on YouTube.
- Sublime Jasmine (GitHub)
- jasmine-jquery (GitHub)
- Testing DOM Events Using jQuery and Jasmine 2.0 (htmlgoodies.com)