Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Dahye Ji
Dahye Ji

Posted on

     

Unit testing with Jasmine / getting started with TDD

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.
jasmine

And these are filed that I created to start with.
setting with jasmine
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>
Enter fullscreen modeExit fullscreen mode

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>
Enter fullscreen modeExit fullscreen mode

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);});});
Enter fullscreen modeExit fullscreen mode

This is Red stage from TDD Approach
red stage tdd
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;}
Enter fullscreen modeExit fullscreen mode

So I wrote a function plusOne in tddTest.js
Now go to TDD.spec.html using live server

green stage tdd
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>
Enter fullscreen modeExit fullscreen mode

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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
desm profile image
Jacques Desmarais
  • Joined

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?

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

👩🏻‍💻 I write about things I've learnt 🙂
  • Location
    Seoul, South Korea
  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp