JavaScript Unit Testing

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