how to use code block plugin in ckeditor5 cdn in python django? - django

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>

Related

Angular "Uncaught (in promise): ChunkLoadError: Loading chunk 12 failed." error

I have recently rewritten my angular application. The previous project worked fine and I've not changed my django or apache2 configuration as it should just slip in.
n.b. I have changed the django home.html to include "-es2015" in the appropriate file names.
I'm currently getting the below errors in the inspector
Resource interpreted as Stylesheet but transferred with MIME type application/javascript: "http://146.148.41.45/static/assets/js/frontendwikiconverter.js". 146.148.41.45/:33
GET https://p.typekit.net/p.css?s=1&k=oov2wcw&ht=tk&f=39203&a=2613646&app=typekit&e=css net::ERR_CONNECTION_REFUSED oov2wcw.css:1
Uncaught SyntaxError: Invalid or unexpected token styles.css:1
Uncaught SyntaxError: Unexpected token '<' 12-es5.js:2
ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 12 failed. main-es5.js:1
My app.module:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '#angular/core';
import { LocationStrategy, HashLocationStrategy } from '#angular/common';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
import { ToastrModule } from 'ngx-toastr';
import { JwtTokenService } from './services/jwt-token.service'
import { IconModule, IconSetModule, IconSetService } from '#coreui/icons-angular';
import { LocalStorageService } from './services/local-storage-service.service';
import { NgxSmartModalModule } from 'ngx-smart-modal';
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
import { AppComponent } from './app.component';
import { DefaultLayoutComponent } from './containers';
import { CommonModule } from "#angular/common";
import {AddToPlannerModule} from './views/planner/add-to-planner.module'
import { TooltipModule } from 'ngx-bootstrap/tooltip';
const APP_CONTAINERS = [
DefaultLayoutComponent
];
import {
AppAsideModule,
AppBreadcrumbModule,
AppHeaderModule,
AppFooterModule,
AppSidebarModule,
} from '#coreui/angular';
import { AppRoutingModule } from './app.routing';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { ChartsModule } from 'ng2-charts';
import { AuthorizeGuard } from './services/authorize-guard.service';
import { TokenInterceptor } from './services/http.interceptor'
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { DatePipe } from '#angular/common';
import { IsAdmin } from './services/can-activate-guard.service';
#NgModule({
imports: [
BrowserModule,
CommonModule,
TooltipModule.forRoot(),
BrowserAnimationsModule,
AppRoutingModule,
AppAsideModule,
AppBreadcrumbModule.forRoot(),
AppFooterModule,
AppHeaderModule,
AppSidebarModule,
PerfectScrollbarModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
ChartsModule,
IconModule,
IconSetModule.forRoot(),
HttpClientModule,
NgxSmartModalModule.forRoot(),
ToastrModule.forRoot({
positionClass :'toast-bottom-right'
}),
NgbModule,
AddToPlannerModule
],
declarations: [
AppComponent,
...APP_CONTAINERS,
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true,
deps: [JwtTokenService]
},
{
provide: LocationStrategy,
useClass: HashLocationStrategy
},
IconSetService,
JwtTokenService,
LocalStorageService,
AuthorizeGuard,
DatePipe,
IsAdmin
],
schemas: [
NO_ERRORS_SCHEMA
],
bootstrap: [
AppComponent
],
entryComponents: [],
exports: [
//AddToPlannerComponent
]
})
export class AppModule { }
Routing Module:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
// Import Containers
import { DefaultLayoutComponent } from './containers/default-layout/default-layout.component';
import { P404Component } from './views/site-admin/p404/p404.component';
import { P500Component } from './views/site-admin/p500/p500.component';
import { SignInComponent } from './views/useradmin/sign-in/sign-in.component';
import { JoinComponent } from './views/useradmin/join/join.component';
import { HomeComponent } from './views/general/home/home.component'
export const routes: Routes = [
{
path: '404',
component: P404Component,
data: {
title: 'Page 404'
}
},
{
path: '500',
component: P500Component,
data: {
title: 'Page 500'
}
},
{
path: 'signin',
component: SignInComponent,
data: {
title: 'Sign In'
}
},
{
path: 'join',
component: JoinComponent,
data: {
title: 'Join KeyStageWiki'
}
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: '',
component: DefaultLayoutComponent,
data: {
title: 'KeyStageWiki'
},
children: [
{
path: 'home',
loadChildren: () => import('./views/general/home/home.module').then(m => m.HomeModule)
},
{
path: 'ad-manager',
loadChildren: () => import('./views/admin/ad-manager/ad-manager.module').then(m => m.AdManagerModule)
},
{
path: 'general',
loadChildren: () => import('./views/general/general.module').then(m => m.GeneralModule)
},
{
path: 'planner',
loadChildren: () => import('./views/planner/planner.module').then(m => m.PlannerModule)
},
{
path: 'user',
loadChildren: () => import('./views/useradmin/user-admin.module').then(m => m.UserAdminModule)
},
{
path: 'wiki',
loadChildren: () => import('./views/wiki/wiki.module').then(m => m.WikiModule)
},
{
path: 'lessons',
loadChildren: () => import('./views/lessons/lessons.module').then(m => m.LessonsModule)
},
]
},
{ path: '**', component: P404Component }
];
#NgModule({
imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
exports: [RouterModule]
})
export class AppRoutingModule { }
home.html in the Django project:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="{% static 'assets/img/keystagewiki.png' %}">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="{% static 'ang/styles.css' %}"> -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://cdn.ckeditor.com/4.7.0/full-all/ckeditor.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.ckeditor.com/4.5.11/full-all/ckeditor.js"></script>
<link rel="stylesheet" href="https://use.typekit.net/oov2wcw.css">
<link rel="stylesheet" href="{% static 'assets/css/indigo-pink.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/angular-calendar.css' %}">
<link rel="stylesheet" href="{% static 'assets/js/frontendwikiconverter.js' %}">
<link href="../css/style.css" type="text/scss" rel="stylesheet">
<link rel="stylesheet" href="{% static 'assets/css/ksw.css' %}">
</head>
<body style="max-width:1250px;margin:auto;" >
<app-root>
<img src="https://media.giphy.com/media/MDrmyLuEV8XFOe7lU6/giphy.gif" alt="Loading..." style="position:fixed; top:50%; left:50%; transform: translate(-50%, -50%);">
</app-root>
<script type="text/javascript" src="{% static 'ang/runtime.js' %}" defer></script>
<script type="text/javascript" src="{% static 'ang/polyfills.js' %}" defer></script>
<script type="text/javascript" src="{% static 'ang/main.js' %}" defer></script>
<script type="text/javascript" src="{% static 'ang/vendor.js' %}" defer></script>
<script type="text/javascript" src="{% static 'ang/styles.css' %}" defer></script>
<script type="text/javascript" src="{% static 'ang/scripts.js' %}" defer></script>
</body>
</html>
I'm very stuck, search and tried everything listed online. No progress. Any advise?

