Ive added the Isotope plugin using these instructions: http://isotope.metafizzy.co/appendix.html#requirejs
Heres my code:
this.social = new Isotope('#latest-news', {
itemSelector: '.social-item',
layoutMode: 'fitRows',
sortBy: 'text',
getSortData: {
'text': '.text'
}
});
i then try to insert elements later on like so:
that.social( 'insert', elements );
but get the following error (On the insert function):
Uncaught TypeError: undefined is not a function
If i do a console.log(this.social) it does return an isotope object.
How can i call the 'insert' function, or any function for that matter? Otherwise where am I going wrong?
Went through the source code for a while, when using requirejs the insert method becomes:
that.social.insert( elements );
Basically use the vanilla JS versions of the methods.
Related
I am trying to run a Protractor Test using PageObjectModel (module.exports mechanism).
My HomePageObjects.js is like below -
//Get the page objects to spec files in the form of key-value pair
/*module.exports.Homepage=
{
Name:element(by.name('name')),
Email:element(by.name('email')),
Password:element(by.id("exampleInputPassword1")),
Checkbox: element(by.css("input[id='exampleCheck1']")),
// element(by.cssContainingText("[id='exampleFormControlSelect1'] option", "Female")).click(); //One way to select a value
Gender:element(by.css("select[id='exampleFormControlSelect1']")).click().element(by.css("select[id='exampleFormControlSelect1']>option:nth-child(2)")), //Another way
// to select a value
EmploymentStatus:element(by.id("inlineRadio1")),
SubmitBtn:element(by.buttonText("Submit")),
Success:element(by.css("div[class*='success']"))
};*/
function HomePage1()
{
this.Name=element(by.name('name'));
this.Email=element(by.name('email'));
this.Password=element(by.id("exampleInputPassword1"));
this.Checkbox= element(by.css("input[id='exampleCheck1']"))
// element(by.cssContainingText("[id='exampleFormControlSelect1'] option", "Female")).click(); //One way to select a value
this.Gender=element(by.css("select[id='exampleFormControlSelect1']")).click().element(by.css("select[id='exampleFormControlSelect1']>option:nth-child(2)")); //Another way
// to select a value
this.EmploymentStatus=element(by.id("inlineRadio1"));
this.SubmitBtn=element(by.buttonText("Submit"));
this.Success=element(by.css("div[class*='success']"));
}
Homepage1 = new HomePage1();
module.exports={
Homepage1
}
When I am trying to execute the spec (which is below), I am getting error.
I have tried with browser.waitForAngularEnabled(false); but of no avail.
describe('Submit Form', function(){
var obj = require("./HomePageObjects.js"); // Access the objects from HomePageObjects.js
it('Test Submit Form', function(){
browser.get("https://qaclickacademy.github.io/protocommerce/");
obj.Homepage1.Name.sendKeys("Prabodh");
});
})
Can anyone please help me?
Error -
Message:
Error: Error while waiting for Protractor to sync with the page: "both angul
arJS testability and angular testability are undefined. This could be either be
cause this is a non-angular page or because your test involves client-side navig
ation, which can interfere with Protractor's bootstrapping. See http://git.io/v
4gXM for details"
I am working with a Protractor and Cucumber to test a React project. In the course of this I have some elements that will have visibility:hidden/visible and I would like to use Protractor's isDisplayed or isPresent to test with.
I wrote a little test because I was getting some strange output and it looks like this:
this.Then(/^skal jeg kunne legge inn et nummer$/, function () {
var inputfelt = element(by.css(".mdl-textfield__input"))
expect(browser.isElementPresent(inputfelt)).to.eventually.equal(true)
expect(browser.isElementPresent(inputfelt)).to.eventually.equal(false)
});
This is my last version of this where I am using browser.isElementPresent. I have also used inputfelt.isDisplayed and inputfelt.isPresent and for all three of them this test passes.
I cannot see how it should be able to pass as the field cannot both be present and not be present.
Am I using this wrong?
I think you should use a wrapper, because you're using promises. Therefore any one promise that is resolved passes the test.
Try the following code:
this.Then(/^skal jeg kunne legge inn et nummer$/, function () {
var inputfelt = element(by.css(".mdl-textfield__input"))
return protractor.promise.all([
expect(browser.isElementPresent(inputfelt)).to.eventually.equal(true),
expect(browser.isElementPresent(inputfelt)).to.eventually.equal(false)
]);
});
you can now use protractor-react-selector to identify web elements by react's component, props, and state. This will automatically wait to load REACT in your app and then identify the web elements. It can save you from doing extra ton of workarounds.
You can identify your target element by:
const myElement = element(
by.react('MyComponent', { someBooleanProp: true }, { someBooleanState: true })
);
Let me know if this helps!
i am working on ui-grid and 306_expandable_grid , i have used the exact code as in the doc but i am facing a problem with an error .
app.js
$http.get('resources/data/title2.json')
.success(function(data){
console.log(data);
console.log(data[0].Data);
console.log(data.length);
for(i = 0; i < data[i].length; i++){
data[i].subGridOptions = {
columnDefs: [
{name:"Title" },
{name:"Jan-10" },
{name:"Feb-10"},
{name:"Mar-10" },
{name:"Apr-10" },
{name:"May-10" },
{name:"Jun-10" },
{name:"Jul-10" },
{name:"Aug-10" },
{name:"Sep-10" },
{name:"Oct-10" },
{name:"Nov-10" },
{name:"Dec-10" }
],
data: data[i].Data
}
}
// $scope.subGridOptions.data = data;
$scope.gridOptions.data = data;
// $scope.title = data[0].Title;
});
externalHtmlFile.html
<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>
this is the error that i am stuck with
TypeError: Cannot read property 'data' of undefined
at new <anonymous> (http://localhost/ng-Grid/resources/scripts/ui-grid-unstable.js:2883:41)
at Object.e [as invoke] (http://localhost/ng-Grid/resources/scripts/angular.min.js:36:456)
at E.instance (http://localhost/ng-Grid/resources/scripts/angular.min.js:75:118)
at http://localhost/ng-Grid/resources/scripts/angular.min.js:58:276
at r (http://localhost/ng-Grid/resources/scripts/angular.min.js:7:408)
at M (http://localhost/ng-Grid/resources/scripts/angular.min.js:58:260)
at http://localhost/ng-Grid/resources/scripts/angular.min.js:65:412
at http://localhost/ng-Grid/resources/scripts/angular.min.js:109:276
at h.$eval (http://localhost/ng-Grid/resources/scripts/angular.min.js:123:139)
at h.$digest (http://localhost/ng-Grid/resources/scripts/angular.min.js:120:220)
when i click on the plus icon , the error occurs ... i could not find out a solution that i can understand . please help
First, make sure that you initialize $scope.gridOptions outside of $http.get success callback. Only add the $scope.gridOptions.data[i].subGridOptions to $scope.gridOptions inside the success callback. Reference:
You can't define the grid options in the success call. You need to define them on the scope in your controller and then set the data or column definitions, etc... from the success call.
Second, make sure that the controller of the grid/page doesn't have any kind of initialization parameter-dependent redirects. I faced the same error message generated because of the following piece of code I had on the page:
if (typeof clientcode === 'string' && clientcode !== '') {
var payload = {
clientcode : storedClientcode
}
} else {
$location.path('/');
}
The idea here was to check if the storedClientcode was provided by the calling page (via a shared app root service), and if not, redirect to the application home. But the ui-grid apparently makes separate sub-calls to the page its on, and those sub-calls of course do not provide the data I was looking for with my code, and so the redirect occurred behind the scenes for those calls. No errors (other than what you also saw) were produced, and no data showed up in the grid. This took me some time to figure out (I'm fairly new with AngularJS, and this was the first application of ui-grid for me).. hopefully this will help someone, even if it doesn't resolve this question.
I want to create a report where where we have capability to reparent our test cases from one test set to other.
in simple language, I need to remove the existing link with the test set and assign a new test set for my existing test case/cases.
I was referring to one existing report at https://github.com/RallyTechServices/test-picker/blob/master/deploy/App.html
listeners: {
scope: this,
artifactChosen: function(items){
Ext.create('Rally.data.WsapiDataStore',{
model:'TestSet',
pageSize: 1,
autoLoad: true,
filters: [{property:'ObjectID',value:record.get('ObjectID')}],
listeners: {
load: function(store,records){
console.dir(records.length);
var ts = records[0];
me._log(["Selected items:",items]);
var tc_store = ts.getCollection('TestCases');
me._log(["Got store:",tc_store]);
tc_store.add(items);
me._log("Added items.");
tc_store.sync({
// callback: function(){
// me._log("inside callback");
// me._getTestSets(me.iteration_selector.getValue());
// }
success: function(batch,options) {
me._getTestSets(me.iteration_selector.getValue());
},
failure: function(batch,options) {
me._getTestSets(me.iteration_selector.getValue());
}
});
}
}
});
}
}
Here If I try to use remove it gives me an error, I am not sure what is causing the issue.
Or How can I approach the issue. I need to change the test set of any user selected test case in my report. Can please some help me on the same.
The error is "Uncaught TypeError: Cannot read property 'getRef' of null". When it can add to the same object why cant it delete. I understand that it has only one value. but I tried removing the filters as well from code snippet mentioned below, but still it gives only current selected test case object id.
Thanks in Advance
I've completely rewritten my question to hopefully better reflect what I am trying to do here. Thank you guys so much for your help so far.
I have a file called en.js, which holds this code:
Ext.apply(Ext.locale || {}, {
variable: 'great success!'
});
Here's my index.js setup code:
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
Ext.locale = {};
var headID = document.getElementsByTagName("head")[0],
newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'en.js';
headID.appendChild(newScript);
loginPanel = new login.Panel();
}
});
login.Panel is an extension of the Sencha panel class using Ext.extend.
The 'en.js' script is added to the header correctly. I don't have it in the index.html file because once this problem is solved there will be several files that could be loaded, depending on the output of a function. That's why I need to add the script to the header in the onReady function, and not in the index.html file itself.
Once the script has been added it loads "variable: 'great success'" into Ext.locale,
Yet my problem currently lies within login.Panel(), which is an extension of the Sencha panel class using Ext.extend.
Currently, there is a button in the panel.
When I put this in the button's handler:
console.log(Ext.locale.variable)
it returns the string "great success",
yet when I try to set the button's text like this:
text:Ext.locale.variable,
I get the error
Uncaught TypeError: Cannot read property 'variable' of undefined
I'm guessing I have a scope issue here, since console.log() and alert() can both access Ext.locale, but trying to use it to construct the form gives me the undefined error.
Any help would be greatly appreciated.
Thank you!
it sounds like you are defining Ext.locale from your script early on... then later in onReady you are overwriting it as Ext.locale = {}
onReady will run after all your other scripts have been loaded.
Why not move your initialisation code for locale into onReady insted of your = {} line
This will add three properties and their values to the receiving object.
Ext.apply(receivingObject, {
property1: 'value1',
property2: 'value2',
property3: 'value3'
});
Here also is the Sencha documentation on the Ext.apply method:
http://dev.sencha.com/deploy/touch/docs/source/Ext.html#method-Ext-apply
As for accessing the isReady property, you could do something like if(someExtObj.isReady), but you may be more interested in using the onReady method...
Ext.setup({
onReady: function() {
// your setup code
}
});