I'm trying to setup a test for prototype.js.
I would like to avoid starting a local server to use cypress / puppeteer / etc. My goal here is just use jest.
My idea was to have for each test a minimal index.html like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
</head>
<body>
<span id="el">foo foo</span>
</body>
</html>
and I tried first to run jest as
const fs = require('fs');
const path = require('path');
const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
jest.dontMock('fs');
describe('$', function () {
beforeEach(() => {
document.documentElement.innerHTML = html.toString();
});
afterEach(jest.resetModules);
it('finds a node', function () {
expect($('el')).toBeInTheDocument()
});
});
but $ as all the prototype.js global stuff is not available.
ouhhh .... looks like wrapping the expect into a window.onload is enough, which makes also sense.
Related
I am trying to serve html files from server without using template engines. Please find the below script for starting the server.
// script.js
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(express.static(__dirname));
app.get("/", (req, res) => {
res.set("Content-Type", "text/html");
const f = require("./templates")();
console.log(f);
res.send(f);
});
app.listen(3103, () => console.log("hi"));
// template.js
const fs = require("fs");
const html = fs.readFileSync(__dirname + "/temp.html", "utf8");
module.exports = (variables) => {
return html;
};
Following is my html file:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./script.js"></script> <!-- The click function was served in a different file -->
</head>
<body>
<p>Home Page</p>
<input type="button" value="Click Me" id="btn" onclick="click()">
<script>
console.log("hi");
function click(){ console.log("_Button clicked"); }
//document.getElementById("btn").addEventListener("click", () => {
//console.log("Button Clicked");
//});
</script>
</body>
</html>
I tried the following without any success:
I included the click() inline in the button element, and the function was declared in script tag in the same html file. This did not work.
I included the fromScript function in script.js file and served that file as static content. This did not work as expected.
Then I used addEventListener to bind the click event to input element. Now whenever I click the button, "Button Clicked" message is printed twice.
What is the correct/best practice for binding dom events to the elements?
Edit
Thanks for the answer Thijs Kramer. But the problem is due to the function name.
If I name the function as click it is not working. But if I rename it to fromScript it is working.
Should we not use "click" for function name?
Your problem has nothing to do with express :)
The best practice for binding click events is for example the following:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>Home Page</p>
<input type="button" value="Click Me" id="btn">
<script>
const button = document.getElementById("btn");
button.addEventListener("click", () => {
console.log("Button Clicked");
});
</script>
</body>
</html>
Edit: I think I know what you mean:
If you rename the function fromScript to click, you obviously have to change the value of the onclick attribute as well:
<input type="button" onclick="click()" />
The reason for your naming problem is that the HTMLElement API (which all html elements inherit from) has a click property. It is a function meant to be used to programmatically trigger a click event on the element.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
To avoid confusion and unpredictable behaviour, always make sure to name your variables and functions unambigously with regard to inherited and built-in properties from the prototype chain.
The below code should work fine:
// script.js
const express = require("express");
// const bodyParser = require("body-parser");
const app = express();
app.use(express.static(__dirname));
app.listen(3103, () => console.log("hi"));
then node script.js and try to access it by going to http://localhost:3103/temp.html
?
Trying to use wkhtmltox to turn an HTML file to an image:
./server.js
const express = require('express');
const fs = require('fs');
const wkhtmltox = require('wkhtmltox');
const app = express();
const converter = new wkhtmltox();
app.get('/tagslegend.png', (request, response) => {
response.status(200).type('png');
converter.image(fs.createReadStream('tagslegend.html'), { format: "png" }).pipe(response);
});
var listener = app.listen(process.env.PORT, function () {
console.log('App listening on port ' + listener.address().port);
});
And ./tagslegend.html:
<!doctype html>
<html>
<body>
<dl>
<dt>中文</dt><dd>In mandarin language.</dd>
</dl>
</body>
</html>
I'm expecting back an image of the above HTML, e.g. (how my browser would render it):
Instead I get back this:
How can I render that HTML to a png dynamically with the correct chinese characters and serve it to clients?
Add
<meta charset="utf-8">
to the <head> of the HTML document
I'm trying to render this html document ./tagslegend.html with npm package wkhtmltox:
<!doctype html>
<html>
<head>
<style>
.cmn {
font-family: 'WenQuanYi Micro Hei';
}
</style>
</head>
<body>
<dl>
<dt class="cmn">中文</dt><dd>In mandarin language.</dd>
</dl>
</body>
</html>
Here's the javascript:
const express = require('express');
const fs = require('fs');
const wkhtmltox = require('wkhtmltox');
const app = express();
const converter = new wkhtmltox();
app.get('/tagslegend.png', (request, response) => {
response.status(200).type('png');
converter.image(fs.createReadStream('tagslegend.html'), { format: "png" }).pipe(response);
});
var listener = app.listen(process.env.PORT, function () {
console.log('App listening on port ' + listener.address().port);
});
I expect it to render like my browser would render that same html:
But am instead getting a png like this:
How can I fix this and make it render like the first image?
I have that font installed on the server:
$ fc-list | grep 'Wen'
/app/.fonts/WenQuanYi Micro Hei.ttf: WenQuanYi Micro Hei,文泉驛微米黑,文泉驿微米黑:style=Regular
This looks like an character encoding problem. It seems as if fs.createReadStream() is reading your HTML as ISO-8859-1, when it really should be reading it as UTF-8 — which is odd, since UTF-8 is the default encoding.
I'd make sure tagslegend.html is properly saved as a UTF-8 file. It couldn't hurt to explicitly declare:
<meta charset="utf-8">
...in the <head> section of your HTML as well.
I am writing a simple casperjs script to fill a rather complex form on a website. The HTML code of the website is a bit messy and I don't want to go through the navigation steps to reach the page everytime when I am testing my script.
I have the form page saved as HTML file but I couldn't even properly load a testing HTML file into casperjs. Here is the code, file and result:
var casper = require('casper').create();
casper.start('file://test.html').then(function() {
this.echo('started')
this.echo(this.getPageContent())
});
casper.run(function(){
this.echo('ended');
casper.done();
});
The test file:
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
</head>
<body>
<h1 class="page-title">Hello</h1>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<footer><p>2012 myself</p></footer>
</body>
</html>
The execution result:
C:>started
<html><head></head><body></body></html>
ended
Why the tags within the HTML body are gone?
All works fine, with an absolute path:
var casper = require('casper').create();
casper.start('file:///home/root2/pjs/test.html').then(function() {
this.echo('started')
this.echo(this.getPageContent())
});
casper.run(function(){
this.echo('ended');
casper.done();
});
The execution result:
started
<html><head>
<meta charset="utf-8">
<title>My page</title>
</head>
<body>
<h1 class="page-title">Hello</h1>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<footer><p>2012 myself</p></footer>
</body></html>
ended
You can also try to specify an absolute path like this:
file:///C://Full/Path/To/test.html
FYI, you can use these functions to get an absolute file uri for a relative one:
function getAbsoluteFilePath(relativePath) {
return "file:///" + currentDir() + relativePath;
};
// Courtesy https://github.com/casperjs/casperjs/issues/141
function currentDir() {
var sep = "/";
var pathParts = fs.absolute(casper.test.currentTestFile).split(sep);
pathParts.pop();
return pathParts.join(sep) + sep;
}
To use that in your scenario, use this:
// ...
casper.start(getAbsoluteFilePath('test.html')).then(function() {
this.echo('started')
this.echo(this.getPageContent())
});
// ...
You can make use of the fs module to get the absolute path of the working directory, and then concatenate the protocol "file://" and the relativePath.
E.g.
const fs = require('fs');
var casper = require('casper').create();
// your casper logic here
console.log(getAbsoluteFilePath('test.html'));
casper.run();
function getAbsoluteFilePath(relativePath) {
return "file://" + fs.workingDirectory + '/' + relativePath;
};
I'm evaluating mocha but I cant get around some basic problems, I wrote an example test and I'd like to run it both with node.js and in a browser using an html file but I cannot find a way to write only one test that works for both, if I add the require(s) in the test file it's fine for node.js and I get a "Uncaught ReferenceError: require is not defined" in the browser, deleting the require(s) I get "chai is not defined" in node js
this is the code
(function(exports) {
"use strict";
function Cow(name) {
this.name = name || "Anon cow";
}
exports.Cow = Cow;
})(this);
this is the test
var chai = require('chai'),
cowobj = require ("../cow"),
expect = chai.expect;
describe("Cow", function() {
describe("constructor", function() {
it("should have a default name", function() {
var cow = new cowobj.Cow();
expect(cow.name).to.equal("Anon cow");
});
});
this is the html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cow tests</title>
<link rel="stylesheet" media="all" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id="mocha"><p>Index</p></div>
<div id="messages"></div>
<div id="fixtures"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script src="cow.js"></script>
<script>mocha.setup('bdd')</script>
<script src="./test/cow_test.js"></script>
<script>mocha.run();</script>
</body>
</html>
any Idea on how to fix that?
checking if exports is defined in the test file did the job
if(typeof(exports) !== "undefined"){
var Cow = require ("../cow").Cow,
chai = require('chai');
}
var
expect = chai.expect;
after that I can simply do
var cow = new Cow();