How to include Ext JS in Jasmine test - javascript

I'm new with Jasmine. I would like to test a Ext JS application.
When I'm running the test, the browser throw the following:
ReferenceError: Ext is not defined over the line Ext.create('xxxx.application.store.SystemHealth');
This is my SpecRunner.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine- 1.3.1/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<!--include source files here... -->
<!--<script type="text/javascript" src="spec/SpecHelper.js"></script>-->
<!--<script type="text/javascript" src="specs/example.spec.js"></script>-->
<!-- include spec files here... -->
<!--<script type="text/javascript" src="src/Player.js"></script>-->
<!--<script type="text/javascript" src="src/Song.js"></script>-->
<script type="text/javascript" src="src/SystemHealth.js"></script>
<script type="text/javascript">
(function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function(spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
I hope it's clear enough.

Example code for writing using jasmine lib in ExtJS:
<head>
<title>Extjs - Unit testing demo</title>
<link rel="stylesheet" type="text/css" href="app-test/lib/jasmine-1.3.1/jasmine.css"></link>
<script type="text/javascript" src="../ext4.1.3/ext-debug.js"></script>
<script type="text/javascript" src="app-test/lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="app-test/lib/jasmine-1.3.1/jasmine-html.js"></script>
<!-- specs test files -->
<script type="text/javascript" src="app-test/specs/example.js"></script>
<script type="text/javascript" src="app-test/specs/users.js"></script>
<!-- Extjs app launcher -->
<script type="text/javascript" src="app-test.js"></script>
</head>
<body></body>
Hope it helps!!

thanks, yes i needed to add to add the following lines:
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-
gpl/ext-all-dev.js"></script>
<script src="../../../../../../.ext-js/sencha-ext-js-4.1.1a/ext.js"
type="text/javascript"></script>

Related

Leaflet: Uncaught TypeError: L.markerClusterGroup is not a function when trying to use Cluster plug-in

I am trying to use Cluster Group plug-in for Leaflet, but I keep getting the "Uncaught TypeError: L.markerClusterGroup is not a function"
here is my simplified HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Brewser</title>
<link rel="stylesheet" type="text/css" href="brewser.css">
<link rel="stylesheet" type="text/css" href="leaflet.css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/MarkerCluster.css"/>
<link rel="stylesheet" type="text/css" href="dist/MarkerCluster.Default.css"/>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
<script src="dist/leaflet.markercluster-src.js"></script>
</body>
</html>
Here is my JS:
var myMap = L.map('map').setView([49.197060, 16.611837], 13);
var markers = L.markerClusterGroup();
Any idea what could be wrong?
plug-in files I am using are those in dist directory:
leaflet.markercluster-src.js
leaflet.markercluster.js
leaflet.markercluster-src.js.map
leaflet.markercluster.js.map
MarkerCluster.css
MarkerCluster.Default.css
Your imports are out of order:
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
<script src="dist/leaflet.markercluster-src.js"></script>
should be:
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<!-- Notice where markercluster import is above app.js -->
<script src="dist/leaflet.markercluster-src.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>

Using <canvas> to draw screen in .erb file

I'm using the following javascript code to help me draw an output screen in a .erb file which doesn't render properly. The canvas tag is unhelpful.
There is no output screen. The linking is proper and I am able to get output "hello" when I add a testing line.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Programming++! Build Your Own Blocks</title>
<link rel="shortcut icon" href="favicon.ico">
<script type="text/javascript" src="morphic.js"></script>
<script type="text/javascript" src="widgets.js"></script>
<script type="text/javascript" src="blocks.js"></script>
<script type="text/javascript" src="threads.js"></script>
<script type="text/javascript" src="objects.js"></script>
<script type="text/javascript" src="gui.js"></script>
<script type="text/javascript" src="paint.js"></script>
<script type="text/javascript" src="lists.js"></script>
<script type="text/javascript" src="byob.js"></script>
<script type="text/javascript" src="xml.js"></script>
<script type="text/javascript" src="store.js"></script>
<script type="text/javascript" src="locale.js"></script>
<script type="text/javascript" src="cloud.js"></script>
<script type="text/javascript" src="sha512.js"></script>
<script type="text/javascript" src="FileSaver.min.js"></script>
<script type="text/javascript">
var world;
window.onload = function () {
world = new WorldMorph(document.getElementById('world'));
world.worldCanvas.focus();
new IDE_Morph().openIn(world);
loop();
};
function loop() {
requestAnimationFrame(loop);
world.doOneCycle();
}
</script>
</head>
<body style="margin: 0;">
<canvas id="world" tabindex="1" style="position: absolute;" />
</body>
</html>
Any help please ?

In angular 2 how do I hook up my cachebust js files to the app for deploying?

This is my gulp code for cache busting the js files and it works fine:
gulp.task('getAllJsFiles', function() {
gulp.src('src/app/**/**/*.js')
.pipe(cachebust.resources())
.pipe(gulp.dest('src/app/js/'))
});
The problem I have is, how do I now wire up these files so that my app uses them?
I'm using angular and typescript.
Currently the app.component.js file becomes: Current the app.component.js file becomes: app.component.e072d853.js as an example.
I'm guessing I would just wire that up?
Here is my index file stripped down a bit:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/"></base>
<!-- inject:css -->
<link rel="stylesheet" href="/css/styles.e072d853.css">
<!-- endinject -->
<!-- Js libs -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script type="text/javascript" src="/safariPolyFix.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>
<script>
System.config({
transpiler: 'typescript',
defaultJSExtensions: true,
typescriptOptions: {
emitDecoratorMetadata: true,
},
packages: {
'angular2-google-maps': {
defaultExtension: 'js'
}
}
});
</script>
<script type="text/javascript" src="/angular2_google_maps.js"></script>
<script type="text/javascript"src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script type="text/javascript"src="https://code.angularjs.org/tools/typescript.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/router.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/http.js"></script>
<script type="text/javascript" src="/firebase/firebaseNew.js"></script>
</head>
<body id="container">
<app></app>
<script type="text/javascript">
//Not sure if I need to do something here??????
System.import('/app/app.component.js');
</script>
</body>
</html>
Heres the js part of my gulp file (which works fine):
gulp.task('getAllJsFilesAndCacheBust', function() {
gulp.src('src/app/**/**/*.js')
.pipe(cachebust.resources())
.pipe(gulp.dest('src/app/js/'))
});
I just need to know how to wire up the app.component.js thats now this: app.component.685d875q.js. I cant seem to get that imported

can't display a simple graph using jqplot

I'm a new employee at a company and also new to php and jqplot. :$
I'm trying to create a simple graph using jqplot.
I followed all the instructions at http://www.jqplot.com/tests/line-charts.php
but nothing is displayed in my div :(
can someone help?
I think the problem might that its not loading the jqplot files :,(
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Capacity Report</title>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../../../jqplot/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css"/>
<link rel="stylesheet" href="../../../css/style.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="../../../jqplot/jquery.jqplot.css"/>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../../../jqplot/jquery.js"></script>
<script type="text/javascript" src="../../../jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="../../jqplot/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="../../jqplot/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.ohlcRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.highlighter.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.trendline.js"></script>
</head>
<body>
<div id="chartdiv" style="height:400px;width:300px; ">graph1</div>
<div id="chart1" style="height:400px;width:300px; ">graph2</div>
</body>
</html>
<script> $.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
$(document).ready(function(){
console.log("It works!!!");
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
</script>
Hello everyone i solved my error!
the problem was in the file path! after many hours of playing around i realized i was trying to open jqplot file with a wrong path!!! :P
hope this will help someone else with the same problem
this is my final working code 100% bullet proof :)
<html>
<head>
<title>Working plots functions</title>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jqplot/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jqplot/jquery.jqplot.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
console.log("It works!!!");
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
$(document).ready(function(){
console.log("It works!!!");
var plot1 = $.jqplot ('chart2', [[3,7,9,1,5,6,8,2,5]]);
});
</script>
Here is the start of the page...<br>
<div id="chart1" style="height:400px;width:300px;">graph1</div>
<div id="chart2" style="height:400px;width:300px;">graph2</div>
</body>
</html>

Issue including elFinder and JQuery UI

I'm trying to setup an elFinder window on my website. So I downloaded the latest release of from GitHub and followed it's instructions.
I included every file they asked for:
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
And I include this into my head-section as well:
<script type="text/javascript">
$().ready(function() {
var elf = $('#elfinder').elfinder({
lang: 'nl', // language (OPTIONAL)
url : '../includes/elfinder/php/connector.php' // connector URL (REQUIRED)
}).elfinder('instance');
});
</script>
But for some reason, all I get is this image:
But those files are, obviously, included... So I'm wondering what I'm doing wrong since I can't get my finger on the issue...
Why don't you combine the jQuery UI files into one?
Yes the order of includes does matter.
Here a working demo.
Here is the code
HTML
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://elfinder.org/demo/css/elfinder.min.css" />
</head>
<div id="elfinder"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="http://elfinder.org/demo/js/elfinder.min.js" ></script>​
Javascript
$().ready(function() {
var f = $('#elfinder').elfinder({
url : '/connector'
}).elfinder('instance');
});​
have you tried changing the order of inclusion?
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
Let me know ;)

Categories