Giter VIP home page Giter VIP logo

intro-to-js-and-jasmine's Introduction

Intro to Jasmine and JavaScript

Objectives

  1. Run Jasmine Tests
  2. Read Jasmine Tests
  3. Use debugger to figure out bugs in code

Jasmine

In Jasmine, to make a set of tests for a particular subject, we set it apart by creating a describe function with the first argument as the subject, and the second as an function. Within that function, we can either go more specific with nested describe blocks or an it function. it is an actual test; it takes a string as the first argument about what it is testing and a function that contains an assertion (Jasmine provides the expect keyword here) that compares your code to the expected outcome.

If we need to run certain code before or after some (or all) functions run, we can use beforeAll() and afterAll() as well as beforeEach() and afterEach().

For example, in our test file, we're writing browser-based tests, we need to simulate a browser in our testing environment. To do so, we use jsdom, which mocks out objects and behaviors as if we were in a browser without actually forcing us to render anything in a browser window. This setup makes our tests portable — that is, it makes it so that they can run just about anywhere.

We set up the "browser" in a call to beforeAll():

beforeAll(done => {
  const src = path.resolve(__dirname, '..', 'code.js');

  jsdom.env('<div></div>', [src], {}, (err, window) => {
    if (err) {
      return done(err);
    }

    Object.keys(window).forEach(key => {
      global[key] = window[key]
    });

    done();
  });
});

This looks a little intimidating, but don't worry, we'll walk you through it.

The first thing to notice is done. This signals to Jasmine that what we're doing inside of beforeAll() runs asynchronously, and tells Jasmine to wait until we call done() to start running any of the tests. Notice where we call done() inside of the callback that gets err, window as its arguments.

Then we assign the location of the code we want to test to the variable src — pretty basic. (Don't worry too much about path.resolve — it's a part of the Node.js path library for determining the path of something. In this case, it's figuring out where code.js lives.)

Then we call jsdom.env(). This function receives four arguments:

  1. An HTML string. This string sets up the DOM — it can be arbitrarily long (we could even read in a full HTML file), but in this case, we just need something basic, since our tests don't really use the DOM.
  2. An array of paths to source files. We only have on file to test, so it's the only element in the array.
  3. An options object. We can just use the default options, so we use an empty object.
  4. A callback. This function, in typical Node.js fashion, receives an error first. The err will most likely be null, but if it's defined, we call done(err) to tell Jasmine to stop and show us what went wrong. Assuming things are going as expected, we then take all of the things defined on window (including, in this lab, the functions we've written) and add them to global so that we can call them in our tests.

Finally, we call done() with no arguments to tell Jasmine that we're finished with this beforeAll(). The tests start running here.

Test Walk-Through

describe('favoriteIceCream(favorite)', () => {
  it('returns "I love ${favorite}"', () => {
    expect(favoriteIceCream("mint chocolate chip")).toBe("I love mint chocolate chip");
  });
});

The test above tests a function named favoriteIceCream. The it block declares in plain English the expectation being tested. In this case, we're testing that the function returns a sentence about the favorite ice cream. The expect block calls the function behind tests, and uses a matcher (in this case toBe) to test what the return value of the function should be.

The expect is calling the function favoriteIceCream() and passing in the parameter "mint chocolate chip" — it's just as if favoriteIceCream() were running in a "real" application, but we can make assertions about what it returns..

Instructions

This lab is designed to get you comfortable with the syntax of Jasmine as well as JavaScript. All you need to do to complete it is make all the tests pass in the test/intro-test.js. You'll be coding your solution in code.js.

Before you get started, make sure you run learn to see the test output in your terminal. Take each test step by step, and remember that you can use debugger if you get stuck.

  1. Write a function called favoriteIceCream, which accepts a parameter and returns the string "I love <NAME_OF_ICECREAM>".

  2. Write a function called shouting, which accepts a string as a parameter and returns the string in all caps.

  3. Write a function called roundDown, which accepts a number as parameter and returns the number rounded down the closest whole number.

  4. Write a function called theTruth, which returns true.

Resources

intro-to-js-and-jasmine's People

Contributors

annjohn avatar asialindsay avatar deniznida avatar fislabstest avatar franknowinski avatar fs-lms-test-bot avatar joshuabamboo avatar pletcher avatar sarogers avatar smulligan85 avatar talum avatar tsiege avatar victhevenot avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

intro-to-js-and-jasmine's Issues

Error on running learn / learn -b on intro to JS labs

When I am running learn or learn -b on Intro to JS labs, I get the following error in my CLI
Installing missing dependency phantomjs...
Error: An unsatisfied requirement failed this build.

When running learn alone, no other output displays. When running learn -b, this error displays but then the browser opens and Jasmine seems to function normally.

This also seems to automatically trigger local tests to pass even though they have not.

I've tried uninstalling and reinstalling node and phantomjs ("npm install -g phantomjs" and "npm install -g phantomjs-prebuilt"). Can't install via Homebrew (running OSX 10.11).

Not sure how concerned I should be. Conversed with Brian Hollan on "Ask A Question" on Learn this evening, see that convo for more details and command output.

Not getting a green light

Halp! The annoying completionist in me here, I've completed this lab but the light in the drop down remains off.

Thanks for all you guys do!
Skip

Students code in spec file

This has been raised as an issue for the Ruby section so I'm assuming we're moving away from solutions in specs, even for beginner labs.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.