making Alert class resetable and adding first tests for it

js/privatebin.js

@@ -1004,12 +1004,7 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
             $statusMessage,
             $remainingTime;
 
-        var currentIcon = [
-            'glyphicon-time', // loading icon
-            'glyphicon-info-sign', // status icon
-            '', // resevered for warning, not used yet
-            'glyphicon-alert' // error icon
-        ];
+        var currentIcon;
 
         var alertType = [
             'loading', // not in bootstrap, but using a good value here
@@ -1253,6 +1248,13 @@ jQuery.PrivateBin = function($, sjcl, Base64, RawDeflate) {
             $loadingIndicator = $('#loadingindicator');
             $statusMessage = $('#status');
             $remainingTime = $('#remainingtime');
+
+            currentIcon = [
+                'glyphicon-time', // loading icon
+                'glyphicon-info-sign', // status icon
+                '', // reserved for warning, not used yet
+                'glyphicon-alert' // error icon
+            ];
         }
 
         return me;

js/test.js

@@ -943,3 +943,93 @@ describe('UiHelper', function () {
     });
 });
 
+describe('Alert', function () {
+    describe('showStatus', function () {
+        before(function () {
+            cleanup();
+        });
+
+        jsc.property(
+            'shows a status message',
+            jsc.array(jsc.elements(alnumString)),
+            jsc.array(jsc.elements(alnumString)),
+            function (icon, message) {
+                icon = icon.join('');
+                message = message.join('');
+                var expected = '<div id="status" role="alert" ' +
+                    'class="statusmessage alert alert-info"><span ' +
+                    'class="glyphicon glyphicon-' + icon +
+                    '" aria-hidden="true"></span> ' + message + '</div>';
+                $('body').html(
+                    '<div id="status" role="alert" class="statusmessage ' +
+                    'alert alert-info hidden"><span class="glyphicon ' +
+                    'glyphicon-info-sign" aria-hidden="true"></span> </div>'
+                );
+                $.PrivateBin.Alert.init();
+                $.PrivateBin.Alert.showStatus(message, icon);
+                var result = $('body').html();
+                return expected === result;
+            }
+        );
+    });
+
+    describe('showError', function () {
+        before(function () {
+            cleanup();
+        });
+
+        jsc.property(
+            'shows an error message',
+            jsc.array(jsc.elements(alnumString)),
+            jsc.array(jsc.elements(alnumString)),
+            function (icon, message) {
+                icon = icon.join('');
+                message = message.join('');
+                var expected = '<div id="errormessage" role="alert" ' +
+                    'class="statusmessage alert alert-danger"><span ' +
+                    'class="glyphicon glyphicon-' + icon +
+                    '" aria-hidden="true"></span> ' + message + '</div>';
+                $('body').html(
+                    '<div id="errormessage" role="alert" class="statusmessage ' +
+                    'alert alert-danger hidden"><span class="glyphicon ' +
+                    'glyphicon-alert" aria-hidden="true"></span> </div>'
+                );
+                $.PrivateBin.Alert.init();
+                $.PrivateBin.Alert.showError(message, icon);
+                var result = $('body').html();
+                return expected === result;
+            }
+        );
+    });
+
+    describe('showRemaining', function () {
+        before(function () {
+            cleanup();
+        });
+
+        jsc.property(
+            'shows remaining time',
+            jsc.array(jsc.elements(alnumString)),
+            jsc.array(jsc.elements(alnumString)),
+            'integer',
+            function (message, string, number) {
+                message = message.join('');
+                string = string.join('');
+                var expected = '<div id="remainingtime" role="alert" ' +
+                    'class="alert alert-info"><span ' +
+                    'class="glyphicon glyphicon-fire" aria-hidden="true">' +
+                    '</span> ' + string + message + number + '</div>';
+                $('body').html(
+                    '<div id="remainingtime" role="alert" class="hidden ' +
+                    'alert alert-info"><span class="glyphicon ' +
+                    'glyphicon-fire" aria-hidden="true"></span> </div>'
+                );
+                $.PrivateBin.Alert.init();
+                $.PrivateBin.Alert.showRemaining(['%s' + message + '%d', string, number]);
+                var result = $('body').html();
+                return expected === result;
+            }
+        );
+    });
+});
+

tpl/bootstrap.php

@@ -69,7 +69,7 @@ if ($MARKDOWN):
 <?php
 endif;
 ?>
-		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-4wDVRrjzsIYI5/4PF12083H7ydSCC9QPB5s/RyWdE3MnEw88qgbCyt+upI9xkP8p8Y6YCEy4HSfqtJfFxIqXgg==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-QHNQsevnuA9oHZp2BV0Bi/hyf99g6+H/C2BhSnmlbyxU1SFXiLQvu43xdEl8qvZSoS2zf0R6rgH0sbSeVsrqsQ==" crossorigin="anonymous"></script>
 		<!--[if lt IE 10]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
 		<![endif]-->

tpl/page.php

@@ -47,7 +47,7 @@ if ($MARKDOWN):
 <?php
 endif;
 ?>
-		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-4wDVRrjzsIYI5/4PF12083H7ydSCC9QPB5s/RyWdE3MnEw88qgbCyt+upI9xkP8p8Y6YCEy4HSfqtJfFxIqXgg==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-QHNQsevnuA9oHZp2BV0Bi/hyf99g6+H/C2BhSnmlbyxU1SFXiLQvu43xdEl8qvZSoS2zf0R6rgH0sbSeVsrqsQ==" crossorigin="anonymous"></script>
 		<!--[if lt IE 10]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
 		<![endif]-->