Despite my best efforts, I can't seem to get my testRunner.html to acknowledge my tests when I run the testRunner.html page in the browser. I've confirmed that it pulls in the test files and runs through the expect but the test runner is still saying that zero passed and zero failed. I've also tried moving the mocha.run() command into the testRunner.html page as an inline script to no effect.
What have I configured incorrectly?
testRunner.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<title> Tests </title>
<link href = "../node_modules/mocha/mocha.css" rel = "stylesheet">
</head>
<body>
<div id="mocha"></div>
<script src="../node_modules/mocha/mocha.js"></script>
<script>
mocha.setup('bdd');
</script>
<script src = "../node_modules/requirejs/require.js" data-main = "test.config.js"></script>
</body>
</html>
test.config.js
require.config({
baseUrl: '../src/public/js',
paths: {
jquery: '//code.jquery.com/jquery-2.1.1.min',
chai: '/../../../node_modules/chai/chai',
underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
backbone: '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min',
marionette: 'http://marionettejs.com/downloads/backbone.marionette',
handlebars: '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars',
syphon: '//cdnjs.cloudflare.com/ajax/libs/backbone.syphon/0.4.1/backbone.syphon.min'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
marionette: {
deps: ['backbone'],
exports: 'Marionette'
},
syphon: {
deps: ['backbone', 'marionette'],
exports: 'Backbone.Syphon'
},
handlebars: {
exports: 'Handlebars'
}
}
});
require([
'../../../test/src/appTest'
], function() {
if (typeof mochaPhantomJS !== "undefined") {
mochaPhantomJS.run();
}
else {
mocha.run();
}
});
appTest.js
define(['chai'], function(chai) {
describe('array', function() {
chai.expect(1+1).to.equal(2);
});
});
You need to put your test in an it call:
define(['chai'], function(chai) {
describe('array', function() {
it("1 + 1 = 2", function () {
chai.expect(1+1).to.equal(2);
});
});
});
This is wholly an issue with how you are using Mocha. RequireJS is not a factor at all here.
Related
it can't work...
i cant find solution.
i used tag, so applied cdn. and i want make code block extension in ckeditor
<head>
<script src="https://cdn.ckeditor.com/ckeditor5/29.1.0/classic/ckeditor.js"></script>
</head>
<body>
strong text<textarea id="editor" name="queseditor"></textarea>
<script>
ClassicEditor
.create( document.querySelector('#editor'), {
codeBlock: {
languages: [
{ language: 'python', label: 'Python' }
]
}
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
Your snippet has tag error.
This is the fixed snippet which fix your issue (you forget to close script tag) :
<head>
<script src="https://cdn.ckeditor.com/ckeditor5/29.1.0/classic/ckeditor.js"></script>
</head>
<body>
strong text<textarea id="editor" name="queseditor"></textarea>
<script>
ClassicEditor
.create( document.querySelector('#editor'), {
codeBlock: {
languages: [
{ language: 'python', label: 'Python' }
]
}
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
I just want to initiate TestBed, so I can use TestBed functions. I am trying this in my src/test.spec.ts and it is not working:
TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
I also tried doing a System.import for TestBed and it didn't work. For example, this didn't work as a script tag in index.html.
Promise.all([
System.import('#angular/core/testing'),
System.import('#angular/platform-browser-dynamic/testing')
]).then(function (providers) {
var testing = providers[0];
var testingBrowser = providers[1];
testing.TestBed.initTestEnvironment(testingBrowser.BrowserDynamicTestingModule,
testingBrowser.platformBrowserDynamicTesting());
}).then(function() {
return Promise.all(
return System.import(app/test.spec.ts); //"app" stands for // './src' in the config.js file for SystemJS
);
})
Here is the Plunkr:
https://plnkr.co/edit/K0IyBnR8F4F7zOp6LETi?p=preview
Seems you forgot about rxjs and you need also to update zonejs and include some other zonejs scripts:
config.json
map: {
'app': './src',
'typescript': 'npm:typescript#1.8.0/lib/typescript.js',
'#angular/core': 'npm:#angular/core#2.0.0/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common#2.0.0/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler#2.0.0/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser#2.0.0/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic#2.0.0/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http#2.0.0/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router#2.0.0/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms#2.0.0/bundles/forms.umd.js',
'#angular/upgrade': 'npm:#angular/upgrade#2.0.0/bundles/upgrade.umd.js',
'#angular/core/testing': 'npm:#angular/core#2.0.0/bundles/core-testing.umd.js',
'#angular/common/testing': 'npm:#angular/common#2.0.0/bundles/common-testing.umd.js',
'#angular/compiler/testing': 'npm:#angular/compiler#2.0.0/bundles/compiler-testing.umd.js',
'#angular/platform-browser/testing': 'npm:#angular/platform-browser#2.0.0/bundles/platform-browser-testing.umd.js',
'#angular/platform-browser-dynamic/testing': 'npm:#angular/platform-browser-dynamic#2.0.0/bundles/platform-browser-dynamic-testing.umd.js',
'#angular/http/testing': 'npm:#angular/http#2.0.0/bundles/http-testing.umd.js',
'#angular/router/testing': 'npm:#angular/router#2.0.0/bundles/router-testing.umd.js',
'#angular/forms/testing': 'npm:#angular/forms#2.0.0/bundles/forms-testing.umd.js',
'rxjs': 'npm:rxjs'
},
index.html
<script src="https://unpkg.com/zone.js#0.6.25/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js#0.6.25/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/zone.js#0.6.25/dist/async-test.js"></script>
<script src="https://unpkg.com/zone.js#0.6.25/dist/fake-async-test.js"></script>
<script src="https://unpkg.com/zone.js#0.6.25/dist/sync-test.js"></script>
<script src="https://unpkg.com/zone.js#0.6.25/dist/proxy.js"></script>
<script src="https://unpkg.com/zone.js#0.6.25/dist/jasmine-patch.min.js"></script>
Besides that you have an error in your component:
src/component.ts
export class myCmp {
this._testVar = "initial value";
You should remove this.
Here's Plunker Example for your case. Hope it will help you!
We've been banging our heads on how to optimize a lock-state downloading a large set of data with Ember-data/Rest-adapter. We're preloading an app with data from a REST API and one of the sets has ha weight of ~2M for some users. What we want to do is avoid the lock-state that the app runs into when extracting all these records.
In this example the interface is supposed to update i on each frame, but "hangs" as soon as the JSON is downloaded and being prepared. This is of-course related to the single-threaded execution, but there has to be some way of making this graceful?
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return [];
},
setupController: function(controller) {
var element = document.getElementById('counter');
var i = 0;
var l = function() {
element.innerHTML = i;
i++;
window.requestAnimationFrame(l);
}.bind(this);
l();
this.store.find('record').then(function(data){
console.log('loaded', data);
});
}
});
App.RecordModel = DS.Model.extend({
name: DS.attr('string'),
email: DS.attr('string'),
birthdate: DS.attr('date'),
created: DS.attr('date'),
});
App.RecordAdapter = DS.RESTAdapter.extend({
host: 'https://gist.githubusercontent.com/hussfelt/100fedf00009bdcbb962/raw/',
pathForType: function() {
return 'json_example.json';
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0/ember.debug.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="counter"></div>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
</script>
</body>
</html>
The solution was to skip using the RESTAdapter to populate this set of data.
Instead we'd do a normal Ajax request with Ember.$, fetching the data - then loop through the data in chunks and use store.pushPayload to inject into the store.
Thanks to people in #emberjs at freenode for the ideas!
The below script could surely be optimized pushing more records each time instead of one at a time. But it solves the problem, and minimizes the lock-state.
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return [];
},
setupController: function(controller) {
var element = document.getElementById('counter');
var i = 0;
var l = function() {
element.innerHTML = i;
i++;
window.requestAnimationFrame(l);
}.bind(this);
l();
// Prebuild options object
var options = {
// Requesting url
url: 'https://gist.githubusercontent.com/hussfelt/100fedf00009bdcbb962/raw/json_example.json',
// Using GET
type: 'GET',
// This is a cross-domain request
crossDomain: true,
// On successful request
success: function(data) {
// Run the inception-loop
recordLoop(Ember.$.parseJSON(data));
},
};
// Trigger the request
Ember.$.ajax(options);
// Disable the normal find for records
//this.store.find('record').then(function(data){
// console.log('loaded', data);
//});
/**
* Will populate the store in each 60th of a second
* #param object data The data to populate with
* #return void
*/
var recordLoop = function(data) {
// Setup counters
var x, i = 0;
// Prebuild awesome object - to match push-payload
var records = {
records: []
};
// Loop through records, populate array and push to store
for (x = (data.records.length - 1), i = 0;
(x >= 0 && i <= 300); x--, i++) {
// Prepare object
records.records = [data.records[x]];
// Push to store
this.store.pushPayload('record', records);
// Remove the actual element from the data
data.records.splice(x, 1);
}
// Run again, if we have content
if (data.records.length > 0) {
window.setTimeout(function() {
recordLoop(data);
}, 1000 / 60);
}
}.bind(this);
}
});
App.RecordModel = DS.Model.extend({
name: DS.attr('string'),
email: DS.attr('string'),
birthdate: DS.attr('date'),
created: DS.attr('date')
});
App.RecordAdapter = DS.RESTAdapter.extend({
host: 'https://gist.githubusercontent.com/hussfelt/100fedf00009bdcbb962/raw/',
pathForType: function() {
return 'json_example.json';
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0/ember.debug.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="counter"></div>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
</script>
</body>
</html>
I am trying to get my Unit Tests working in Grunt, when I execute my index file in the browser the tests run successfully, however when I run the tests with grunt qunit it cannot recognise any tests.
I I am sure this is down to the way I am executing the tests, if for example I just include:
<script>
test('Always Fail', function() {
equal(5, 2, 'The return should be 2.');
});
</script>
In the head of my index.html test page, and then run Grunt I can see this test failing. However I am trying to load my tests using requireJS, which as I have said do work within the browser.
My index.html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unit Testing</title>
<link rel="stylesheet" href="qunit/qunit.css">
<script data-main="../unittests" src="../lib/require.js"></script>
<script src="qunit/qunit.js"></script>
<script>
test('Always Fail', function() {
equal(5, 2, 'The return should be 2.');
});
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
I am assuming it is this line:
<script data-main="../unittests" src="../lib/require.js"></script>
That is causing the issue and not being loaded with grunt.
My unittests.js file looks like this:
require.config({
paths: {
'QUnit': 'test/qunit/qunit'
},
shim: {
'QUnit': {
exports: 'QUnit',
init: function() {
QUnit.config.autoload = false;
QUnit.config.autostart = false;
}
}
}
});
// require the unit tests.
require(
['QUnit', 'test/dummyTest'],
function(QUnit, dummyTest) {
// run the tests.
dummyTest.run();
// start QUnit.
QUnit.load();
QUnit.start();
}
);
Here is my gruntfile:
module.exports = function(grunt) {
// use grunt
var nocompress, optimize;
nocompress = grunt.option('nocompress') || false;
if(nocompress) {
optimize = 'none';
} else {
optimize = 'uglify';
}
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
requirejs: {
compile: {
options: {
appDir: "dev/",
baseUrl: "js",
mainConfigFile: "dev/js/bootstrap.js",
dir: "www",
optimize: optimize,
modules: [
{
name: "app"
}
]
}
}
},
qunit: {
all: ['dev/js/test/**/*.html']
},
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
},
},
uses_defaults: [
'dev/js/collections/*.js',
'dev/js/models/*.js',
'dev/js/views/*.js',
'dev/js/*.js', ]
}
});
// Load plugins
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-requirejs');
// Default task(s).
grunt.registerTask('build-and-qunit', ['default', 'qunit']);
grunt.registerTask('default', ['jshint', 'requirejs']);
};
I've had some success using a structure similar to:
https://github.com/jonnyreeves/qunit-require
Disable QUnit from auto-running.
Require all the dependencies.
Run QUnit.
I've got the following error messages in the console:
http://localhost/web/js/text.js
404 Not Found
if a delete text! in "text!templates/collector/indexTemplate.html" form collector_index.js, I've got the following error message:
http://localhost/web/js/templates/collector/indexTemplate.html.js
404 Not Found
main.js
require.config({
paths: {
html5shiv: "libs/html5shiv",
jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
tablesorter: "libs/jquery.tablesorter.min",
script: "script",
underscore: "libs/underscore.min", /*"http://underscorejs.org/underscore",*/
backbone: "libs/backbone.min", /*"http://backbonejs.org/backbone-min",*/
utils: "utils",
// Collector
collectorModel: "models/collectorModel",
collectorCollection: "collectorCollection",
collectorRouter: "collectorRouter",
// Views
index: "views/collector/collector_index",
row: "views/collector/collector_row",
},
shim: {
jqueryui: {
deps: ["jquery"],
exports: "Jqueryui"
},
tablesorter: {
deps: ["jquery"],
exports: "TableSorter"
},
script: {
deps: ["jquery"],
exports: "Script"
},
underscore: {
exports: "_"
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
}
});
require(....
indexTemplate.html
<script type="text/template" id="indexTemplate">
<table class="tables">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody></tbody>
</table>
<a class="btns" href="#collector/new">New Collector</a>
</script>
collector_index.js
define([
"backbone",
"underscore",
"row",
"text!templates/collector/indexTemplate.html"
], function (Backbone, _, CollectorRowView) {
var CollectorIndexView = Backbone.View.extend({
initialize: function (options) {
this.collectors = options.collectors;
this.collectors.bind('reset', this.addAll, this);
},
// populate the html to the dom
render: function () {
this.$el.html($('#indexTemplate').html());
this.addAll();
return this;
},
addAll: function () {
// clear out the container each time you render index
this.$el.find('tbody').children().remove();
_.each(this.collectors.models, $.proxy(this, 'addOne'));
},
addOne: function (collector) {
var view = new CollectorRowView({collectors: this.collectors, collector: collector});
this.$el.find("tbody").append(view.render().el);
}
});
return CollectorIndexView;
});
Directory structure:
js
views
main.js
...
templates
collector
indexTemplates.html
main.js
Thanks.
Not sure is this a typo or not but you have indexTemplates.html in your collector folder and indexTemplate.html in your define().
First make sure that you the text.js plugin in the same folder where your main.js is. Create a new entry in the main.js:
'templates': '../templates'
The template file itself can be a plain .html without the .js extension, and you should be able to reference it by:
var template = require("text!templates/collector/indexTemplate.html")
or in define() if your prefer that way.