Adrian Moisa
Adrian Moisa

Reputation: 4373

How to setup a basic Javascript test using Jasmine 2.4.1 (standalone)?

This is the first time I'm trying to write tests. I have installed jasmine 2.4.1 inside my project using bower:

bower install jasmine --save

As a result this is what I have in my libs folder

enter image description here

I just can't figure out what to do next in order to setup specRunner.html. All the tutorials I found online are focused on previous versions of jasmine, which seem to have the specRunner.html file and a slightly different package structure. The install instructions I found on github are outdated, dating back to version 2.0.0. Also no luck on finding useful info on the github page

What am I suposed to do next to get the most basic of tests running?

Upvotes: 3

Views: 1564

Answers (3)

Rich Rein
Rich Rein

Reputation: 81

As you already noted, there appears to have been an issue with the example in the project readme (things hard-coded to version 2.0.0, which appears to have changed in subsequent releases without the documentation being updated) - but you didn't contribute to the project by correcting the issue for those who come after you? I have made edits based on what you found, and submitted the pull request to the project here: https://github.com/jasmine/jasmine/pull/1319

Upvotes: 1

Jeremy
Jeremy

Reputation: 3538

I had a similar frustrating start to Jamsine 2.4 recently. It is like the authors expect you to just know how to get started. Anyway here is what I worked out myself...

  1. Download the zip file of the latest 2.4.x release, I used 2.4.1.
  2. Unzip it into your project appropriately. I unzipped it into my test folder under a framework folder...

    {projectRoot}/test/framework/jamsmine/{unzippedContentHere}

  3. One of the files extracted is called SpecRunner.html. Open this and take a look, it has all the imports you need and should give you enough information to either use this runner or write your own. Here is the head of the version I unzipped...

<head>

  <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.4.1/jasmine_favicon.png">
  <link rel="stylesheet" href="lib/jasmine-2.4.1/jasmine.css">

  <script src="lib/jasmine-2.4.1/jasmine.js"></script>
  <script src="lib/jasmine-2.4.1/jasmine-html.js"></script>
  <script src="lib/jasmine-2.4.1/boot.js"></script>

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

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

</head>

Upvotes: 4

Adrian Moisa
Adrian Moisa

Reputation: 4373

Finally found the solution (hooray, six hours lost). I was supposed to change jasmine-2.0.0 to jasmine-core. Ok, no problem with that, but at least this could have been mentioned inside README.md somewhere. Not to say that there's no clue where to put the specs scripts and sources. It may be obvious for anyone who used jasmine previously, but not to a newcomer. You know, usually when you open a library, the documentation has clear cut steps on how to proceed.

From jasmine guide:

Add the following to your HTML file:

<link rel="shortcut icon" type="image/png" href="jasmine/lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="jasmine/lib/jasmine-2.0.0/jasmine.css">

<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/boot.js"></script>

So enough complaining, here's what worked:

<!doctype html>
<html>
    <head>
        <title>Jasmine Spec Runner</title>
        <link rel="stylesheet" href="../libs/jasmine/lib/jasmine-core/jasmine.css">
    </head>
    <body>
        <script src="../libs/jasmine/lib/jasmine-core/jasmine.js"></script>
        <script src="../libs/jasmine/lib/jasmine-core/jasmine-html.js"></script>
        <script src="../libs/jasmine/lib/jasmine-core/boot.js"></script>

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

        <!-- include spec files here... -->
        <script src="test.js"></script>
    </body>
</html>

Upvotes: 1

Related Questions