Develop Reference

How to generate new revision each build in vuejs?

I'm using vue cli with pwa (workbox).
every time I build the project vue is create for me file: precache-manifest.882c44d211b70f8989278935.js.
inside I have entries: revision, url:
{
"revision": "2332b61ff6f66ba9523b370a7f21196d",
"url": "/index.html"
},
If I don't change the file, it gets the same revision.
My question is how to force to have different revision each time I build the project?

You may need workbox#v5 to modify the manifest.
Assuming using yarn, add resolutions field in package.json:
"resolutions": {
"#vue/cli-plugin-pwa/workbox-webpack-plugin": "^5.0.0"
},
Then run yarn to install. And in your vue.config.js:
module.exports = {
pwa: {
workboxOptions: {
exclude: ['index.html'],
additionalManifestEntries:[
{ url: '/index.html',revision: Date.now().toString() }
]
}
}
}
See also:
https://github.com/vuejs/vue-cli/issues/5119#issuecomment-580144313
https://github.com/GoogleChrome/workbox/issues/2243
If you don't like workbox#v5, apparently you can modify precache manifest after build :)

jspm + karma + karma-jspm + plugin-typescript

This post is stackoverflow repost from my issues at https://github.com/frankwallis/plugin-typescript/issues/64 and https://github.com/Workiva/karma-jspm/issues/112
We plan to upgrade our team stack for web ui so we decide:
1) use Karma as test launcher and jasmine as framework ( mocha and custom runners before)
2) use TypeScript for source code with UMD or system module out (pure Javascript before)
3) use SystemJS as module loader to allow use different module's types (CommonJS, AMD, system , ES6) without overheat ( RequireJS before)
And additionally:
1) we want to run tests directly from typescript code without precompilation and storing JS on disk
2) we want to have test environment layout very close to production layout
3) we have setup karma + jasmine + karma-typescript-preprocessor and it works well. BUT we want ot work with JSPM/SystemJS loader while in this case we will be sure that our test environment match production where SystemJS loader is used. Becuase for another hand we will require to write some custom bootstrap things for test-only.
But we have problems with karma + jspm + typescript-plugin (jspm).
In JSPM './config.js'
System.config({
baseURL: "/",
"transpiler": false,
"packages": {
"src": {
"main": "test.ts",
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "ts"
},
"*.js": {
"loader": "ts"
}
}
}
},
paths: {
"npm:*": "jspm/npm/*",
"github:*": "jspm/github/*"
},
map: {
"ts": "github:frankwallis/plugin-typescript#2.2.3",
"typescript": "npm:typescript#1.6.2",
"github:frankwallis/plugin-typescript#2.2.3": {
"typescript": "npm:typescript#1.6.2"
}
}
});
In Karma config:
// Karma configuration
// Generated on Mon Nov 30 2015 02:58:44 GMT+0500 (RTZ 4 (зима))
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jspm','jasmine'],
plugins:[
"karma-jspm",
'karma-jasmine',
'karma-chrome-launcher'
],
jspm: {
loadFiles: ['src/test.ts'], //we just try to check one simple test
packages: "jspm/"
} ,
proxies : { // avoid Karma's ./base virtual directory
'/src/': '/base/src/',
'/jspm/': '/base/jspm/'
},
reporters: ['progress'],
port: 9876,
browsers: ['Chrome']
})
}
But something goes wrong:
30 11 2015 14:53:34.564:WARN [web-server]: 404: /jspm/github/frankwallis/pl
ugin-typescript#2.2.3
Chrome 46.0.2490 (Windows 10 0.0.0) ERROR: 'Potentially unhandled rejection [6]
Error: XHR error (404 Not Found) loading http://localhost:9876/jspm/github/frank
wallis/plugin-typescript#2.2.3
at error (http://localhost:9876/base/jspm/system.src.js?6536115be64e0ff966e0
5546f7767676fa7c03d6:1020:16)
at XMLHttpRequest.xhr.onreadystatechange (http://localhost:9876/base/jspm/sy
stem.src.js?6536115be64e0ff966e05546f7767676fa7c03d6:1028:13)'
And we checked that url is valid: for ex /jspm/github/frankwallis/plugin-typescript#2.2.3\utils.js is served well by Karma.
I don't understand why it trys to load whole typescript plugin directory.
So we have question:
1) Is it a bug or our fail in understanding/config
2) If it's our fail - how to fix it?
3) May be we choose not correct how to test with Karma + JSPM + Typescript?
Any advice will be helpful.

