Working with Jasmine with tests. To tests I used jasmine-browser-runner
like this jasmine-browser-runner runSpecs --config=spec/config/jasmine-browser.json
It works fine but in the terminal, I have dots .... and F.
To output nice results in the terminal, I've tried those npm packages
jasmine-spec-reporter and jasmine-console-reporter but they run in node and don't see web functions (like performance and other parts of the app because I do not use module.export and require)
Tried Jasmine Standalone configuration with jasmine-reporters from this repo https://github.com/larrymyers/jasmine-reporters
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v3.8.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-3.8.0/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-3.8.0/jasmine.css">
<script src="../reporter/terminal_reporter.js"></script>
<script src="lib/jasmine-3.8.0/jasmine.js"></script>
<script src="lib/jasmine-3.8.0/jasmine-html.js"></script>
<script src="lib/jasmine-3.8.0/boot.js"></script>
<script src="../reporter/reporterRunner.js"></script>
<script src="../js/utils.js"></script>
<script src="spec/UtilsSpec.js"></script>
</head>
<body>
</body>
</html>
It works too but output goes to the browser console, not in the terminal.
Tell, me please, how to manage jasmine to show nice results in the terminal console?
Maybe jasmine-browser-runner could work with terminal reporters somehow?
Related
I am new to vuejs, I am developing a new laravel-vuejs project. When I run npm run dev, it gives this error Uncaught SyntaxError: expected expression, got '<'. I am running the application using http://127.0.0.1:8000/
index.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ env('APP_NAME') }}</title>
<link href="/css/app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>
I was running npm run dev and npm run watch and there was no error on compilation but when i was running the application using the http://127.0.0.1:8000/.
I was getting an error:
Uncaught SyntaxError: expected expression, got '<'
I kept googling to find the solution for it, then I came to know that I have to run:
php -S localhost:8000 -t public/
and then run the following:
http://localhost:8000/
Cheers!
When a project is created by the Vue-CLI 3, a public/index.html is created.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website</title>
</head>
<body>
<noscript>
<strong>We're sorry but the website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
I would like to add an external CSS file into the head, but the source file is in SASS/SCSS. The reason I would like this file is to style the markup around the Vue app (<div id="app">/<div>), like the <body> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website</title>
<link href="[I want to reference a compiled SCSS file here]" rel="stylesheet" type="text/css" />
</head>
<body>
<noscript>
<strong>We're sorry but the website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
I read the Vue-CLI 3 guide on CSS, https://cli.vuejs.org/guide/css.html, but I am under the impression that the advice on that page is for integrating SASS into single-file components (*.vue files), like allowing single file components to access global SASS variables. Can I get the Vue-CLI 3 build process to compile a SASS file that isn't directly related to any of the *.vue files but is still part of the Vue app for deployment purposes?
I cannot find an answer to my specific question.
However, I did find a discussion in the Vue Loader Github repo.
https://github.com/vuejs/vue-loader/issues/328#issuecomment-363165459
https://github.com/vuejs/vue-loader/issues/328#issuecomment-363189176
Basically, any global styles that do not contain SASS variables or mixins can be imported into App.vue's style block without a 'scoped' attribute.
<style lang="scss">
#import './scss/main.scss';
</style>
Any Vue component that needs access to SASS variables will require a small change to Vue.config.js
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// pass options to sass-loader
sass: {
// #/ is an alias to src/
// so this assumes you have a file named `src/variables.scss`
data: `#import "#/variables.scss";`
}
}
}
}
I am first to learn laravel 5.2 about one week. and I try to learn larevel from youtube and document laravel .but I wonder They teach and just copy templat bootstrap without download bootstrap file to put into folder public it works, but when I try to follow theme it not work for me ,but when I download bootstrap file and put into public folder and call it work for. My problam I want to know how bootstrap work correctly in laravel .
You just need to create the blade template and then in template put the link of bootstrap.
Example (index.blade.php) CDN links:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Title</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Here you can put your content -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Example (index.blade.php) local links:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Title</title>
<!-- Bootstrap -->
<link href="http://yoursite/public/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Here you can put your content-->
<script src="http://yoursite/public/assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Another way to get that done is to get bootstrap from npm if you prefer working offline, plus laravel 5 comes with gulp and a package.json file by default
1. add the following to your package to json
{
"private": true,
"dependencies": {
"gulp": "^3.8.8",
"laravel-elixir": "^2.0.0",
"jquery": "latest",
"bootstrap": "latest"
}
}
2. npm install that would get the latest verion of bootstrap and jquery which is required, if you encounter any error if on linux do sudo npm install
3. mix the css and javascript file with laravel elixir by have below declarations in your gulpfile.js
var elixir = require('laravel-elixir');
var nodeDir = './node_modules/';
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
//mix css first and copy the needed fonts
//mix.css('app.css', 'public/css',)
mix.styles([
'bootstrap/dist/css/bootstrap.css',
'font-awesome/css/font-awesome.css'
], './public/css/app.css', nodeDir)
.copy(nodeDir + 'font-awesome/fonts', 'public/fonts')
.copy(nodeDir + 'bootstrap/fonts', 'public/fonts');
//mix javascript
mix.scripts([
'jquery/dist/jquery.js',
'bootstrap/dist/js/bootstrap.js'
], './public/js/app.js', nodeDir);
});
run gulp
$ gulp
finally a welcome.blade.php
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://getbootstrap.com/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>Fixed Top Navbar Example for Bootstrap</title>
</head>
<body cz-shortcut-listen="true">
<div id="app"></div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
The above reduces number of http request you make to load bootstrap bootstrap and its dependency jquery
reference : https://laravel.com/docs/5.0/elixir
Hope this helps
Laravel is a server side framework. It should handles database, caches, logs and validation.
Bootstrap is a client side UI framework. It should handles UI component like tabs, grid, forms and some typography aspects.
Every server side framework supports every client side framework, so feel free to use Laravel with Bootstrap.
In particular you should create a base layout with some common html and extend it in your different views. In this base layout you have to include Bootstrap via CDN or locally using asset() helper. This helper helps you to build url (https://laravel.com/docs/5.2/helpers).
I'm very new to Compass and SASS (just getting beyond a very basic understanding, to the testbed stage), and would like to try creating a div with border-radius characteristics that will work cross-browser, including in IE8.
I have successfully installed SASS and Compass, and this has created a standard files structure with ie.scss and screen.scss. The Compass watch command works ok and successfully compiles the SASS commands. However I can't seem to get the border-radius to work in IE8 (using PIE).
Here is the code I'm trying to use:
#import "compass/reset";
#import "compass/css3";
#import "compass/support";
#import "compass/css3/pie";
$legacy-support-for-ie: true;
.compound { #include border-radius(10px 15px, 10px 16px);
border: 1px solid;
behavior: url(PIE.htc);
}
I've tried putting this in both screen.scss and ie.scss apparently to no effect. I must be missing something... but what?
Here is the HTML by the way
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<link href="stylesheets/screen.css" media="screen,projection" rel="stylesheet" type="text/css" />
<link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<link href="stylesheets/pie.css" media="screen,projection" rel="stylesheet" type="text/css" />
<!-- [if IE]>
<link href="stylesheets/ie.css" media="screen,projection" rel="stylesheet" type="text/css" />
<![endif]-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div><h1>Test de compass</h1></div>
<div class="compound">
<p>Suspendisse bibendum libero eu tortor tempor, non convallis lectus hendrerit.
</p>
</div>
</body>
</html>
I found the answer - maybe this will help others.
I was running on a test bed installed under Wampserver, so the address of the test site's home page was http://localhost/pietest/index.html
However, when you install PIE it assumes that you are at the web server root, so the URL created in the pie.scss file generated at installation was incorrect. It was using the absolute address of the web server ("/stylesheets/pie.HTC"), whereas it needed to be a relative address: this worked - "stylesheets/pie.HTC"
I am using QUnit+Sinon.js which works well natively.
The problem was occured when I tried to build it into a continous integration process.
I am using js-test-driver framework to be able to run it in continous integration enviroment.
In the past I used it without Sinon.js and it wasn't any problem with that.
But after I included the Sinon.js plugin, it doesn't work at all.
When I tried to run my tests it says:
D:/my/project/url/contentTest.js:60: TypeError: qTest is not a function
Total 0 tests (Passed: 0 Fails: 0 Errors: 0)(0.00 ms)
My js-test-driver configuration:
server: http://localhost:9879
load:
# QUnit related files
- qunit/lib/equiv.js
- qunit/lib/QUnitAdapter.js
- qunit/plugin/sinon-1.6.0.js
- qunit/plugin/sinon-qunit-1.0.0.js
# Dependencies
- external/jquery/1.7.2/jquery.min.js
# Files under test
- content.js
# Tests
- contentTest.js
The interesting thing is that there is a QUnit index.html file which works well (when I open this html, every tests passes):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my tests</title>
<link rel="stylesheet" href="./qunit/lib/qunit-1.11.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<!-- core -->
<script src="./qunit/lib/qunit-1.11.0.js"></script>
<script src="./qunit/plugin/sinon-1.6.0.js"></script>
<script src="./qunit/plugin/sinon-qunit-1.0.0.js"></script>
<!-- dependencies -->
<script src="./external/jquery/1.7.2/jquery.min.js"></script>
<!-- under test -->
<script src="./content.js"></script>
<!-- tests -->
<script src="./contentTest.js"></script>
</body>
</html>
So it seems there is a conflict with js-test-driver and Sinon.js. If I remove all related Sinon.js tests and the included sinon plugins, then it works.
If I just remove the sinon related tests, it still failes.
If I don't remove sinon.js but remove all tests and create an emty test with an "ok(true)" assert, then it still fails with the same error message (contentTest.js:60: TypeError: qTest is not a function), however my test file is consists just 10 row (how it could be an error in 60.th line when my file consists only 10 line?).
Thank you all for any helps in advance!
Not a solution, but perhaps an approach to get more information: can you run the js-test-driver scripts locally from a shell? Does it produce similar error details? At the very least, this will give you more information and a shorter feedback loop.