Using Travis-CI for client-side JavaScript libraries? - javascript

I'm not sure to use Travis-CI for my client-side JavaScript library or not, because it compiles with NodeJs on Travis-CI servers.
I want to know is this a good approach to use some kind of continuous integration such as Travis-CI for client-side libraries or not?

Yes of course you should use continous integration with client side libraries.
I personally use PhantomJS (headless webkit browser) which is already installed in Travis-CI. I think this is the better option for client-side stuff than NodeJs.
If you use Grunt, it gets even easier to use, all you need is a simple Gruntfile.js file, your tests that run in browser (I use QUnit), and a simple .travis.yml
Gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
qunit: {
files: ['test/index.html']
}
});
// Load plugin
grunt.loadNpmTasks('grunt-contrib-qunit');
// Task to run tests
grunt.registerTask('test', 'qunit');
};
.travis.yml:
before_script:
- sudo npm install -g grunt
script: grunt test --verbose --force
You can see it in action at one of my projects (source on GitHub).

I started with the answer from Odi and moved to gulp to get it working. If you specify node_js as your language in your travis file, travis will automatically run
npm install
followed by
npm test
The first will install any devDependencies specified in a package.json file, the second will run the script named "test" also from package.json. Below you'll find the three files I needed to have in the top level of my repo for travis to run a single qunit suite.
.travis.yml
language: node_js
node_js:
- "0.10"
gulpfile.js
var gulp = require('gulp'),
qunit = require('gulp-qunit');
gulp.task('default', function() {
return gulp.src('./tests/unit/unittests_nupic-js.html')
.pipe(qunit());
});
package.json
{
"name": "nupic-js",
"version": "0.0.1",
"description": "JavaScript port of NuPIC",
"license": "GPL-3.0",
"repository": "iandanforth/nupic-js",
"bugs": { "url" : "http://github.com/iandanforth/nupic-js/issues"
},
"author": {
"name": "Ian Danforth",
"email": "iandanforth#gmail.com"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"test": "gulp"
},
"keywords": [
"numenta",
"nupic",
"machine learning"
],
"devDependencies": {
"gulp-qunit": "~0.2.1",
"gulp-util": "~2.2.14",
"gulp": "~3.5.1"
}
}

Odi's answer updated and using npm to resolve dependencies:
.travis.yml
language: node_js
node_js:
- "6"
.Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
qunit: {
files: ['./test/qunit.html']
}
});
// Load plugin
grunt.loadNpmTasks('grunt-contrib-qunit');
// Task to run tests
grunt.registerTask('test', 'qunit');
};
Package.json (relevant parts)
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-qunit": "^1.3.0"
},
"scripts": {
"test": "grunt test"
}
You can try the configuration locally by running npm install and then npm test.

I found this example. Quite comprehensive!
https://github.com/jonkemp/gulp-qunit
run:
npm install
gulp test
It also has tasks for lint watching files, coverage reports and more.

Related

lint-staged run different commands for different folders

My project folder is setup with two subfoders, frontend and backend to house codes respectively.
Therefore in the root folder I have:
- backend
- package.json
- other backend codes
- frontend
- package.json
- other frontend codes
- package.json
In the root's package.json, I have:
"scripts": {
"frontend:lint": "cd ./frontend && npm run lint && cd ..",
"backend:lint": "cd ./backend && npm run lint && cd .."
},
"devDependencies": {
"husky": "4.3.8",
"lint-staged": "10.5.3"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"frontend/**/*.{ts, tsx, json, html}": [
"npm run frontend:lint"
],
"backend/**/*.{ts, json}": [
"npm run backend:lint"
]
}
However if I do git add and the git commit on root level, it keeps saying No staged files match any configured task.
I have looked into both of the sub package.json and they all worked. I am not sure how to configure lint-staged to filter files.
Some explanation of how to target files is given here: https://www.npmjs.com/package/lint-staged#user-content-filtering-files
It may not be applicable in your case as your config gives multiple file types, but just to flag it as a possibility, there is a “Lint-staged tasks do not run if a single filetype is specified with curly braces e.g. *.{js} ” ticket open on the lint-staged repo in which a collaborator comments:
We use micromatch for the globs, and this sounds like an issue in the library.
Perhaps the issue extends further. I also ran into the No staged files match any configured task. message and for me adding the jsx extension to the config fixed it.
Originally I had:
"lint-staged": {
"**/*.{js}": [
"eslint --fix"
]
}
After amending to the following, it worked fine:
"lint-staged": {
"**/*.{js,jsx}": [
"eslint --fix"
]
}