Have found mistake ourselves: "defaultJSExtensions": true, was not in .\config.js

I used karma-uiuxengineering-jspm instead of karma-jspm.
It's a fork which seemed to fix my problems at the time, and which supports JSPM 0.17-beta.
The repo also has some seed projects for angular2 and typescript (using JSPM) with a testing environment. It really helped me the set up my project.

grunt jasmine-node tests are running twice

I set up grunt to run node.js jasmine tests. For some reason, with this config, the results always show double the tests.
Here is my config:
I'm using jasmine-node which plugs into grunt.
/spec/some-spec.js:
var myModule = require('../src/myModule.js');
describe('test', function(){
it('works', function(done){
setTimeout(function(){
expect(1).toBe(1);
done();
}, 100);
});
});
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
jasmine_node: {
options: {
forceExit: true
},
all: ['spec/']
}
});
grunt.loadNpmTasks('grunt-jasmine-node');
grunt.registerTask('default', ['jasmine_node']);
};
This results in two tests running rather than one.
> grunt
Running "jasmine_node:all" (jasmine_node) task
..
Finished in 0.216 seconds
2 tests, 2 assertions, 0 failures, 0 skipped

I was able to reproduce the behavior. This is what seems to be happening:
The task looks in the specified folder (spec in your case) for files with spec in the name.
Then it looks again in every folder in the whole project for files with spec in the name.
What it ends up with is 2 overlapping sets of test files to run.
My first attempt at trying to coerce it into more logical behavior was to set specNameMatcher: null (default is 'spec'), and leave the folder set to 'spec/'. This results in no tests being run, since apparently both conditions (name and folder) must be met for files in the specified folder. You get the same problem if specNameMatcher is left at the default value, but the files in the folder don't have 'spec' in the name.
What does work is to set the folder (or 'test set' or whatever you want to call it) to []:
jasmine_node: {
options: {
forceExit: true
},
all: []
}
The catch is that if you have any other files somewhere else in the project with 'spec' in the name, they'll be mistaken for tests by jasmine.
I would consider this behavior a bug, and it should probably be reported via the project's github issues page.

This grunt plugin ( https://github.com/jasmine-contrib/grunt-jasmine-node ) seems to be dead ( https://github.com/jasmine-contrib/grunt-jasmine-node/issues/60 ).
Maybe it is a better to switch to https://github.com/onury/grunt-jasmine-nodejs ?

The jasmine-node project is pretty old. The latest commit is from July of 2014. The grunt-jasmine-node plugin appears to be active, but running against something that is going stale seems a little pointless IMHO.
To test CommonJS modules using Jasmine I'd recommend using Karma along with the
karma-jasmine and karma-commonjs plugins. I got your example working with the following files:
package.json
{
"private": "true",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-jasmine-node": "^0.3.1",
"grunt-karma": "^0.10.1",
"jasmine-core": "^2.3.4",
"karma": "^0.12.31",
"karma-commonjs": "0.0.13",
"karma-jasmine": "^0.3.5",
"karma-phantomjs-launcher": "^0.1.4"
}
}
karma.conf.js
module.exports = function(config) {
config.set({
basePath: '.',
frameworks: ['jasmine', 'commonjs'],
files: [{
pattern: 'src/**/*.js'
}, {
pattern: 'spec/**/*.js'
}],
preprocessors: {
'src/**/*.js': ['commonjs'],
'spec/**/*.js': ['commonjs']
},
reporters: ['progress'],
browsers: ['PhantomJS']
});
};
Gruntfile.js (optional if you still want to use grunt)
module.exports = function(grunt) {
grunt.initConfig({
karma: {
unit: {
configFile: 'karma.conf.js',
options: {
singleRun: true
}
}
}
});
grunt.loadNpmTasks('grunt-karma');
grunt.registerTask('default', ['karma:unit']);
};
You should also install the karma command line runner globally, just like you probably did with grunt. npm install -g karma-cli
From your command line you can start karma by typing karma start. It will run the tests and then watch your files and re-run them on every save. (VERY NICE)
Alternatively you can run karma start --single-run to have it just run your tests once and exit. If you also updated your Gruntfile you can also just run grunt to run the tests once.

