I'm currently trying to incorporate GruntJS with a few plugins (PhantomJS Qunit and Connect plugins). However, setting up a simple test is throwing me errors and I can't find the solution despite a few days of searching. I'm using a local web server (MAMP) and the website is running on a CMS.
Running the tests by accessing the test template in a browser works fine, but when trying to access the same tools via the command line using sudo grunt test PhantomJS return an odd error:
Running "qunit:all" (qunit) task
Testing http://user-guides:80/test/test.html
Warning: PhantomJS timed out, possibly due to a missing QUnit start() call. Use --force to continue.
Aborted due to warnings.
Some of my searches had people downgrading their version of phantom.js to deal with similar problems, but so far none of those solutions have worked for me, and I'm afraid i'm missing something right in front of my face.
Here's the contents of my Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
hostname: 'user-guides',
port: 80,
base: 'public'
}
}
},
jshint: {
all: ['Gruntfile.js', 'public/assets/js/helper/*.js', 'public/assets/js/specific/*.js']
},
qunit: {
all: {
options: {
timeout: 5000,
urls: [
'http://user-guides:80/test/test.html',
]
}
}
}
}
);
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('test', ['connect', 'qunit']);
};
Here's the simple Qunit test
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<link rel="stylesheet" href="/assets/lib/qunit.css">
</head>
<body>
<div id="qunit"></div>
<script src="/assets/lib/qunit.js"></script>
<script>
console.log("====TEST===");
start();
test( "hello test", function() {
ok( 1 == "1", "Passed!" );
});
</script>
</body>
</html>
Any help is greatly appreciated.
In my test.html file I originally had just copied the example from the QUnit Cookbook
After finding a similar (possibly the same) issue here:
https://stackoverflow.com/a/25053808/1814739
I updated:
<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
to:
<script src="http://code.jquery.com/qunit/qunit-1.15.0.js"></script>
Running from command-line seems to work after adding http: to the src attribute.
Related
This question has been asked before but there appears to be no concrete answer. My situation is perhaps simpler, and perhaps someone has found a solution by now.
I'm using vite to build a vue.js app, and wish to exclude a bunch of .js files which are just data (word lists for a word game) and which will be modified over time by the server. The files are in a subdirectory of the main build. I have added them into index.html:
<body>
<script type="module" src="./src/assets/words/3letter.js"></script>
......
<script type="module" src="./src/assets/words/9letter.js"></script>
<div id="app" align="center">
</div>
<script type="module" src="/src/main.js"></script>
and after reading through several posts here and at github I have modified vite.config.js in various ways:
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
},
optimizeDeps: {
exclude: [
'./src/assets/words/*.js'
],
},
// build: {
// commonjsOptions: {
// exclude: [
// './src/assets/words/*.js'
// ]
// },
// }
})
but neither the optimizeDeps method or the commonjsOptions method works; when I run npm run build the word files are still included in the build, and the refs to them are removed from index.html
If I remove type="module" from the html refs, the build process gives me errors:
script src="./src/assets/words/3letter.js" in "/index.html" can't be bundled without type="module" attribute
and the relevant lines aren't removed from index.html, but the word lists are still being bundled! - they're easy to see inside the big resulting built .js file
I guess I was taking the wrong approach.
Since the .js files I want to excllde are just data (which my change over time)....
export const words4 = [
"ABED",
"ABET",
"ABLE",
"ABLY",
"ABUT",
"ACED",
....]
.....it's best that I recreate them as .json files instead of .js files, then use an http GET to retrieve them. Or, since MySql will be running on the server, store the words lists there.
I am trying to implement chat using the following URL:
https://socket.io/get-started/chat/ ...
the above website says I need to install socket.io using npm
npm install --save socket.io
But I think I have already installed socket.io on my system but I don't know how to check whether it is already or not.
I tried
socket.io -v
but it throws the following error
-bash : socket.io: command not found
Socket.io has been installed on your system if the npm command runned normally.
You can try for example a file with this script in your index.html
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io('/');
socket.emit('api', {command: 'test', args: {
text: "Hello World"
}}, function(result) {
console.log(result)
});
socket.on('api', function(data, fn){
if(data.command=="test"){
window.alert (data.args.text)
}
});
</script>
I am using browserify to move a reusable typescript module into the browser using gulp.
gulp.task("default", function(){
return browserify({
basedir: '.',
debug: true,
require: ['./src/common/common.ts'],
fullPaths: false,
cache: {},
packageCache: {}
}).plugin(tsify)
.bundle()
.pipe(source('common.js'))
.pipe(gulp.dest("dist"));
});
To my surprise I need to include the resulting common.js file via
require("c:\\Users\\Luz\\Desktop\\tstest\\client\\src\\common\\common.ts");
In typescript or in builds using UMD + require JS I require files using relative paths without problems with exactly the same code. In the moment I add browserify I get absolute paths. I tried compiling typescript myself and use browserify without tsify but it always demands an absolute path to include it. All other modules that require common.js will fail to find it. How can I fix this?
Edit: Example how it looks like in the html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="common.js"></script>
</head>
<body>
<script>
console.log("script started");
//works
var test = require("c:\\Users\\Luz\\Desktop\\tstest\\client\\src\\common\\common.ts");
test.printCommon();
//fails (all other modules will try to find it at this path)
var test2 = require("../common/common");
test2.printCommon();
</script>
</body>
</html>
While I couldn't find the root of the problem I found a solution that works:
var brofy = browserify({
basedir: '.',
debug: true
});
brofy.plugin(tsify);
brofy.require("./src/common/common.ts", { expose: "../common/common" });
brofy.bundle()
.pipe(source('common.js'))
.pipe(gulp.dest("dist"));
The property expose will make sure that require("../common/common") leads to the correct module avoiding any absolute paths and allowing me to use the same paths I use in typescript.
Other bundles can reference the bundle using "brofy.external("../common/common");" to tell browserify to not include it in their own bundle and rather use require to find it.
Edit: Still hoping someone comes up with a better solution.
Gruntfile.js content:
grunt.initConfig({
connect: {
server: {
options: {
port: 5005,
base: '.'
}
}
},
qunit: {
all: ['test/*.html']
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.registerTask('test', ['connect', 'qunit']);
Test/index.html file content:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Sitejson - QUnit Test Runner
</title>
<link rel="stylesheet" href="libs/qunit/qunit.css" type="text/css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="libs/qunit/qunit.js" type="text/javascript"></script>
<script src="testcases/tests.js" type="text/javascript"></script>
</body>
</html>
tests.js content:
QUnit.test("hello test", function(assert) {
assert.ok(1 == "1", "Passed!");
});
I am working on Ubuntu / Linux environment. I have also installed Phantomjs and is working fine. Whenever i try to run grunt test I'm receiving a fatal error: spawn ENOENT error.
whereas i try running it on browser its qunit is working fine...
I am not able to identify what the issues. Am i missing some more configuration over here.
grunt test --debug shows me:
Running "connect:server" (connect) task
[D] Task source: /media/hegdeashwin/Storage-TB/qunittesting/node_modules/grunt-contrib-connect/tasks/connect.js
Started connect web server on http://0.0.0.0:5005
Running "qunit:all" (qunit) task
[D] Task source: /media/hegdeashwin/Storage-TB/qunittesting/node_modules/grunt-contrib-qunit/tasks/qunit.js
Testing test/index.html [D] ["/media/hegdeashwin/Storage-TB/qunittesting/node_modules/grunt-contrib-qunit/node_modules/grunt-lib-phantomjs/phantomjs/main.js","/tmp/1405775714604.2773","test/index.html","{\"timeout\":5000,\"inject\":\"/media/hegdeashwin/Storage-TB/qunittesting/node_modules/grunt-contrib-qunit/phantomjs/bridge.js\",\"urls\":[],\"force\":false,\"console\":true,\"httpBase\":false}"]
Fatal error: spawn EACCES
Use the following process:
set the tmpdir environment variable:
setenv TMPDIR=~/tmp
Rerun the grunt task
If it works, set this permanently by adding the following to your .bashrc or .profile:
export TMPDIR=~/tmp
References
Troubleshooting ยท npm/npm Wiki
Secure Programs HowTo
Environment Variables
FAQ Troubleshooting
I am having some problems with the optimized code that weyland generates. Here is what I did so far:
This is my project structure:
This is my weyland-config file:
exports.config = function(weyland) {
weyland.build('main')
.task.uglifyjs({
include:['www/**/*.js', 'www/js/durandal/**/*.js']
})
.task.rjs({
include:['www/**/*.{js,html}', 'www/js/durandal/**/*.js'],
loaderPluginExtensionMaps:{
'.html':'text'
},
rjs:{
name:'libs/require/require', //to deploy with require.js, use the build's name here instead
baseUrl : '../www/js',
paths : {
'text': 'libs/require/text',
'durandal': 'durandal',
'plugins': 'durandal/plugins',
'transitions': 'durandal/transitions',
'knockout': 'empty:',
'bootstrap': 'empty:',
'jquery': 'empty:'
},
inlineText: true,
optimize : 'none',
pragmas: {
build: true
},
stubModules : ['text'],
keepBuildDir: true,
out:'../www/js/main-built.js'
}
});
}
This is what I added in my index.html file to run the generated file instead of the one created by me:
<script src="js/main-built.js"></script>
I have also tryed using:
<script data-main="js/main-built" src="js/libs/require/require.js"></script>
This is what I had before:
<script data-main="js/main" src="js/libs/require/require.js"></script>
After I run weyland build on the command line the main-built file get's generated without any errors.
If I try to run the app the applycation freezez at the start screen as if the the app.start() method never get's called and no errors are being displayed.
I have checked chrome debugging tools the main-built file is recieved by the client it just seems it does nothing.
What am I doing wrong?
EDIT
I have also tryed building using almond-custom and ading this aditional configuration:
insertRequire:['main']
wrap:true
When I try to run the app I get this error:
Uncaught Error: main missing durandal/app
In my main fail I am loading the 'durandal/app' threw require js and for some reason it can not find it anymore