Why does this work in IE10 and Firefox but not in IE7/8?
Dojo version 1.8, using auto-require, extending a Select with a new missing message...
define([
"dojo/_base/declare",
"dijit/form/Select",
], function (declare, Select) {
return declare("mydijit.form.Select", [Select], {
missingMessage: "Please answer this.",
postMixInProperties: function(){
this.inherited(arguments);
this._missingMsg = this.missingMessage;
}
});
});
Fails in dojo.js
def (line 1801) => defineModule (line 1546) =>
getModule = function(mid, referenceModule, immediate){
....
match = mid.match(/^(.+?)\!(.*)$/); (line 1013)
For some reason mid is undefined.
Found the problem - if you look closely at the module list it contains a comma at the end of the list, which Internet Explorer 7 interprets as meaning an undefined field follows. Later versions of IE take it in their stride.
define([
"dojo/_base/declare",
"dijit/form/Select"
], function (declare, Select) {
return declare("mydijit.form.Select", [Select], {
missingMessage: "Please answer this.",
postMixInProperties: function(){
this.inherited(arguments);
this._missingMsg = this.missingMessage;
}
});
});
Related
I appreciate there's quite a bit of stuff already been said about automating drag and drop as part of E2E testing. However after many, many hours of fiddling around, I cannot get any of the methods described to work...that is using Functions, coordinates etc etc. Oddly enough, console.log maintains the tests have passed, but the screenshots clearly show nothing has happened.
Screenshots shows a portion of the application
The user selects a paper and drags onto the image. As the drag 'starts' the grey overlay on the image clears and the paper is rendered on the room.
The code snippet shows one of the more simple ideas I've tried and I would be very pleased to receive any help going!
const JS_HTML5_DND = 'function e(e,t,n,i){var r=a.createEvent("DragEvent");r.initMouseEvent(t,!0,!0,o,0,0,0,c,g,!1,!1,!1,!1,0,null),Object.defineProperty(r,"dataTransfer",{get:function(){return d}}),e.dispatchEvent(r),o.setTimeout(i,n)}var t=arguments[0],n=arguments[1],i=arguments[2]||0,r=arguments[3]||0;if(!t.draggable)throw new Error("Source element is not draggable.");var a=t.ownerDocument,o=a.defaultView,l=t.getBoundingClientRect(),u=n?n.getBoundingClientRect():l,c=l.left+(l.width>>1),g=l.top+(l.height>>1),s=u.left+(u.width>>1)+i,f=u.top+(u.height>>1)+r,d=Object.create(Object.prototype,{_items:{value:{}},effectAllowed:{value:"all",writable:!0},dropEffect:{value:"move",writable:!0},files:{get:function(){return this._items.Files}},types:{get:function(){return Object.keys(this._items)}},setData:{value:function(e,t){this._items[e]=t}},getData:{value:function(e){return this._items[e]}},clearData:{value:function(e){delete this._items[e]}},setDragImage:{value:function(e){}}});if(n=a.elementFromPoint(s,f),!n)throw new Error("The target element is not interactable and need to be scrolled into the view.");u=n.getBoundingClientRect(),e(t,"dragstart",101,function(){var i=n.getBoundingClientRect();c=i.left+s-u.left,g=i.top+f-u.top,e(n,"dragenter",1,function(){e(n,"dragover",101,function(){n=a.elementFromPoint(c,g),e(n,"drop",1,function(){e(t,"dragend",1,callback)})})})})';
describe('Drag and Drop Test', function() {
it('should drag', function () {
var e1 = element(by.xpath('html/body/webapp-app/div/div/webapp-johnlewis-visualiser/div/div[2]/div/digitalbridge-shortlist/div/div/ul/li[1]/a/img'));
var e2 = element(by.css('.db-project-designer'));
element(by.xpath('html/body/webapp-app/div/div/webapp-johnlewis-visualiser/div/div[2]/div/digitalbridge-shortlist/div/div/ul/li[1]/a/img')).click();
//element(by.xpath('html/body/webapp-app/div/div/webapp-johnlewis-visualiser/div/div[1]/div/div/digitalbridge-project/div/digitalbridge-project-designer/canvas')).click();
browser.driver.actions().dragAndDrop(e1.getWebElement(),e2.getWebElement()).perform();
browser.sleep(2000);
});
});
The constant is showing an error 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). (W104) - I do have ES6 installed in Node_Modules.
I inserted the click line to see if pre-selecting the item made any difference...it didn't!
Thank you
David
Try this library https://github.com/SunGard-Labs/sg-protractor-tools
The library also includes functions that simplify common tasks like
Scrolling to an element
Drag and drop
Waiting for DOM elements to become visible or hidden
module.exports = function simulateDragAndDrop(sourceNode, destinationNode) {
const EVENT_TYPES = {
DRAG_END: 'dragend',
DRAG_START: 'dragstart',
DROP: 'drop'
};
function createCustomEvent(type) {
const event = new CustomEvent('CustomEvent');
event.initCustomEvent(type, true, true, null);
event.dataTransfer = {
data: {
},
setData: function(type, val) {
this.data[type] = val;
},
getData: function(type) {
return this.data[type];
}
};
return event;
}
function dispatchEvent(node, type, event) {
if (node.dispatchEvent) {
return node.dispatchEvent(event);
}
if (node.fireEvent) {
return node.fireEvent('on' + type, event);
}
}
const event = createCustomEvent(EVENT_TYPES.DRAG_START);
dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event);
const dropEvent = createCustomEvent(EVENT_TYPES.DROP);
dropEvent.dataTransfer = event.dataTransfer;
dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent);
const dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END);
dragEndEvent.dataTransfer = event.dataTransfer;
dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent);
}
You can call it from you code like this
browser.executeScript(dragAndDrop, element, targetArea);
I have a dropdown with elements that get disabled when conditions are met. In the test, I check them for being disabled, but all tests fail and always return the element state as enabled (Clearly incorrectly. I have ensured that this is not a timing issue - refreshed the page and gave ample wait time with browser sleep - the elements are clearly disabled on the screen). There is an anchor within a list item. Please see image:
I have tried checking both the list item and the anchor, like so:
var actionDropDownList = $$('[class="dropdown-menu"]').get(1);
var checkOutButtonState = actionDropDownList.all(by.tagName('li')).get(6);
actionsButton.click();
actionDropDownList.all(by.tagName('li')).count().then(function(count){
console.log('THE NUMBER OF ELEMENTS IN THE DROPDOWN IS...............................................................' + count);
}) //verify that I have the correct dropdown - yes
checkOutButtonState.isEnabled().then(function(isEnabled){
console.log('CHECKING checkOutButton BUTTON STATE: ' + isEnabled);
}) //log state - shows incorrectly
I have also tried checking the button itself for disabled state (the element below is what I tried checking instead of the list element):
var checkOutButton = $('[ng-click="item.statusId !== itemStatus.in || checkOut()"]');
This failed as well.
Not sure which one I should check and why both are failing. How do I correct this and get it to show that the disabled button is...well, disabled.
TEMPORARY ADD ON EDIT:
For simplicity's sake, I am trying:
var hasClass = function (element, cls) {
return element.getAttribute('class').then(function (classes) {
return classes.split(' ').indexOf(cls) !== -1;
});
var checkOutButtonState = actionDropDownList.all(by.tagName('li')).get(6);
expect(hasClass(checkOutButtonState, 'disabled')).toBe(true);
It still fails, however, despite the element clearly having the class. Alec - your solution throws "function is not defined," I am not sure if I need something else for it to see jasmine. Tried, but can't find anything wrong with it, not sure why I can't get it to work.
Edit:
If I run...since it only appears to have one class:
expect(checkOutButtonState.getAttribute('class')).toBe('disabled');
I get "expected 'ng-isolate-scope' to be 'disabled'"
In a quite similar situation I've ended up checking the presence of disabledclass:
expect(checkOutButtonState).toHaveClass("disabled");
Where toHaveClass() is a custom jasmine matcher:
beforeEach(function() {
jasmine.addMatchers({
toHaveClass: function() {
return {
compare: function(actual, expected) {
return {
pass: actual.getAttribute("class").then(function(classes) {
return classes.split(" ").indexOf(expected) !== -1;
})
};
}
};
},
});
});
I am a novice to Backbone, and I am in the midst of migrating a project written using BB 0.5.3 to 1.1.2. In 1.1.2, I get the following error:
Uncaught TypeError: undefined is not a function
The relevant extracts:
reportGen = {
....
initialize: function() {
var reports = [
this.Views.Report1,
this.Views.Report2,
this.Views.Report3
];
new this.Views.App({reports: reports});
}
};
and:
reportGen.Views.App = Backbone.View.extend({
....
initialize: function(reportList) {
_.bindAll(this, 'render', 'switchReports');
this.reports = reportList['reports'];
this.render();
},
render: function() {
var i = 0;
var reportList = {reports : []};
_.each(this.reports, function(r) {
var R = new r;
reportList.reports.push({name: R.name, label: R.label, index:i});
R.close();
i++;
}, this);
var out = $.tmpl( this.template(), reportList );
$(this.el).append(out);
// now render the default Report
var defaultReport = this.reports[0];
this.currentReport = new defaultReport();
$("div#report-container").html(this.currentReport.render().el);
this.afterReportRender();
},
....
});
When I run this in Backbone 0.5.3, or in fact, versions prior to 0.9.10, everything seems all right. I get the interface and behaviors I expect. But in versions 0.9.10 and thereafter, I get the aforementioned error.
I've looked at the contents of the report objects in 0.5.3 and 1.1.2, and I can access the same items (for example, the name of the report). But I do not know what has changed from 0.9.9 to 0.9.10 and beyond to cause the code to fail.
The error occurs on the line:
var R = new r
the same error occurs if I use
var R = new r()
instead.
The changelog for 0.9.10 doesn't have anything that seems to apply to my case.
Any advice?
Update: I am still considerably confused about what's happening. I feel that I must be missing something conceptually. Inspecting the contents of this at each level hasn't led me anywhere.
Update 2: I have created plunk with the error, but the behavior is somewhat different -- this time, the error shows up, but I can see the report names in the drop-down. Still, there is the "undefined is not a function" error in 1.1.2, but not in 0.9.9 and earlier.
I'm using backbone with tastypie adapter and jquery for interacting with DOM. I found something in backbone that I can't understand. I tried to simplify the code for this question.
Here is my app.js:
$(document).ready(function() {
Point = Backbone.Model.extend({
defaults:{
lat:0,
lng:0
},
urlRoot: '/api/v1/point' ,
initialize: function(attributes){
var that = this;
$('#b1').bind('click',function() {
that.set('lat',that.get('lat')+1);
});
$('#b2').bind('click',function() {
that.save();
});
$('#b3').bind('click',function() {
console.log(that.get('lat'));
});
}
});
point = new Point ();
//****
$('#b1').click();
$('#b2').click();
$('#b3').click(); // >> 1
$('#b1').click();
$('#b2').click();
$('#b3').click(); // >> 2
//****
});
And my html:
<script src="/static/js/jquery.js"></script>
<script src="/static/js/backbone.js"></script>
<script src="/static/js/backbone-tastypie.js"></script>
<script src="/static/js/app.js"></script>
<button id="b1">b1</button>
<button id="b2">b2</button>
<button id="b3">b3</button>
As you see, I'm calling clicking on buttons in the code and the console is logging '1' and then '2' as expected.
The problem occurs when I am removing code between stars (//*) and pressing these buttons 'b1', 'b2', 'b3', 'b1', 'b2', 'b3' manually in browser and got '1' and '1' in console.
I wait for response from server for 1 second and check for it in console but the behavior of app is still the same: '1', '2' with a code with stars and '1', '1', with the button pressing.
Do you know why?
I wait for response from server for 1 second and check for it in console but [...]
Changing the model manually (click the button using your mouse) instead of programmatically (click()) is the crucial part here.
I assume you do not return the final model from your server, as Backbone update's your model with that data.
See section 53 and
if (options.wait) {
if (attrs && !this._validate(attrs, options)) return false;
current = _.clone(this.attributes);
}
section 55
options.success = function(resp, status, xhr) {
done = true;
var serverAttrs = model.parse(resp);
if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);
if (!model.set(serverAttrs, options)) return false;
if (success) success(model, resp, options);
};
of the Backbone.js documentation. Especially these lines:
var serverAttrs = model.parse(resp); (Parse model data from response)
if (!model.set(serverAttrs, options)) return false; (Update your model's attributes)
When your first code (the one where you click() the buttons) runs, it increases your models attribute and loggs it before the server returns. Thats
Note: using the wait option or a setTimeout() in your 2nd press of button three in your first code would equal the behaviour.
But what you want, is to return a valid model from your server (after persisting it).
Off topic tip: you should not bind your model and your view in the models initializer or constructor as it would couple them too tight and they wouldn't be interchangable. (For this question, it is certainly acceptable. ;)
Trying to figure this concept out. If you console.log this.get("content") before and after the sort, everything seems like it worked, but when it displays to the screen it gets funky. I think the issue is with Handlebars. When it "sorts" it adds a duplicate fourth record and sticks it at the top. You can see the problem in action here:
http://jsfiddle.net/skinneejoe/Qpkz5/78/ (Click the 'Sort by Age' text a couple times to resort the records and you'll see the issues)
Am I doing something wrong, is there a better way, or is this a bug? If it's a bug is there a good workaround?
Here's the full code:
index.html
<script type="text/x-handlebars">
{{#view App.SortView}}Sort by Age{{/view}}<br/>
{{#each App.userController}}
{{#view App.RecordView contentBinding="this"}}
{{content.name}} - {{content.age}}
{{/view}}
{{/each}}
</script>
app.js
window.App = Ember.Application.create();
App.userController = Ember.ArrayController.create({
content: [
Ember.Object.create({ name:"Jeff", age:24 }),
Ember.Object.create({ name:"Mark", age:32 }),
Ember.Object.create({ name:"Jim", age:12 })
],
sort:"desc",
sortContent:function() {
if (this.get("sort") == "desc") {
this.set("sort", "asc");
} else {
this.set("sort","desc")
}
if (this.get("sort") == "asc") {
var sortedContent = this.get("content").sort( function(a,b){
return a.get("age") - b.get("age");
})
} else {
var sortedContent = this.get("content").sort( function(a,b){
return b.get("age") - a.get("age");
})
}
this.set("content", []);
this.set("content",sortedContent)
}
})
App.RecordView = Ember.View.extend({})
App.SortView = Ember.View.extend({
click: function() {
App.userController.sortContent("poId")
}
})
I'm not seeing this bug in Safari, Chrome or Firefox on OS X, so I assume it's a IE issue.
Sounds a lot like this reported Ember bug, which got fixed 11 days ago. Try upgrading to ember-latest and see if that fixes it.