Developing on Staxmanade

Using script=module to Quicky Spike Some Mocha Tests

(Comments)

I'll be honest, I secretly hoped JSPM would win the front end over and become our standard, and while I haven't truly followed it closely in the last year or so I recently tried this out and was blown away at how beautifully simple it is (at least on the surface).

Say I want to quickly run some Mocha test in a browser. Like say I'm spiking something, wanting to use tests in something like jsbin or plunkr and just get code running quickly.

Most browsers now support tye script=module tag which allows you to use import statements withing browser script tags. O_O

So how could I use this to import mocha and write some quick tests? I'm so glad you asked.

  1. Mocha's browser U.I. looks for an element with id=mocha so let's add that.
<!DOCTYPE html>
<html>
<body>
+  <div id="mocha"></div>
</body>
</html>
  1. now let's add some javascript to import mocha
<!DOCTYPE html>
<html>
<body>
  <div id="mocha"></div>
+  <script type="module">
+    import "https://dev.jspm.io/mocha"
+    console.log("Mocha:", Mocha);
+  </script>
</body>
</html>

This package is loaded using the import functionality built into our browsers now and JSPM which allows us to load some npm packages right through the browser. MAGIC!

WARNING: DO NOT do this for a production-type environment. This is just a quick prototype tool leveraging JSPM's dev hosted servers that allow us to use import to load packages via NPM through their servers. Thank you JSPM.

  1. Now we can do some browser-specific steps to get mocha to run.
<!DOCTYPE html>
<html>
<body>
  <div id="mocha"></div>
  <script type="module">
    import "https://dev.jspm.io/mocha"
-    console.log("Mocha:", Mocha);
+    mocha.setup('bdd');
+
+    mocha.run();
  </script>
</body>
</html>
  1. Let's add some tests.
<!DOCTYPE html>
<html>
<body>
  <div id="mocha"></div>
  <script type="module">
    import "https://dev.jspm.io/mocha"
    mocha.setup('bdd');

+    describe("some awesome tests", function () {
+        it("Should pass", function (){
+            console.log("passing test");
+        });
+        it("Should fail", function (){
+            throw new Error("OH NO!!!");
+        });
+    });

    mocha.run();
  </script>
</body>
</html>

THAT'S IT - using almost nothing but our browser's capabilities (and maybe a complicated JSPM back-end tool) we can easily write some in-browser tests to spike something, or just play around.

  1. But wait - this looks like meh

That's true, let's bring in some styles

<!DOCTYPE html>
<html>
<body>
  <div id="mocha"></div>
+  <link rel="stylesheet" href="https://dev.jspm.io/mocha/mocha.css">
  <script type="module">
    import "https://dev.jspm.io/mocha"
    mocha.setup('bdd');

    describe("some awesome tests", function () {
        it("Should pass", function (){
            console.log("passing test");
        });
        it("Should fail", function (){
            throw new Error("OH NO!!!");
        });
    });

    mocha.run();
  </script>
</body>
</html>

NOTE: Prob better to use a CDN version instead of pounding JSPM servers (sorry).

Final


<!DOCTYPE html>
<html>
<body>
  <div id="mocha"></div>
  <link rel="stylesheet" href="https://dev.jspm.io/mocha/mocha.css">
  <script type="module">
    import "https://dev.jspm.io/mocha"
    mocha.setup('bdd');

    describe("some awesome tests", function () {
        it("Should pass", function (){
            console.log("passing test");
        });
        it("Should fail", function (){
            throw new Error("OH NO!!!");
        });
    });

    mocha.run();
  </script>
</body>
</html>

Cake!

I've done this a few times lately, and am almost able to do it without looking up api and syntax O_O. I also don't need webpack, gulp, servers, or anything but a wee-bit of html/js and some luck (that JSPM servers will hang in there).

Happy Testing!

Comments