What to use in element(by.css("") for writing tests in protractor if the class am referring to is <a class="button button-large button-secondary has-shield download-btn"
var HomePage = function() {
this.centerStageButtons = element(by.css(".text-center"));
this.tryTheAngular = this.centerStageButtons.all(by.css(".button.button-large.button-primary.has-shield.has-shadow")).get(0);
this.downloadButton = this.centerStageButtons.element(by.css("..button.button-large.button-secondary.has-shield.download-btn"));
describe('angularjs.org', function() {
var homePage = new HomePage();
beforeEach(function() {
browser.get('https://angularjs.org/');
});
it('should have two buttons', function() {
//expect(homePage.tryTheAngular.isDisplayed()).toBe(true);
expect(homePage.downloadButton.isDisplayed()).toBe(false);
});
});
};
It is giving me a false positive as test is passed
This worked
this.downloadButton = element(by.css(".button.button-large.button-secondary.has-shield.download-btn"));
Related
Trying to make a component in Vue.js, which first shows image via thumbnail, loading full image in background, and when loaded, show full image.
The thing which does not work, component does not react on change of showThumb flag in watch section. What is wrong?
Vue.component('page-image',
{
props: ['data'],
template:
'<img v-if="showThumb == true" v-bind:src="thumbSrc"></img>'+
'<img v-else v-bind:src="fullSrc"></img>',
data: function()
{
return { thumbSrc: '', fullSrc: '', showThumb: true };
},
watch:
{
data: function()
{
this.thumbSrc = data.thumbImg.url;
this.fullSrc = data.fullImg.url;
this.showThumb = true;
var imgElement = new Image();
imgElement.src = this.fullSrc;
imgElement.onload = (function()
{
this.showThumb = false; // <<-- this part is broken
} );
}
}
} );
Note: there is a reason why I do it via 2 img tags - this example is simplified.
Your onload callback will have a different scope than the surrounding watch function, so you cannot set your data property like this. Change it to an arrow function to keep scope:
imgElement.onload = () =>
{
this.showThumb = false;
};
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
I'm trying to check a dropdown is shown when a boolean is switched.
The boolean is an input on the component
#Component({
selector: 'dropdown',
directives: [NgClass],
template: `
<div [ngClass]="{open: open}">
</div>
`,
})
export class DropdownComponent {
#Input('open') open: boolean = false;
}
And the test
it('should open', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb.createAsync(DropdownComponent)
.then(fixture => {
let el = fixture.nativeElement;
let comp: DropdownComponent = fixture.componentInstance;
expect(el.className).toEqual('');
comp.open = true;
fixture.detectChanges();
expect(el.className).toEqual('open')
});
}));
I am guessing something different has to be done when the boolean is an #Input?
You are setting class open on the <div [ngClass]="{open: open}"> but checking on DropdownComponent. That's not the same.
Something like this should do what you want
var div = fixture.nativeElement.querySelector('div');
expect(div.className).toEqual('open');
or
var div = fixture.debugElement.query(By.css('div'));
expect(div.className).toEqual('open');
See also How do I trigger a ngModel model update in an Angular 2 unit test? for an example.
Refer to this JSFiddle demo.
http://jsfiddle.net/MalcollmS/kLt3pfrc/2/
Why isn't my window.onload running?
How do I run the code editor.initialise?
Malcolm
var editor = (function () {
var editorData = {"Weeks":[{"Days":[{"Date":"\/Date(1417611600000)\/","DayIndex":1,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0},{"Date":"\/Date(1417698000000)\/","DayIndex":2,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0},{"Date":"\/Date(1417784400000)\/","DayIndex":3,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0},{"Date":"\/Date(1417870800000)\/","DayIndex":4,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0},{"Date":"\/Date(1417957200000)\/","DayIndex":5,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0},{"Date":"\/Date(1418043600000)\/","DayIndex":6,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0},{"Date":"\/Date(1418130000000)\/","DayIndex":7,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0}]}],"NumWeeks":1,"WeekEnding":"\/Date(1418130000000)\/","StartDate":"\/Date(1417611600000)\/"}
initialise = function (data) {
//editorData = data;
$("#starthourselector div").live("click", function () { updateEditor("#starthourselector div", this); });
};
function updateEditor(selector, div) {
alert(selector);
$(selector).css('background-color','red');
$(div).css('background-color','white');
//var idx = $(selector).index(div));
}
return {
initialise: initialise
};
}());
window.onload = function() {
alert('hi');
editor.initialise(null);
}
In the jsfiddle option click no wrap head option and it should work properly
select no wrap head on the left hand side under on the same dropbox as onLoad
JSFIDDLE
I have an infinite scroll directive that I am trying to unit test. Currently I have this:
describe('Infinite Scroll', function(){
var $compile, $scope;
beforeEach(module('nag.infiniteScroll'));
beforeEach(inject(function($injector) {
$scope = $injector.get('$rootScope');
$compile = $injector.get('$compile');
$scope.scrolled = false;
$scope.test = function() {
$scope.scrolled = true;
};
}));
var setupElement = function(scope) {
var element = $compile('<div><div id="test" style="height:50px; width: 50px;overflow: auto" nag-infinite-scroll="test()">a<br><br><br>c<br><br><br><br>e<br><br>v<br><br>f<br><br>g<br><br>m<br>f<br><br>y<br></div></div>')(scope);
scope.$digest();
return element;
}
it('should have proper initial structure', function() {
var element = setupElement($scope);
element.find('#test').scrollTop(10000);
expect($scope.scrolled).toBe(true);
});
});
However the .scrollTop(10000); does not seem to trigger anything.
Is there anyway to unit test this type of functionality (I am able to unit test other directives with similar interactions like clicking on elements)?
In case it is relative, this is the infinite scroll code:
angular.module('nag.infiniteScroll', [])
.directive('nagInfiniteScroll', [
function() {
return function(scope, elm, attr) {
var raw = elm[0];
elm.bind('scroll', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attr.nagInfiniteScroll);
}
});
};
}
]);
You have to trigger the scroll event on your element manually in your test:
element.find('#test').scrollTop(10000);
element.find('#test').triggerHandler('scroll');
Had the same issue recently. For the scrolling to work, you will need to set some dimensions on the body tag, so the window can be scrolled.
var scrollEvent = document.createEvent( 'CustomEvent' ); // MUST be 'CustomEvent'
scrollEvent.initCustomEvent( 'scroll', false, false, null );
var expectedLeft = 123;
var expectedTop = 456;
mockWindow.document.body.style.minHeight = '9000px';
mockWindow.document.body.style.minWidth = '9000px';
mockWindow.scrollTo( expectedLeft, expectedTop );
mockWindow.dispatchEvent( scrollEvent );
Unfortunately this does not work in PhantomJS.
If you are running your tests on Travis CI, you can also use Chrome by adding the following to your .travis.yml
before_install:
- export CHROME_BIN=chromium-browser
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
And a custom Chrome launcher in your karma config:
module.exports = function(config) {
var configuration = {
// ... your default content
// This is the new content for your travis-ci configuration test
// Custom launcher for Travis-CI
customLaunchers: {
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: true
};
if(process.env.TRAVIS){
configuration.browsers = ['Chrome_travis_ci'];
}
config.set( configuration );
};
i have been working for hours on the live search concept, and i am having problems with just one part of the Code.
html
<input id="searchs" autocomplete="off" />
<div class="livesearch" ></div>
javascript
$(function () {
$("#searchs").keyup(function () {
var searchs = $(this).val();
$.get("livesearch.php?searchs=" + searchs, function (data) {
if (searchs) {
$(".livesearch").html(data);
} else {
$(".livesearch").html("");
}
});
});
$(".page").live("click", function () {
var searchs = $("#searchs").val();
var page = $(this).attr("id");
$(".livesearch").load("livesearch.php?searchs=" + searchs + "&page=" +page);
});
});
the part var page = $(this).attr("id"); is not working. The page shows the error below
Notice: Undefined index: page in C:\xamp\...
and this error comes from the livesearch.php file which intends to use the index.
I am new to this way of scripting.
what could be the problem?
the part where the error is coming from on livesearch.php
if($_GET["page"]){
$pagenum = $_GET["page"];
} else {
$pagenum = 1;
}
Try this:
$(".livesearch").load("livesearch.php", {
searchs: searchs,
page: page
});
You weren't properly encoding the search string, and it could cause problems parsing the URL. jQuery will do that for you if you put the parameters in an object.