A simple and lightweight tool to perform simple unit-testing and visualize it into your browser.
-
Clone this repository to your local machine and place
assert.jsandassert.csswherever you are feeling comfy to place it; -
Add the
<script>into the<head>of your HTML page:<script src="path/to/assert.js"></script> -
Link your page to
assert.cssstylesheet, in<head>as well:<link rel="stylesheet" href="path/to/assert.css"> -
OR you can use CDN with those links:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alexnaidovich/[email protected]/assert.min.css">
<script src="https://cdn.jsdelivr.net/gh/alexnaidovich/[email protected]/assert.js"></script>-
Add a
<div class="assert">into your HTML body, and specify thisdivwithid:<div class="assert" id="my-test"></div> -
Then you are to link your test with
divcreated above. In your script store a variable that containsnew Assert()and pass theidofdivcreated above as first argument, and the name (heading) of your test as second one:let testAssert = new Assert('my-test', 'Test Assertion'); -
Now you're completely ready to perform tests! Use
.assert()method with two arguments to the variable you've stored above. At the first{Boolean} statementargument you are to compare the returned value of function (or expression) you are testing with the value expected. And as the secondmessageargument you pass a{String}with ongoing message:testAssert.assert((yourFunc(yourArgs) === expectedValue), 'Returns true value!'); testAssert.assert((yourFunc(yourArgs) === notExpectedValue), "Doesn't return false value!"); testAssert.assert((2 + 2 === 4), "Simple Expression Test That Passes"); testAssert.assert((2 + 2 !== 4), "Simple Expression Test That Fails");
In your browser it is going to result in something like this:
There is the way I've tested the workability of this all:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="assert.css">
<script src="assert.js"></script>
</head>
<body>
<div class="assert" id="sum"></div>
<script>
const sum = (a, b) => a + b; // the function to test; the same as " function sum(a,b){return a+b} "
let sumAssert = new Assert('sum', 'Test Sum Function');
sumAssert.assert((sum(2, 2) === 4), 'Returns 4 - true value!');
sumAssert.assert((sum(2, 2) === 5), "Doesn't return false value!");
sumAssert.assert((2 + 2 !== 4), "Simple Expression Test");
</script>
</body>
</html>// FIXMEWhen you use your tests a lot of times at one and the same HTML page, you are going to meet an unpleasant thing: you are overflowing the scope. It probably will make a mess with variable names (especially, when you store the new variable with the name you've already used). Plus, it is going to make you some troubles while debugging. It looks like this (pay attention to the "Scopes" bar at the right side of browser):
The problem is about to be solved when you close the scope. One of the ways to do that is to wrap all your JS code of current test into IIFE (Immideately Invoked Function Expression). The way to do this:
<!-- rezig-test01 -->
<div class="assert" id="rezig1"></div>
<script>
(function () { // ES5 way
let text = "Domo Arigato!"
const useless = ninjaCallback => ninjaCallback();
let ninja001 = new Assert('rezig1', 'Useless Ninja Callback Test');
ninja001.assert(useless(() => text) === text, "The useless function works! " + text)
})();
</script>
<!-- fillarr test -->
<div class="assert" id="fill-arr"></div>
<script>
(() => { // ES6 way
let arr = new Array(5).fill('content');
let arrTest = new Assert('fill-arr', 'Filling New Array');
arrTest.assert(arr[2] === 'content', 'That works fine - you filled array made by constructor in one line!');
})();
</script>Look at the scopes bar now:
I tagged this issue as // FIXME because I still don't know how to make it more convenient for you. Wrapping your test into IIFE really works, but it means more of typing. I am thinking over how to redo that for the case of speed and convenience, and if you have ideas for that, please PR.
For now, the only thing I can offer in this case, is... (see below)
(definitely not a PRO tip)
You can bind a snippet to call everything you need by one trigger-combo-word! I use "Brackets" IDE and Brackets Snippets extension for that. I've heard, it is easy to bind a snippet for Sublime Text. And I'm sure about the other popular IDEs can offer this option.
You are absolutely free to use it without any restrictions! If there is anything you want to change, please PR.