I am trying to use gulp useref to combine js files.
Here is the gulp task:
gulp.task('useref', function () {
return gulp.src('templates/base.html.twig')
.pipe(useref(
{
transformPath: (filePath) => {
return filePath.replace('/templates', '')
}
}
))
.pipe(gulp.dest('web/js'));
});
and in base.html.twig i have:
<!-- build:js web/js/combined.js -->
<script src="{{asset('js/profile/edit/js-script.js')}}" type="text/javascript"></script>
<!-- endbuild -->
So when I ttry to run gulp useref task I have this error:
Error: File not found with singular glob: /var/www/html/project/templates/js/profile/edit/js-script.js (if this was purposeful, use allowEmpty option)
Now it creates web/js folder inside web/js that are allready there and also it create base.html.twig inside.
Hope some one can help me with this.
Related
I am trying to use ember-index add on to generate index.jsp file instead of index.html. I have installed the ember-index addon and did the required changes as well.
My config/environment.js file looks like below
/* eslint-env node */
'use strict';
module.exports = function(environment) {
let ENV = {
modulePrefix: 'user-profile',
output: 'index.jsp',
environment,
rootURL: '/',
locationType: 'hash',
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
},
EXTEND_PROTOTYPES: {
// Prevent Ember Data from overriding Date.parse.
Date: false
}
},
'ember-index': {
output: 'index.jsp',
content: {
file: 'example.txt',
includeInOutput: true,
includeInIndexHtml: false
}
},
APP: {
// Here you can pass flags/options to your application instance
// when it is created
}
};
return ENV;
};
Also my example.txt file looks like
<meta content="Example">
<h2>html to jsp</h2>
and finally in my index.html I have added below snippet
{{content-for 'ember-index'}}
But now when i am trying to build the ember project with ember build I am not able to see index.jsp file in my dist folder.
With a fresh app, this addon works as expected. Walk through the steps for the minimal example using a new Ember app, and you'll find what you missed.
Are you sure you're looking in the right place for the index.jsp? It is at dist/export/index.jsp after running ember build.
Did you forget to add the tag in your index.html? The readme specifies that for your files to be used, they must be specified like this:
<!-- app/index.html -->
<!DOCTYPE html>
<html>
<head>
...
{{content-for 'ember-index-1'}}
{{content-for 'ember-index-2'}}
</head>
<body>
...
</body>
</html>
I am trying to do unit testing with Mocha and Chai. The test runs successfully in terminal, but when I check the testrunner.html file in browser it is blank and just shows "passes: 0failures: 0duration: 0s"
But in terminal it shows:
$ mocha
Array
✓ should start empty
1 passing (18ms)
HTML
In this order in your HTML
Link to a mocha css stylesheet.
<link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
Write a div tag with id='mocha'. The tests will be inserted in this div, which will allow you to see them in the browser.
<div id="mocha"></div>
Write a script tag to load mocha.
<script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
Write a script tag to load any other dependencies like chai.
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.1.0/chai.js"></script>
Setup the mocha BDD api (or TDD depending on how you are writing your tests).
<script>mocha.setup("bdd");</script>
Write your test (inline or link to an external JavaScript file).
BDD example:
describe("addition", function() {
it("adds 1 and 1", function() {
expect(1 + 1).to.equal(2);
});
});
Run Mocha.
mocha.run();
Snippet Example
Try running this snippet
<!-- link to mocha css stylesheet -->
<link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
<!-- write a div with id "mocha" for the output to be inserted into -->
<div id="mocha"></div>
<!-- load mocha framework -->
<script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
<!-- load any other libraries like the chai assertion library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.1.0/chai.js"></script>
<!-- setup mocha to use the BDD interface -->
<!-- Note: you can use TDD here instead -->
<!-- depending on how you are writing your tests -->
<!-- more information: http://mochajs.org/#tdd -->
<script>
mocha.setup("bdd");
</script>
<!-- write tests -->
<script>
// access 'expect' from chai
var expect = chai.expect;
// write tests (BDD example)
describe("addition", function() {
it("adds 1 and 1", function() {
expect(1 + 1).to.equal(2);
});
it("adds 1000 and 10", function() {
expect(1000 + 10).to.equal(1010);
});
});
describe("subtraction", function() {
it("subtracts 1 from 1", function() {
expect(1 - 1).to.equal(0);
});
it("subtracts 10 from 1000", function() {
expect(1000 - 10).to.equal(990);
});
});
describe("multiplication", function() {
it("multiplies 1 by 1", function() {
expect(1 * 1).to.equal(1);
});
it("multiplies 1000 by 10", function() {
expect(1000 * 10).to.equal(10000);
});
});
describe("division", function() {
it("divides 1 by 1", function() {
expect(1 / 1).to.equal(1);
});
it("divides 1000 by 10", function() {
expect(1000 / 10).to.equal(100);
});
});
</script>
<!-- run mocha -->
<script>
mocha.run();
</script>
Demo
Here is a CodePen Demo that does not use so much inline JavaScript.
Documentation
Useful information can be found here at the official documentation.
I can't get my jasmine unit-tests to load the a component for testing.
Webstorm is telling me that everything is good to go in terms of syntax. But when I load live-server to have the unit test load it doesn't seem to work.
I have it compiling to a test directory at root.
So here is my directory tree (abv for the ease):
-- client(src)
|-- common
|---- welcome.component.ts
|---- welcome.spec.ts
-- node_modules
-- tests(compiled spec and components)
|-- client(src)
|---- common
|------ welcome.component.ts
|------ welcome.spec.ts
--unit-tests.html
--systemjs.config.js
live server is giving me this:
GET /tests/client/common/welcome.component 404
welcome.spec.ts
/// <reference path="../../typings/main/ambient/jasmine/index.d.ts" />
import {WelcomeComponent} from './welcome.component';
describe('Welcome tests', () => {
let welcome:WelcomeComponent;
beforeEach(() => {
welcome = new WelcomeComponent('sir');
});
it('Nombre should equal sir', () => {
expect(welcome.nombre).toEqual('sir');
})
});
unit-tests.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Tests</title>
<link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
</head>
<body>
<!-- #1. add the system.js library -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
// #2. Configure systemjs to use the .js extension
// for imports from the app folder
System.config({
packages: {
'client': {defaultExtension: 'js'}
}
});
// #3. Import the spec file explicitly
System.import('tests/client/common/welcome.spec.js');
System.import('tests/client/common/header.spec.js')
// #4. wait for all imports to load ...
// then re-execute `window.onload` which
// triggers the Jasmine test-runner start
// or explain what went wrong.
.then(window.onload)
.catch(console.error.bind(console));
</script>
</body>
</html>
systemjs.config.js
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'tests/client', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'#angular': 'node_modules/#angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router',
'#angular/router-deprecated',
'#angular/testing',
'#angular/upgrade',
];
// add package entries for angular packages in the form '#angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
I can add more if you need me too, the header.spec works great, but it's self-container. (expect true = true, etc)
SystemJS should be loading this for the unit-tests but it does not, the site itself works great so the Welcome.component is fine. But for some reason I cannot load the unit test.
Where would I be going wrong? I feel like this is a config issue, but I am not very familiar with unit-tests.
I had a similar issue the other day, take a look at this comment. If you have a spec-bundle.js or something similar, make sure var testing and var browser is referring to RC1 and not beta.
Also, if you have this somewhere: testing.setBaseTestProviders(
browser.TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
browser.TEST_BROWSER_STATIC_APPLICATION_PROVIDERS);
this is how it should look for RC1, it was different for beta
I'm working on a simple Ember.js and Express app and up to now all my templates have been in my index.html file. This is my first time using Grunt for anything much less precompile templates. (I'm using Grunt-Ember-Handlebars to tackle the compiling)
I've moved all my templates into a handlebars folder and they compile into templates.js in the same folder.
My question is this: where do I include the script tag linking to templates.js in my HTML file?
Here is how I have all my scrips laid out:
<script src="../js/jquery.js"></script>
<script src="../js/libs/handlebars-1.1.2.js"></script>
<script src="../js/libs/ember-1.3.0.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
<!-- APP -->
<script src="templates.js" type="text/javascript"></script>
<script src="../js/app.js"></script>
<script src='../js/router.js'></script>
<script src='../js/controllers/controllers.js'></script>
My path to my templates.js file is correct so thats not an issue. But it always returns with errors stating:
Assertion failed: Could not find "index" template or view.
The only file I know I need to include it after is my ember.js file. Other than that, it makes no difference in error output if I include it after or before any files in my App.
Thanks for the help ahead of time!
Edit:
Here is my Gruntfile:
grunt.initConfig({
ember_handlebars: {
compile: {
options: {
namespace: "emberApp.TEMPLATES"
},
files: {
"views/templates.js" : "handlebars/*.hbs"
}
}
}
});
It doesn't matter where to put them. Seems like they have wrong naming.
Put templates into templates
Name them correctly (application.hbs for application template)
Use this grunt command
ember_handlebars: {
options: {
processName: function(name) {
return name.replace(/(templates\/|\.hbs)/g, '');
}
},
files: {
"templates.js": "templates/**/*.hbs",
}
I have some JavaScript that I'm testing with Jasmine. I want to run the tests in the browser window when a user presses "run tests". With Jasmine 1.3, I have successfully set that up as shown in this JSFiddle with this code:
run tests
<script type="text/javascript">
window.jasmineEnv = (function () {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function (spec) {
return htmlReporter.specFilter(spec);
};
return jasmineEnv;
})();
</script>
Jasmine 2.0 offers some new capabilities that I really need. However, I cannot figure out how to get it setup such that the tests run when someone clicks a "run tests" button. I'm using the new boot.js file. However, I'm not having any luck. Can someone please help me migrate that sample from Jasmine 1.3 to Jasmine 2.0?
Thank you
Test cases execution is triggered by below snipped in file boot.js:
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
htmlReporter.initialize();
env.execute();
};
Either you can modify this implementation in boot.js file itself to execute under a function call or you can write your custom boot code inspired from actual boot.js.
Can't post this as a comment yet!
Jasmine 2.0 in jsfiddle http://jsfiddle.net/88Xa6/4/ As mentioned by #user3037143 initialization is handled at boot.js.
Ensure the library files are in place:
<script type='text/javascript' src="/libs/jasmine/2.0.0/jasmine.js"></script>
<script type='text/javascript' src="/libs/jasmine/2.0.0/jasmine-html.js"></script>
<link rel="stylesheet" type="text/css" href="/libs/jasmine/2.0.0/jasmine.css">
<!-- Add any custom reporters (Console / Junit / etc) here.
Ensure necessary initialization triggers are set in
boot when adding more reporters. -->
<script type='text/javascript' src="/libs/jasmine/2.0.0/boot.js"></script>
You can either choose to include the spec or have them defined inline:
<script src="spec.js"></script>
or
<script type='text/javascript'>
describe("My Suite", function() {
it("Should be true", function() {
expect(1).toBe(1);
});
});
</script>