{"id":13563300,"url":"https://github.com/dwyl/learn-tdd","last_synced_at":"2025-05-14T12:08:00.588Z","repository":{"id":33494750,"uuid":"37140605","full_name":"dwyl/learn-tdd","owner":"dwyl","description":":white_check_mark: A brief introduction to Test Driven Development (TDD) in JavaScript (Complete Beginner's Step-by-Step Tutorial)","archived":false,"fork":false,"pushed_at":"2024-10-21T21:21:50.000Z","size":7820,"stargazers_count":2756,"open_issues_count":20,"forks_count":344,"subscribers_count":203,"default_branch":"main","last_synced_at":"2025-04-27T11:53:29.119Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dwyl.png","metadata":{"files":{"readme":"README.md","changelog":"change-functional.js","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-06-09T15:26:41.000Z","updated_at":"2025-04-24T10:20:50.000Z","dependencies_parsed_at":"2023-01-15T01:09:30.600Z","dependency_job_id":"4107b0b2-560a-4981-9268-fed0a14202e9","html_url":"https://github.com/dwyl/learn-tdd","commit_stats":{"total_commits":171,"total_committers":41,"mean_commits":4.170731707317073,"dds":0.5964912280701755,"last_synced_commit":"bf334026ec3226242ab4598a09bcf09402387c44"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwyl%2Flearn-tdd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwyl%2Flearn-tdd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwyl%2Flearn-tdd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwyl%2Flearn-tdd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dwyl","download_url":"https://codeload.github.com/dwyl/learn-tdd/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251134659,"owners_count":21541377,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T13:01:17.538Z","updated_at":"2025-04-27T11:53:43.478Z","avatar_url":"https://github.com/dwyl.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","TDD IN JAVASCRIPT","Javascript"],"sub_categories":["Laravel","Guides Javascript"],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Learn **T**est **D**riven **D**evelopment (**TDD**)\n\nA brief introduction to **T**est **D**riven **D**evelopment (**TDD**)\nin JavaScript for people who want to write _**more reliable code**_.\n\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/dwyl/learn-tdd/ci.yml?label=build\u0026style=flat-square\u0026branch=main)](https://github.com/dwyl/learn-tdd/actions/workflows/ci.yml)\n[![codecov.io](https://img.shields.io/codecov/c/github/dwyl/learn-tdd/master.svg?style=flat-square)](https://codecov.io/github/dwyl/learn-tdd?branch=master)\n[![Dependencies: None](https://img.shields.io/badge/dependencies-none-brightgreen.svg?style=flat-square)](https://github.com/dwyl/learn-tdd/blob/main/package.json#L35 \"Zero Dependencies\")\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat-square)](https://github.com/dwyl/learn-tdd/issues)\n[![HitCount](https://hits.dwyl.com/dwyl/learn-tdd.svg)](https://hits.dwyl.com/dwyl/learn-tdd)\n\n\u003c/div\u003e\n\n## Why?\n\n_Project(s) without tests_ often end up looking like they are stuck together with _**duct tape**_ ...\n\n![duct tape car fail](https://i.imgur.com/9cNriGK.jpg)\n\nChange _one_ part and _another_ stops working? \"_Fixing_\" one bug, creates another?\n\nWouldn't you *prefer* it if everything was\n***consistent*** and beautifully integrated? \u003cbr /\u003e\nWhat if _everyone_ on your team worked _like **clock-work**_ in a disciplined order... like a _**Formula 1 Crew**_ ...\n\n![formula 1 pit stop](https://i.imgur.com/0NDbaam.jpg)\n\nTest Driven Development (TDD) makes your team a well-oiled machine which means you can go _**faster**_.\n\nOnce you have a ***suite*** of tests that run on every change, you will\nbegin to develop a whole other level of ***confidence*** in your codebase\nand will discover a new freedom to be ***creative*** without fear of\n\"*breaking*\" anything unexpectedly; truly *game-changing*.\n\n\n## What?\n\nThis tutorial will help you get started with\n**T**est **D**riven **D**evelopment (**TDD**) *today*! \u003cbr /\u003e\nIn the next ***30 minutes*** you will learn _everything_\u003csup\u003e1\u003c/sup\u003e\nyou need to write tests for your web project!\n\n### Pre-Requisites\n\n+ **A computer** with a web browser\n+ **Internet access** to download the starter files\n+ **30 minutes** of your time\n+ **_Basic_ Programming Skills** (HTML \u0026 JavaScript)\n+ (_**Optional**_) _**Bonus Levels requires**_ you to\n[_install_ **Node.js**](https://nodejs.org/download/)\n\n### What is Software Testing?\n\u003e Software testing is the process of evaluating a software item to detect differences between the expected output and the actual output. Testing assesses the quality of the product. Software testing is a process that should be done during the development process. In other words software testing is a verification and validation process.\n\n\n### What is TDD?\n\n\u003e Test-driven development (TDD) is an evolutionary approach to development\nwhich combines test-first development, where you write a test before you write\njust enough production code to fulfil that test, and refactoring. In other words,\nit’s one way to think through your requirements\nor design before you write your functional code.\n\n*From [Introduction to Test Driven Development (TDD)](https://agiledata.org/essays/tdd.html)*\n\n#### Further resources\n- Software Testing - https://en.wikipedia.org/wiki/Software_testing\n- \"What is Software Testing\" video (from 5:56 onwards) - https://youtu.be/UZy1Dj9JIg4?t=356\n- Video intro to Software Development Lifecycle (from 0:52 onwards): https://youtu.be/qMkV_TDdDeA?t=52\n- How to Write Clean, Testable Code -  https://youtu.be/XcT4yYu_TTs (ignore the Java code focus on the general principles)\n+ [What is software testing?](https://www.codeproject.com/Tips/351122/What-is-software-testing-What-are-the-different-ty) by _Rehman Zafar_\n\u003c!-- - Practical Full-Stack JavaScript Web Application Test Driven Development - https://github.com/nelsonic/practical-js-tdd --\u003e\n\n## How?\n\nThe *first* thing you need to *understand*\nis that writing code following TDD (*discipline*)\nis a (*slightly*) different approach from simply\ndiving into solving the problem (*without a test*).\n\nWhen reading about TDD you will usually see the expression:\n\"***Red, Green, Refactor***\":\n\n![TDD Cycle: Red, Green, Refactor](https://i.imgur.com/RQe2NQT.jpg)\n\nWhat this means is that TDD follows a **3-step process**:\n\n1. ***Write a Failing Test*** - Understand the (user)\nrequirements/story well enough to write a test for what you expect.\n(_the test should **fail** initially - hence it being \"Red\"_)\n\n2. ***Make the (failing) Test Pass*** - Write (*only*) the code you need\nto make the (*failing*) test pass, while ensuring your existing/previous tests\nall still pass (*no regressions*).\n\n3. ***Refactor the code you wrote*** take the time to tidy up the code\n*you* wrote to make it simpler\n(*for your future self or colleagues to understand*)\nbefore you need to ship the current feature, do it.\n\n\u003e Thankfully, because you will have good tests,\nyou don't _need_ to do any refactoring up-front,\nyou can always do refactoring _later_\nif performance bottlenecks are discovered.\nMost programming languages have very efficient compilers/interpreters\nthat remove much of the need for refactoring.\nAnd if you use a linter your code will be naturally \"tidy\".\n\nTo develop the *habit(s)* you will need to be successful with TDD\n(*and software engineering in general*)\nwe need to ***write*** a ***test first*** (*and watch it fail*)\nand *then* write the code required to make the test pass.\n\nWriting a _**failing test**_,\nbefore writing the code may seem *counter-intuitive*,\n*time consuming* or even \"*tedious*\" at _**first**_.\nBut we _urge_ you to think of it this way:\n\n\u003e The ***test*** is the ***question*** you are asking \u003cbr /\u003e\n\u003e your code is the ***answer*** to the question. \u003cbr /\u003e\n\u003e By having a _clear_ question, you can always check\n\u003e that your code is working, \u003cbr /\u003e\n\u003e because it _**consistently**_\n\u003e gives you the same answer(s) ... _no surprises_,\neven when you're working with a large, inter-dependent code base!\n\n## Practical\n\n\u003e _**Note**: This tutorial is meant to be a beginner-friendly introduction to TDD.\nThe Vending Machine example is _intentionally_ simple\nso you can focus on the principles of testing.\nOnce you understand the basics,\nwe encourage you to follow our _complete_ Todo List Tutorial \n([https://github.com/dwyl/**todo-list-javascript-tutorial**](https://github.com/dwyl/todo-list-javascript-tutorial)),\nwhich is a step-by-step guide to building an App\nfollowing testing and documentation-first best practices._\n\n### Scenario: Vending Machine _Change Calculator_ Micro-Project\n\n![vending machine](https://i.imgur.com/HbwMqDa.jpg)\n\nImagine you are building a **Vending Machine**\nthat allows people to buy any item it contains.\nThe machine accepts coins and calculates the change\nto be returned to the customer, given the item **price**\nand the **cash** received.\n\n### Single *File* App\n\nWe can build the _entire_ \"project\" in a _**single file**_: `index.html`\n\n\u003e _**Note**: In practice you want to split your JavaScript,\nCSS and HTML (Templates) into **separate** files,\nbut for this example we are keeping everything in `index.html` for simplicity.\nIf you make it to the \"Bonus Levels\" you will split things out!_\n\nCreate a directory on your computer called **vending-machine**:\n\nIn your **terminal** type this command:\n```sh\nmkdir vending-machine \u0026\u0026 cd vending-machine\n```\n(_This will create the directory and move you into it_)\n\nNext create a file called **index.html** e.g: `atom index.html`\n(which creates and opens the file in the [Atom text editor](https://atom.io/)\nif you have it installed)\n\n(_**Note**: The \"atom\" command is not installed by default.\nIn the Atom menu bar there is a command named “Install Shell Commands”\nwhich installs a new command in your Terminal called \"atom\"._)\n\nNow copy-paste the following *sample code* into the newly created `index.html` file to get started:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"\u003e\n    \u003ctitle\u003eVending Machine Change Calculator TDD Tutorial\u003c/title\u003e\n    \u003c!-- Load the QUnit CSS file from CDN - Require to display our tests attractively --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://code.jquery.com/qunit/qunit-1.18.0.css\"\u003e\n    \u003c!-- Pure CSS is a minimalist CSS file we have included to make things look nicer --\u003e\n    \u003clink rel=\"stylesheet\" href=\"http://yui.yahooapis.com/pure/0.6.0/pure-min.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody style='margin: 0 1em;'\u003e\n    \u003cdiv id='main'\u003e\n      \u003ch1\u003eVending Machine \u003cem\u003eChange Calculator\u003c/em\u003e\u003c/h1\u003e\n      \u003ch2\u003eCalculate the change (\u003cem\u003ecoins\u003c/em\u003e) to return to a customer when they buy something.\u003c/h2\u003e\n    \u003c/div\u003e\n\n    \u003cdiv id=\"qunit\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"qunit-fixture\"\u003e\u003c/div\u003e\n    \u003c!-- Load the QUnit Testing Framework from CDN - this is the important bit ... --\u003e\n    \u003cscript src=\"https://code.jquery.com/qunit/qunit-1.18.0.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      // This is what a simple unit test looks like:\n      test('This sample test should always pass!', function(assert) {\n        var result = 1 + 1;\n        assert.equal(result, 2); // just so we know everything loaded ok\n      });\n      // A failing test will be RED:\n      test('This is what a failing test looks like!', function(assert) {\n        var result = [1,2,3].indexOf(1);  // this should be 0\n        assert.equal(result, -1); // we *expect* this to fail\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### Open index.html in your Browser\n\nWhen you ***open*** `index.html` in your ***web browser***\nyou should expect to see something like this: (_without the annotation pointing out the qunit div, and the green and red annotations pointing out the Passing and Failing tests_)\n\n![learn-tdd-initial-index-html-showing-failing-test](images/initial-index-html-showing-failing-test.png)\n\n\n\n##### Explanation\n\nThere is quite a lot of code in the **index.html** you just created,\nlet's step through it to understand the parts:\n\nThe first part of **index.html** is a standard HTML head and body:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"\u003e\n    \u003ctitle\u003eVending Machine Change Calculator TDD\u003c/title\u003e\n    \u003c!-- Load the QUnit CSS file from CDN - Require to display our tests attractively --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://code.jquery.com/qunit/qunit-1.18.0.css\"\u003e\n    \u003c!-- Pure CSS is a minimalist CSS file we have included to make things look nicer --\u003e\n    \u003clink rel=\"stylesheet\" href=\"http://yui.yahooapis.com/pure/0.6.0/pure-min.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id='main'\u003e\n      \u003ch1\u003eVending Machine Change Calculator\u003c/h1\u003e\n      \u003ch2\u003eCalculate the Change for a Given Price and Cash Received\u003c/h2\u003e\n    \u003c/div\u003e\n```\nNothing special here, we are simply setting up the page\nand loading the CSS files.\n\nNext we see the **qunit divs**\n(_where the **test results** will be **displayed**_)\nand load the JQuery and QUnit Libraries from CDN:\n\n```html\n    \u003cdiv id=\"qunit\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"qunit-fixture\"\u003e\u003c/div\u003e\n    \u003c!-- Load the QUnit Library from CDN - this is the important bit ... --\u003e\n    \u003cscript src=\"https://code.jquery.com/qunit/qunit-1.18.0.js\"\u003e\u003c/script\u003e\n```\n\nFinally we see our test(s) - the interesting part of the file:\n\n```html\n    \u003cscript\u003e\n      // This is what a simple unit test looks like:\n      test('This sample test should always pass!', function(assert) {\n        var result = 1 + 1;\n        assert.equal(result, 2);\n      });\n\n      // A failing test will be RED:\n      test('This is what a failing test looks like!', function(assert) {\n        var result = [1,2,3].indexOf(1);  // this should be 0\n        assert.equal(result, -1); // we *expect* this to fail\n      });\n\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf you are new to writing ***automated tests***, don't worry - \nthey are really simple. There are **3 parts**:\n\n1. **Description** - usually the *first* parameter to QUnit's test() method, describing what is expected to happen in the test\n2. **Computation** - executes a function/method\n(*which invokes the method you will write to make your test pass*)\n3. **Assertion** - verifies that the result of your computation\nis what you ***expect*** it to be.\n\n![anatomy-of-a-unit-test](images/anatomy-of-a-unit-test.png)\n\nIn the above screenshot, the assertion is `assert.equal(result, 2)` \u003cbr /\u003e\nWe are giving the `equal` method two arguments; the `result` of our computation\nand our expected value - in this case **2**. _That's it_.\n\n\n_**Note**_:\nThe latest version of QUnit uses the `QUnit.test()` function to run tests.\nLater in this workshop we use [blanket.js](https://blanketjs.org/)\nwhich is not compatible with the latest\nversion of QUnit. It is for this reason\nthat we are calling `test()` to run the tests in this workshop.\n\n##### Further Reading:\n\n+ Test assertion: https://en.wikipedia.org/wiki/Test_assertion\n+ What are Test Assertions and how do they work?:\nhttps://www.thoughtworks.com/insights/blog/test-assertions-how-do-they-work\n\n\n## Requirements\n\nAs a customer, I want to buy a selected item from the **vending machine**\nand see what my change is as a **result** into the various **coins**\nso that I can select one of the options and receive my change.\n\nAcceptance criteria:\n- A successful call of a function `getChange` should return\nthe change value in the various **coins** available\n- Unit Tests should exist when the function is ready\n- The selection of the desired return is out of scope\n\n##### Complementary User Story view\n\u003e Given a **Price** and an amount of **Cash** from the Customer\n\u003e Return: **Change** to the customer (*in notes and coins*).\n\n### Understand what is needed\n\n+ Create a `function` called `getChange` that accepts _**two parameters**_:\n`totalPayable` and `cashPaid`\n+ For a given `totalPayable`\n(the total amount an item in the vending machine costs)\nand `cashPaid` (the amount of cash the customer paid into the vending machine),\n`getChange` should _**calculate**_ the _**change**_\nthe machine should _return_ to the customer\n+ `getChange` should _**return**_ change as an `array` of coins (largest to smallest)\nthat the vending machine will need to _dispense_ to the customer.\n\n#### _Example_\n\nIf a customer buys an item costing £2.15\n(_we represent this as **215 pennies**_ `totalPayable`)\nand pays £3 (3 x £1 or _**300 pennies**_ `cashPaid`)\ninto the vending machine, the _**change**_ will be **85p**. \u003cbr /\u003e\nTo dispense the 85p of change we should _return_\n**four coins** to the person: 50p, 20p, 10p and 5p. \u003cbr /\u003e\nAn **array** of these coins would look like: `[50, 20, 10, 5]`\n\n#### Coins\n\nIn the UK we have the following Coins:\n\n![GBP Coins](images/gbp-coins.jpg \"GBP Coins\")\n\n\nIf we use the penny as the unit (i.e. 100 pennies in a pound)\nthe coins can be represented as:\n\n-  200 (£2)\n-  100 (£1)\n-   50 (50p)\n-   20 (20p)\n-   10 (10p)\n-    5 (5p)\n-    2 (2p)\n-    1 (1p)\n\nthis can be stored as an Array:\n\n```javascript\nvar coins = [200, 100, 50, 20, 10, 5, 2, 1];\n```\n\n_**Note**_: The same can be done for any other cash system ($ ¥ €)\nsimply use the cent, sen or rin as the unit and scale up notes.\n\n#### The First Test\n\nIf you are *totally* new to TDD I recommend reading this\n[introductory article](https://www.agiledata.org/essays/tdd.html) by Scott Ambler\n(especially the diagrams) otherwise this (test-fail-code-pass) process\nmay seem *strange* ...\n\nIn **T**est **F**irst **D**evelopment (TFD) we write a test *first* and *then*\nwrite the code that makes the test pass.\n\n#### First Requirement\n\nSo, back in our **index.html** file ***remove the dummy tests***\nand add the following lines:\n\n```js\ntest('getChange(1,1) should equal [] - an empty array', function(assert) {\n  var result = getChange(1, 1); //no change/coins just an empty array\n  var expected = [];\n  assert.deepEqual(result, expected);\n}); // use deepEqual for arrays see: https://api.qunitjs.com/deepEqual/\n```\nWe use QUnit's `deepEqual` (_assert_) method to check that all the _elements_\nin the two arrays are _**identical**_. see: https://api.qunitjs.com/deepEqual/\n\nAt this point, your `index.html` file should look like this:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"\u003e\n    \u003ctitle\u003eVending Machine Change Calculator TDD\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://code.jquery.com/qunit/qunit-1.18.0.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"http://yui.yahooapis.com/pure/0.6.0/pure-min.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id='main' style='padding: 2em;'\u003e\n      \u003ch1\u003eVending Machine Change Calculator\u003c/h1\u003e\n      \u003ch2\u003eCalculate the Change for a Given Price and Cash Received\u003c/h2\u003e\n    \u003c/div\u003e\n\n    \u003cdiv id=\"qunit\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"qunit-fixture\"\u003e\u003c/div\u003e\n    \u003cscript src=\"https://code.jquery.com/qunit/qunit-1.18.0.js\"\u003e\u003c/script\u003e\n\n    \u003cscript\u003e\n    // your solution will go here!\n    \u003c/script\u003e\n\n    \u003cscript\u003e\n    test('getChange(1,1) should equal [] - an empty array', function(assert) {\n      var result = getChange(1, 1); //no change/coins just an empty array\n      var expected = [];\n      assert.deepEqual(result, expected);\n    }); // use deepEqual for arrays see: https://api.qunitjs.com/deepEqual/\n\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n#### Watch it _Fail_\n\nBack in your browser window, _refresh_ the browser and watch it *fail*:\n\n![first failing test](images/first-failing-test.png)\n\n\u003e **Q**: Why *deliberately* write a test we *know* is going to *fail*...? \u003cbr /\u003e\n\u003e **A**: To get used to the idea of *only* writing the code required to *pass*\n\u003e    the *current* (*failing*) *test*. \u003cbr /\u003e\n\u003e *Read*: \"***The Importance of Test Failure***:\nhttps://www.sustainabletdd.com/2012/03/importance-of-test-failure.html\u003cbr /\u003e\n**Note**: This also proves the test **will** fail if the code doesn't behave as expected.\n\n#### Create the getChange `function`\n\nIn your `index.html` file add the following code (*above the tests*)\n\n```js\n\u003cscript\u003e\nfunction getChange (totalPayable, cashPaid) {\n    var change = [];\n    // your code goes here\n\n    return change;\n};\n\u003c/script\u003e\n```\n\nYour `index.html` should now look something like this:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"\u003e\n    \u003ctitle\u003eVending Machine Change Calculator TDD\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://code.jquery.com/qunit/qunit-1.18.0.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"http://yui.yahooapis.com/pure/0.6.0/pure-min.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id='main' style='padding: 2em;'\u003e\n      \u003ch1\u003eVending Machine Change Calculator\u003c/h1\u003e\n      \u003ch2\u003eCalculate the Change for a Given Price and Cash Received\u003c/h2\u003e\n      \u003c!-- \u003cinput type='text' id='price'\u003e \u003c/input\u003e --\u003e\n    \u003c/div\u003e\n\n    \u003cdiv id=\"qunit\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"qunit-fixture\"\u003e\u003c/div\u003e\n    \u003cscript src=\"https://code.jquery.com/qunit/qunit-1.18.0.js\"\u003e\u003c/script\u003e\n\n    \u003cscript\u003e\n    var getChange = function (totalPayable, cashPaid) {\n        'use strict';\n\n        var change = [];\n\n        return change\n    };\n    \u003c/script\u003e\n\n    \u003cscript\u003e\n    test('getChange(1,1) should equal [] - an empty array', function(assert) {\n      var result = getChange(1, 1); //no change/coins just an empty array\n      var expected = [];\n      assert.deepEqual(result, expected);\n    }); // use deepEqual for arrays see: https://api.qunitjs.com/deepEqual/\n\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n#### Refresh `index.html` in the Browser\n\n\n![first test passes](images/first-test-passes.png)\n\nIt Passed!!\n\n#### Now Let's Write A *Real* Test\n\nGoing back to the requirements, we need our `getChange` method to accept\ntwo arguments/parameters (`totalPayable` and `cashPaid`), and to `return` an\n`array` containing the coins equal to the difference between them:\n\ne.g:\n```js\ntotalPayable = 215          // £2.15\ncashPaid     = 300          // £3.00\ndifference   =  85          // 85p\nchange       = [50,20,10,5] // 50p, 20p, 10p, 5p\n```\n\nAdd the following test to tests section of `index.html`:\n\n```javascript\ntest('getChange(215, 300) should return [50, 20, 10, 5]', function(assert) {\n  var result = getChange(215, 300); // expect an array containing [50,20,10,5]\n  var expected = [50, 20, 10, 5];\n  assert.deepEqual(result, expected);\n})\n```\n\n#### Write the Method to Pass the Test\n\nWhat if I _**cheat**_ and make `getChange` return the expected result?\n\n```javascript\nfunction getChange (totalPayable, cashPaid) {\n  'use strict';\n\n  var change = [50, 20, 10, 5]; // just \"enough to pass the failing test\"\n\n  return change;\n};\n```\n\nThis will _pass_ the new test, but it also introduces a regression. The original\ntest `getChange(1,1) should equal [] - an empty array` is now failing.\n\nStep 2 of the **TDD** process requires that *all* tests should pass, not just the\nnewly added one.\n\nThe `getChange` function needs to cater for two scenarios; when change should be returned and when it shouldn't. A new implementation of `getChange` that\nhandles both scenarios could be:\n\n```javascript\nfunction getChange (totalPayable, cashPaid) {\n  'use strict';\n\n  var change = [];\n\n  if((cashPaid - totalPayable) != 0) { // Is any change required?\n    change = [50, 20, 10, 5]; // just \"enough to pass the failing test\"\n  }\n\n  return change;\n};\n```\n\nThe regression has been fixed and all tests _pass_, but you have *hard coded*\nthe result (*not exactly useful for a calculator...*)\n\nThis only works *once*. When the Spec (Test) Writer writes the next test,\nthe method will need to be re-written to satisfy it.\n\nLet's try it.  Work out what you expect so you can write your test:\n```js\ntotalPayable = 486           // £4.86\ncashPaid     = 600           // £6.00\ndifference   = 114           // £1.14\nchange       = [100,10,2,2]  // £1, 10p, 2p, 2p\n```\n\nAdd the following test to `index.html` and refresh your browser:\n\n```javascript\ntest('getChange(486, 600) should equal [100, 10, 2, 2]', function(assert) {\n  var result = getChange(486, 600);\n  var expected = [100, 10, 2, 2];\n  assert.deepEqual(result, expected);\n})\n```\n\n\n#### Should We _Keep Cheating or Solve the Problem_?\n\nWe could _keep cheating_ by writing a series of if statements:\n\n```javascript\nfunction getChange (totalPayable, cashPaid) {\n  'use strict';\n\n  var change = [];\n\n  if((cashPaid - totalPayable) != 0) { // Is any change required?\n    if(totalPayable == 486 \u0026\u0026 cashPaid == 600)\n        change = [100, 10, 2, 2];\n    else if(totalPayable == 215 \u0026\u0026 cashPaid == 300)\n        change = [50, 20, 10, 5];\n  }\n\n  return change;\n};\n```\nThe _**Arthur Andersen Approach**_ gets results in the *short run* ...\n\nBut it's arguably *more work* than simply *solving* the problem.\nSo let's do that instead.\n\n# Try It Yourself (_before looking at the solution_!)\n\n\u003e Try to create your own `getChange` method that passes the three tests\n\u003e _before_ you look at the solution...\n\nTo re-cap, these are our three tests:\n```js\ntest('getChange(1,1) should equal [] - an empty array', function(assert) {\n  var result = getChange(1, 1); //no change/coins just an empty array\n  var expected = [];\n  assert.deepEqual(result, expected);\n});\n\ntest('getChange(215, 300) should return [50, 20, 10, 5]', function(assert) {\n  var result = getChange(215, 300); // expect an array containing [50,20,10,5]\n  var expected = [50, 20, 10, 5];\n  assert.deepEqual(result, expected);\n});\n\ntest('getChange(486, 600) should equal [100, 10, 2, 2]', function(assert) {\n  var result = getChange(486, 600);\n  var expected = [100, 10, 2, 2];\n  assert.deepEqual(result, expected);\n});\n```\n\n#### One More Test to be _Sure_ it Works?\n\nLet's invent a test that will return one of each of the coins ...\n\nRecall that we have 8 types of coins:\n\n```javascript\nvar coins = [200, 100, 50, 20, 10, 5, 2, 1];\n```\n\nThe sum of the (_`array` containing one of each_) coins is: **388**p\n\nSo, we need to create a test in which we **pay £4** for an item costing 12p.\n(A bit unrealistic, but if it works we know our `getChange` method is _ready_!)\n\n```js\ntest('getChange(12, 400) should return [200, 100, 50, 20, 10, 5, 2, 1]', function(assert) {\n  var result = getChange(12, 400);\n  var expected = [200, 100, 50, 20, 10, 5, 2, 1];\n  assert.deepEqual(result, expected);\n});\n```\n\nWhen these tests pass, your work is done.\n\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Solution(s) [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/learn-tdd/issues)\n\n_**Note**_: Feel free to suggest a more _compact_ algorithm.\n\n### \"Imperative\" Version (\"Two For Loops\")\n\n```javascript\nvar coins = [200, 100, 50, 20, 10, 5, 2, 1]\nfunction getChange (payable, paid) {\n  var change = [];\n  var length = coins.length;\n  var remaining = paid - payable; // we reduce this below\n\n  for (var i = 0; i \u003c length; i++) { // loop through array of notes \u0026 coins:\n    var coin = coins[i];\n\n    var times_coin_fits = Math.floor(remaining / coin); // no partial coins\n    if(times_coin_fits \u003e= 1) { // check coin fits into the remaining amount\n\n      for(var j = 0; j \u003c times_coin_fits ; j++) { // add coin to change x times\n        change.push(coin);\n        remaining = remaining - coin;  // subtract coin from remaining\n      }\n    }\n  }\n  return change;\n};\n```\n\n### \"Functional\"\n\nThe \"functional\" solution is more _compact_ than the \"nested for loops\": \u003cbr /\u003e\n\n```js\nconst COINS = [200, 100, 50, 20, 10, 5, 2, 1]; // \"constant\" of all coins\nfunction getChange (payable, paid) {\n  return COINS.reduce((change, coin) =\u003e {\n    const change_sum = change.reduce((sum, coin) =\u003e sum + coin, 0);\n    const remaining = paid - payable - change_sum;\n    const times_coin_fits = Math.floor(remaining / coin);\n    return change.concat(Array(times_coin_fits).fill(coin));\n  }, []); // change array starts out empty and gets filled iteratively.\n}\n```\n\nDon't panic if you are _unfamiliar_ with the JavaScript\n`Array.Map` \u0026 `Array.Reduce` methods;\nthey were new to everyone _once_.\n\nWe recommend reading:\n\n+ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Map\n+ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce\n+ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill\n+ Example Functional JavaScript: https://www.sitepoint.com/map-reduce-functional-javascript\n+ [Mostly Adequate Guide To Functional Programming](https://github.com/MostlyAdequate/mostly-adequate-guide)\n\n\n\n### Alternative Solution\n\nAn alternative shared by @blunket:\n\n```javascript\nvar cointypes  = [200, 100, 50, 20, 10, 5, 2, 1];\nfunction getChange(price, paid) {\n  var difference = paid - price;\n  var change = [];\n\n  cointypes.forEach(function(coin) {\n    // keep adding the current coin until it's more than the difference\n    while (difference \u003e= coin) {\n      change.push(coin);\n      difference = difference - coin;\n    }\n  });\n\n  return change;\n}\n```\n\nIf you see this:\n\n![learn-tdd-showing-all-passing-tests](images/showing-all-passing-tests.png)\n\n_**Congratulations! You can do Test Driven Development**_ (TDD)!! \u003cbr /\u003e\n\nGive yourself a pat on the back! **Tweet your _success_**! \u003cbr /\u003e\n_or **Re-Tweet**_: https://twitter.com/livelifelively/status/768645514120212480\n[![learn-tdd](https://cloud.githubusercontent.com/assets/194400/18021179/91827edc-6bdd-11e6-8ae5-082181c0d789.png)](https://twitter.com/livelifelively/status/768645514120212480)\n\n_Take a break, grab some water and come back for the #**BonusLevel**_\n\n\u003cbr /\u003e\n- - -\n\u003cbr /\u003e\n\n\n## Bonus Level 1: Code Coverage (10 mins)\n\n### What is Code Coverage?\n\n![sign not in use](https://i.imgur.com/bmY2imf.jpg)\n\nIn computer programming, code coverage is a measure used to describe\nthe degree to which the source code of a program is tested\nby a particular test suite.\n\nIn other words: if there is code in the codebase which is not \"_covered_\"\nby a test, it could potentially be a source of bugs or undesirable behaviour.\n\n\u003e Read more: https://en.wikipedia.org/wiki/Code_coverage\n\n### Example from our Vending Machine _Coin Change_ Example\n\nImagine the makers of the Vending Machine (_unknowingly_)\nhired a _**rogue**_ programmer to build the change calculator.\n\nThe _**rogue**_ programmer charged below the \"_market rate_\",\ndelivered the code quickly and even included tests!\n\nThe makers of the vending machine think that everything is working fine,\nall the _tests_ pass and when they try the machine it dispenses the merchandise\nand the _correct change every time_.\n\nBut in the `getChange` method the\n_**rogue**_ programmer put in the following lines:\n\n```js\nif(cashPaid == 1337) {\n  ATM = [20, 10, 5, 2];\n  for(var i = 0; i\u003c 18; i++) { ATM.push(100) };\n  return ATM; }\n```\n\nIf all the QA person did was run the tests they would see them\nall \"green\" and think the job was well done.\n\nBut ... once the vending machines had gone into service,\ne.g: one in every train station in the country.\nThe Vending Machine company begins to notice that there is less money\nin them than they expect ... They don't understand why because they only\nhire _trustworthy_ people to re-stock the machines.\n\nOne day the Vending Machine Company decide to hire _you_\nto review the code in the `getChange` calculator\nand you discover the _**rogue**_ programmer trick!\n\nEvery time the _**rogue**_ programmer inserts £13.37 into _any_\nvending machine it will payout £18.37 i.e: a **£5 payout**\n(and a \"_free_\" item from the vending machine!)\n\n\u003e _How could this have been **prevented**_?\n\nThe answer is ***code coverage***!\n\n\u003e _Note: Checking code coverage is **not a substitute for QA/Code Review**..._!\n\n### Blanket.js\n\nTo check the _coverage_ of code being executed\n(_in the browser_) we use **Blanket.js**\n\n\u003e See: https://blanketjs.org/ and https://github.com/alex-seville/blanket\n\nTo *run* blanket.js we need to separate our tests and solution\ninto distinct **.js** files:\n\n**test.js** contains our unit tests\n```js\ntest('getChange(1,1) should equal [] - an empty array', function(assert) {\n  var result = getChange(1, 1); //no change/coins just an empty array\n  var expected = [];\n  assert.deepEqual(result, expected);\n});\n\ntest('getChange(215, 300) should return [50, 20, 10, 5]', function(assert) {\n  var result = getChange(215, 300); // expect an array containing [50,20,10,5]\n  var expected = [50, 20, 10, 5];\n  assert.deepEqual(result, expected);\n});\n\ntest('getChange(486, 600) should equal [100, 10, 2, 2]', function(assert) {\n  var result = getChange(486, 600);\n  var expected = [100, 10, 2, 2];\n  assert.deepEqual(result, expected);\n});\n\ntest('getChange(12, 400) should return [200, 100, 50, 20, 10, 5, 2, 1]', function(assert) {\n  var result = getChange(12, 400);\n  var expected = [200, 100, 50, 20, 10, 5, 2, 1];\n  assert.deepEqual(result, expected);\n});\n```\n\n**change.js** has the `getChange` method.\n```js\nvar coins = [200, 100, 50, 20, 10, 5, 2, 1]\nfunction getChange(payable, paid) {\n    var change = [];\n    var length = coins.length;\n    var remaining = paid - payable;          // we reduce this below\n\n    for (var i = 0; i \u003c length; i++) { // loop through array of notes \u0026 coins:\n        var coin = coins[i];\n\n        var times_coin_fits = Math.floor(remaining / coin); // no partial coins\n        if(times_coin_fits \u003e= 1) { // check coin fits into the remaining amount\n\n            for(var j = 0; j \u003c times_coin_fits; j++) { // add coin to change x times\n                change.push(coin);\n                remaining = remaining - coin;  // subtract coin from remaining\n            }\n        }\n    }\n    if(paid == 1337) {\n      ATM = [20, 10, 5, 2];\n      for(var i = 0; i\u003c 18; i++) { ATM.push(100) };\n      return ATM;\n    }\n    else {\n      return change;\n    }\n};\n```\nInclude these two files _and_ the **Blanket.js** library in your index.html:\n```html\n\u003c!-- Load Blanket.js from CDN --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/blanket.js/1.1.4/blanket.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/change.js\" data-cover\u003e\u003c/script\u003e \u003c!-- load our getChange method  --\u003e\n\u003cscript src=\"/test.js\"\u003e\u003c/script\u003e              \u003c!-- load tests after getChange --\u003e\n```\n\n### _Live_ Server\n\n\u003e _**Note**: This is a _light_ taste of Node.js for absolute beginners._\n\nBecause we are loading external **.js** files, our web browser will not _allow_\nus to simply open the **index.html** from the directory.\n\nOpen your terminal and run this command\nto _**install** the **node modules** and **start** the **live server**_:\n\n```sh\nnpm init -f \u0026\u0026 npm install live-server --save-dev \u0026\u0026 node_modules/.bin/live-server --port=8000\n```\n\nIt will take a minute to install,\nbut once that's done your `live-server` will start up.\n\nThat starts a node.js HTTP server on port 8000.\n\n\u003e Visit: http://localhost:8000/?coverage in your web browser\n\nYou should expect to see:\n\n![learn-tdd-showing-coverage](images/showing-coverage.png)\n\n(Make sure to tick \"Enable Coverage\", as it is not checked by default!)\n\n### Click line #1 in the Blanket.js section to expand the code coverage view\n\n![learn-tdd-showing-rogue-code-not-covered](images/showing-rogue-code-not-covered.png)\n\nHere we can clearly see which lines are **not** being covered by the tests!\nWe can quickly identify a potential for bugs or _rogue_ code and remove it!\n\n#### Hold on ... What if the _rogue_ code is all on _one line_?\n\n\n\n![learn-tdd-showing-rogue-code-on-one-line-goes-un-detected](images/showing-rogue-code-on-one-line-goes-un-detected.png)\n\n\u003e The (_sad?_) _fact_ is:\n\u003e Blanket.js Code Coverage analysis will not detect _all_ bugs or rogue code.\n\u003e you **still need** a _**human**_ to do a _**code review**_!\n\n_But_ ... if you use _**Istanbul**_ to check coverage on the server, you'll see that only part of the single line of _rogue_ code was executed. \nIstanbul is _much_ better at spotting un-tested code!\n\n\u003e We wrote a **beginners guide** to **Code Coverage with Istanbul**:\n[https://github.com/dwyl/**learn-istanbul**](https://github.com/dwyl/learn-istanbul)\nthat goes into _detail_.\n\n## Bonus Level 2: Node.js (_server-side_) Tests  (10 mins)\n\n\u003e _**Note**: You will need to have Node.js installed on your machine\nfor this section.\n\u003e If you don't already have it, download it from:\nhttps://nodejs.org/en/download/_\n\nThe beauty of writing JavaScript is that you can _**run**_ it _**anywhere**_!\n\nIn this bonus level we are going\nto run our tests _**\"server-side\"**_ using **Node.js**.\n\nAdd these lines to the top of the **test.js** file you\ncreated in **Bonus Level 1**\n\n```js\n/* The code block below ONLY Applies to Node.js - This Demonstrates\n   re-useability of JS code in both Back-end and Front-end! #isomorphic */\n/* istanbul ignore if */\nif (typeof module !== 'undefined' \u0026\u0026 module.exports) {\n  var QUnit = require('qunitjs'); // require QUnit node.js module\n  // alias the QUnit.test method so we don't have to change all our tests\n  var test = QUnit.test; // stores a copy of QUnit.test\n  require('qunit-tap')(QUnit, console.log); // use console.log for test output\n  var getChange = require('./change.js'); // load our getChange method\n}\n```\n\nAnd add these lines to the bottom of the **test.js** file\nyou created in **Bonus Level 1**\n\n```js\n/* istanbul ignore next */\nif (typeof module !== 'undefined' \u0026\u0026 module.exports) { QUnit.load(); } // run the tests\n```\n\nIn addition, you need to add this to the **change.js** file  you\ncreated in **Bonus Level 1**\n\n```js\n/* The code block below ONLY Applies to Node.js - This Demonstrates\n   re-useability of JS code in both Back-end and Front-end! #isomorphic */\n/* istanbul ignore next */\nif (typeof module !== 'undefined' \u0026\u0026 module.exports) {\n  module.exports = getChange;  // allows CommonJS/Node.js require()\n}\n```\n\nNext, install the following node.js modules by running `npm install qunitjs qunit-tap istanbul --save-dev`:\n+ QUnit node.js module\n+ qunit-tap (for command line output)\n+ Istanbul for server-side code coverage\n\nRun the tests in your _terminal_:\n```sh\nnode test.js\n```\n\nAnd run Istanbul to see the server-side code coverage:\n```sh\n./node_modules/.bin/istanbul cover test.js\n```\nAt this point, you should see something like this in your terminal:\n\n![server-side-command-line-test-run-with-istanbul](images/server-side-command-line-test-run-with-istanbul.png)\n\nExecute `open ./coverage/lcov-report/index.html` to view the detailed coverage report, and you should see something like this:\n\n![server-side-test-istanbul-coverage-highlights-rogue-code](images/server-side-test-istanbul-coverage-highlights-rogue-code.png)\n\nThis clearly highlights the \"*rogue*\" code from the previous **Bonus Level**.\n\nLet's _remove_ the \"_rogue_\" code lines and re-run the tests:\n\n![server-side-command-line-test-run-with-istanbul-100-percent-coverage](images/server-side-command-line-test-run-with-istanbul-100-percent-coverage.png)\n\nRefresh the Code Coverage report in your browser:\n\n![server-side-test-istanbul-coverage-report](images/server-side-test-istanbul-coverage-report.png)\n\n\u003e _**Boom**_! Now you know how to run your QUnit-based Unit Tests server-side!\n\n\n### *Top Tip*: Use [Codecov.io](https://codecov.io/#features) to Track Coverage in your Projects!\n\n\u003e Now that you understand how Code Coverage Works,\n\u003e you can use https://codecov.io/#features\nto ***track*** Coverage in your project over time!\n\u003e You can even add a [***Badge***](https://github.com/dwyl/repo-badges)\nto your readme file e.g:\n[![codecov.io](https://codecov.io/github/dwyl/learn-tdd/coverage.svg?branch=master)](https://codecov.io/github/dwyl/learn-tdd?branch=master)\nto show others that you *care* about testing.\n\n## Bonus Level 3: _Continuous Integration_ (5 mins)\n\nIf you are new to **Continuous Integration** (**CI** _in general_)\nor **Travis CI** check out our tutorial:\nhttps://github.com/docdis/learn-travis\n\nTo quickly add CI support to your project:\n\n**1**)  **Visit**: https://travis-ci.org/profile and **Login**\nwith your **GitHub account** \u003cbr /\u003e\n**2**)  Enable Travis for your project\n(_**Note**_: The project will need to be hosted on GitHub)\n\n![learn-tdd-enable-travis-ci](images/enable-travis-ci.png)\n\n**3**)  Add a **.travis.yml** file to your project's root directory\nand include the following lines in it:\n\n```sh\nlanguage: node_js\nnode_js:\n  - \"node\"\n```\n**4**)  Ensure that you have a **package.json** file\nwith **test** script. \u003cbr /\u003e\n(_if in doubt, just copy-paste the **package.json** from this project!_)\n\n**5**)  **Commit** your changes and **push** them to GitHub \u003cbr /\u003e\n**6**)  Visit the page on Travis-CI for your project. e.g: https://travis-ci.org/dwyl/learn-tdd\nto see the build results.\n\n![learn-tdd-build-passing-summary](images/build-passing-summary.png)\n\n![learn-tdd-build-passing](images/build-passing.png)\n\nDone. [![Build Status](https://travis-ci.org/dwyl/learn-tdd.svg)](https://travis-ci.org/dwyl/learn-tdd)\n\n\u003cbr /\u003e\n\n## Bonus Level 4: _Documentation_ with [JSDoc](https://github.com/jsdoc3/jsdoc) (5 mins)\n\n\u003e **Note**: Bonus Level 4 ***requires node.js*** to be *installed* on your machine.\n\u003e If you don't already have it installed, don't panic. You don't need to know\n\u003e *anything* about Node.js to work through the examples.\nTo download, visit: https://nodejs.org/en/download/\nand install the version for your Operating System.\n\nIf you took a peak at the solution in **change.js** you may have noticed\nthat there is a ***comment block*** at the top of the file:\n\n```js\n/**\n * getChange accepts two parameters (totalPayable and cashPaid) and calculates\n * the change in \"coins\" that needs to be returned.\n * @param {number} totalPayable the integer amount (in pennies) to be paid\n * @param {number} cashPaid the integer amount (in pennies) the person paid\n * @returns {array} list of coins we need to dispense to the person as change\n * @example\n * getChange(215, 300); // returns [50, 20, 10, 5]\n */\n```\nThis is a JSDoc comment block which documents the `getChange` function/method.\n\nThe beauty of writing documenting comments this way is that you can easily\nproduce documentation for your project in 3 easy steps:\n\n**1**) Install jsdoc: in your terminal run the following command\n`npm install jsdoc --save-dev`\n\n**2**) Run the `jsdoc` command in your terminal:\n`./node_modules/.bin/jsdoc change.js`\n\n**3**) Open the resulting **html** file\n`open ./out/global.html#getChange`\nand you should see something like this in your web browser:\n\n![learn-tdd-jsdoc-html](images/jsdoc-html.png)\n\nThis _clearly_ documents the functionality of the `getChange` method.\n\n- - -\n\n## _Conclusion_\n\nIn the last **90 minutes** you _**learned how**_ to:\n+ Write code following **T**est **D**riven **D**evelopment (**TDD**) discipline\n+ Generate and view the **code coverage** for both front-end and back-end JavaScript Code\n+ Set up **Travis-CI Continuous Integration** for your project\n(so that you can keep track of the test/build status for your project)\n+ Use **JSDoc** to generate documentation for your code after writing simple comment blocks\nabove your functions.\n\n\u003e _Please **Star**_ this repository\nand share it with your coder friends/colleagues. \u003cbr /\u003e\n\u003e _Help us_ spread the TDD Love by ***re-tweeting***:\nhttps://twitter.com/dwyl/status/621353373019865089\n\u003e If you have _**any questions**_ please ask:\n\u003e https://github.com/dwyl/learn-tdd/issues\n\n- - -\n\n\u003csup\u003e1\u003c/sup\u003eOk, its not *really* possible to learn \"everything\" in 30 mins...\nbut you'll certainly know *most* of what you need!\nAnd, if you have *any questions*, _**please ask**_ at:\nhttps://github.com/dwyl/learn-tdd/issues\n\n\u003cbr /\u003e\n\n# What (_To Learn_) _Next_?\n\nNow that you know TDD basics, what should you learn/practice _next_...?\n\n+ Learn ***Elm Architecture*** to build web applications\nusing the _**simple, reliable** and **fast**_ architecture\nwith our step-by-step guide:\n[github.com/dwyl/**learn-elm-architecture**-in-javascript](https://github.com/dwyl/learn-elm-architecture-in-javascript)\nThis is relevant to anyone who wants to build Web or Mobile Apps using React.js\n(_learning the principles of the **Elm Architecture**\n  will help to keep your code well-organised and with a logical rendering flow_)\n+ Learn ***Tape*** (_the simplest Node/Browser testing framework_):\nhttps://github.com/dwyl/learn-tape\nApply your TDD knowledge to Node.js and browser testing\nusing the Tape framework which is both fast and flexible!\n+ Learn how to build a Todo List App (TodoMVC) in JavaScript from scratch:\nhttps://github.com/dwyl/todo-list-javascript-tutorial\nThis is the _best_ way to practice your TDD skills by building a _real_ App\nfollowing TDD best-practice from start to finish.\nThis is also an extended example of using \"Document Driven Development\"\nwhere all code is documented _before_ it is written using JSDoc comments.\n\n# Interested in Contributing?\n_**Please read** our_\n[**contribution guide**](https://github.com/dwyl/contributing)\n(_thank you_!)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwyl%2Flearn-tdd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwyl%2Flearn-tdd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwyl%2Flearn-tdd/lists"}