Hiii, I have written mocha tests for nodejs executing well in the terminal,I need to run the tests and display the results in browser, I did it as suggested in Mocha documentaion.I created a test runner file and include the template structure and included my test files. I properly configured the route in nodejs and now when I call the url in Postman. I just got the same html file as response,can any one help me out to run the tests in the browser
Here is my test runner file :
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
</head>
<body>
<div id="mocha"></div>
<script src="https://cdn.rawgit.com/jquery/jquery/2.1.4/dist/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/Automattic/expect.js/0.3.1/index.js"></script>
<script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"> </script>
<script>mocha.setup('bdd')</script>
<script src="../test/notification_nodetest.js"></script>
<script src="../test/performance_check.js"></script>
<script>
mocha.checkLeaks();
mocha.globals(['jQuery']);
mocha.run();
</script>
</body>
</html>
here is where I configure the url :
app.get('/notifications/test', notificator.test_results);
test_results: function(req, res) {
app.get('/index.htm', function (req, res) {
var path = require('path');
res.sendFile( path.resolve("test/index.html") );
})
Related
I have a node js server when I run HTML page in local host i get the error Uncaught SyntaxError: Unexpected token < in the console because my local js and css files are not able to be loaded.
i have gone through - Node.js serve HTML, but can't load script files in served page
but it didn't worked
i have a file structure
enter image description here
my server code server.js
Node js:-
var express = require('express');
var http = require('http');
var fs = require('fs');
var app = express();
app.use(express.static(__dirname + '/public'));
app.get('*', function(req, res) {
console.log("Global");
res.sendFile(__dirname + '/public/index.html');
});
var port = process.env.PORT || 7000;
http.createServer(app).listen(7000);
My HTML file index.html is
<!DOCTYPE html>
<html>
<head>
<title>sample spa app</title>
<link rel="stylesheet" type="text/html" href="css/style.css">
</head>
<body>
<li>home</li>
<li>about</li>
<div>
<h2>you are in index.html</h2>
</div>
<div id="app">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="public/js/app.js" type="text/javascript"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>sample spa app</title>
<link rel="stylesheet" type="text/html" href="css/style.css">
</head>
<body>
<li>home</li>
<li>about</li>
<div>
<h2>you are in index.html</h2>
</div>
<div id="app">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/app.js" type="text/javascript">
</script>
</body>
</html>
<link rel="stylesheet" type="text/html" href="css/style.css">
The static handler will try and find a file sampleProject/public/css/style.css
<script src="public/js/app.js" type="text/javascript"></script>
The static handler will try and find a file sampleProject/public/public/js/app.js (yes, I wrote public/public).
None of these exist, therefore the static handler lets the request pass to the next route. The next route forces sampleProject/public/index.html to be served, whatever the request is. Hence your error.
Option A: isolate statically-served files
app.use('/public', express.static(__dirname + '/public'));
(As a side note you should require('path') and declare express.static(path.join(__dirname, 'public')), which is safer and more portable than manually concatenating.)
This tells the application to use the static handler only if the route begins with /public.
Option B: always try to resolve files as static
Move your css folder to public/css, and change the path when calling your JS to:
<script src="/js/app.js" type="text/javascript"></script>
Read about the bases here.
I am just learning and trying to test my javascript with Jasmine framework.
My javascript is just setting placeholder attribute of textarea to blank.
function clearPlaceholderTextOnFocus(i) {
i.placeholder = '';
}
I am calling this function on onClick event of textarea.
I wrote below code in Jasmine spec-
describe("Test suite for clearPlaceholderTextOnFocus",function(){
it("Should set placeholder to blank", function(){
var i=affix('textarea[name="message"][placeholder="write your message here..."]');
clearPlaceholderTextOnFocus(i);
var placeholderval = $('i').attr('placeholder');
expect(placeholderval).toHaveValue('');
});
});
When I run this code by double clicking on SpecRunner.html then I am getting below error -
Error: jasmine-fixture requires jQuery to be defined at window.jQuery or window.$
Below is my SpecRunner.html file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.5.2</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.5.2/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.5.2/jasmine.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>
<script src="lib/jasmine-2.5.2/jasmine.js"></script>
<script src="lib/jasmine-2.5.2/jasmine-html.js"></script>
<script src="lib/jasmine-2.5.2/boot.js"></script>
<script src="lib/jasmine-2.5.2/jasmine-jquery.js"></script>
<script src="lib/jasmine-2.5.2/jasmine-fixture.js"></script>
<!-- include source files here... -->
<script src="src/myfirst.js"></script>
<!-- include spec files here... -->
<script src="spec/myfirstSpec.js"></script>
</head>
<body>
</body>
</html>
What is wrong with my spec code? or do i need any other setup to run this?
Update - Including
Did you import Jquery in your SpecRunner.html? Like this
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>
Context
I've used Mocha before many times, both in the browser and just using the command line. I tend to use Chai's expect module for bdd.
I have five test files that have been working with command line npm test. I just want to run the tests in the browser for better debugging.
Problem
The setup is just boggling my mind. I either get a blank Mocha page without tests or I see the first test flash on screen, then it redirects.
Current specRunner.html
<!DOCTYPE HTML
<html>
<head>
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css" />
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script>mocha.setup('bdd');</script>
<script src="mineLocation.js"></script>
<script src="test/mineTests.js"></script>
<script>
window.expect = chai.expect;
mocha.run();
</script>
</head>
<body>
<div id="mocha"></div>
</body>
</html>
Previous Attempts
I've tried moving script tags around, thinking that dependencies are being unmet at load time.
I've tried relative vs. absolute paths. Console says all the tags are loading correctly.
I've tried modifying the run script tag. When it is as the example above, it turns out a blank page and says "Cannot read property 'appendChild' of null", pointing back to Mocha:
When the run script tag looks like this:
$(function() {
window.mochaPhantomJS ? mochaPhantomJS.run() : mocha.run();
});
It redirects from /specRunner.html to /2,1 and the console error repeats about every 30 seconds.
Here you go, just tested it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mocha Test</title>
<link rel="stylesheet" type="text/css" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id='mocha'></div>
<div id='app'></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script src="app.js"></script>
<script>
mocha.setup('bdd');
var expect = chai.expect;
</script>
<!-- Tests -->
<script src="app_test.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
So, I've found that it's not necessarily an issue with the HTML setup, but rather an issue with a test.
Setting the location variable globally within the file causes the strange redirection (to /2,1) and error "Cannot read property 'appendChild' of null".
Moving the variable within the describe statement, on line 4, fixes the problem.
My final HTML is cleaner as well:
<html>
<head>
<meta charset="utf-8">
<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>mocha.setup('bdd');</script>
<script src="node_modules/chai/chai.js"></script>
<script>var expect = chai.expect;</script>
<!-- src files -->
<script src="narcissistic.js"></script>
<script src="morseCodeDecoder.js"></script>
<script src="windComponents.js"></script>
<script src="mineLocation.js"></script>
<!-- test files -->
<script src="test/narcissisticTests.js"></script>
<script src="test/morseTests.js"></script>
<script src="test/windTests.js"></script>
<script src="test/mineTests.js"></script>
<script>mocha.run();</script>
</body>
</html>
I have a script that I am exporting a single variable:
module.exports = {
hello: "world"
};
I am bundling with browserify and then consuming the bundle in my index.html
Here is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="./bundle.js"></script>
</head>
<body>
<script>
console.log(hello);
</script>
</body>
</html>
I am getting that my variable hello is undefined. I can see the bundle.js with my dev tools, so I know it is there. Why does my script in the body not have access to the variables that the bundle.js is exporting?
What am I missing here?
In CMD call
browserify -r ./bundle-module.js:bundle > bundle.js
bundle-module.js is your raw module code
bundle-module.js:bundle - after-colon "bundle" is what will be used in require call
bundle.js is browserify-generated code
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="./bundle.js"></script>
</head>
<body>
<script>
var bundle = require('bundle');
console.log(bundle.hello);
</script>
</body>
</html>
I'm using jasmine framework with jquery and I need to load fixtures from a specific path. Here is my folder structure:
E:
- project
- app
- views //FIXTURE FILES HERE IN THIS FOLDER
- main.html
- public
- scripts
- library
- jasmine-standalone
- SpecRunner.html //JASMINE SPECRUNNER
- specs //CHANGED PATH OF JASMINE'S SPEC FOLDER
- testSpecs.js //FILE WHERE I NEED TO LOAD FIXTURES
test.js //CONTAINS CODE I NEED TO TEST (included in SpecRunner)
Now, I've changed the path of specs as shown, but I included that in SpecRunner and it works fine, as my tests are getting run. I now need to load main.html as a fixture to testSpecs. How would I do that? Here's what i tried:
In testSpecs.js:
describe("Login Form", function() {
beforeEach(function(){
jasmine.getFixtures().fixturesPath = "/../../../app/views"; //(EDIT NEEDED HERE)
jasmine.getFixtures().load('main.html');
});
In SpecRunner.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.1.3</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.1.3/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.1.3/jasmine.css">
<script src="lib/jasmine-2.1.3/jasmine.js"></script>
<script src="lib/jasmine-2.1.3/jasmine-html.js"></script>
<script src="lib/jasmine-2.1.3/boot.js"></script>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../jasmine-jquery-1.3.1.js"></script>
<!-- include source files here... -->
<script src="../../test.js"></script>
<!-- include spec files here... -->
<script src="../../specs/testSpecs.js"></script>
</head>
<body>
</body>
</html>
PS - Can I incude .php files in fixture?