Gulp 4 watch task is not detecting changes

I am trying to switch to Gulp version 4 from Gulp version 3 and I am constantly having issues with watch task, it will not detect changes when the tracked SCSS file is changed. I made a simple example of the watch function since it is easier for debugging.
Ubuntu 17.10
Node v8.9.4
Npm 6.9.0
Gulp CLI version: 2.2.0
Gulp Local version: 4.0.2
I tried removing gulp and gulp-cli completely and installing it again, removing node_modules folder and creating package.json file from scratch but the result is the same. "Starting 'watch'..." and nothing else.
package.json
{
"name": "starter",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-sass": "^4.0.2"
}
}
gulpfile.js
const {src, dest, watch} = require('gulp');
const sass= require('gulp-sass');
function style() {
return src('./scss/**/*.scss')
.pipe(sass())
.pipe(dest('./css'));
}
function watchTask() {
watch('./scss/**/*.scss', style);
}
exports.style = style;
exports.watch = watchTask;
Note: Style task is working correctly and moving all .scss files from source to destination.
I really appreciate any help since I am running out of ideas.
gulp watch detects changes after it boots up, not between this run and last run of gulp watch.
You need to tell gulp watch to run the first style task regardless.
function watchTask() {
watch('./scss/**/*.scss', {ignoreInitial: false}, style);
}
Then it will re-run style task whenever you touched some scss file again.
Update:
Are you using files on docker or a network mapped disk? You might need to turn on {usePolling: true} as documented "needed for successfully watching files over a network or other non-standard situations. "

How to use Jasmine like Mocha does on node.js

Hi there I was wondering how can I use jasmine like Mocha does w/ Chai.
So basically, in Mocha you just have to install it on node and then include it within your test files like this:
const assert = require('chai').assert;
const expect = require('chai').expect;
const should = require('chai').should();
const app = require('../app');
Then you automatically include some test and run npm run test and you can see the failing and passing test via the terminal.
While I tried to install jasmine via node using npm install jasmine --save-dev and then put the ff:
const expect = require('jasmine');
const app = require('../app');
And then tried some test:
describe('Multiply Numbers', function(){
it('should return correct output', function(){
let result = app.multiplyNumbers(2,2);
expect(result, 4);
});
});
I got the ff error:
> jasmine-test#1.0.0 test c:\xampp\htdocs\unitTesting\jasmine
> jasmine
Started
No specs found
Finished in 0.003 seconds
Any idea how can I run some test on Node js like mocha and chai does?
Also where can I find the assertion options (like expect, should..etc in chai) documentation?
PS. Here's what my package.json file:
{
"name": "jasmine-test",
"version": "1.0.0",
"description": "",
"main": "app.js",
"directories": {
"test": "test"
},
"scripts":{
"test": "jasmine"
},
"author": "",
"license": "ISC",
"devDependencies": {
"jasmine": "^2.8.0"
}
}
There is a different way to implement testing environment using Jasmine for node setup.
First Install Jasmine-node Module
npm install jasmine-node --save-dev
Create a tests directory and a spec file
mkdir tests
touch tests/myFirstTest.js
Now you can add your jasmine specs in this file, following the usual Jasmine syntax.
The documentation to be followed is here: https://jasmine.github.io/2.0/introduction.html
Add following in your spec file to integrate your app with the spec.
var myApp = require("../myApp.js")
One problem identified regarding this integration is that the specs may run again and again if server is not closed. For preventing this, just go to your application's main js file and export the close server function. Basically you need to add following in your app.js:
exports.closeServer = function(){
server.close();
};
Be sure to close the server in afterEach jasmine function (refer doc above) as follows:
myApp.closeServer();
In order to run tests from terminal using npm test, just add this to your packages.json file:
"scripts": {
"test": "jasmine-node tests"
}
You are all setup! Just run in your terminal,
npm test

