dwyl / learn-tdd Goto Github PK
View Code? Open in Web Editor NEW:white_check_mark: A brief introduction to Test Driven Development (TDD) in JavaScript (Complete Beginner's Step-by-Step Tutorial)
License: Mozilla Public License 2.0
:white_check_mark: A brief introduction to Test Driven Development (TDD) in JavaScript (Complete Beginner's Step-by-Step Tutorial)
License: Mozilla Public License 2.0
Asked by a member of LadiesWhoCode yesterday, but I did not note down her name...
A few of us had trouble getting this to work this morning as we hadn't installed Istanbul globally. It might be worth changing the suggested command to ./node_modules/.bin/istanbul cover tests.js
. This would make it similar to the live-server
command in the previous section.
I can create a PR if you're happy with the change?
According to the QUnit documentation the current way to run a test is like this:
QUnit.test('This sample test should always pass!', function(assert) {
var result = 1 + 1;
assert.equal(result, 2); // just so we know everything loaded ok
});
As opposed to this:
test('This sample test should always pass!', function(assert) {
var result = 1 + 1;
assert.equal(result, 2); // just so we know everything loaded ok
});
Could we update the QUnit script from this (QUnit 1.18.0):
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.18.0.css">
to this (QUnit 2.1.1):
<script src="https://code.jquery.com/qunit/qunit-2.1.1.js"></script>
The examples would also need to be changed.
https://github.com/dwyl/learn-tdd/blame/d9d328b648a023634355e9cb407f2d3ff0dedfc4/README.md#L525-L535
is confusing people ... 😿
We are using Hapi.js as our static server using the directory
handler:
Line 3 in 5b132bf
but when we attempt to upgrade to hapi v9.x
we get:
Error: Unknown handler: directory
full stack trace:
/Users/n/code/learn-tdd/node_modules/hapi/node_modules/hoek/lib/index.js:723
throw new Error(msgs.join(' ') || 'Unknown error');
^
Error: Unknown handler: directory
at Object.exports.assert (/Users/n/code/learn-tdd/node_modules/hapi/node_modules/hoek/lib/index.js:723:11)
at Object.exports.defaults (/Users/n/code/learn-tdd/node_modules/hapi/lib/handler.js:105:14)
at new module.exports.internals.Route (/Users/n/code/learn-tdd/node_modules/hapi/lib/route.js:48:35)
at internals.Connection._addRoute (/Users/n/code/learn-tdd/node_modules/hapi/lib/connection.js:359:17)
at internals.Connection._route (/Users/n/code/learn-tdd/node_modules/hapi/lib/connection.js:351:18)
at internals.Plugin._apply (/Users/n/code/learn-tdd/node_modules/hapi/lib/plugin.js:497:14)
at internals.Plugin.route (/Users/n/code/learn-tdd/node_modules/hapi/lib/plugin.js:470:10)
at Object.<anonymous> (/Users/n/code/learn-tdd/static-server.js:3:8)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
13 Aug 19:11:49 - [nodemon] app crashed - waiting for file changes before starting...
The function under this headline "Keep Cheating or Solve the Problem?" references C.coins twice... I think the C should not be there...
Hi @nelsonic!
@finnhodgkin and I are mentoring Testing Week so we're currently going through all the workshops we did.
We're going to be switching from QUnit to Tape (as per this proposal), so we need to re-work lots of the existing material.
We love this workshop and think it's a great resource as it is, so we wouldn't really want to change it. The vending machine change challenge fits TDD really well, so we'd love to keep using the concept.
We're wondering if you'd be happy with us creating a new workshop inspired by this one, but trimmed down and using Tape instead?
Nodemon is not required for running static-server
as we don't have to reload server when HTML changes. Adding it introduces additional complexity into the guide. Perhaps we should drop it?
Everything will work just fine with running node static-server.js
.
JSDoc and Istambul generate static HTML files, so refreshing browser is enough to see changes.
See Bonus Level 2! 😜
Hi,
When I tried to install jsdoc by your instructions, it did not work. No html file was generated, and nothing happened when I tried to execute the subsequent commands. I believe that it has been replaced by jsdoc3. Please update this!
Hi Guys! Awesome work with this tutorial.
I'd just like to report this little typo in the second test case, which occours on sections Try it Yourself and Blanket.js:
The line
test('getChange(486, 500) should equal [100, 10, 2, 2]', function(assert) {
Should be
test('getChange(486, 600) should equal [100, 10, 2, 2]', function(assert) {
I'm going to submit a PR.
Should we include a section on running the tests server side?
(thus facilitating running these on Travis-CI)
Hi @nelsonic, in the TDD tutorial when you are writing the First Requirement dummy test. you have some code under "your index.html should now look like this:” In here the test has a function without assert being the argument.
So if one was to copy the code and then run the html file in the browser, it would fail with ReferenceError: assert is not defined.
To help people who have found the tutorial useful spread the word we should include a sample tweet to make it as _easy as possible.
https://twitter.com/livelifelively/status/768645514120212480
Has anyone got a better tweet we can use?
The following link is dead:
Create a file called static-server.js and paste the code from learn-tdd/static-server.js into the file.
5 minute bonus level?
Tidy up the code and jshint it?
Sorry guys made a commit by accident to master (thought I was in a fork) 😖 , will try and revert this.
The "What Next?" section of this
tutorial currently points to more testing-related tutorials:
https://github.com/dwyl/learn-tdd/tree/e47f1636bee3cba40d8c89f5755c4275fd0bc8d2#what-to-learn-next
The "Learn Elm Architecture" tutorial: https://github.com/dwyl/learn-elm-architecture-in-javascript
helps people practice the TDD skills/workflow while learning something else
I suggest we add a link to it so people can continue
practicing.
In the tutorial, in the coin section, there should be an image showing the coins used in the UK (labeled "GBP coins"), but it's a dead link. It points here, which you'll see returns "not found."
In the markdown, the image link is https://raw.githubusercontent.com/nelsonic/learn-mocha/master/images/gbp-coins.jpg. It appears that the repository at nelsonic/learn-mocha might have been moved to dwyl/learn-mocha, so the image link should be updated to https://github.com/dwyl/learn-mocha/blob/master/images/gbp-coins.jpg.
Does not affect any of the code or running of this tutorial.
but the badge looks really bad for people's _perception_:
https://david-dm.org/dwyl/learn-tdd#info=devDependencies
Not that there's much code to check, but just to give people an idea of what badges to look for...
I think dwyl's daydream and nightmare tutorial for automated testing would be very useful to add to the 'What to learn next' bullets.
Currently there is only a link to a Nightwatch tutorial for automated testing (alongside links for other testing types ie. test coverage/ node testing).
Do people think it's clearest to only suggest one automated testing resource rather than two? By this I mean Nightwatch vs Daydream and Nightmare (coupled together as a pair).
I think Daydream and Nightmare have the obvious advantage of being technically easy to implement which also helps to save time. Are there any specific benefits for suggesting Nightwatch (if so perhaps it would be good to add them to the description so readers can make an informed decision)?
Bonus levels 2 & 3 Require Node.js, this is assumed but not mentioned explicitly.
No idea why this is not working... need to investigate which versions are compatible.
Here are a few suggested corrections of typos and/or clarifications!
I fixed the typos as I went along so I have these in a file (stupidly I forgot to fork and just cloned - so used to working on organisation documents!! 😳 Happy to PR these in later today from a fork). I made the stuff below that I didn't change in that file bold so you can see what they are straight away.
atom index.html
" ➡️ suggest adding (which creates and opens the file in the Atom text editor if you have it installed)--save-dev
, get to this line and think they've done it all wrong:
rather than a .
No one has any excuse not to do Test Driven Development (TDD) in their Web App anymore!
Need to explain the anatomy of a test.
Hi,
When I typed npm install qunitjs qunit-tap istanbul --save-dev
in the command line, and then typed istanbul cover test.js, I got zsh: command not found: istanbul
. However, when I typed node test.js, everything was fine. I already had Node installed, but did not have istanbul installed. This was my first attempt to do so. Is there a step missing here in the instanbul installment process? Also, fyi, you failed to tell people to npm init to create their package.json file. Perhaps you should include that. Also, not everyone has Node.js installed. At least direct them to where they can learn how to install it if they don't already have it installed. Otherwise, thanks so much for this intro to TDD!
Hi any plans for TTD in Ruby for beginners as well? 😄
How about adding standard-js as a Bonus feature as well.
Following JS Standards from standardjs
and getting that StandarJs Following badge for consistency.
❇️ ❇️ ❇️ ❇️ ❇️ ❇️ ❇️
Codecov is clearly _betterer_ than the previous coverage tracker...
@stevepeak wouldn't you agree...? 😜
As a person who is
new
to the DWYL Org/Community 🆕
I need to know how to contribute to the project effectively 💭
so that I can start my journey towards Doing What I Love with my Life! ❤️ ✅ 😂
Markdown:
_**Please read** our_
[**contribution guide**](https://github.com/dwyl/contributing)
(_thank you_!)
Note: these are line-separated but in the actual rendered page it's all one line.
see: https://github.com/dwyl/contributing/blob/master/CONTRIBUTING.md
Should we be encouraging people to use JSDoc?
var result = [1,2,3].indexOf(1); // this should be 1
should be
var result = [1,2,3].indexOf(1); // this should be 0
Came across https://github.com/jmonetti/tdd-for-humans today and slide #10
reminded me that we don't have a particularly good "User Story" in the Practical > Requirements section of this tutorial ... https://github.com/dwyl/learn-tdd#requirements we can do a much better job of getting people in to the habit of writing user stories ...
For reference this is the slide:
This format of slotting in the Who
, What
and Why
makes it very clear to people.
At the end of the readme, should we add a "_What Next?_" section so people know what they should learn next.
tidy up the readme and correct typos
function getChange(totalPayable, cashPaid) {
var change = [];
var remaining = cashPaid - totalPayable;
while (remaining > 0) {
for (i = 0; i < coins.length; i++) {
if (remaining >= coins[i]) {
change.push(coins[i]);
remaining = remaining - coins[i];
i = i - 1;
}
}
}
return change;
};
Could we display this more visually to be more engaging for people?
The photograph used to illustrate a 'consistent and beautifully illustrated team' shows the Ferrari F1 pit crew in 2008. Given that the pit crew cost Felipe Massa the championship that year by failing to remove the fuel hose from his car during a refuelling stop at the Singapore GP, it may be worth using an image of a different pit crew. Red Bull are a safe bet.
Any particular reason why the getChange
function was assigned to a variable? (I'm more used to the function getChange()
way of defining JS functions.)
What does use scrict
do, in small words?
At present we are advising people to install live-server
: https://github.com/dwyl/learn-tdd#live-server
but if they do not have a package.json
in their working directory the --save
will fail and thus it will not start! we need to check this and add additional instructions as necessary...
See: https://david-dm.org/dwyl/learn-tdd#info=devDependencies
Need to update Hapi.js to Latest and remove codeclimate reporter
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.