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?
Related
Basic html page. Just starting and downloading packages. Checking if my Semantic UI setup is properly installed, but when I open up my index.html page and check the console I get 'GET file:///semantic/dist/semantic.min.css net::ERR_FILE_NOT_FOUND', along with 'GET file:///semantic/dist/semantic.min.js net::ERR_FILE_NOT_FOUND'. Which is strange!
These are my script tags within my head tag inside my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 boilerplate – all you really need…</title>
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/semantic/dist/semantic.min.css"
/>
<script src="/semantic/dist/semantic.min.js"></script>
</head>
<body id="home">
<h1>HTML5 boilerplate</h1>
</body>
</html>
I can click on the relative paths in both tags and it will take me to the actual file in my editor.
My current folder structure is:
Semantic
dist
semantic.min.css
semantic.min.js
index.html
What gives?
Try ./semantic/dist/semantic.min.css
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>
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>
--public/javascripts/myscript.js
--views/index.ejs
No matter what I do, or what variation I use (ie declaring including type="text/javascript") it wont find my external js file. I am using node js and I was told I may have to do something with routing, but that doesn't seem to be working either.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<!-- <link rel='stylesheet' href='/stylesheets/style.css' />-->
</head>
<body>
<%include templates/header.ejs %>
<script type="text/javascript" src=".../public/javascripts/myscript.js"> </script>
</body>
</html>
I understand using routing in other .js files but not importing into html.
Also is there a better/neater was of doing this?
you base directory for adding static file, start from public
ex.
your project directory
/var/www/project/
your assets located on
/var/www/project/public/javascripts
then you attach theme as bellow
//app.js
app.use(express.static(path.join(__dirname, 'public')));
and on views you can do as bellow
<script type="text/javascript" src="/javascripts/myscript.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>