Feed Reader Testing

Student Notes Resources Code Review Project Review Project History

Click a lename to expand the code, then click the line you wish to comment upon. We'd like to see at least 5 comments, but
hopefully more. Thanks!

 jasmine/spec/feedreader.js 8

1 /* feedreader.js
2 *
3 * This is the spec file that Jasmine will read and contains
4 * all of the tests that will be run against your application.
5 */
6
7 /* We're placing all of our tests within the $() function,
8 * since some of these tests may require DOM elements. We want
9 * to ensure they don't run until the DOM is ready.
10 */
11 $(function() {
12 /* This is our first test suite - a test suite just contains
13 * a related set of tests. This suite is all about the RSS
14 * feeds definitions, the allFeeds variable in our application.
15 */
16 describe('RSS Feeds', function() {
17 /* This is our first test - it tests to make sure that the
18 * allFeeds variable has been defined and that it is not
19 * empty. Experiment with this before you get started on
20 * the rest of this project. What happens when you change
21 * allFeeds in app.js to be an empty array and refresh the
22 * page?
23 */
24 it('are defined', function() {
25 expect(allFeeds).toBeDefined();
26 expect(allFeeds.length).not.toBe(0);
27 expect(allFeeds instanceof Array).toBeTruthy();
28 });
29
30
31 /* TODO: Write a test that loops through each feed


ȘŲĢĢ Ě ȘȚ İ Ǿ Ň

Note: TODO comments should be removed once you implement a functionality. You can replace them with the descr
remove the TODO: from the beginning, since it's not a TODO anymore :)

 DOWNLOAD PROJECT
32 * in the allFeeds object and ensures it has a URL defined
 33 * and that the URL is not empty.
34 */
35 it("have URLs", function() {
36 allFeeds.forEach(function(feed) {
37 expect(feed.url).toBeDefined();
38 expect(feed.url.length).not.toBe(0);
39 expect(feed.url).toMatch(/^(http|https):\/\//);


ȘŲĢĢ Ě ȘȚ İ Ǿ Ň

Nice work!

40 });
41 });
42
43 /* TODO: Write a test that loops through each feed
44 * in the allFeeds object and ensures it has a name defined
45 * and that the name is not empty.
46 */
  D O W N L O Ait("have
47 D P R O J Enames",
CT function() {
allFeeds.forEach(function(feed) {
 48
49 expect(feed.name).toBeDefined();
50 expect(typeof feed.name).toBe("string");
51 expect(feed.name.length).not.toBe(0);
52 });
53 });
54 });
55
56
57 /* TODO: Write a new test suite named "The menu" */
58 describe("The menu", function() {
59 /* TODO: Write a test that ensures the menu element is
60 * hidden by default. You'll have to analyze the HTML and
61 * the CSS to determine how we're performing the
62 * hiding/showing of the menu element.
63 */
64
65 /* TODO: Write a test that ensures the menu changes
66 * visibility when the menu icon is clicked. This test
67 * should have two expectations: does the menu display when
68 * clicked and does it hide when clicked again.
69 */
70
71 /* TODO: Write a new test suite named "Initial Entries" */
72
73 /* TODO: Write a test that ensures when the loadFeed
74 * function is called and completes its work, there is at least
75 * a single .entry element within the .feed container.
76 * Remember, loadFeed() is asynchronous so this test will require
77 * the use of Jasmine's beforeEach and asynchronous done() function.
78 */
79
80 /* TODO: Write a new test suite named "New Feed Selection" */
81
82 /* TODO: Write a test that ensures when a new feed is loaded
83 * by the loadFeed function that the content actually changes.
84 * Remember, loadFeed() is asynchronous.
85 */
86 var body = document.body;
87 var menuIcon = document.querySelector(".menu-icon-link");
88
89 it("body has 'menu-hidden' initially", function() {
90 expect(body.className).toContain("menu-hidden");


ȘŲĢĢ Ě ȘȚ İ Ǿ Ň

Using toContain() on body.className is not comprehensive enough. For example, if it has submenu-hidden cla
should fail. You should use body.classList or jQuery's hasClass for this.

91 });
92
93 it("body toggles the class 'menu-hidden' on clicking menu icon", function() {
94 menuIcon.click();
95 expect(body.className).not.toContain("menu-hidden");
96
97 menuIcon.click();
98 expect(body.className).toContain("menu-hidden");
});
 DOWNLOAD PROJECT
99
100 });
101
102 describe("Initial Entries", function() {
103
104 beforeEach(function(done) {
105 loadFeed(0, function() {
106 done();
107 });


ǺẄ Ě ȘǾM Ě

Nice async call.

Nitpick: Since the callback function (the second argument of loadFeed ) contains only one call to done() , you can s
function itself (without invoking it) as the second argument:

loadFeed(0, done);

108 });
109
110 it("has at least 1 entry after loadFeed function is called", function(done) {
111 var numEntries = document.querySelector(".feed").getElementsByClassName("ent
112 expect(numEntries).toBeGreaterThan(0);
113 done();


ȘŲĢĢ Ě ȘȚ İ Ǿ Ň

The meaning of done() is something like this:

When you pass done to a function as an argument, jasmine will not run the rest of the code until you call done()

So when you call an async function (usually in beforeEach) that needs time to nish its jobs, it's a good tool to defer th
Since this function doesn't have any async calls, you can simply remove it and your test will still pass (but don't forget
argument list too, because if you don't, jasmine will wait for your call to it!).

114 });
115
116 it("has a entry that has a link starting with 'http(s)://'", function(done) {


ǺẄ Ě ȘǾM Ě

Nice additional test.

117 var entries = document.querySelector(".feed").getElementsByClassName("entry-

118 for(var i = 0; i < entries.length; i++){
119 expect(entries[i].href).toMatch(/^(http|https):\/\//);
120 }
121 done();
122 });
123 });
124
125 describe("New Feed Selection", function() {
  DOWNLOAD PROJECT
126
127 var initFeedSelection;
 128 beforeEach(function(done) {
129 loadFeed(0, function() {
130 initFeedSelection = document.querySelector(".feed").innerHTML;
131
132 loadFeed(1, function() {
133 done();


ǺẄ Ě ȘǾM Ě

Great nested solution.

Note: There's a new technique called Promises which makes working with async code much easier. If you're intereste

134 });
135 });
136 });
137
138 it("changes its loaded content", function(done) {
139 var newFeedSelection = document.querySelector(".feed").innerHTML;
140 expect(initFeedSelection).not.toBe(newFeedSelection);
141 done();


ȘŲĢĢ Ě ȘȚ İ Ǿ Ň

See line 113.

142 });
143 });
144 }());
145

 README.md 1

 js/app.js

 jasmine/lib/jasmine-2.1.2/jasmine.js

 jasmine/lib/jasmine-2.1.2/jasmine.css

 jasmine/lib/jasmine-2.1.2/jasmine-html.js

 jasmine/lib/jasmine-2.1.2/console.js

 jasmine/lib/jasmine-2.1.2/boot.js

 DOWNLOAD
 index.html PROJECT
 css/style.css

 css/normalize.css

 css/icomoon.css

Reviewer FAQ Reviewer Agreement Student FAQ

 DOWNLOAD PROJECT