Note: I am new to Angular, any version.
I am trying to add some Angular2 parts to the web UI that is otherwise implemented using other frameworks. In the scenario I have (and cannot get away from) the main document does not have (much) JavaScript running in it at all - all scripts are inside iframe element(s) inside that document, as managed by the main framework.
I didn't even try to load Angular2 in that iframe, assuming that would not work. When it is needed (rarely), I "eval" all required Angular scripts on the main/root window to introduce Angular to it (once), but I have to have the JavaScript code configuring it inside the iframe, at least a bit of it and, because of that, it would be simpler for me to put all of it there. Inside that iframe I declared "ng" to be the "ng" from the main window. That enabled me to run the Angular2 5 minute quick start and worked fine. However, when I started adding more content via directives (I followed http://www.gurustop.net/blog/2015/12/16/angular2-beta-javascript-component) this didn't work. Specifically, it threw exceptions from this Angular2 function:
TypeScript:
function isValidType(value: Type): boolean {
return isPresent(value) && (value instanceof Type);
}
Actual JavaScript:
function isValidType(value) {
return lang_1.isPresent(value) && (value instanceof lang_1.Type);
}
Essentially it is was missing lang_1. The exception message has complaining of about "class0" and "class1".
If I move the exact same code from the iframe to the main window, it works. Also, If I hack the Angular2's isValidType() function to simply return true as follows it also works:
function isValidType(value) {
return true;
}
I tried bringing lang_1 in from the main window to the iframe as well, but that did not help.
Can someone, at least, tell me what is going on here, if not how to solve this? Thanks!
Related
After a lot of research, and tinkering, I can't seem to actually get my Protractor test to do anything else other than have an Angular related error, even though I am using browser to avoid Angular being detected at all.
The test involves an Angular app, opening a dropdown in it, and clicking on the link for the console; the console opens a non-Angular admin page in a separate window.
So based on the many informative SO posts I found, I first used this...
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
//expect for new window here
});
});
Which appeared to work, as I could get to the window through repl pretty easily.
The issue is when either of the following were added...
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
expect(browser.getLocationAbsUrl()).toContain('/console/login.jsp');
expect(browser.driver.findElement(By.css('th.login')).getText()).toEqual('Login');
});
});
One expect check the URL and the other checks for the header element on the page, which is a table header. When I run this, I get the following:
Error while waiting for Protractor to sync with the page: "angular could not be found on the window"
When I decide to use browser.ignoreSynchronization = true, both in the function, or in a beforeEach, with or without a following afterEach setting it to false, I get the following:
JavascriptError: angular is not defined
I can't seem to get any "useful" errors to help me debug it, and trying it in repl does not help, as I get the same issue.
To be comprehensive, trying my URL expect without getting the second window will give me the root, and the other will fail.
Just doing one or the other will cause the same problem.
Changing to regular syntax (element(by.css...)) does not change things.
So much for my first question...
It appears that my use of browser.getLocationAbsUrl() is meant to be used for an Angular page, and was causing my issue...
Essentially, even though I believed I was using pure Webdriver calls, that call still required Angular on the page to work...
As stated in another post, the use of browser.driver.getCurrentUrl() is a non-Angular call using Webdriver, and fixed the problem. Thus, the final code is the following...
browser.sleep(1000); //to wait for the page to load
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
expect(browser.driver.getCurrentUrl()).toContain('/console/login.jsp');
expect(browser.driver.findElement(By.css('th.login')).getText()).toEqual('Login');
});
});
This works without setting ignoreSynchronization, BTW.
I realized it would probably be something relatively simple to fix it, just didn't expect I'd get it that quickly (I intended on submitting the question last night, but posted it this morning instead).
In any case, I hope this will at least be a good reference for anyone else facing the same issue.
Seems like getLocationAbsUrl is angular abs url.
Try using the native driver getCurrentUrl instead.
-- expect(browser.getLocationAbsUrl()).toContain('/console/login.jsp');
++ expect(browser.driver.getCurrentUrl() ...
I'm fairly new to protractor and promises in general. I've had a look around, and although there's many posts out there about returning promises, or the results from queued actions none of them make much sense to me, so i'm after a fairly easily described answer to what I hope is a simple question!
I am trying to write some protractor tests for my angularjs website.
I am using bootstrap and angular mainly, no other third party libraries, other than the occasional angular add-on such as toaster, and bootstrap modal.
I have several 'arrangement steps' before I get to the assertion part of my test. Let's say :
a) Person logs in
b) Person accesses options form ( which may or may
not be displayed already on the screen depending on some external
factors, but if it's not present they can open it with a button press
).
c) Person performs an action on the options form.
d) assert that the text box on the form now contains the correct value.
I can get my test to pass quite easily when the form is already on the screen, but the bit that's getting me stuck is step b) where I need to check first if the form is active and click a button if it's not pefore proceeding to step c.
I've tried to return the promise from isDisplayed like so :
//
// Is the user settings form active at the mo?
//
function _isUserSettingsFormActive()
{
var result = element(by.id(logoutFormID)).isDisplayed;
return result;
}
But if I call .then on _isUserSettingsFormActive() I get the following error :
[31mTypeError: undefined is not a function[0m
However if I output the results of _isUserSettinsFormActive() I see the below, so I know it's returning something :
function () {
return self.elementArrayFinder_[fnName].
apply(self.elementArrayFinder_, arguments).toElementFinder_();
}
All I want to do is check if an item exists and act on that before performing my assert.
It needs to be in a function, as this code will be used in many places throughout my test suit. It's not the 'expect' itself, more a step that may or may not need an action to set up the browser for my test to pass.
isDisplayed is a function, so it should be called like that:
function _isUserSettingsFormActive()
{
var result = element(by.id(logoutFormID)).isDisplayed();
return result;
}
Protractor does not work like the Java or C# bindings of Selenium would (it's funner but more work to achieve what would be simple actions in Java or C#). It would be safer to return a count promise if the options form is also not in the DOM but if it is in the DOM and just hidden you could use isDisplayed(). I wrote two examples below for both situation including clicking the button depending on the condition.
Option 1 (Not present in DOM and not displayed):
function _isUserSettingsFormActive() {
//$$('#logoutFormId') is the equivalent of element.all(by.id('logoutFormId'))
$$('#logoutFormId').count().then(function(num){
if(num < 1) {
element(by.id('openLogoutButton').click();
}
});
};
OR
Option 2 (Present in DOM but not displayed):
function _isUserSettingsFormActive() {
//$('#logoutFormId') is the equivalent of element(by.id('logoutFormId'))
$('#logoutFormId').isDisplayed().then(function(visible){
if(!visible) {
element(by.id('openLogoutButton').click();
}
});
};
I basically want to use tel tag to make a phone call.
<a class="callButton" href="tel: {{phoneno}}"></a>
I am using $compileProvider to remove unsafe tag which comes by default, It works perfectly fine post 1.0.4v of angularjs. However below this version it doesnt work. Can anyone suggest how to implement this feature using angular version 1.0.4 or below?
Here is the sanitizing code which I am using in js file
app.config(['$compileProvider', function ($compileProvider) {
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
}
Assume I have already defined app variable.
P.S. This is an enhancement for particular app which basically works below 1.0.4v
Thanks
Add this to your scripts after angular is loaded.
I asume your on 1.1.5, but change to whatever you need the version to be.
http://code.angularjs.org/1.1.5/angular-sanitize.min.js
Example:
sanitizeSomething = function(string) {
return $sanitize(string);
};
sanitizedString = sanitizeSomething(string);
I make a project in worklight used dojo mobile 1.8.1 and angularjs 1.0.1,but i got a strange problem.
Here is my html part:
<div data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props="selected:true" id="id1" ></div>
<div class="full" data-dojo-type="dojox.mobile.View" id="id2"></div>
and my JavaScript part:
require([
"dojo", "dijit/_base/manager","dojo/parser", "dijit/registry",
], function(dojo) {
dojo.ready(function() {
// dijit.byId("id1").performTransition("id2"); //////////place I
});
});
var angularApp = angular.module('app', [])
.run(['$rootScope','$templateCache','$route',
function($rootScope,$templateCache,$route) {
dijit.byId("id1").performTransition("id2");////////place II
}]);
The problem is at place I, it works well, but when I put "dijit.byId("id1")" at place II, it shows:
dijit.byId("").is not defined
The ready function is executed after dojo parsed your document & constructed the widgets you try to get using dijit.byId.
The second part is not placed within the ready function, so dojo can't find your elements yet !
Solution: Access your elements in the ready function OR do not declare them declaratively (like you did, using html code...) !
Lucian
The dojo.ready() function registers an event-handler function (callback) which will be fired after the DOM got completely parsed.
This comes in very handy if you want to be sure that every html element got rerendered as dojo-widget before you perform operations on them.
So, in your example, Code II will be executed before the dijit.byId() function has been made available by loading the necessary modules (dijit/registry, ...). Code II would only work after the dom-ready event got fired and your "dojo.ready()" function did load the required modules.
You should definately invest 5 minutes in reading what dojo.ready() is about:
http://dojotoolkit.org/reference-guide/1.8/dojo/ready.html
Sidenote:
You shouldn't use dijit.byId() any more in Dojo 1.8.1. Try using dijit.registry.byId() (you have to require the dijit/registry module).
http://dojotoolkit.org/reference-guide/1.8/dijit/registry.html#dijit-registry-byid
I have an ASP.net website and inside its .aspx page there is a javascript function
and from my silverlight project , i want to get a value of property in the javascript funcion
i used "eval" to evaluate the function and GetProperty to return the value i want
the problem is GetProperty work only if i call the function for the second time
but never return in the first call
javascript code:
function RETURNIMAGE() {
var x = { value: document.getElementById("ImageContainer").value };
return x; }
c# code:
string getImage = "document.getElementById('myIFrame').contentWindow.RETURNIMAGE ();";
ScriptObject imgObject = HtmlPage.Window.Eval(getImage) as ScriptObject;
var img = imgObject.GetProperty("value");
any help please?
Since it works the second time I strongly suspect that the first time the IFrame is still loading its contents. Both Silverlight and the Browser will be getting on with their various activities asynchronously from each other.
Here is something that might help to halt the code until the page loads:
A hidden object/property can be put in the frame, but make sure it is after the property to be fetched.
Then a 'while' loop can be inserted in the c# code to check that this hidden property exists (the loop breaks only when the property value is loaded correctly), then put the rest of your code after the while loop.
This solution may not be optimum, but may be used to check if it is a loading problem or not.