First of all I know there are similar questions, but none of it works for me.
I have an Angular app, and I would like to test it with Karma, Jasmin, and RequireJs.
I have installed everything I need, and configured everything as it is written here: http://karma-runner.github.io/0.13/plus/requirejs.html
Below is how my files look like
karma.conf.js
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine', 'requirejs'],
// list of files / patterns to load in the browser
files: [
'src/test/Tests/*.js',
'src/test/Tests/directives/*.js',
//source code
{pattern: 'src/main/webapp/app/*.js', included: false},
{pattern: 'src/main/webapp/app/**/*.js', included: false},
{pattern: 'src/test/test-main.js', included: true}
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'test/Tests/*.js': 'coverage'
},
coverageReporter:{
type:'html',
dir:'../coverage/'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultanous
concurrency: Infinity
})
}
test-main.js
var TEST_REGEXP = /(spec|test)\.js$/i;
var allTestFiles = [];
// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
// If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
// then do not normalize the paths
var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
allTestFiles.push(normalizedTestModule);
}
});
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: '/base',
//dynamically load all test files
deps: allTestFiles,
// we have to kickoff jasmine, as it is asynchronous
callback: window.__karma__.start
});
The output is in IntelliJ IDEA 14.1.5
Empty test suite.
Process finished with exit code 0
The server starts correctly. I have also tried with command line. $ karma start, and $ karma run, which also does nothing. There is no error message at all. The path is correct, there is no 404 error.
Do you have any guess what could be the problem?
Delete the module names from test files.
In my case, this was the solution.
According to RequireJS documentation (http://requirejs.org/docs/api.html#modulename) you can include a name for the module as you can see below:
//Explicitly defines the "foo/title" module:
define("foo/title",
["my/cart", "my/inventory"],
function(cart, inventory) {
//Define foo/title object in here.
}
);
But for me, Karma only executes the tests if I delete the "foo/title" name.
Related
I want to integrate responsive-loader into my Nuxt.js project which runs in SPA mode. (Optional I want to add Vuetify Progressive Image support also).
It will be a static hosting with Netlify.
Versions:
"nuxt": "^2.3.4"
"responsive-loader": "^1.2.0"
"sharp": "^0.21.1"
I found some solutions how to do it (https://stackoverflow.com/a/51982357/8804871) but this is not working for me.
When I run npm run build
I get an error message: "TypeError: Cannot set property 'exclude' of undefined"
My build section looks the following:
build: {
transpile: [/^vuetify/],
plugins: [
new VuetifyLoaderPlugin()
],
extractCSS: true,
/*
** Run ESLint on save
*/
extend(config, { isDev, isClient, isServer }) {
// Default block
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
if (isServer) {
config.externals = [
nodeExternals({
whitelist: [/^vuetify/]
})
]
}
// Default block end
// here I tell webpack not to include jpgs and pngs
// as base64 as an inline image
config.module.rules.find(
rule => rule.loader === "url-loader"
).exclude = /\.(jpe?g|png)$/;
/*
** Configure responsive-loader
*/
config.module.rules.push({
test: /\.(jpe?g|png)$/i,
loader: "responsive-loader",
options: {
min: 350,
max: 2800,
steps: 7,
placeholder: false,
quality: 60,
adapter: require("responsive-loader/sharp")
}
});
}
}
The error is probably found in this section:
config.module.rules.find(
rule => rule.loader === "url-loader"
).exclude = /\.(jpe?g|png)$/;
Like said I get this error message: "TypeError: Cannot set property 'exclude' of undefined".
I run this project along with vuetify. I also would like to enable the Progressive image support together with responsive loader. Does anybody know how to setup both rules together?
https://github.com/vuetifyjs/vuetify-loader#progressive-images
The easiest way to integrate responsive-loader into a Nuxt.js project is to use this module: https://www.npmjs.com/package/nuxt-responsive-loader
Disclaimer: I created the module
The problem with your config that it relies on rule.loader property but rule can be defined in use or oneOf config sections as well.
Another one problem is that nuxt internal config has several rules with url-loader(for images, videos, fonts ...).
In your case the rule, you tried to find, has use section and url-loader is defined there, that's why your find function found nothing and threw this error:
{
"test": /\.(png|jpe?g|gif|svg|webp)$/,
"use": [{
"loader": "url-loader",
"options": {
"limit": 1000,
"name": "img/[hash:7].[ext]"
}
}]
}
About responsive-loader, you should remove extensions you want to process with responsive-loader from url-loader rule to avoid unexpected behavior and conflicts, here is extend function working example:
extend(config, ctx) {
let imgTest = '/\\.(png|jpe?g|gif|svg|webp)$/';
// find by reg ex string to not rely on rule structure
let urlRule = config.module.rules.find(r => r.test.toString() === imgTest);
// you can use also "oneOf" section and define both loaders there.
// removed images from url-loader test
urlRule.test = /\.(svg|webp)$/;
config.module.rules.push({
test: /\.(png|jpe?g|gif)$/,
loader: "responsive-loader",
options: {
// place generated images to the same place as url-loader
name: "img/[hash:7]-[width].[ext]",
min: 350,
max: 2800,
steps: 7,
placeholder: false,
quality: 60,
adapter: require("responsive-loader/sharp")
}
})
}
Yes, it looks dirty, but I think it's only way for now to change some loader.
What about vuetify - I think both loaders will conflict with each other and probably the solution is to use single loader that will work with your images.
Hope it helps.
Update for Nuxt >= 2.4.0:
They modified the rules array please update the following line:
let imgTest = '/\\.(png|jpe?g|gif|svg|webp)$/i';
Then the code should work normally again.
I can’t seem to run my e2e tests with protractor. Before I begin here is some background info:
Node: 7.7.4
NPM: 4.1.2.
Angular: 4.1.0
Protractor: 5.1.2
After I ran npm install protractor, I installed and updated web driver and got an update for IE. After I wrote my first test—a simple test to grab the text of the h1 tag on my login page—I attempted to run protractor and got an error: Error: Cannot find module ‘ts-node’ so I went and installed that. Now when I rerun protractor I get a mysterious error I cannot resolve: the specified path does not exist: e2e/tsconfig.e2e.json. What does this mean? My protractor conf.js file looks like this:
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [ //path of specs is relative to location of protractor.conf.js file.
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
//'browserName': 'chrome' ---default
'browserName': 'internet explorer',
'platform': 'ANY',
'version': '11'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
beforeLaunch: function() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
},
onPrepare() {
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
I tried fooling around with the path under the project parameter, but no luck with that resolving the issue. And my project structure is set up likes this:
Any suggestions? Should I post this as an issue on github? To ts-node? Or protractor? Any suggestions would be appreciated. Please let me know if you need additional context too.
It means it's trying to find tsconfig.e2e.json (the typescript config file for your 'e2e' project) and can't. This part of the config shows the path it's looking for:
beforeLaunch: function() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
},
But it's clear from your directory structure that it isn't there. Given the path to your spec files, I would imagine the line should read:
project: './e2e/tsconfig.e2e.json'
Looking at your project structure though, it could well be:
project: './app/e2e/tsconfig.e2e.json'
In which case, the path to your spec files will probably need changing to match.
I'm trying to use Karma + Mocha for the first time.
The main condition is to run the unit tests in a Docker container without any GUI. I don't have any browser, and my only choice is to use PhantomJS.
I have configured all necessary plugins, configs etc., but I received the following error:
ReferenceError: Can't find variable: exports
Before the test run, I built the JavaScript source code with Babel to the 'build' directory and then started Karma from there.
What could be causing this problem?
Here is my karma.conf.js:
// Karma configuration
// Generated on Mon Apr 25 2016 13:04:28 GMT+0300 (RTZ 2 (зима))
const path = require('path');
const webpack = require('webpack');
module.exports = function(config) {
var confBuilder = require('./webpack.config');
confBuilder.module.loaders.push({
test: /\.jsx$/,
loader: 'isparta',
include: path.resolve('src'),
});
confBuilder.devtool = 'inline-source-map';
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha', 'chai'/*'jasmine' /*, 'requirejs'*/],
// list of files / patterns to load in the browser
files: [
{pattern: 'build/utils/*.js', load: false}
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'tests.webpack.js': ['webpack', 'sourcemap'],
'build/utils/*.js': ['babel']
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['mocha', 'coverage', 'jenkins'],
plugins: [
require('karma-webpack'),
require('karma-mocha'),
require('karma-chai'),
require('karma-mocha-reporter'),
require('karma-jenkins-reporter'),
require('karma-chrome-launcher'),
require('karma-sourcemap-loader'),
require('karma-coverage'),
require('karma-phantomjs-launcher'),
require('karma-requirejs'),
require('karma-babel-preprocessor')
],
webpack: confBuilder,
webpackServer: {
noInfo: true,
},
coverageReporter: {
check: {
global: {
statements: 86,
branches: 80,
functions: 95,
lines: 40,
},
},
},
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
autoWatch: true,
})
}
I am trying to get Wallaby to work with a TypeScript app, using Browserify and Wallabify. However, when I run Wallaby, it outputs No failing tests, 0 passing, and all test indicators are grey.
The file app/spec.setup.ts is responsible for loading node modules dependencies such as chai, sinon, and the app's main module. app/spec.util.ts provides some helpers, imported by individual spec files.
module.exports = function() {
var wallabify = require('wallabify');
var wallabyPostprocessor = wallabify({
entryPatterns: [
'app/spec.setup.ts',
'app/src/**/*.spec.ts'
]
}
);
return {
files: [
{pattern: 'app/spec.setup.ts', load: false, instrument: false},
{pattern: 'app/spec.util.ts', load: false, instrument: false},
{pattern: 'app/src/**/*.ts', load: false},
{pattern: 'app/src/**/*.spec.ts', ignore: true}
],
tests: [
{pattern: 'app/src/**/*.spec.ts', load: false}
],
testFramework: 'mocha',
postprocessor: wallabyPostprocessor,
bootstrap: function (w) {
// outputs test file names, with .ts extensions changed to .js
console.log(w.tests);
window.__moduleBundler.loadTests();
}
};
};
What's interesting is that I don't get any feedback from changing entryPatterns, even setting it to an empty array or invalid file names. The result is still the same. Only if I remove it entirely, I get errors such as Can't find variable: sinon.
I've also figured that the entryPatterns list may need the compiled file names, i.e. .js instead of .ts extension. However, when I do that, I get Postprocessor run failure: 'import' and 'export' may appear only with 'sourceType: module' on spec.setup.ts.
I don't know what is the correct way to configure Wallabify for TypeScript compilation, and I couldn't find any complete examples on the web, so I'd appreciate any hints.
P.S. with my current StackOverflow reputation I couldn't add two new tags: wallaby and wallabify. Could someone do me a favour and add the two tags please.
Because TypeScript compiler renames files to .js and applied before wallabify, you need to change your entry patterns like this to make it work:
entryPatterns: [
'app/spec.setup.js',
'app/src/**/*.spec.js'
]
I'm trying to integrate Protractor with Sauce Labs from Travis. I can get the sauce_connect server running correctly but am unable to get Travis to point to that particular remote server.
Travis will get to the point where it initiates sauce_connect but when I run "protractor:analytics" it doesn't point to the correct server and fails.
Travis.yml:
language: python
python:
- 3.2_with_system_site_packages
branches:
only:
- develop
before_install:
- sudo apt-get update -qq
- sudo apt-get install python-numpy
install:
- cd lib && python setup.py install
- cd .. && pip install -r requirements/travis_requirements.txt
- npm install
script:
- grunt karma:single
- grunt protractor:analytics
env:
global:
- secure: <string>
- secure: <string>
sauce_connect: true
Gruntfile:
protractor: {
options: {
configFile: './webapp/static/test/e2e/protractor.conf.js',
keepAlive: true
},
singlerun: {},
analytics: {
options: {
//debug : true,
args:{
specs: ['./webapp/static/test/e2e/analytics_spec.js']
}
}
},
},
Protractor Conf:
exports.config = {
chromeOnly: false,
seleniumArgs: [],
// If sauceUser and sauceKey are specified, seleniumServerJar will be ignored.
// The tests will be run remotely using SauceLabs.
sauceUser: process.env.SAUCE_USER,
sauceKey: process.env.SAUCE_KEY,
baseUrl: 'http://localhost:8000',
specs: [
'./*_spec.js',
],
// Patterns to exclude.
exclude: [],
multiCapabilities: [],
// ----- More information for your tests ----
//
// A base URL for your application under test. Calls to protractor.get()
// with relative paths will be prepended with this.
baseUrl: process.env.SN_BASE_URL,
// Selector for the element housing the angular app - this defaults to
// body, but is necessary if ng-app is on a descendant of <body>
rootElement: 'body',
// A callback function called once protractor is ready and available, and
// before the specs are executed
// You can specify a file containing code to run by setting onPrepare to
// the filename string.
onPrepare: function() {
// At this point, global 'protractor' object will be set up, and jasmine
// will be available. For example, you can add a Jasmine reporter with:
// jasmine.getEnv().addReporter(new jasmine.JUnitXmlReporter(
// 'outputdir/', true, true));
},
// The params object will be passed directly to the protractor instance,
// and can be accessed from your test. It is an arbitrary object and can
// contain anything you may need in your test.
// This can be changed via the command line as:
// --params.login.user 'Joe'
params: {
login: {
user: process.env.SN_TEST_USERNAME,
password: process.env.SN_TEST_PASSWORD
}
},
framework: 'jasmine',
// ----- Options to be passed to minijasminenode -----
//
// See the full list at https://github.com/juliemr/minijasminenode
jasmineNodeOpts: {
// onComplete will be called just before the driver quits.
onComplete: null,
// If true, display spec names.
isVerbose: false,
// If true, print colors to the terminal.
showColors: true,
// If true, include stack traces in failures.
includeStackTrace: true,
// Default time to wait in ms before a test fails.
defaultTimeoutInterval: 30000
},
onCleanUp: function() {}
};
If I did understand well : Sauce connect tool is not used by protractor/selenium when running a test suite.
Well I had this problem, travis requires sauce credentials and protractor requires those credentials and a tunnel id:
.travis.yml:
addons:
sauce_connect:
username: xxx
access_key: xxx
protractor.conf.js:
exports.config = {
...
sauceUser: process.env.SAUCE_USERNAME,
sauceKey: process.env.SAUCE_ACCESS_KEY,
capabilities: {
...
'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER,
}
}