karma error 'There is no timestamp for' - requirejs

Trying to get karma working with requirejs. I don't understand why I am getting all of these errors when running Karma:
ERROR: 'There is no timestamp for /base/test/mainSpec.js?bust=1387739317116!'
ERROR: 'There is no timestamp for /base/app/main.js?bust=1387739317116!'
ERROR: 'There is no timestamp for /base/bower_components/jquery/jquery.js?bust=1387739317116!'
When I go to the network tab in inspector, all of the files are there with no 404s.
I'm a little confused because karma seems to be looking for a 'base' directory but there is no 'base' directory in my project. According to the karma docs:
Karma serves files under the /base directory. So, on the server
requests to files will be served up under
http://localhost:9876/base/*. The Require.js config for baseUrl gives
a starting context for modules that load with relative paths. When
setting this value for the Karma server it will need to start with
/base. We want the baseUrl for our tests to be the same folder as the
base url we have in src/main.js, so that relative requires in the
source won’t need to change. So, as we want our base url to be at
src/, we need to write /base/src.
This confusing to say the least. Am I supposed to have a baseUrl configuration in my main.js file that points to '/base'?

note: This post was valid by Karma in 2014 Jan 16. I am not certain of the current state of that lib, maybe they fixed their weird configuration logic and added meaningful error messages. If not, then this post can be probably very helpful by fixing configuration issues related to Karma.
These kind of errors occur by misconfiguration. You should add everything your test uses to the file patterns in your config file.
For example:
module.exports = function (config) {
config.set({
basePath: './',
frameworks: ['jasmine', 'requirejs'],
files: [
{pattern: 'test/bootstrap.js', included: true},
{pattern: 'test/**/*.js', included: false},
{pattern: 'src/**/*.js', included: false},
{pattern: 'vendor/**/*.js', included: false}
],
exclude: [
],
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Firefox'],
captureTimeout: 6000,
singleRun: false
});
};
In this example the bootstrap.js is the only file included by Karma in the HTML, the other files are dependencies which are loaded by the code in the bootstrap.js. The pattern order is very important and sadly it is far from logical: the next pattern does not override the previous one. So if I'd give the test/**/*.js pattern as first and test/bootstrap.js as second, it would not work because the bootstrap would not be included. In these cases Karma sends you an "empty testsuite" message, which is useless if you don't know how to configure it...
If your tests try to use a file which is not covered by the patterns you gave in your Karma configuration file, then you will get the "There is no timestamp for xy" error message, which is very similar to the previously mentioned "empty testsuite". If you don't know the system you won't have a clue, what it means, or what you have to do in order to fix it ...
The exclude part of the configuration object is for files, which have been added to the file patterns for inclusion, but you don't want to include or use them in your tests. These can be for example requirejs configuration files for development and production environments, etc...

For me it was simply making the mistake of setting basePath: 'base' instead of baseUrl: '/base'.
baseUrl: '/base' ftw!

The basePath is to identify the root of your project relative to the configuration file (karma.conf.js). Take a look at this example: https://github.com/karma-runner/karma/blob/v0.8.5/test/client/karma.conf.js
In the browser, I also got this error about the timestamp but it doesn't affect anything. The tests are working properly. I guess it should be a warning more than an error :-)

Jeff's right, you should exclude the requirejs config file of your app, because "we don't want to actually start the application in our tests. [LINK]".
The test-main.js config file is a separate file from the requirejs config file your app uses, which in your case might be config.js or main.js, depending on where you config your requirejs.
They both configures path and dependencies (could be specifying about the same ones), but the former is to provide requirejs support for the tests you write. This whole requirejs setup is a separate one from the requirejs you use in your app. So don't include the latter, it confuses Karma.
And the link above is a working Karma with its requirejs demo, check it out.

After trying all the solutions posted on different sources, Finally I got it Fixed. Check it here: Make "no timestamp" error configurable #6 .
Example from the issue for the karma.conf.js file:
client: {
requireJsShowNoTimestampsError: '^(?!.*(^/base/app/node_modules/))'
}

in my karma.conf.js file, I simply excluded my file that contained my require.config function (in my case happened to be config.js) and the errors went away.
exclude: [
'app/config.js',
'bower_components/jasmine/**/*.js'
],

This error can also happen when the files in question don't actually exist!
So check to make sure that the file you're getting this error for actually exists in your project!
Once you find out what the files are, you can ignore them using a pattern like so in your karma.conf.js, if it turns out their existence should be ignored in some cases:
exclude: [
'path/to/files/to/ignore/**/*.js'
]

