Exercise Tuesday

If you are experiencing issues with building and testing, double check your version numbers for browserify, jasmine, and jasmine core in your package.json. Try making them match the following:

"devDependencies": {
    "browserify": "^15.0.0",
    "gulp": "^3.9.1",
    "jasmine": "^2.9.0",
    "jasmine-core": "^2.9.1",
    "karma": "^2.0.0",
    "karma-browserify": "^5.1.3",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-jquery": "^0.2.2",
    "vinyl-source-stream": "^2.0.0",
    "watchify": "^3.10.0"
  }
}

Goal: Practice using Jasmine and Karma to run your unit tests. Aim for 100% coverage of your code. Continue using gulp tasks, including a development server with live reloading.

Warm Up


  • What is Jasmine? Why is unit testing important?
  • What is the difference between Karma and Jasmine? What benefits does Karma provide?
  • How would we set up our application if we wanted to use Jasmine without Karma?
  • What does the gulp watch method do?
  • If we want to tell gulp to complete a hypothetical firstTask before starting secondTask, how do we do that, and how would we refer to firstTask?

Code


Test It Out

Choose an application you built in Introduction to Programming (such as Roman Numeral or Pig Dice). Refactor the application to include the following:

  • Complete unit tests with Jasmine. Aim for 100% test coverage.
  • Continuous testing with Karma.
  • Complete separation of logic (UI logic in one file, business logic in another). You may even need to refactor some of your logic to make it more testable! If you aren’t able to test UI logic, consider ways that logic could be refactored and moved into your business logic file.
  • A gulpfile with all tasks we’ve covered so far.

Practice with Jasmine and testing is your top priority!

Further Exploration

  • Update Karma to provide support for other browsers.
  • Set up Istanbul.js to ensure you have 100% test coverage. You'll need to do some research on your own to get Instanbul.js up and running with Jasmine and Karma. This is a good opportunity to practice configuring your package.json file on your own.
  • Do your own research on the differences between Jasmine and Mocha/Chai. Both testing frameworks are very popular and have many similarities. (If you have the time, set up a testing environment with Mocha/Chai/Karma and try it out!)

Sudoku Checker

Sudoku is a game where players must fill in a 9 x 9 board with the numbers 1 through 9. Each row and column must have each number from 1 through 9 with no repeats.

Create an application that checks if a completed Sudoku puzzle is “legal.” In other words, it should ensure that each row and each column have all numbers from 1 to 9 with no repeats. Focus on the business logic and make sure to test the logic thoroughly before implementing any user interface logic.

Testing and Solving Project Euler Problems

Project Euler is an archive of math problems that can be solved using programming languages such as JavaScript. The difficulty of these problems ranges from fairly simple to extremely challenging. Try solving a few Project Euler problems, taking care to fully test your code. You do not need to implement user interface logic to solve these problems; instead, focus on business logic and unit testing.

Peer Code Review


  • Does the app function as designed? Is it clearly presented?
  • Is the application fully tested with Jasmine? Is Karma properly set up?
  • Is the code clear and readable, following standard syntax with descriptive variable names?
  • Does the gulpfile include all tasks that have been introduced so far, as well as a development server with live reloading?