I want to setup the web-component-tester to test my web components. I installed it via npm (devDependency) and created the following script:
package.json:
"scripts": {
"wcttest": "./node_modules/.bin/wct --npm src/app/modules/essen/components/essen-list/test/wct-test.html"
},
As the script states, I have the .html file located there. But now if I run the script npm run wcttest the following route opens:
http://localhost:8081/components/wc-frontend/generated-index.html?cli_browser_id=0 where wc-frontend is the root name of the project folder. But I dont get, why it opens the components path first.
The test opens all the browsers I intalled but there is nothing but a white page. If I open the console there is the following script:
<script>
WCT.loadSuites(["src/app/modules/essen/components/essen-list/test/wct-test.html"]);
<script>
Here the path looks correct.
wct-test.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<script src="../../../../../../../node_modules/mocha/mocha.js</script>
<script src="../../../../../../../node_modules/wct-mocha/wct-
mocha.js"></script>
<script src="../../../../../../../node_modules/web-component-tester/browser.js"></script>
<script type="module" src="../essen-list.component.js"></script>
</head>
<body>
<mp-essen-list></mp-essen-list>
<script>
suite('suite', function () {
const list = document.body.querySelector('mp-essen-list');
test('test', function () {
list.setAttribute('value', 100);
assert.equal(list.value, 100);
//console.log('test');
//assert.equal(list.shadowRoot.querySelector('#speisekarte').style.left, 50);
});
});
</script>
</body>
</html>
Edit: I noticed that it is not the wrong path. I looked into the console errors and found the following error:
wct-mocha.js:2446 Uncaught Error: WCT requires Mocha. Please ensure that it is present in WCT.environmentScripts, or that you load it before loading web-component-tester/browser.js
at _ensureMocha (wct-mocha.js:2446)
at Object.ensureDependenciesPresent (wct-mocha.js:2435)
at HTMLDocument.<anonymous> (wct-mocha.js:2781)
Related
Is it just me, or does their documentation not explain how to run the tests in the browser at all?
Do I have to create that HTML file that they show in the example? How do I make it run my specific set of test cases for my project then?
I want the same output as running mocha from project root. All subdirectories inside the test folder need to be included
If we need to run our tests in a browser, we need to set up a simple HTML page to be our test runner page. The page loads Mocha, the testing libraries and our actual test files. To run the tests, we’ll simply open the runner in a browser.
example html code :
<!DOCTYPE html>
<html>
<head>
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script>mocha.setup('bdd')</script>
<!-- load code you want to test here -->
<!-- load your test files here -->
<script>
mocha.run();
</script>
</body>
</html>
Setting up a Directory Structure
You should put your tests in a separate directory from your main code files. This makes it easier to structure them, for example if you want to add other types of tests in the future (such as integration tests or functional tests).
The most popular practice with JavaScript code is to have a directory called test/ in your project’s root directory. Then, each test file is placed under test/someModuleTest.js.
Important things :
We load Mocha’s CSS styles to give our test results nice formatting.
We create a div with the ID mocha. This is where the test results are
inserted.
We load Mocha and Chai. They are located in subfolders of the
node_modules folder since we installed them via npm.
By calling mocha.setup, we make Mocha’s testing helpers available.
Then, we load the code we want to test and the test files. We don’t
have anything here just yet.
Last, we call mocha.run to run the tests. Make sure you call this
after loading the source and test files
I thought the documentation wasn't entirely clear too, but I figured it out eventually and got it set up. Here's how:
Include the Mocha script and CSS in Index.html. Also include a div with id "Mocha" for the output to be inserted into. Include the test script you'd like to execute.
<link href="lib/mocha/mocha.css" rel="stylesheet" />
<script src="lib/mocha/mocha.js"></script>
<script src="test/my_mocha_test.js"></script>
<div id="mocha"></div>
In your test file (my_mocha_test.js in this example) include this setup line at the top:
// 'bdd' stands for "behavior driven development"
mocha.setup('bdd');
Now with the test and the Mocha content all loaded, you can run the tests with this command:
mocha.run();
You can add that to an event listener and trigger it on a button push or other event, or you can just run it from the console, but it should put the test output in the div with the "mocha" id. Here's a page with all this set up with code viewable on GitHub for you to
https://captainstack.github.io/public-stackhouse/
My way to do it with:
ES6, import, export, chai
Used mocha 6.1.4 and chai 4.2.0.
src/MyClass.js:
export default class MyClass { }
test/MyClass.js:
import MyClass from "../src/MyClass.js";
let assert = chai.assert;
describe('MyClass tests', function () {
describe('The class', function () {
it('can be instantiated', function () {
assert.isObject(new MyClass());
});
});
});
test/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mocha</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mocha.css">
<script src="mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script type="module" class="mocha-init">
mocha.setup('bdd');
</script>
<!-- ------------------------------------ -->
<script type="module" src="test.js"></script>
<!-- ------------------------------------ -->
<script type="module">
mocha.run();
</script>
</head>
<body>
<div id="mocha"></div>
</body>
</html>
The mocha.js and mocha.css files were created via mocha init test, but can also be found in node_modules/mocha.
If this is improvable, let me know. The answer is insprired by this post.
Here's the most basic chai/mocha test in the browser.
mocha.setup('bdd');
describe('test', () => {
it('passes', () => {
chai.expect(1).to.eql(1);
});
it('fails', () => {
chai.expect(1).to.eql(2);
});
});
mocha.run();
<div id="mocha" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.0.1/mocha.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
I'm trying to make simple page with JS module that will do something with the page. I need to use node.js's modules so I'm learning how to browserify works.
My HTML:
<!doctype html>
<html>
<head>
<script src="js/bundle.js" type="text/javascript"></script>
</head>
<body>
<p>Hello world!</p>
<script type="text/javascript">
var test = require("./test.js");
test.init();
</script>
</body>
</html>
This is my JavaScript (test.js):
"use strict";
alert("here1");
var init = function() {
alert("here2");
}
exports.init = init
I'm making a bundle with:
browserify.cmd test.js -o bundle.js
When I'm trying to open the page it shows "here1" but doesn't show "here2".
In browser's console I see:
Uncaught ReferenceError: require is not defined index.html:9
Any ideas how to make module's function (init) work well?
You need to put all JavaScript code which contains anything from Node in the test.js file which you are then converting with the browserify into te bundle.js. In your example you are using a Node function require in the index.html which is not going to be converted. Browser then sees function require() which he doesn't know and this is where the problem is hidden.
Simply told: all your javascript code (containing Node) must be included in your index.html as a single bundle.js which is a browserifed result from your source files.
EDIT
Browserify doesn't (by default) allow you to call any browserified function out of the browserified code. But you can make it available by attaching the function into window scope.
This is test.js (which is then converted to bundle.js by browserify) and index.html
"use strict";
alert("here1");
window.init = function() {
alert("here2");
}
<!doctype html>
<html>
<head>
<script src="js/bundle.js" type="text/javascript"></script>
</head>
<body>
<p>Hello world!</p>
<script type="text/javascript">
init();
</script>
</body>
</html>
I have the index.html as:
<!DOCTYPE html>
<html>
<head>
<script data-main="scripts/main" src="lib/require.js"></script>
</head>
<body>
<h1>Example 1: basic usage</h1>
</body>
</html>
and the main.js:
requirejs.config({
waitSeconds: 200,
paths: {
"app": "app"
}
});
and the app.js:
define(function () {
alert('Hello World');
});
both main and app are under scripts folder.
When I opened the index.html, and in the console if I give:
require("app")
I get an error like this:
Uncaught Error: Module name "app" has not been loaded yet for context: _. Use require([])
Not sure, where I have made mistake.
You haven't started your app, to do this you should call requirejs(['app/app']).
Here is the basic requirejs example https://github.com/volojs/create-template/tree/master/www
Currently working through this tutorial on using Backbone.js with coffeescript.
Leveraging the following index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CoffeeScript, Meet Backbone.js: Part N</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/javascript" src="./index.js"></script>
</head>
<body>
<header>
<h1>CoffeeScript, Meet Backbone.js: Part 1</h1>
</header>
</body>
</html>
which loads an index.js file after loading Backbone, jQuery, etc from a cdn. Hoping to work within a script.coffee file that I'd like to have automatically compile into the script.js file loaded by index.html above by running something like coffee script.coffee -c -w.
Trouble is, I'm getting ReferenceErrors when I try to run the above command on the following script.coffee file:
jQuery ->
class ListView extends Backbone.View
el: $ 'body'
initialize: ->
_.bindAll #
#render()
render: ->
$(#el).append '<ul><li>Hello, Backbone!</li></ul>'
list_view = new ListView
For instance:
ReferenceError: jQuery is not defined
...
because, clearly, jQuery is being loaded in the index.html file.
Is there a way to suppress the error reporting from the coffeescript compiler so that it just converts the code without the error?
The options must go before the file, e.g.:
coffee -cw script.coffee
Otherwise, it will try to run script.coffee right then and there as a Node.js script, passing it the options -c and -w. That's not what you want; if you want the CoffeeScript compiler to get the options, it's got to be before the file name.
I have a probably very simple problem that is completely spoofing me.
I have got a web server (XAMPP) running off a reasonably slow usb stick.
I've got a very simple file structure:
--htdocs
--projects
--callback
index.html
--js
jquery-1.9.1.min.js
callbackclient.js
--css
main.css
For some reason, I can't get a simple linked script working:
Here is my index.html
<!DOCTYPE HTML>
<html>
<head>
<script src='js/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='js/callbackclient.js' type='text/javacsript'></script>
<link href='css/main.css' rel='stylesheet' type='text/css'>
</head>
<body>
This is a test
</body>
<script>
$(document).ready(function(){
tester();
});
</script>
</html>
And here's my callbackclient.js:
function tester(){ console.log("test");
}
When I hit localhost/projects/callback the browser displays "This is a test" as expected, but I get an error in the console:
Uncaught ReferenceError: tester is not defined
I get the same if I try to run tester(); from console directly, yet $("head") correctly selects the head element which I guess means jQuery is being loaded fine.
I must have missed something fundamental - someone please enlighten me!
It could be that you misspelled the type on the script tag. text/javacsript instead of text/javascript
Try this inside your callbackClient.js:
var tester = function (){ console.log("test"); }
If that works, you just need to have the function be set to a variable, and then call it. If that doesn't work, then I would just remove the JS code on your HTML page and do this inside your callbackClient.js:
jQuery(function () {
// Logic here
console.log('this is working, right?');
var functionName = function () {
console.log('blah blah blah')
}
functionName();
})
Hope that helps!