I had an exact same error in my project and I found that the best and fastest way to debug where is the problem is to list the files that our karma have loaded.
If you used karma init (if not, just do it) and respond YES to the question about the usage of RequireJS you probably have a file like this:
var tests = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
var BASE_URL = '/base/build/js';
var BASE_URL_REGEXP = /^\/base\/build\/js\/|\.js$/g;
// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function (file) {
console.log(file;) // ADD THIS CONSOLE LOG TO LIST LOADED FILES
if (TEST_REGEXP.test(file)) {
var normalizedTestModule = file.replace(BASE_URL_REGEXP, '')
tests.push(normalizedTestModule)
}
})
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: BASE_URL,
paths: {
},
shim: {
},
deps: tests,
// we have to kickoff jasmine, as it is asynchronous
callback: window.__karma__.start
})
Then you can play with your karam.conf.js file and load new files to check whats going on in karma local path.

Expanding from #Naruto Sempai's answer:
I resolved this issue by first setting the basePath attribute in my karma.conf.js file. This path contains the needed ../ (previous directory) strings until my path was at the root of my source/test files.
Then I modified my test-main.js file (containing my RequireJS configuration) and set the baseUrl to /base.
Now, no timestamp errors.
--
To illustrate my environment and paths I configured, heres a basic setup example:
Source file location:
/Users/ben/some-project/src/main/resources/var/www/project/js/app
Test file location:
/Users/ben/some-project/src/test/var/www/project/
Karma Config location:
/Users/ben/some-project/src/test/var/www/project/karma.conf.js
Test RequireJS Config location:
/Users/ben/some-project/src/test/var/www/project/test-main.js
My karma.conf.js:
module.exports = function (config) {
config.set({
basePath: '../../../../'
});
}
to make my "root" at /Users/ben/some-project/src/.
My test-main.js:
requirejs.config({
baseUrl: '/base'
});

Related

karma config moving a file to base directory

Is there a way to move a file loaded in the Karma config to new directory, such as /base/? I have an external project which contains the source files. I am able to load the file via ../../directory. However, it inserts the file into the /absolute/ folder. If I load the test(s) on another computer, the directory of /absolute/ is different. Is there a preprocessor or some configuration I am missing? I searched through the karma documentation, but couldn't find what I am looking for.
// list of files / patterns to load in the browser
files: [
{ pattern: 'node_modules/jquery/dist/jquery.min.js', included: false },
{ pattern: 'node_modules/knockout/build/output/knockout-latest.js', included: false },
{ pattern: 'node_modules/knockout-mapping/dist/knockout.mapping.min.js', included: false },
{ pattern: 'node_modules/knockout-postbox/build/knockout-postbox.min.js', included: false },
{ pattern: '../FantasyFootball/wwwroot/js/site.js', included: false, served: true, watched: true },
{ pattern: 'tests/*.js', included: false },
{ pattern: 'test-main.js', included: true }
],
Karma generates paths that start with /absolute/... for files you ask it to
load files that are outside Karma's basePath. Karma does this because there's no
simple way to provide a path to these files through the usual /base/ path that
is both unique and inferable. If you are to provide a relative path to a
file above basePath, Karma cannot just combine it with /base/. For instance,
if you had ../my/file.js and ../../my/file.js in your files array, then
combined with /base/, they would both turn into the path /my/file.js. For
cases like this, Karma generates a unique and inferable path by using
/absolute/ and appending the absolute path of the file on disk.
Ok, so where does that leave you? You want Karma to load files outside
basePath and you want to be able to use their paths in your loader's setup.
The problem can be overcome. You can modify karma.conf.js to provide
information useful to compute the paths you need:
client: {
absoluteTopDir: path.join("/absolute/", __dirname),
},
Then in test-main.js, you need to use the absoluteTopDir parameter:
var absoluteTopDir = window.__karma__.config.absoluteTopDir;
require.config({
baseUrl: "...",
paths: {
foo: absoluteTopDir + "../../my/file",
},
});
I've run Karma for years without any trouble but I recently ran into the problem
you ran into and used the method I described above in one of my test suites with
great success.
I've used this solution both with RequireJS and SystemJS.

Is the word base a "magic" word in RequireJS?

Is the word base a "magic" word in RequireJS?
What does it refer to by default?
As you confirmed, Karma is likely your culprit, which puts all resources on /base before running.
First, confirm you have the npm package "karma-requirejs" installed.
Check your Karma config file and ensure you have the "frameworks" array include "requirejs". Here's what mine looks like:
frameworks: ['jasmine', 'requirejs'],
Also, in your files array, have the last file be your require config and all other files above specifying not to be included on page load (included: false). Again, here's a sample from one of my projects Karma config files:
files: [
//other files here, such as:
{ pattern: 'app.js', included: false },
// require config needs to be last; see http://karma-runner.github.io/0.12/plus/requirejs.html
'config/require.config.js'
],
Please note that my require config bootstraps the application as well by calling require(["app"]), which starts the require/fetch process.
Assuming:
"baseUrl" is pointing to your webroot (it can be relative),
"frameworks" includes "requirejs",
"files" array includes all your dependencies but doesn't included them up front (that's require's job) and the config is last to follow,
...you should have good karma. :)
Good luck!