grunt not running Qunit tests correctly

Situation : I am currently using QUnit to test a project in TypeScript/Javascript and everything works fine when I'm running them in a browser.
Problem : I'm trying to use grunt to run the QUnit tests in a headless mode (I need it for continuous integration testing) and the tests don't run properly.
Configuration
Here's how I have things currently set up :
Gruntfile.js
package.json
src/
- Ts source files
test/
- config.js
- Test.ts
- Test.js
- test.html
Gruntfile.js
/*global module:false*/
module.exports = function(grunt) {
grunt.initConfig({
connect: {
server: {
options: {
port: 8000,
base: '.'
}
}
},
qunit: {
all: {
options: {
urls: [
'http://localhost:8000/test/test.html'
]
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('test', ['connect', 'qunit']);
};
package.json
{
// Name, version, description, repo and author fields...
"engines": {
"node": ">= 0.10.0"
},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-connect": "~0.9.0",
"grunt-contrib-qunit": "~0.5.2"
}
}
And then I have a .travis.yml file to run all of this. I don't know if it's really important because the tests don't run either in travis or in my local environment, but here is it anyways :
language: node_js
node_js:
- "0.11"
- "0.10"
before_install:
- "npm install grunt --save-dev"
- "npm install -g grunt-cli"
install:
- "npm install"
- "npm install -g typescript"
script:
- "tsc --module amd --target ES5 ./src/*.ts"
- "grunt test --verbose --force"
And here's the part that errors in the travis build : http://puu.sh/eKpWj/35614680e1.png
(I currently have ~20 assertions that pass when I'm running them in a browser. Also, the typescript compilation runs ok.)
Edit : And as someone asked fot it, here's the content of the Test.html file : http://pastebin.com/LN3igmjc
Edit 2 : Here's also the content of config.js :
var require = {
baseUrl: "../src/"
};
Actually I managed to make it work.
I changed two things :
I wasn't compiling the tests, as tsc --module amd --target ES5 ./src/*.ts compiled the files in the src folder, and the test files were in the test folder. I'm bashing myself for this one...
So I simply added tsc --module amd --target ES5 ./test/*.ts in the .travis.yml file
The biggest problem was that the QUnit tests were trying to start before the work of require.js. The solution I used was to tell QUnit to not start tests automatically by using QUnit.config.autostart = false; and make them start when I want with QUnit.start(); I placed this start() at the end of my Test.js file so that the tests start only when QUnit is done loading.

NPM installing modules to application root

I messed something up and I've done my best to fix it, but no luck.
Whenever I run 'npm install' on a new node project, it installs all of my dependencies to the root of the application instead of in /node_modules/ like you'd expect in a default application.
For example-
My package.json
{
"name": "hello-world",
"description": "hello world test app",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "3.x"
}
}
When I use 'npm install' I end up with this:
I've tried setting my PATH like in this solution:
How to use package installed locally in node_modules?
but that didn't seem to do much. Help?
observe that you have the cache variable set in that directory
strict-ssl = false
userconfig = /private/tmp/timothy/timothy_local_job_1367532952281_60137/.npmcfg
cache = /Users/tomhorton/Documents/Repository/helpmestackoverflow
root = ./node_modules
That timothy stuff is from a module that I installed shortly before everything went haywire-
I removed that stuff and the defaults took over. Everything works great!

Categories