I've got a small github project with two branches: master (stable) and qunit-require (unstable). I've got some tests written in qunit that I want to have runnable both in the browser and from grunt level. On master branch everything works fine, travis-CI passes. And on qunit-require branch I'm trying to add require.js for the tests, but I didn't succeed yet.
I can run tests from the browser by displaying test/index.html. But when I run grunt in the console, I get no assertions error and I've got no idea why:
tducin#tducin-workshop:~/Development/tree (qunit-require)$ grunt
Running "qunit:all" (qunit) task
Testing test/index.html Warning: 0/0 assertions ran (15ms) Use --force to continue.
Aborted due to warnings.
I've got src/ and test/ directories as long as bower_components/ where bower deps are stored. This is my test/index.html:
<!DOCTYPE html>
<html>
<head>
<title>jsTreeStructure Test Runner</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" />
<script src="../bower_components/qunit/qunit/qunit.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="../bower_components/requirejs/require.js" data-main="init.js"></script>
</body>
</html>
This is my test/init.js:
require.config({
baseUrl: '../',
shim: {
'underscore': {
exports: '_'
},
'tree' : {
exports: 'Tree'
},
'qunit' : {
exports: 'QUnit'
}
},
paths: {
'underscore': 'bower_components/underscore/underscore',
'qunit': 'bower_components/qunit/qunit/qunit',
'tree': 'src/tree'
}
});
require([
'test/suites/basic', 'test/qunit-extend'
], function(BasicTests) {
QUnit.config.autoload = false;
QUnit.config.autostart = false;
BasicTests.run();
QUnit.load();
QUnit.start();
});
and this is part of my Gruntfile.js:
/*global module:false*/
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
qunit: {
all: ['test/index.html'],
options: {
timeout: 3000,
coverage: {
src: ['src/tree.js']
}
}
},
// [...]
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task.
grunt.registerTask('test', ['qunit', 'jshint']);
grunt.registerTask('build', ['uglify']);
grunt.registerTask('default', ['test', 'build']);
};
Anyway, you can find entire content at github: https://github.com/tkoomzaaskz/tree/tree/qunit-require
My question is: what can I do to make grunt execute the assertions (i.e. what mistake did I make here)?
Related
I have a nearly-vanilla Phoenix setup in which I want to use select2[1]. I have bootstrap and jquery configured by means of bower. The front-end is bootstrap 4 and it all works great, so that's covered. See my bower config below.
The steps I tried are the following.
I have created a minimal working example in HTML from the website of select2, and included the js and css via a CDN. This all worked.
I have installed select2 via npm using npm install --save select2.
I have verified that the select2 data is present in my http://localhost:8000/js/app.js.
I have added the script needed to execute select2 on the option list (see below). I have added this below my import of app.js.
When I navigate to the page I have the minimal working example on (the homepage), I see this error in the console:
jQuery.Deferred exception: $(...).select2 is not a function #http://0.0.0.0:4000/:85:9
mightThrow#http://0.0.0.0:4000/js/app.js:7638:21
resolve/</process<#http://0.0.0.0:4000/js/app.js:7706:12
undefined jquery.js:3822
[Show/hide message details.] TypeError: $(...).select2 is not a function[Learn More]
I admit, I have no clue how this all works, as my knowledge is all focussed on backend related tasks. The entire codebase is on github as well [2].
Any help would be appreciated.
Relevant part of app.html.eex
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
Html added to layout.html.eex
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
brunch-config.js
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["css/app.css"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
assets: /^(static)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: ["static", "css", "js", "vendor", "scss", "fonts"],
// Where to compile files to
public: "../priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
sass: {
native: true,
options: {
includePaths: ["node_modules/bootstrap/scss", "node_modules/font-awesome/scss"], // Tell sass-brunch where to look for files to #import
precision: 8 // Minimum precision required by bootstrap-sass
}
},
copycat: {
"fonts" : ["static/fonts", "node_modules/font-awesome/fonts"],
verbose : false, //shows each file that is copied to the destination directory
onlyChanged: true //only copy a file if it's modified time has changed (only effective when using brunch watch)
}
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true,
globals: {
select2: 'select2',
$: 'jquery',
jQuery: 'jquery',
Tether: 'tether',
Popper: "popper.js",
bootstrap: 'bootstrap'
}
}
};
[1] https://select2.org/
[2] https://github.com/m1dnight/gymlog/tree/frontend_crap
This is my first day with grunt and I'm trying to make it work using these tutorials
https://24ways.org/2013/grunt-is-not-weird-and-hard/
https://css-tricks.com/autoprefixer/
And my Gruntfile.js is this:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
scripts: {
files: ['scripts/app.js'],
tasks: ['uglify'],
options: {
spawn: false,
}//For some reason I had a come here. Don't know if it matters
},
css: {
files: ['content/app.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
styles: {
files: ['content/app.css'],
tasks: ['autoprefixer']
}
},
uglify: {
build: {
src: "scripts/app.js",
dest: "scripts/app-final.js"
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'content/app.css': 'content/app.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'content/app-prefixed.css': 'content/app.css'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'assets/img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'assets/img/'
}]
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks(
'grunt-contrib-uglify',
'grunt-contrib-sass',
'grunt-autoprefixer',
'grunt-contrib-watch',
'grunt-contrib-imagemin'
);
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask(
'default', [
'watch',
'uglify',
'sass',
'autoprefixer',
'imagemin'
]);
};
But when I try grunt watch watch I get this:
# grunt watch
Warning: Task "watch" not found. Use --force to continue.
Aborted due to warnings.
To make things weirder grunt uglify is seen
# grunt uglify
Running "uglify:build" (uglify) task
>> Destination scripts/app-final.js not written because src files were empty.
>> No files created.
Done, without errors.
Running grunt --help gives me an interesting thing
Available tasks
uglify Minify files with UglifyJS. *
default Alias for "watch", "uglify", "sass", "autoprefixer", "imagemin" tasks.
I really cannot find a difference between uglify and the other functions. VS Code doesn't give me any errors. I installed all of the used tasks. I have node installed.
Restarting VS Code doesn't help. I don't think this matters but just in case, I'm using Linux.
Reinstalling the dependencies didn't help either
You did the following:
grunt.loadNpmTasks(
'grunt-contrib-uglify',
'grunt-contrib-sass',
'grunt-autoprefixer',
'grunt-contrib-watch',
'grunt-contrib-imagemin'
);
Replace it with this:
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
Grunt does not take multiple Arguments in grunt.loadNpmTasks for some reason. You can see the proper usage of the loadNpmTasks - function in the documentation: https://gruntjs.com/sample-gruntfile
I try to make a simple using of - grunt-include-source but I don't success -
My Gruntfile is -
module.exports = function (grunt) {
grunt.initConfig({
includeSource: {
options: {
basePath: 'app/file1.js'
},
myTarget: {
files: {
'dist/index.html': 'app/index.html'
}
}
}
});
grunt.loadNpmTasks('grunt-include-source');
grunt.registerTask('serve', function (target) {
grunt.task.run('includeSource');
});
}
The index.html is -
<html>
<head>
</head>
<body>
<!-- include: "type": "js", "files": "scripts/*.js" -->
</body>
</html>
My folder hierarchy is -
Gruntfile.js
app >
file1.js
index.html
dist >
index.html
I run grunt serve and get in the dist>index.html folder the output -
<html>
<head>
</head>
<body>
</body>
</html>
Without the expected - <script src="scripts/file1.js"></script>
I kept to follow as in the documentation and in this question ,
Why I don't get the expected output ?
You have two problems with your code, first in gruntfile you are specifying a wrong path, second on your html you are specifying a wrong source.
Let's go by parts, on your gruntfile you have this:
...
includeSource: {
options: {
basePath: 'app/file1.js'
},
...
The basepath option on the docs says:
Type: String or Array[String] Default value: ''
The base path to use when expanding files. Can be an array to support
expanding files from multiple paths.
What this allows us to do is including one or more paths as our base path for our scripts. So let's change our basePath to basePath: 'app', our Gruntfile.js will look like this:
module.exports = function (grunt) {
grunt.initConfig({
includeSource: {
options: {
basePath: 'app'
},
myTarget: {
files: {
'dist/index.html': 'app/index.html'
}
}
}
});
grunt.loadNpmTasks('grunt-include-source');
grunt.registerTask('serve', function (target) {
grunt.task.run('includeSource');
});
};
Now if we run grunt serve it won't work, why? Well because on your index.html you have this:
<!-- include: "type": "js", "files": "scripts/*.js" -->
Which means, insert script tags for all the javascript files, inside the scripts folder, but we don't have any scripts folder, so that's why your dist/index.html is empty. Let's change our index.html to this:
<!-- include: "type": "js", "files": "*.js" -->
Run grunt serve et voilà your index.html has changed to:
<html>
<head>
</head>
<body>
<script src="file1.js"></script>
</body>
</html>
Now you just have to copy file1.js from app/ to dist/
I'm trying to setup this configuration, but I need help. I'm trying to use: https://github.com/accordionpeas/grunt-mocha-require-phantom.
My structure:
build-dev/ <-- Generated by grunt
vendor/
js/
jquery.js
require.js
js/
model/
cache.js <-- File to be tested
tests/
cache.js <-- Test for a file
tests.js <-- like test-bootstrap.js
My gruntfile config is:
mocha_require_phantom:
devel:
options:
base: 'build-dev/js'
main: 'tests'
requireLib: '../vendor/js/require.js'
files: ['tests/**/*.js']
port: 3001
My tests.js (test-bootstrap.js) is:
require.config({
paths: {
jquery: '../vendor/js/jquery',
chai: '/node_modules/chai/chai'
},
baseUrl: '/'
});
mocha.setup({
ui: 'bdd'
});
require([testPathname], function() {
if (window.mochaPhantomJS) {
return mochaPhantomJS.run();
} else {
return mocha.run();
}
});
My tests/cache.js is:
define(['chai', 'model/cache'], function(chai, cache) {
var should;
should = chai.should();
return describe('test suite 1', function() {
return it('should work', function() {
return cache.test().should.be.equal(5);
});
});
});
The problem is it's not working. It can't load model/cache. I was trying to change baseUrl in tests.js (like test-bootstrap.js). I was also trying to change baseUrl in grunt. I was trying to add path: model: ../../js/model, but it was ignored.
I need to call for a model as model/cache, how do I have to set up things to make it work? Should I use another plugin - which one?
Edit: Fixed typos.
I'm working on improving the tests for jquery-csv (jquery plugin).
I can currently run a full suite of tests (ie mocha/chai) from the command line with no problems. I'm having issues figuring out how to use require.js to load dependencies so I can extend the test runner to work with mochaphantomjs tests.
The HTML used to load RequireJS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script data-main="scripts/app" src="scripts/require.js"></script>
</body>
</html>
The RequireJS module:
require.config({
baseUrl: '/',
paths: {
'jquery' : '../../node_modules/jquery/dist/jquery',
'jquery-csv' : '../../src/jquery.csv',
'mocha' : '../../node_modules/mocha/mocha',
'chai' : '../../node_modules/chai/chai',
},
shim: {
'mocha': {
exports: 'mocha'
},
'chai': {
exports: 'chai'
},
'jquery-csv' : {
deps: ['jquery'],
exports: 'jQuery.fn.csv',
}
},
});
define(function(require) {
require('jquery');
require('jquery-csv');
// chai setup
var chai = require('chai');
var expect = chai.expect();
var should = chai.should();
// mocha setup
var mocha = require('mocha');
mocha.setup('bdd');
mocha.reporter('html');
mocha.bail(false);
require(['test.js'], function(require) {
if (window.mochaPhantomJS) {
mochaPhantomJS.run();
}
else {
mocha.run();
}
});
});
Note: The define function is using the CommmonJS style.
The error I'm getting is:
Uncaught Error: Module name "../src/jquery.csv.js" has not been loaded yet for context: _. Use require([])
AFAIK, the shim should have fixed this issue by loading jQuery first and attaching the plugin to it.
I'm pretty new to RequireJS, is there something obvious I'm missing?
Try to add your "jquery-csv" as dependency in:
require(['test.js', 'jquery', 'jquery-csv'], function(require, $) {
if (window.mochaPhantomJS) {
mochaPhantomJS.run();
}
else {
mocha.run();
}
});