Jasmine: also has a CDN version

Such that you could stick this in a template, and not bother about downloading the artefacts:

JasmineCdn01.PNG


June 8 2016 However, there was a bit of a fatal flaw: Jasmine having a CDN is fine… but the Angular Mocks library is harder to find as a CDN artefact. This is the one I found and currently works:

The whole thing…

And how that appears when all the tests fail…

The page as text:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Jasmine as a UI</title>

        <!-- ensure that all the Jasmine files come before all the Angular files... -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css"></link>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script>

        <!-- ensure that you include the core Angular file... -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.js"></script>

        <!-- before you reference the Angular mocks file -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular-mocks.js"></script>

        <!-- include source files here... -->
        <script src="NamesApp.js"></script>

        <!-- include spec files here... -->
        <script src="NamesApp.spec.js"></script>

    </head>

    <body>
    </body>

</html>



Advertisements

Gulp and Karma: simple example

Summary: The “editor” (VSC) runs Gulp as a task manager. On a watched file change, Gulp calls Karma (the test runner). Karma calls Jasmine (the test framework).

My first steps getting to grips with Gulp. Gulp is a task runner, and as I edit code in Visual Studio Code (VSC), I want Gulp to watch for file changes, and to get Karma (which is a test runner) to re-execute the test (in Jasmine), if there is any change to the Code Under Test. This is an abuse of VSC, as it is intended to be a lightweight editor, with Visual Studio Full Fat being more appropriate to this kind of heavy lifting. Whatever.

There are useful examples on GitHub of a GulpFile.js, and some Motivation here.

For getting started, I’m just testing for equality 2 literals, “Black” and “White”… because failure you can control is more instructive than success first time.

VSC has a folder-based project. In that project are js files. For this POC, those js files are a single spec.js file with a simple “black equals white” test, and no dependency on other code, that is, this is a self-contained test in a single spec.js file.

From within VSC, you configure the task runner by pressing F1, looking e.g. for the string ‘Task’ and then selecting ‘Configure Task Runner.’ This creates (or loads an existing) tasks.json file. My current one looks like this (based on the GitHub example above):

My karma.conf.js (I have set the logLevel to the more verbose LOG_DEBUG from the default LOG_INFO; the xSpec.js is just to ensure that I only get a single file):

TasksJson02

My gulp.js:

TasksJson03

and my single file under test, which this for a success:

TasksJson04.PNG

and this for a failure (yes, I know I’m not doing what is in the It clause):

TasksJson05.PNG

As I change the toEqual value, then Gulp is watching, and kicks off the test again, giving respectively ref the above tests (see the Watcher kick in):

and

 

Jasmine: short example

I downloaded the standalone version of Jasmine (referenced a year back). When you run SpecRunner.html, the html just magically executes the steps.

Getting Karma working

I know I’ve talked about this before, but just some screenshots to get to the starting point for the AngularphoneCat application.

Jasmine and JSLint: variable used before being declared

In the driving-me-nuts category…

Using Brackets to create and edit my Jasmine and JavaScript pieces has been going well. We also have the satisfaction of knowing that JsLint is by default checking that we are being as tidy as we can with JavaScript. For example:

JsLint01

Fix that:

JsLint02

Schweet: no more JSLint error.

If we now look at that in the Jasmine context…

JsLint03

Apart from [Calc2], all of these are part of the Jasmine framework. Googling various combinations of Jasmine, JSLint, JSHint, globals, etc, yielded nothing in answers that meant anything to me, and that actually worked for me. What am I actually looking for? A setting either in the Brackets settings json file, or a jshint or jslint settings file that says: “this set? ignore any global / early definition errors.” Sure I’m a noob to JS, and if I knew more I would know how to sort that. Right now I don’t know, so I’m reverting to what feels like a hack… possibly because this wouldn’t be allowed in the strongly typed world without assignment at the same time:

  • var expect, it, describe, beforeEach, afterEach;
  • var Calc2;

JsLint04

With that in place, a) there are no JSLint errors, and b) the test still runs OK:

JsLint05

PasteBin here here

Jasmine: starting again

Yeah, all got a bit hazy not having touched it in a while. The earlier notes were useful, for reminding me of some gotchas. I’m back to using Brackets for this, which does have the advantage that it spins up its own server, whereas in Visual Studio Code you have to supply your own one, at the moment. It would be interesting to plug this simple stuff into VS Code to see how it compares.

Stuff I hadn’t really thought about before was JSLint – it would be helpful if Brackets actually formatted the code in a JSLint-friendly way: again, something it would be interesting to see how Code compares.

This is what I stripped the SpecRunner back to, from the supplied examples, which are now up to Jasmine version 2.3.4.

SpecRunner01

Before I just blindly post the rest of the screenshots, here are the snippets in PasteBin: here here  here . And look back in the posts for e.g. [(stuff) is not defined]

ButNowItCantFindIt01 DescribeUsedBeforeDefined01 JasmineSpecRunner01 LintErrors01 MoveParens01 NoJsLintErrorForInvokingParens01 SpecRunner01 UseStrict01 UseStrict02 UseStrict03 UseStrictUseFunctionForm01