Embed Size (px)
Citation preview
Getting started with Testing in Javascript
@Spyr1014
Motivation!
• Why should I test?
• How should I test?
• Testing as motivation or HATE DRIVEN DEVELOPMENT
Why?
But I’ve just started…
Get the number 6 from pressing the button 6
‘Title Case’ FCC Problem
• Return the provided string with the first letter of each word capitalised.
• Make sure the rest of the word is in lower case.
https://www.freecodecamp.com/challenges/title-case-a-sentence
Starting codefunction titleCase(str) { return str;}
titleCase("I'm a little tea pot");
// Result we want: "I'm A Little Tea Pot"
FCC test cases
We can set this up ourselves!
Testing Helper Functions!
What do I need to know to test?
Mocha• Testing framework
• Does lots of work for you
Using Mocha• ‘describe(string, function)’
• Group tests and creates heading
• `it(string, function)`
• Your ‘individual test’
describe("Heading 1", function(){ describe("Heading 2", function(){ it("A test", function(){ }); });});
Assertion Library?• Gives you an easy way to check if things are behaving as expected.
• Basically it’s the same as == or ===
I imagine it as ================
Chai - Assertion Library// From http://chaijs.com/
var expect = chai.expect;
expect(name).to.be.a('string');
expect(name).to.equal('Andrew');
expect(foo).to.have.lengthOf(3);
expect(tea).to.have.property('flavours') .with.lengthOf(3);
expect(titleCase("I'm a little tea pot")).to.be.a("string");
expect(titleCase("I'm a little tea pot")) .to.equal("I'm A Little Tea Pot");
expect(titleCase("sHoRt AnD sToUt")) .to.equal("Short And Stout");
expect(titleCase("HERE IS MY HANDLE HERE IS MY SPOUT")) .to.equal("Here Is My Handle Here Is My Spout");
Add `describe` and `it`
The Mocha webpage
Head • Import any JS dependencies
• Mocha style sheet (mocha.css)
• Import Chai
Body • Div with id = “mocha”
• Setup Mocha
• Your code, and testing code.
• Run Mocha
<!DOCTYPE html> <html> <head> <title>Mocha</title> <script src="vendor/chai.js"></script> <link rel="stylesheet" href="mocha.css" /> </head> <body> <div id="mocha"></div> <script src="mocha.js"></script> <script>mocha.setup('bdd');</script> <!--Put your code here--> <script src="problem.js"></script> <script src="problem.test.js"></script> <!--End of your code.--> <script> mocha.run(); </script> </body> </html>
Files set up for you!
https://github.com/SpyR1014/Simple-Mocha-Testing-
Boilerplate
http://blog.sewmucheasier.com/wp-content/uploads/2013/12/surprised-puppy.jpg
RED - GREEN - REFACTOR
• while(problem !== ‘solved’) {
• 1. Write a failing test
• 2. Fix the failing test
• 3. Make the code nice
• }
–Kent Beck (Author of Test Driven Development)
“I'm not a great programmer; I'm just a good programmer with great habits.”