The current up voted answer isn't the solution. You simply modify the expression that's going to match your tests. The answer is as follows:
module.exports = function(grunt) {
grunt.initConfig({
jasmine_node: {
options: {
forceExit: true
},
all: ['spec/*spec.js']
}
});
grunt.loadNpmTasks('grunt-jasmine-node');
grunt.registerTask('default', ['jasmine_node']);
};
Here you can see that 'all' is set to *'spec/spec.js'. This will search for all tests.
Secondly, just because a project hasn't had a recently commit, doesn't mean it's "old". jasmine-node is simply stable.

I have the same issue using grunt-jasmine-node, and as aeryaguzov points out, that project is no longer maintained. Switching to grunt-jasmine-node-new solves the issue for me.
grunt-jasmine-node-new is a fork of grunt-jasmine-node that is actively maintained, and can be found here: https://www.npmjs.com/package/grunt-jasmine-node-new

Visual Studio Chutzpah Running test on different projects with AMD modules

I have two projects under a solution, one is my main web project, say MyProject and the other serves for testing purposes, say MyProject.Tests.
Solution
MyProject
MyProject.Tests
I want to have my JavaScript headless tests running to the second one.
On the first project, all the javascript files are under the Scripts directory, like so:
Scripts/
Common.js
Libs/
jquery/
jquery.js
requirejs/
require.js
At the test project, I have my chutzpah.json file on root.
MyProject.Tests
chutzpah.json
Tests/
Specs/
spec.js
The file has this configuration:
{
"Framework": "jasmine",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"Tests": [ { "Path": "Tests/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": ["*Common.js"],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
But when I try to run the spec file I get an error.
Spec file:
define(["jquery"], function ($) {
//code here. Doesn't matter, the error is because of the jquery module
});
The error, is this:
Error: Error opening C:/Users/g.dyrrahitis/Documents/Visual Studio 2013/Projects/MySolution/MyProject.Tests/Scripts/Libs/jquery/jquery.js: The system cannot find the path specified.
The thing is that chutzpah tries to find my jquery module at the test project rather the main project, where it resides.
Why I'm getting this kind of behavior and how can I solve this please? I've been trying for hours to tackle this with no luck so far.
Note
*The names MySolution, MyProject, MyProject.Tests are used for clarity, rather than using the real names.

I've found it, the chutzpah file hadn't the right configuration options (as expected) for the test harness directory.
I needed the TestHarnessDirectory and TestHarnessLocationMode options to explicitly instruct it to look at my main project directory.
This now is the correct one:
{
"TestHarnessDirectory": "../MyProject",
"TestHarnessLocationMode": "Custom",
"TestHarnessReferenceMode": "AMD",
"Framework": "jasmine",
"Tests": [ { "Path": "JavaScript/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": [ "*Common.js" ],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
Just needed to tell chutzpah that the harness location mode is custom, in order to provide a directory for it, which is the root of my main project.
Beware for the right configuration paths then, you may end up struggling for hours like me to find a solution. And read the documentation thoroughly (which I hadn't done).

Generating source maps from browserify using grunt

I have followed the instructions here: https://www.npmjs.org/package/grunt-browserify, to try and set up source maps for browserify on grunt. The options for browserify in my gruntfile are :
browserify: {
options: {
bundleOptions : {
debug: true
}
},
dist: {
files: {
"public/client.bundle.js": ["bundle.js"]
}
}
}
The generation of bundle.js happens without any issues, however the source map generation does not happen. Is there anything wrong with my grunt-browserify options.
Thanks for looking.

use browserifyOptions instead of bundleOptions
browserify: {
options: {
browserifyOptions: {
debug: true
}
},
...
}

By default, browserify generates inline source maps as a comment in bundle.js. Browserify's README suggests using exorcist if you want to extract them to a separate file:
$ browserify main.js --debug | exorcist bundle.js.map > bundle.js
And grunt-extract-sourcemap rolls this up in a grunt task