TDD(Test-Driven Development)
Test-Driven Development (TDD) is asoftware development process relying on software requirements being converted to test cases before software is fully developed, andtracking all software development by repeatedly testing the software against all test cases. This is as opposed to software being developed first and test cases created later. (fromwikipedia)
Unit Test
Unit test is a way of testing a unit. Unit means thesmallest piece of code that can be logically isolated in a system. In most programming languages, that can be function / method or property.
TDD Approach - Red, Green, Refactor
Test-driven development (TDD) is an approach to software developmentwhere you write tests first,then use those tests to drive the design and development of your software application.
- Red: think about what you want to develop, This is where you fail from your tests.The purpose of this phase is to write tests that informs the implementation of a feature.The test will only pass when the its expectations are met.
- Green: think about how to make your tests pass.This is where you implement code to make your test pass. The goal isto find a solution, without worrying about optimizing your implementation.
- Refactor: think about how to improve your existing implementation.In the refactor phase, you are still "in the green." You can begin thinking about how toimplement your code better or more efficiently. If you want to think about refactoring your implementation code, you can think abouthow to accomplish the same output with more descriptive or faster code.
Article aboutRed, Green, Refactor
Getting started with Jasmine
Jasmine:https://jasmine.github.io/
These are files that's downloaded from Jasmine.
And these are filed that I created to start with.
Those files that include "spec" in their name are for test. Other two are files that will be deployed.
from the file I downloaded, it had a file name SpecRunner.html
<linkrel="shortcut icon"type="image/png"href="lib/jasmine-3.10.1/jasmine_favicon.png"><linkrel="stylesheet"href="lib/jasmine-3.10.1/jasmine.css"><scriptsrc="lib/jasmine-3.10.1/jasmine.js"></script><scriptsrc="lib/jasmine-3.10.1/jasmine-html.js"></script><scriptsrc="lib/jasmine-3.10.1/boot0.js"></script><!-- optional: include a file here that configures the Jasmine env --><scriptsrc="lib/jasmine-3.10.1/boot1.js"></script>I copied and pasted these lines at the bottom ofhead tag in my TDD.spec.html file and changed the route correctly according to mine.
TDD.spec.html
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title></title><linkrel="shortcut icon"type="image/png"href="jasmine/lib/jasmine-3.10.1/jasmine_favicon.png"><linkrel="stylesheet"href="jasmine/lib/jasmine-3.10.1/jasmine.css"><scriptsrc="jasmine/lib/jasmine-3.10.1/jasmine.js"></script><scriptsrc="jasmine/lib/jasmine-3.10.1/jasmine-html.js"></script><scriptsrc="jasmine/lib/jasmine-3.10.1/boot0.js"></script><!-- optional: include a file here that configures the Jasmine env --><scriptsrc="jasmine/lib/jasmine-3.10.1/boot1.js"></script></head><body><!-- This html file is for the test (To check test result) You can check the test result when you open this in browser --><!-- This file below is for the test --><scriptsrc="tddTest.js"></script><!-- This file below is for unit test --><scriptsrc="tddTest.spec.js"></script></body></html>Note. You must include "spec" in the name for test file so that Jasmine will recognise it as a test file.
tddTest.spec.js
// Test units will be written here. function it() will be used a lot.// This file is spec file of tddTest.jsdescribe("this is jasmine test",()=>{// this is test unitit("function for addition",()=>{letnum=10;// it, expect, toBe are functions used in jasmine. (Because of library, you can simply type the name of these function and use!)// expect: This will pass the result of function// toBe: it's a function checking if my expectation meats the result// plusOne inside expect()is a function/code to testexpect(plusOne(num)).toBe(num+1);});});This is Red stage from TDD Approach
The error got caused is because I have thisexpect(plusOne(num)).toBe(num + 1); code in tddTest.spec.js but function plusOne was never defined. If you open TDD.spec.html using live server,
You can see what's exactly wrong on the test page using Jasmine.
tddTest.js
functionplusOne(num){returnnum+1;}So I wrote a function plusOne in tddTest.js
Now go to TDD.spec.html using live server
and this green page appears.
It's written just to see how Jasmine work so it's very short code but this is how you do the testing. You will go back and forth from red to green and green to red every time you add a new line of code to test and to write a code to make it pass.
TDD.html
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title></title><linkrel="shortcut icon"type="image/png"href="jasmine/lib/jasmine-3.10.1/jasmine_favicon.png"><linkrel="stylesheet"href="jasmine/lib/jasmine-3.10.1/jasmine.css"><scriptsrc="jasmine/lib/jasmine-3.10.1/jasmine.js"></script><scriptsrc="jasmine/lib/jasmine-3.10.1/jasmine-html.js"></script><scriptsrc="jasmine/lib/jasmine-3.10.1/boot0.js"></script><!-- optional: include a file here that configures the Jasmine env --><scriptsrc="jasmine/lib/jasmine-3.10.1/boot1.js"></script></head><body><!-- TDD.html, tddTest.js are only file will be deployed --><scriptsrc="tddTest.js"></script><!-- spec files are for testing. These won't be pushed but in some teams/companies they will have their main branch and dev branch. Usually those tests file would got o dev branch but will NEVER go to the main --><!-- <script src="tddTest.spec.js"></script> --></body></html>I created four files for unit test here.
- TDD.spec.html
- tddTest.spec.js
- tddTest.js
- TDD.html
But like what I've mentioned above, spec files are made to do the test and they will not be pushed.
*These are way to short to refactor so I will probably write another example to explain the refactoring stage.
Things to consider
- Writing test code takes much more time of course, so if the project needs to be finished urgently, it might not be the best case to use.
- TDD is a good way to develop. However, test code is written by human as well and we can still make mistakes. There will be things that we didn't consider enough so writing test code doesn't mean that the code written are perfect. Doing TDD is to have structured code that's easy to maintain and refactor.
Top comments(1)
Hi@daaahailey , I was intrigued to see how you ran the tests inside the browser, so I tried it and it works just like you describe. I really like the approach you took, which doesn't require the user to install anything. I created a GitHub repo using your code example and invited you to it. Would you be OK with me making that GitHub repo public?
For further actions, you may consider blocking this person and/orreporting abuse
