I'm trying to implement unit testing within my SAPUI5 Application. I understand how to perform the unit tests --but I'm not understanding how to configure the testing in my SAP UI5 application. I believe the problem is how I'm attempting to load in the controller I want to test. I have a basic tree structure like so:
I'm unfamiliar with how to set up the tests. When I insert the following controller, I get a script error:
test.js
sap.ui.require(["../Controller/Main.controller.js"],
function(MyController){
//Quint code
test("hello test", function(assert) {
assert.ok(1 == "1", "Passed!");
});
});
initialTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>
<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
<script src="tests.js"></script>
<script src="/Controller/Main.controller.js"></script>
<script>
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
screenshot of the error
How can I properly load in the controller.js that I would like to test?
Try including like this
jQuery.sap.registerModulePath("controller", "../Controller");
jQuery.sap.require({
modName : "controller.Main",
type : "controller"
});
QUnit.test("Some text", function() {
var oCont = sap.ui.controller("controller.Main");
});
Related
I just started to learn using Vue. I wrote really simple code like the following.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<h2>{{number}}</h2>
<h2>Here it is!</h2>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
number:0
}
})
</script>
</html>
However, there is no number value.
But, when I open that code just by Ctrl+O on chrome, it shows succefully!
I definitely checked network by chrome dev tool and I got successfully vue.js from https://unpkg.com/vue#2.5.22/dist/vue.js What's wrong with it?
Loading the framework in the head is a good way to start.
See the example below, it works fine in here.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<h2>{{number}}</h2>
<h2>Here it is!</h2>
<button #click="clk">click</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
number: 0
},
methods: {
clk(){
this.number++;
}
}
})
</script>
</body>
</html>
I thought you should return an object from a function for data.
data : function() {
return {
number : 0
};
}
I have the following setup in my qUnit.html file
<html>
<head>
<Title> Batch Processing Tool Unit Test Report</Title>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<script id="sap-ui-bootstrap"
src="../../openui5/resources/sap-ui-core.js"
data-sap-ui-resourceroots='{
"BatchProcessing": "../../",
"test.unit": "./"
}'
data-sap-ui-frameOptions='deny'>
</script>
<script>
jQuery.sap.require("sap.ui.qunit.qunit-css");
jQuery.sap.require("sap.ui.thirdparty.qunit");
jQuery.sap.require("sap.ui.qunit.qunit-junit");
jQuery.sap.require("sap.ui.qunit.qunit-coverage");
QUnit.config.autostart = false;
sap.ui.require(
[
"test/unit/controller/InputsView.controller",
"test/unit/controller/TableView.controller",
"test/unit/controller/DetailsView.controller"
],
function() {
setTimeout(function() {
QUnit.start();
}, 5000);
}
);
</script>
</head>
<body>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"></div>
</body>
</html>
The problem is that when I go to look at my code coverage qUnit tries to cover every .js file in my project. How can I tell it to ignore certain files that I don't want to test. Is it possible to do it within the qUnit.html file or does it have to be strictly done through grunt?
I found an answer after looking around for a while. Here it is for anyone running into similar problems.
https://openui5.hana.ondemand.com/#/topic/7ef32428dc7c4c048a8d7e8de0a556fb
I'm new to ember.js (but I know MVC from my CakePHP experiences and JS as well)
and in the last 2 weeks I build a little app at work which loads
sideloaded JSON data with the REST-Adapter. I added some buttons with actions
and everything works fine and I learned a lot, but it takes time to figure out the details.
All my controllers, routes and models are not organised at the moment in a folderstruture
which is described in the ember.js-Guide: http://guides.emberjs.com/v1.12.0/concepts/naming-conventions/
Now I want to move the files to the folderstructure. But then the application does not work.
It seems to my that the resolver can not finde the files at runtime. But why?
An easy example which does not work:
in "app.js" (loaded with -tag in "index.html"):
App = Ember.Application.create({
LOG_RESOLVER: true // just for debugging
});
in "router.js" (loaded with -tag after "app.js" in "index.html"):
App.Router.map(function(){
this.route('mytest');
});
in "routes/mytest.js":
export default Ember.Route.extend({
setupController: function(controller) {
controller.set('title', "Hello world!");
}
});
in "controllers/mytest.js":
export default Ember.Controller.extend({
appName: 'mytest'
});
in "indes.html":
<script type="text/x-handlebars">
{{#link-to 'mytest' }}Mytest{{/link-to}}<br/>
{{outlet}}
</script>
<script type="text/x-handlebars" id="mytest">
mytest Template
<h1>appName: {{appName}}</h1>
<h2>title: {{title}}</h2>
</script>
The Handlebar-template "mytest" is showen, but {{appName}} and {{title}} are empty.
If I moved the "mytest"-Template to "templates/mytest.hbs" nothing is showen.
Seems to my that the resolver does not work. Or something wrong with the naming-conventions Guide?
My another assumption:
Resolver-Stuff only works when using a buildprocess like in ember-cli.
Using "ember-1.12.1.debug", "ember-template-compiler-1.12.1"
Thanks for help.
-update-
Here the "index.html" - simple example:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
</head>
<body>
<script type="text/x-handlebars">
{{#link-to 'mytest' }}Mytest{{/link-to}}<br/>
{{outlet}}
</script>
<script type="text/x-handlebars" id="mytest">
mytest Template
<h1>appName: {{appName}}</h1>
<h2>title: {{title}}</h2>
</script>
<script src="libs/jquery-2.1.4.js"></script>
<script src="libs/ember-template-compiler-1.12.1.js"></script>
<script src="libs/ember-1.12.1.debug.js"></script>
<script src="app.js" ></script>
<script src="router.js" ></script>
</body>
</html>
At the moment I guess that the ember.js guide about naming conventions (guides.emberjs.com/v1.12.0/concepts/naming-conventions) left out, that "Ember.js uses a runtime resolver to wire up your objects without a lot of boilerplate" only works with "ember-cli" or the older "ember app kit" or another tool, but not when the application is running. So no JS-Files will be loaded from the server from while running the JS-application.
I have written a html with a div.
I have two hbs files. I rendered one as partial and other as normal. I am not able to invoke action on the templates. I am getting missing helper error.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="holder">
</div>
<script src="js/libs/jquery-v1.11.1.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-v1.6.1.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
</body>
</html>
JS:
var data={title: "My New Post", body: "This is my first post!"};
function getTemplate(templateName,hbsPath,type){
$.ajax({
url: hbsPath, //ex. js/templates/mytemplate.handlebars
cache: true
}).done(function (src) {
if (type === "partial") {
Handlebars.registerPartial(templateName, $(src).html());
} else {
template = Handlebars.compile($(src).html());
temp=template(data);
$("#holder").append(temp);
}
});
}
getTemplate("dummy","/Test/templates/dummy.hbs","partial");
getTemplate("dummy","/Test/templates/application.hbs");
App = Ember.Application.create({});
App.Router.map(function(){
this.resource('dummy');
});
App.ApplicationController=Ember.ObjectController.extend({
needs:['dummy'],
actions:{
refresh: function(){
alert("application template refresh");
}
}
});
App.DummyController=Ember.ObjectController.extend({
actions:{
refresh: function(){
alert("dummy template refresh");
}
}
});
HBS:
application.hbs:
<script id="application" type="text/x-handlebars-template">
{{> dummy}}
</script>
dummy.hbs:
<script type="text/x-handlebars" data-template-name='dummy'>
<div {{action 'refresh' target="controllers.dummy"}}>
Refresh
</div>
<div {{action 'refresh'}}>
Refresh
</div>
</script>
The code in ur demo and the code in question are different. Here is a fixed demo based on the code in ur question.
Fixing the demo u provide may need you to include the vanilla handlebars library as ember is now using HTMLBars which is built on top of handlebars but a bit different.
Em.Handlebars.compile is now actually using HTMLBars compile method. You can see here.
You may need to use something like https://github.com/rwjblue/broccoli-ember-inline-template-compiler
I'd like to define a block helper that puts the text in the block into a tag. I used an example from http://handlebarsjs.com/block_helpers.html as a start but my code doesn't work. What do I have to change to get test as the output of this block helper?
app.js
App = Ember.Application.create();
Handlebars.registerHelper('link', function(options) {
var result = '' + options.fn(this) + '';
return Handlebars.SafeString(result);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<script type="text/x-handlebars">
<p>
{{#link}}
test
{{/link}}
</p>
</script>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src="js/ember.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</html>
Just a couple of details (EDITED):
You just need to create a new instance of Handlebars.SafeString before returning it. Please check #muistooshort's jsfiddle here with a working example of what you are trying to achieve.
Block helpers are a little bit more complex and used when is needed to invoke a section of a template with a different context. If it is not your case, you could use the syntax for regular Handlebars helpers. (I'll leave the following code here for future reference, although it's not relevant in this case)
Declare helper in app.js:
Ember.Handlebars.registerHelper('link', function(value) {
var result = '' + value + '';
return new Handlebars.SafeString(result);
});
In index.html replace your current template with:
<script type="text/x-handlebars">
<p>
{{link test}}
</p>
</script>
Hope this helps!