Bootstrap Typeahead basic example not working in Django

I am trying to implement Bootstrap Typeahead to eventually use an Elasticsearch instance I have, but I cannot even get the basic example to work in Django (2.2.6). I am taking the majority of this code from the examples page. Here is the HTML I am using:
typeahead.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<script type="text/javascript">
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: substringMatcher(states)
});
</script>
</head>
<body>
<div id="the-basics">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
</body>
</html>
Here is the page/URL I am trying to access:
urls.py
from django.urls import path
from . import views
app_name = 'materials'
urlpatterns = [
path('typeahead/', views.typeahead_view, name='typeahead')
]
And this is the basic view I have set up for this page:
views.py
def typeahead_view(request):
return render(request, 'materials/typeahead.html')
Nothing happens when I start typing in the input...
There is a problem with your html page. First of all, jquery was not added in it and secondly add all the js file at the end of the body. Check below updated code for the html file.
typeahead.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="the-basics">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<script type="text/javascript">
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: substringMatcher(states)
});
</script>
</body>
</html>
It works properly. I hope this will help you :)

Leaflet grouping layer doesn't show on the map

I am working in GeoDjango. I am trying to add leaflet group from here. I copied files from the dist folder to my folder with the static files and imported them into HTML file. Anyway I have some problem with this part of code:
//GROUP LAYER
var osm =
'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png';
var baseLayers = {
"OSM":osm
}
var groupedOverlays = {
"layers": {
"layer1": datasets_buildings,
"layer2": datasets_roads,
"layer3": datasets_railways,
"layer4": datasets_natural
}
};
L.control.groupedLayers(baseLayers, groupedOverlays, options).addTo(map);
When I typed this, I don't even get my layers on the map, I get just the empty leaflet map and without this part of the code, I get it.
Also, I would like to make functionality to this layer group which allows only one layer to be active.
This is all my code:
<html lang="en">
{% load static %}
{% load leaflet_tags %}
<head>
{% leaflet_js %}
{% leaflet_css %}
<style type="text/css">
#gis {
width: 100%;
height: 870px;
}
</style>
<link rel="stylesheet" type = 'text/css' href="{% static 'maps/dist/leaflet.groupedlayercontrol.css' %}">
<script type="text/javascript" src="{% static 'maps/dist/leaflet.ajax.js'%}"></script>
<script type="text/javascript" src="{% static 'maps/dist/leaflet.groupedlayercontrol.js' %}"></script>
</head>
<body>
<script type="text/javascript">
function our_layers(map,options){
//buildings
var datasets_buildings = new L.GeoJSON.AJAX("
{% url 'buildings_json_data' %}",{
onEachFeature : function (feature, layer) {
layer.bindPopup(feature.properties.name.toString())
}
});
//roads
var datasets_roads = new L.GeoJSON.AJAX("{% url 'roads_json_data' %}",{
onEachFeature : function (feature, layer) {
layer.bindPopup(feature.properties.name.toString())
}
});
//railways
var datasets_railways = new L.GeoJSON.AJAX("{% url 'railways_json_data' %}",{
onEachFeature : function (feature, layer) {
layer.bindPopup(feature.properties.name.toString())
}
});
//natural
var datasets_natural = new L.GeoJSON.AJAX("{% url 'natural_json_data' %}",{
onEachFeature : function (feature, layer) {
layer.bindPopup(feature.properties.name.toString())
}
});
datasets_natural.addTo(map);
datasets_railways.addTo(map);
datasets_roads.addTo(map);
datasets_buildings.addTo(map);
//GROUP LAYER
var osm = 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png';
var baseLayers = {
"OSM":osm
}
var groupedOverlays = {
"layers": {
"layer1": datasets_buildings,
"layer2": datasets_roads,
"layer3": datasets_railways,
"layer4enter code here": datasets_natural
}
};
L.control.groupedLayers(baseLayers, groupedOverlays, options).addTo(map);
}
</script>
{% leaflet_map "gis" callback="window.our_layers" %}
</body>
</html>
And the error when I get in the console when I go on inspect is:
leaflet.js:5 Uncaught TypeError: Cannot create property '_leaflet_id' on string 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png'
at Object.n [as stamp] (leaflet.js:5)
at e._addLayer (leaflet.groupedlayercontrol.js:131)
at e.initialize (leaflet.groupedlayercontrol.js:26)
at new e (leaflet.js:5)
at Function.L.control.groupedLayers (leaflet.groupedlayercontrol.js:373)
at Object.our_layers [as callback] ((index):96)
at Function.L.Map.djangoMap (leaflet.extras.js:234)
at loadmap ((index):112)
Thank you in advance :)
I found a mistake. I knew it was stupid, but I lost so much time on this and I posted a question..
Anyway, the line:
var osm = 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png';
should be replace with this line:
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}{y}{x}.png');

TestRunner Not Running My Mocha / Chai Tests

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.

Unit testing with QUnit, Grunt and RequireJS

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.