I have a few problems after having upgraded to gulp-mocha-phantomjs Version 0.8.0:
1) Error when running against remote by url:
When running my tests against a remote URL, I get the following error:
ReferenceError: Can't find variable: Mocha
at browser-shim.js:27
All required files in runner.html seem to be available and the test do work as expected in an actual browser like FF or Chrome.
runner.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mocha Test Runner</title>
<link rel="stylesheet" href="HTTP://localhost:7777/q/p/lj_unittest/test/mocha.css">
<link rel="stylesheet" href="HTTP://localhost:7777/q/p/lj_unittest/css/core.css">
</head>
<body>
<div id="mocha"></div>
<div id="fixture" style="display:none;">
<div id="charset_ascii"> !"#$%&'()*+,-./0123456789:;<=>?#ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~</div>
<div id="charset_other">ÄäÆæß</div>
</div>
<script src="HTTP://localhost:7777/q/p/lj_unittest/js/core.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/mocha.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/chai.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/chai-datetime.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/sinon.js"></script>
<script>
mocha.setup("bdd");
</script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/charset_backend.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/ods.log_backend.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/date.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
Gulpfile.js:
gulp.task('test:backend:ODS', function (/callback/) {
var stream = mochaPhantomJS({'reporter': 'spec'});
stream.write({path: config.URL_ROOT + '/TEST_WEB_ODS.main'});
stream.end();
return stream;
});
2) Strange warnings in some (but not all) of the runner.html based tests:
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file:///D:/MyDev/ljs_app/trunk/periscope/build/node_modules/gulp-mocha-phant
mjs/node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js. Domains, protocols and ports must match.
runner.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mocha Test Runner</title>
<link rel="stylesheet" href="../../../libs/mocha/mocha.css">
<link rel="stylesheet" href="../../../dist/css/core.css">
</head>
<body>
<div id="mocha"></div>
<div id="fixture" style="display:none;"></div>
<script src="../../../dist/js/core.js"></script>
<script src="../../../libs/mocha/mocha.js"></script>
<script src="../../../libs/chai/chai.js"></script>
<script src="../../../libs/chai/chai-datetime.js"></script>
<script src="../../../libs/sinon/sinon.js"></script>
<script>
mocha.setup('bdd');
</script>
<!-- START of actual unit test scripts -->
<script src="./json.js"></script>
<script src="./moment.js"></script>
<script src="./underscore.js"></script>
<!-- END of actual unit test scripts -->
<script>
mocha.run();
</script>
</body>
</html>
Gulpfile.js:
gulp.task('test:frontend:lib', function (/*callback*/) {
return gulp.src('test/frontend/lib/runner.html').pipe(mochaPhantomJS({'reporter': 'spec'}));
});
Any help is appreciated!
Load mocha.js first. Your own comment is correct.
Related:
ReferenceError: Can't find variable: Mocha when running test · Issue #7 · nathanboktae/mocha-phantomjs-core
Related
how to to wire html backspace in vue js in have try code bellow but not working, try template but dont working to
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p><span v-html="backspace"></span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
backspace:"&larr"
}
})
</script>
</body>
</html>
You're missing semi-colon:
&larr // missing semi-colon ;
You may also use:
←
As I understood, you would like to display the left arrow HTML character "&laar;", that looks like an arrow pointing backwards.
You simple missed a semicolon (;) at the end of the HTML within your data array.
Here is the updated snipped:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p><span v-html="backspace"></span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
backspace:"←"
}
})
</script>
</body>
</html>
Here's the minimal configuration that I've figured out so far:
<html>
<head>
<link rel="shortcut icon" href="microsoft.png" type="image/png">
<link rel="stylesheet" href="bootstrap-4.0.0-alpha.2/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<script src="bootstrap-4.0.0-alpha.2/docs/assets/js/vendor/tether.min.js"></script>
<script src="bootstrap-4.0.0-alpha.2/dist/js/bootstrap.js"></script>
</body>
</html>
Q: After the opening body tag, what replaces div class="container"?
Nothing replaces it. Bootstrap 4 still uses containers.
I am trying bootstrap3 date picker but it does not show up calendar or it does not even show any javascript error when i click on textbook.
Below is my code for showing up calendar.
enter code here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap-datepicker3.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Date Picker -->
<script src="js/bootstrap-datepicker.js"></script>
</head>
<body>
<input type="text" class="form-control" id="sandbox-container">
<script>
$(function() {
$('#sandbox-container input').datepicker();
});
</script>
</body>
</html>
You jquery selector is wrong and should just be $('#sandbox-container')
This should be your code (including working example):
$(function() {
$('#sandbox-container').datepicker({
//..
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<input type="text" class="form-control" id="sandbox-container">
I am stymied by this issue. For some reason the Angular routing is not working at all. I simply get a blank screen. All of the modules are loading, there is no error in the console, and if I enter Angular in the console, it works. Yet, I get a blank screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QuickCalcs</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link rel="stylesheet" href="css/ng-animation.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/factories.js"></script>
<script src="controllers/qcController.js"></script>
</head>
<body ng-app="qc">
<div ng-view></div>
</body>
</html>
-----------------------------
app.js file is:
-----------------------------
var qc = angular.module('qc', [
'ngRoute',
'ngAnimate',
'ngResource'
]);
qc.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/home.html',
controller: 'qcController'
}).
when('/home', {
templateUrl: 'views/home.html',
controller: 'qcController'
}).
when('/results', {
templateUrl: 'views/results.html',
controller: 'qcController'
}).
otherwise({
redirectTo: 'views/home.html'
});
}]);
-----------------------------
Directory structure is:
-----------------------------
qc
/js
app.js
/views
home.html
results.html
/controllers
qccontroller.js
You must link your page to the application module
in the html tag like this:
< html lang="en" ng-app="qc" />
I've written such code in my _Layout.cshtml:
<head>
<link href="#Url.Content("~/Content/jquery.fancybox-1.3.4.css")" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.easing.1.3.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.fancybox-1.3.4.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//alert("H");
$('#gallery a').fancybox({
});
}); // end ready
</script>
</head>
<body>
<div id="gallery" >
<a href="../../Content/Images/Slide1.JPG" rel="gallery" title="Img1!:)">
<img alt="Dog" height="170" src="../../Content/Images/Slide1_s.JPG" width="200" /></a>
<a href="../../Content/Images/Slide2.JPG" rel="gallery" title="Img2!:)">
<img alt="Cat" height="170" src="../../Content/Images/Slide2_s.JPG" width="200" /></a>
</div>
</body>
I've used above code in simple html file and it works perfectly. However, if I try to put this code in MVC 4, it does not work. Just links of images work and it shows just image without "new pop-up window". I checked a lot of times all addresses of ".js" libraries and putted "alert('Hello from .js')" to check availability from "Scripts" folder of these libraries.
What's the reason of that? How to resolve it?
I just moved "#Scripts.Render("~/bundles/jquery")" and "#RenderSection("scripts", required: false)" from to and it works perfectly!
The whole code is:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<link href="~/Icon.ico" rel="shortcut icon" type="image/x-icon" />
</head>