UnCSS setup with Brunch

Using Brunch as my build-tool for a front-end prototype, I am having difficulty setting up the UnCSS-plugin. I installed the Bootstrap 4-skeleton for a quick setup, and apart from UnCSS everything is running smoothly.
The error I get on brunch build --production is error: UnCSS: no stylesheets found. I configured the plugins like this:
plugins:
sass:
options:
includePaths: [
'bower_components/bootstrap/scss'
]
postcss:
processors: [
require('autoprefixer')
]
babel:
ignore: [
/^(bower_components|vendor)/
]
uncss:
options:
csspath: 'css/app.css'
htmlroot: 'public'
files: ['index.html']
The source files for the project are located in app: index.html in app/assets, main.scss (imports Bootstrap) and styles.css in app/stylesheets, and app.js in app/javascripts.
Brunch builds this to a folder named public, with styles in public/css/app.css and content in public/index.html. The question is, what is incorrect about the configuration of UnCSS? My understanding of it is that it works on the CSS output from the build, in which case the paths seem correct.
There is a question on SO from 2014 asking pretty much the same thing, but it was never answered.
I had not considered looking at the GitHub issues, wherein one specifically addressed this. In essence, as suggested by #1951FDG:
plugins:
uncss:
options:
ignore: [/\.\bactive\b/]
ignoreSheets: [/fonts.googleapis/]
files: ['public/index.html']
ignore: sample regex to ignore '.active' class
ignoreSheets: sample regex to ignore Google fonts
More importantly, this invocation of UnCSS reads the stylesheets linked in index.html to find the correct CSS-file, then processes it.

How can I use the require-js text-plugin with karma

I am trying to get the require-js text plugin to work with the karma-testrunner
I downloaded both with npm. I got karma working with requirejs, it is only the text-plugin that is making me some trouble.
When I add the text.js file to the files that karma serves I get a mismatch Error for it:
Uncaught Error: Mismatched anonymous define() module: function (module) {
//code from text plugin
If I don't serve the file with the text-plugin or exclude in karma.conf it I get a script Error from requirejs
(and a karma Warning: 404/base/text.js)
Uncaught Error: Script error for: text
I added the following to my require config file:
require.config({
paths: {
text: './text.js' //also tried text.js
}
})
but that doesn't seem to change anything
I have the dependency on the text plugin and template declared like this:
define(['text!views/viewtemplate.html'], function (template) { ...
I was having this issue, too, as I was trying to bring mock JSON files into my test files and parse them with JSON.parse(requirejsInjectedJsonText).
The issue I had was forgetting to update my karma config file with the require-js-text and mock files:
files: [
{pattern: 'mocks/**/*.json', included: false},
{pattern:'lib/requirejs-text/text.js', included: false},
'config/require.config.js'
]
After adding these in place (requirejs config reference must always be in the last index of 'files' array in the karma config file), I was able to successfully pull in my mock data.
For the record, as I was fiddling around, I went as far as #ddd in adding the shim to the require config, i.e.:
shim: {
'text': {'exports': 'text'}
}
But, it turned out to be unnecessary after I removed it AND had the karma config setup as above.
Cheers!

Use RequireJS config file as the build file?

I've got some paths configured in require-config.js as follows:
var require = {
baseUrl: '/javascript',
paths: {
'jquery': 'jquery/jquery-1.8.1.min'
// etc. -- several paths to vendor files here
},
}
I am trying to get the optimization working for deployment. The docs say I should have a build.js that looks something like this:
({
baseUrl: 'javascript',
paths: {
'jquery': 'jquery/jquery-1.8.1.min'
},
name: 'main',
out: 'main-build.js'
})
Is there a way to have the optimizer read my config file instead of (or in addition to) build.js? I don't want to have to manually keep the paths configured the same in both files if they change.
I tried to just run node r.js -o path/to/require-config.js, but it threw an error, "malformed: SyntaxError: Unexpected token var"
Edit: for clarification, my require-config.js file is the config only, not my main module. I did this so I could use the same configuration but load a different main module when unit testing.
You'll need to adjust the way your config options are defined. Taken from the RequireJS documentation:
In version 1.0.5+ of the optimizer, the mainConfigFile option can be used to specify the location of the runtime config. If specified with the path to your main JS file, the first requirejs({}), requirejs.config({}), require({}), or require.config({}) found in that file will be parsed out and used as part of the configuration options passed to the optimizer:
So basically you can point your r.js build file to your config options that will also be shared with the browser.
You will need to make use of the mainConfigFile option
For other's reference:
https://github.com/jrburke/r.js/blob/master/build/example.build.js
The build settings (no need to repeat your config.js lib inclusions here):
baseUrl: 'app',
name: 'assets/js/lib/almond', // or require
// Read config and then also build it into the app
mainConfigFile: 'app/config.js',
include: ['config'],
// Needed for almond (and does no harm for require)
wrap: true,

Resources