Test driven programming beginner quick start
- 1. Getting started with Testing in Javascript @Spyr1014
- 2. Motivation! • Why should I test? • How should I test? • Testing as motivation or HATE DRIVEN DEVELOPMENT
- 3. Why?
- 6. Get the number 6 from pressing the button 6
- 7. ‘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
- 8. Starting code function titleCase(str) { return str; } titleCase("I'm a little tea pot"); // Result we want: "I'm A Little Tea Pot"
- 10. We can set this up ourselves!
- 15. What do I need to know to test?
- 16. Mocha • Testing framework • Does lots of work for you
- 17. Using Mocha • ‘describe(string, function)’ • Group tests and creates heading • `it(string, function)` • Your ‘individual test’
- 18. describe("Heading 1", function(){ describe("Heading 2", function(){ it("A test", function(){ }); }); });
- 19. 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 ================
- 20. 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);
- 21. 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");
- 25. 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
- 26. <!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>
- 27. 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
- 28. RED - GREEN - REFACTOR • while(problem !== ‘solved’) { • 1.Write a failing test • 2. Fix the failing test • 3. Make the code nice • }
- 29. –Kent Beck (Author of Test Driven Development) “I'm not a great programmer; I'm just a good programmer with great habits.”