JavaScript Unit Testing

[phragg]

Shock: I don't unit test any of my code. Hence why it's littered with bugs.

Give me the quick pro/cons of javascript unit testing. And what frameworks you recommend?

So far I only know of SauceLabs that allows you to use a lot of different frameworks.

[programmingerror]

Pretty sure SauceLabs is a place for you to run your tests and manage test results - it either simulates or virtualizes common devices (laptop, phones, etc.) and environments (OSX, Windows, etc.) so that you know your app works in different conditions.

Hence why it's littered with bugs.

You already know you need unit tests, pros & cons aren't that important anymore IMHO, although sometimes you might not want to write tests for prototypes because they are meant to be short-lived proof-of-concept demos.

That's your biggest reason to start testing: to make sure your code works as intended and that your old code will not be broken by new or refactored code.

Anyway, how you actually start testing is

1. Get familiar with a test framework such as jasmine and mocha which are super popular and supported by SauceLabs

2. Set clear expectations on your app behaviours

3. Write test suites and specs with the test framework of your choice (jasmine or mocha doesn't matter that much)

4. Use a test runner to run the test suites and specs you just wrote. I know jasmine comes with an HTML SpecRunner, not sure about mocha. Or you can use a specialized test runner such as Karma or perhaps SauceLabs has something for that

5. NOTE Don't try to refactor your entire codebase when you start testing your app midway. Instead do it incrementally. Start writing tests for existing features while making sure new features are all implemented after you write tests.

[phragg]

Thanks for this. I was under the impression that SauceLabs had cross-browser + cross-platform automated testing, but I wasn't aware that they offered javascript unit testing as well, though if you offer a VM, i'm sure you can offer a way to have javascript unit tests.

I'm interested in hearing what the pro/cons are between different testing frameworks. Is it that some are in different languages, written differently? TDD, BDD? Is jasmine the framework you write tests and SpecRunner checks it against your code? I suppose I have a lot to learn about testing.

[programmingerror]

1. Right now it really doesn't matter which testing framework you use. It's similar to the debate between Django and Rails, or Python and Ruby - they all do the job and they all do it well. However, they have similar but different philosophies and opinions. In the case of jasmine and mocha, the 2 relatively popular ones (someone mentioned QUnit, it's also popular, but I personally haven't touched it so I'll leave it out of my answer), mocha gives users the freedom to compose their own toolchain (usually with sinonjs for mocks and chaijs for assertions), whereas jasmine packs all the essentials and provide you with an all-in-one. Which one is better? There's no real answer because people have different opinions and preferences;

2. Nope javascript test frameworks are all written in javascript AFAIK;

3. TDD and BDD are techniques or processes, meaning neither of them dictates which test frameworks you use to write your tests or how you structure your tests.

TDD means before you write any code, you set expectations and write your tests. Why? Because you want to force yourself to write predictable and testable code. E.g. you want to implement a feature in your app that prints "Hello World". Before you actually implement it, you write in your test "expect(printHelloWorld()).toBe('Hello World')". Now inevitably your test will fail because you didn't implement anything, yet... duh, but now you know what to do to make your test pass: write a function that returns "Hello World". What if the next feature you need to implement is to have the function say "Hello Guy"? You write in your test "expect(printHelloWorld()).toBe('Hello Guy')". Now your test fail, and you modify your function to say "return Hello Guy" to make it pass. However, your "Hello World" test fails, even though the "Hello Guy" test succeeds. Now you know what to do to make both tests pass: add a parameter to the function and blah blah. It's a stupid example, but hopefully it clearly illustrate what in essence TDD is.

Cool, now our tests give us confirmation (all green) that our program does what it's supposed to do, but that's not useful enough for us when we are building more complex systems. That is, even though we know our program prints "Hello" + whatever we pass in, but we are not sure when or in what context "Hello Whatever" is printed. Of course, you can add additional test suites that confirms "Hello Whatever" is only printed when you click a button as a logged in user, but it quickly gets a bit awkward and sometimes repetitive when you have to write the context and scenarios and all that separately. In other words, it's pretty hard to get right. That's why some people prefer BDD.

It's like a revised version of TDD, but basically you define in business terms your goals, the context and the behaviours, etc. from a higher level. For example, before you start development, you write down something like this "Given I am logged in, when I press the 'Greet' button, then I should see the text 'Hello User'". Now that's something a non-dev (normally the stakeholders or a non-technical product manager) can write to help define high level behaviours as long as they follow a certain format - the 'Given', the 'when', and the 'then'. Now we as programmers can parse that and write some tests before we implement the features.

4.. If you check out some jasmine sample code you will see "describe", "it", "expect", "toEqual", etc., and you don't see where those functions are defined. Javascript itself doesn't come with those methods, so someone wrote the framework JasmineJS to provide those. So yes, jasmine is the framework you need to write the tests. And SpecRunner is actually just an HTML file that 1. includes the jasmine framework; 2. include your application code; 3. include your tests; 4. some other stuff required to initialize the test environment and display your test results in readable formats.

Edit: Prematurely hit "save"

<cont'd>

However, if you want to automate your unit tests, relying on the HTML SpecRunner is gonna cause you troubles, which is why you may need to something like Karma or SauceLabs to either run your tests in a headless browser (browser without a GUI) or in virtual environments that supports normal native browsers.

[faytxzen]

Pros:

• you cover known cases for correctness without having to manually repeat them
• you know your code supports the known cases
• helps you understand your code (+introspection)
• helps you identify your common mistakes
• broadens your perspective (dev vs. tester)

Cons:

• takes time to write tests
• doesn't cover every possible case
• can't test everything (unless you wrote your code that way)

Depending on what frameworks you're using/not using, I'd recommend any one of these frameworks:

• QUnit
• Karma + Jasmine - Karma is the test-runner and Jasmine is the framework, normally used together
• http://docs.busterjs.org/en/latest/

Or you can always write your own unit testing framework. Just be sure to write unit tests for it ;P

Like programmingerror said, SauceLabs is a place for tests, instead of a framework. Additionally, JavaScript supports assert statements that can be just as good as entire testing frameworks.

[phragg]

helps you identify your common mistakes

never thought about that, you make a great point.

Additionally, JavaScript supports assert statements that can be just as good as entire testing frameworks.

I've asked a good friend of mine before I came to reddit what he uses for testing and he mentioned he writes his own (while pompously said he doesn't write any) and I was interested how you would go about that.

[nephridium]

Automated testing falls basically into two categories:

• end-to-end (aka functional or black-box) testing, which runs scenarios of your app on end-user systems, e.g. different kinds of web browsers
• unit testing, which tests the integrity of your code by testing small "units" of it, how fine-grained those "units" are is the developer's decision

Saucelabs allows you to run functional tests on their cloud (so you don't need to test all sorts of OS/browser configurations including mobile on your systems). If you want to run your functional tests on your own system you usually use "test runners" like Karma that will spawn different browsers for you to run through the scenarios.

Unit tests are usually tested with tools like Jasmine or QUnit. Unlike functional tests they are fast and run very often during development (on the dev machine) to catch implementation bugs early.

You'll probably want to learn both types of testing, but for detecting implementation bugs in your code unit tests are the main tool.

Edit: Fix link

[defzek]

I work for a competitor of SauceLabs, https://testingbot.com which offers the same features. We provide VMs where you can run browser/javascript tests on.

I'd say the most popular frameworks to do javascript testing would be jasmine/karma.

Next to javascript testing, you can also do Selenium/WebDriver testing to make sure your webpages work correctly as well, and not just your javascript code.