==================================================================
==================================================================
==================================================================
synopsis:
here is an empty debug.html
karma.conf.js:
==============
module.exports = function(config) {
config.set({
port: 9876,
colors: true,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity,
logLevel: config.DEBUG
})
}
debug.html:
===========
Karma DEBUG RUNNER
==================================================================
==================================================================
==================================================================
synopsis:
adding a file which is not served results in the same debug.html. No mention of the file.
Also, adding a file path which does not exist results in no change to the debug.html file. No mention of the file.
karma.conf.js:
==============
module.exports = function(config) {
config.set({
files: [
{pattern: 'src/main/webapp/try.html', watched: true/false, served: false, included: true/false}
]
port: 9876,
colors: true,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity,
logLevel: config.DEBUG
})
}
debug.html:
===========
Karma DEBUG RUNNER
==================================================================
==================================================================
==================================================================
synopsis:
adding a file which is served adds an entry to window.__karma__.files
karma.conf.js:
==============
module.exports = function (config) {
config.set({
files: [
{pattern: 'src/main/webapp/try.html', watched: false, served: true, included: false}
],
port: 9876,
colors: true,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity,
logLevel: config.DEBUG
})
}
debug.html:
===========
Karma DEBUG RUNNER
==================================================================
==================================================================
==================================================================
synopsis: if the file is served _and_ included, the html file has:
1. an entry in window.__karma__.files
2.
karma.conf.js:
==============
module.exports = function (config) {
config.set({
files: [
{pattern: 'src/main/webapp/try.html', watched: false, served: true, included: true}
],
port: 9876,
colors: true,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity,
logLevel: config.DEBUG
})
}
debug.html:
===========
Karma DEBUG RUNNER
==================================================================
==================================================================
==================================================================
synopsis: if the config file refers to javascript files containing test functions, but does not include at least one test framework,
it breaks when run with the message: "You need to include some adapter that implements __karma__.start method!"
karma.conf.js:
==============
module.exports = function (config) {
config.set({
files: [
{pattern: 'src/main/webapp/try.html', watched: false, served: true, included: true},
{pattern: 'src/test/jasmine/subjects/SubjectPageSpec.js', watched: false, served: true, included: true}
],
port: 9876,
colors: true,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity,
logLevel: config.DEBUG
})
}
==================================================================
==================================================================
==================================================================
synopsis: add the jasmine framework to the config file, and see it work (both run and debug modes)
karma.conf.js:
==============
module.exports = function (config) {
config.set({
frameworks: ['jasmine'],
files: [
{pattern: 'src/main/webapp/try.html', watched: false, served: true, included: true},
{pattern: 'src/test/jasmine/subjects/SubjectPageSpec.js', watched: false, served: true, included: true}
],
port: 9876,
colors: true,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity,
logLevel: config.DEBUG
})
}
SubjectPageSpec.js:
=====================
describe('Subject Page', function() {
it("works", function() {
expect(true).toBe(true);
});
...
==================================================================
==================================================================
==================================================================
synopsis: if no browser is declared in the config file, then Chrome will be used.
karma.conf.js:
==============
module.exports = function (config) {
config.set({
frameworks: ['jasmine'],
files: [
{pattern: 'src/main/webapp/try.html', watched: false, served: true, included: true},
{pattern: 'src/test/jasmine/subjects/SubjectPageSpec.js', watched: false, served: true, included: true}
],
port: 9876,
colors: true,
autoWatch: true,
singleRun: false,
concurrency: Infinity,
logLevel: config.DEBUG
})
}
==================================================================
==================================================================
==================================================================
synopsis: add an HTML file and a js test that refers to its content. It doesn't work - the js code cannot see
the HTML content in the DOM:
TypeError: Cannot read property 'html' of null
at Object. (src/test/jasmine/__tryThings/trySpec.js:15:21)
try.html:
=========
Try Karma
hello Karma
trySpec.js:
===========
describe('Subject Page', function() {
it("works", function () {
console.log("==== trySpec.js ");
var myDiv = document.getElementById("myDiv");
expect(myDiv.html()).toBe("hello Karma");
});
});
==================================================================
==================================================================
==================================================================
synopsis: when html for the page under test is injected into , the javascript tests now see the
elements
karma.conf.js:
module.exports = function (config) {
config.set({
basePath: 'src',
frameworks: ['jasmine'],
preprocessors: {
'**/*.html': ['html2js']
},
files: [
{pattern: 'main/webapp/try.html', watched: false, served: true, included: true},
{pattern: 'test/jasmine/helpers/FixtureHelper.js', watched: false, served: true, included: true},
{pattern: 'test/jasmine/__tryThings/trySpec.js', watched: false, served: true, included: true},
],
port: 9876,
colors: true,
autoWatch: true,
browsers: ['Chrome'],
singleRun: true,
concurrency: Infinity,
logLevel: config.DEBUG
})
}
try.html:
Try Karma
hello Karma
boo!
yay!
FixtureHelper.js:
function loadSourceHtmlFixtureIntoDom(filename) {
var content = getSourceFixtureContent(filename);
document.body.innerHTML = content;
console.log('body', document.body.innerHTML);
var b = 1;
}
function getFixtureContent(path, filename) {
return __html__[path + '/' + filename];
}
function getSourceFixtureContent(filename) {
var path = 'main/webapp';
return getFixtureContent(path, filename);
}
function getTestFixtureContent(filename) {
var path = 'test/jasmine';
return getFixtureContent(path, filename);
}
trySpec.js:
/**
* Created by xavier on 10/7/16.
*/
var variableCreatedInTrySpec = 'howdie';
describe('Subject Page', function() {
it("works", function () {
loadSourceHtmlFixtureIntoDom('try.html');
console.log("==== trySpec.js ");
var myDiv = document.getElementById("myDiv");
console.log('myDiv', myDiv.innerHTML);
console.log('the whole thing :', document.documentElement.outerHTML);
expect(myDiv.innerHTML).toBe("hello Karma");
});
});
Note: variableCreatedInTrySpec will remain visible after the document body's innerHtml is overwritten. Which means
we are NOT reloading the document, just altering it.
The whole page content after the fixture is loaded:
Try Karma