I have a jasmine test spec file and I want include bootstrap js . Kindly let me know , how to add this.
Thanks
Include it in the Jasmine SpecRunner.html file, then run that file in your browser to run the tests. You can add bootstrap.js or anything else you need to run the tests.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.4.1</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.4.1/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.4.1/jasmine.css">
<script src="lib/jasmine-2.4.1/jasmine.js"></script>
<script src="lib/jasmine-2.4.1/jasmine-html.js"></script>
<script src="lib/jasmine-2.4.1/boot.js"></script>
<!-- include source files here... -->
<script src="src/Player.js"></script>
<script src="src/Song.js"></script>
<!-- include spec files here... -->
<script src="spec/SpecHelper.js"></script>
<script src="spec/PlayerSpec.js"></script>
</head>
<body>
</body>
</html>
Related
This is a Webpack-generated index.html for an Aurelia page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="assets/favicon_16x16.png" rel="icon" sizes="16x16" type="image/png">
<title>Report NG</title>
<meta content="width=device-width,initial-scale=1" name="viewport">
<base href="">
<script defer="defer" src="runtime~app.ff7b16a6e070e53c8cd6.bundle.js"></script>
<script defer="defer" src="927.e593586868873e353304.bundle.js"></script>
<script defer="defer" src="983.8ddf552f0b4036561207.bundle.js"></script>
<script defer="defer" src="417.0b982aa38fb2bce8d391.bundle.js"></script>
<script defer="defer" src="212.46a12b9521ba6317f9b1.bundle.js"></script>
<script defer="defer" src="app.42fbcddde62f263b1a4c.bundle.js"></script>
<link href="css/983.5102c6f24c10258b523a.chunk.css" rel="stylesheet">
<link href="css/417.78495966cfa48fb59a61.chunk.css" rel="stylesheet">
<link href="css/app.327e04e57f327850ab7d.chunk.css" rel="stylesheet">
</head>
<body aurelia-app="main"></body>
</html>
If I open this index.html on my local machine, the scripts (in the same folder) will be loaded and run.
This is a hand-written MVE index.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MVE_localDataDependency</title>
<script defer="defer" src="data.js" type="module"></script>
<script>
import {read} from "./data"
read()
</script>
</head>
<body></body>
</html>
It will not load data.js (in the same folder) but rather abort with a CORS error. This is the expected behaviour.
... Why are the scripts loaded in the generated page?
Notes:
Browsers may have a global setting to allow loading local scripts, e.g. in Firefox. This does not explain, why the same browser, in two simultaneously open tabs, loads script files for one HTML file but not for the other one.
I double checked that both index.html files appear in the Browser tab as "file:///", so not a case of "your IDE accidentally auto-served this".
Behaviour is identical in both Chrome and Firefox.
I test cordova project with jasmine and I add jquery and jasmine-jquery to jasmine test but jasmine show below code .
ReferenceError: selectLevel() is not defined
and Jasmine not worked and return Error during loading: Script error. when my app.js is
(function($) {
function selectLevel() {
level = 1;
}
})(jQuery);
but work when (function($) { removed
JasmineHTML FIle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v3.5.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-3.5.0/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-3.5.0/jasmine.css">
<script src="lib/jasmine-3.5.0/jasmine.js"></script>
<script src="lib/jasmine-3.5.0/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-3.5.0/jasmine-jquery.js"></script>
<script type="text/javascript" src="lib/jasmine-3.5.0/jquery.js"></script>
<script src="lib/jasmine-3.5.0/boot.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="app.js"></script>
<!-- include spec files here... -->
<script src="spec/PlayerSpec.js"></script>
</head>
<body>
</body>
</html>
In this case, how do I solve this?
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>
Perhaps I am missing something, but here is my problem:
after running gulp dist to go on "production mode", all javascript files are bundled ok but in the index.html there are still references to jspm_packages folder and also to some of the JavaScript files as follows:
<head>
<link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap#3.3.4/css/bootstrap.css"/>
<link rel="stylesheet" href="build/css/main.css"/>
</head>
<body>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('build/js/main.js!jsx');
</script>
</body>
all those references are no longer exists in dist folder, which is created in the gulp dist task.
Here is a use case example from one of React+JSPM projects on GitHub: https://github.com/tinkertrain/jspm-react
This behaviour is common to a many projects which I've encountered, so probably I am missing something...
Should I configure something to make some adjustments? maybe calling another task to create my own "production mode" html?
Cheers
You have to process your html and replace all those <link> and <script> with the production ones. There are arguably many ways and tools to do it, but as you say you're using Gulp you might want to check Gulp-html-replace.
Basically the idea is to add some html comments that instruct your chosen tool to replace those tags with the production ones. In your case
<head>
<!-- build:css -->
<link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap#3.3.4/css/bootstrap.css"/>
<link rel="stylesheet" href="build/css/main.css"/>
<!-- endbuild -->
</head>
<!-- build:js -->
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('build/js/main.js!jsx');
</script>
<!-- endbuild -->
Will produce:
<head>
<link rel="stylesheet" href="styles.min.css">
</head>
<body>
<script src="js/bundle.min.js"></script>
</body>
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?