Using Polymer 1 and Web component tester... testing in shady dom on chrome.
In WCT, trying to stub spToast.display() with stub('sp-toast', { display: ()=> {} }); but I get error with Attempted to wrap undefined property display as function.... what I am doing wrong?
The reason why I am trying to stub it is because I get spToast.display is not a function when the test runs the code base.
original code:
showAgeWarning: function() {
var spApp = Polymer.dom(document).querySelector('sp-app');
var spToast = Polymer.dom(spApp.root).querySelector('sp-toast');
var msg = "foo"
spToast.display('information', msg);
},
test code:
<test-fixture id="sp-veteran">
<template>
<h2>edit veteran</h2>
<sp-app>
<sp-toast></sp-toast>
<sp-veteran>
</sp-veteran>
</sp-app>
</template>
</test-fixture>
setup(function() {
replace('sp-app').with('fake-sp-app');
replace('sp-ajax').with('fake-sp-ajax');
stub('sp-value-dropdown', { setInvalidState: (state)=> {} });
myEl = fixture('sp-veteran');
});
test('it should validate the veteran', function() {
var spApp = Polymer.dom(myEl.root).querySelector('sp-app');
var spToast = Polymer.dom(spApp.root).querySelector('sp-toast');
sinon.stub(spToast, 'display');
When you get Attempted to wrap undefined property display as function it means that it can't replace a method that doesn't exist (yet).
If you actually get a value for var spToast = Polymer.dom(spApp.root).querySelector('sp-toast') in your test, and nothing about your test is going to give display a value, you could just set it, a la spToast.display = function() {}; then you should be able to set a spy on it or what have you as needed.
Put it all together and you could have
test('it should validate the veteran', function() {
var spApp = Polymer.dom(myEl.root).querySelector('sp-app');
var spToast = Polymer.dom(spApp.root).querySelector('sp-toast');
spToast.display = function() {};
sinon.spy(spToast, 'display');
// Trigger the side effect that would lead to `display` being called
assert.equal(
spToast.display.calledOnces,
true
);
});
Related
I am new to react-native and calling a function inside a fucntion.
I have done as below so far :
Step 1 : Created a function _snapshotToArray to convert the firebase snapshot to Arrray.
_snapshotToArray(snapshot) {
var returnArr = [];
snapshot.forEach(function(childSnapshot) {
var item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
});
return returnArr;
}
Step 2 : Created another function as below and calling _snapshotToArray inside it.
_readUserDataFromFirebaseConsole() {//once and on
firebase.database().ref('Users/').on('value', function (snapshot) {
console.log(this._snapshotToArray(snapshot));
Toast.show(this._snapshotToArray(snapshot),Toast.LONG);
});
}
Talking about this call :
console.log(this._snapshotToArray(snapshot));
When I press CTRL+CLick, it not letting me to navigate to body of the fuction _snapshotToArray.
In Device am getting below error :
_snapshotToArray is not defined
What might be the issue ?
I'm not at my PC right now, so I cannot test it, but from looking at your code, you need to use a different function notation to allow the varibale access of/from parent methods and parent class.
_snapshotToArray = snapshot => {
var returnArr = [];
snapshot.forEach(function(childSnapshot) {
var item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
});
return returnArr;
}
and
_readUserDataFromFirebaseConsole = () => {
firebase.database().ref('Users/').on('value', snapshot => {
console.log(this._snapshotToArray(snapshot));
Toast.show(this._snapshotToArray(snapshot),Toast.LONG);
});
}
I am using a simple polymer application with few pages in iron-pages. I am uploading a file in one page and then I want to access this uploaded file in another page.
I tried several things but nothing seems to work, here is the sample code
Page in which file is uploaded
<dom-module id="file-upload-page">
<template>
<form method="post" enctype="multipart/form-data" action="/someation" disable-native-validation-ui no-validate>
<my-input file={{file}} id="sampleFileInput" btn-style="primary" max-files="1" accept=".xls, .xlsx" on-drop="fileUploadChangeListener"
label="[[localize('open_invoices_file')]]" help-text="[[localize('open_invoices_file_help')]]" no-auto required>
</my-input>
</form>
</template>
<script>
class FileUploadPge extends Polymer.mixinBehaviors([], Polymer.Element) {
static get is() {
return 'file-upload-page';
}
static get properties() {
return {
}
}
}
customElements.define(FileUploadPge.is, FileUploadPge);
</script>
</dom-module>
Page in which file is accessed
<dom-module id="consumer-page">
<template>
//some code
</template>
<script>
class ConsumerPage extends Polymer.mixinBehaviors([], Polymer.Element) {
static get is() {
return 'consumer-page';
}
constructor() {
super();
}
static get properties() {
return {
//some properties
}
}
ready() {
super.ready();
var temp2 = this.$.sampleFileInput; // returns null
var temp3 = this.shadowRoot.querySelector("#sampleFileInput"); // returns null
var temp4 = this.root.querySelector('#sampleFileInput'); // returns null
var temp5 = this.$$('#sampleFileInput'); // returns null
this._refreshSelections();
};
_proceed() {
var test1 = Polymer.dom(this).querySelector("#sampleFileInput"); // returns null
var test2 = this.$.sampleFileInput; //returns null
var test3 = document.getElementById("sampleFileInput"); //returns null
var test4 = this.$$("sampleFileInput"); //returns null
var test5 = this.shadowRoot; //returns some object
var test6 = this.$$.sampleFileInput; //returns null
var test7 = document.querySelector('sampleFileInput'); //returns null
var test8 = document.querySelector('file-upload-page::shadow .FileUploadPge'); //returns null
var temp4 = this.root.querySelector('#sampleFileInput');//returns null
var temp5 = this.$$('#sampleFileInput');//returns null
var temp6 = this.shadowRoot.querySelector('#sampleFileInput'); // returns null
};
}
customElements.define(ConusmerPage.is, ConusmerPage);
</script>
</dom-module>
The same code works in polymer1.0 with this
document.getElementById("sampleFileInput")
Can somebody help what wrong am I doing in accessing this file in other page, and how can I handle this scenario in Polymer 2.0?
As you said in consumer-page you're trying to access the #sampleFileInput element which is a child of another component.
All of these attempts:
var temp2 = this.$.sampleFileInput;
var temp3 = this.shadowRoot.querySelector("#sampleFileInput");
var temp4 = this.root.querySelector('#sampleFileInput');
var temp5 = this.$$('#sampleFileInput');
var test1 = Polymer.dom(this).querySelector("#sampleFileInput");
fail because you're trying to access an element which is not present inside consumer-page's template, while these:
var test7 = document.querySelector('sampleFileInput');
var test8 = document.querySelector('file-upload-page::shadow .FileUploadPage');
fail respectively because document.querySelector() cannot select inside shadow dom and ::shadow and /deep/ selectors were deprecated (see here).
Technically you should be able to select #sampleFileInput inside consumer-page this way:
this.parentElement // Goes back to iron-pages
.querySelector('file-upload-page') // Selects file-upload-page
.shadowRoot // Enters its shadow root
.querySelector('#sampleFileInput'); // Selects the file uploader
however accessing elements inside others' shadow root is considered a not so good practice not to mention that if you're using lazy loading for iron-pages pages this will fail if file-upload-page wasn't loaded.
There are instead many other ways to expose information outside of custom elements such as events or properties.
You could, if it can fit with your implementation, use the component holding iron-pages as coordinator of your procedure and use attributes bindings to notify it with the data it needs from the different pages as the user goes on filling.
IE in file-upload-page bind the uploaded file url to a property, and observe it in the parent:
<iron-pages>
<file-upload-page url="{{url}}"></file-upload-page>
<consumer-page></consumer-page>
</iron-pages>
<script>
class Parent extends PolymerElement {
// ...
static get properties() {
return {
url: {
type: String,
reflectToAttribute: true,
observer: '_urlChanged',
},
};
}
_urlChanged() {
console.log(this.url);
}
// ...
}
</script>
I have a problem in AngularJS, to test a html div with a dynamic value when I use controller's alias
Here my code
<div id="title_contract" class="caption">{{ ctrl.detail_title }}</div>
where crtl is the ContractController's alias.
My test is
describe('Testing create new or open detail contract', function() {
var template, ctrl, scope;
beforeEach(inject(function ($controller, $compile) {
scope = $rootScope.$new();
ctrl = $controller('ContractController', {$scope: scope});
var element = angular.element('<div id="title_contract" class="caption">{{ ctrl.detail_title }}</div>');
template = $compile(element)(scope);
}));
it('should prepare variable to create new contract', function () {
ctrl.create_clicked();
scope.$digest();
var templateAsHtml = template.html();
expect(templateAsHtml).toContain('New Contract');
});
}
MyController is
PageApp.controller('ContractController', function($rootScope, $scope ) {
var vm = this;
vm.create_clicked = doCreate;
vm.title_detail = '';
function doCreate() {
vm.detail_title = 'New Contract';
}});
When I call create_clicked the title in vm change its value but test fails 'cos the div value is empty.
I try to use $scope (so without alias) and it works.
But I'd like to use alias approach.
Did somebody encounter this problem?
Thanks' in advance
Try:
ctrl = $controller('ContractController as ctrl', {$scope: scope});
See $controller documentation:
The string can use the controller as property syntax
Iam trying to apply paging to slickgrid and it shows an error in slick.pager.js as title in console and my code is
var jqxhr = $.getJSON('http://localhost:50305/Service1.svc/json/EmployeeDetails', function (data) {
dataView = new Slick.Data.DataView();
dataView.setItems(data, "EmpId");
dataView.setPagingOptions({ pageSize: 4 });
grid = new Slick.Grid("#teamGrid", dataView.rows, columns, options);
var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
alert("hi");
var isLastPage = pagingInfo.pageNum == pagingInfo.totalPages - 1;
var enableAddRow = isLastPage || pagingInfo.pageSize == 0;
var options = grid.getOptions();
if (options.enableAddRow != enableAddRow) {
grid.setOptions({ enableAddRow: enableAddRow });
}
});
dataView.onRowCountChanged.subscribe(function (args) {
grid.updateRowCount();
grid.render();
});
Try this:
dataView.beginUpdate();
dataView.setItems(data, "EmpId");
dataView.endUpdate();
dataView.setPagingOptions({ pageSize: 4 });
grid = new Slick.Grid("#teamGrid", dataView, columns, options);
The code doesn't really even make sense.
The line
var jqxhr = $.getJSON('http://localhost:50305/Service1.svc/json/EmployeeDetails', function (data) {
is not well formed. There should be a function body and a closing brace.
The variable jqxhr is not used anywhere. Why does this line even exist ?
`pagesize=10`
let pagesizealt
if(!this.paginator){
pagesizealt=this.pagesize.toString()
}
else{
pagesizealt=this.paginator.pageSize
}`
u have to check for paginator to initialize after initializtion provide the value of pageSize
how to access outer function's argument 'parent' ??? please see comments in code
!!last edit : This question is misleading, my problem is caused by wrong input argument
renderData : function(parent, children){
children.each(function(e, index){
var li = new Element('li');
var hasChildren = false;
if(e.children && e.children.length >0){
var img = new Element('img');
img.src = 'a1.png';
img.inject(li);
hasChildren = true;
}
if(e.icon){
var img = new Element('img');
img.src = e.icon;
img.inject(li);
}else{
var img = new Element('img');
img.src = 'b1.png';
img.inject(li);
}
li.set('html',e.text);
console.log(this);
// how to access outer function's argument 'parent' ???
li.inject(parent);
if(hasChildren){
var ul = new Element('ul');
this.renderData(ul, e.childRen);
ul.inject(e);
}
}.bind(this));
within an each loop:
array.each(function(el) {
this.method(); // this == (instance / scope)
}, this); // where **this** is your parent scope.
another acceptable way is:
var self = this;
...
array.each(function(el) {
self.method(); // fine.
}); // where this is your parent scope.
http://mootools.net/docs/core/Types/Array#Array:Array-each
although, using .bind(this) should work too... http://www.jsfiddle.net/dimitar/fFy4J/ - so what is the problem?
if i understood correctly, your problem is that you cant do li.inject(parent)
there's no reason why you can't access 'parent' since it's been passed as a parameter to the function renderData()
I've tried this simple test
var test;
window.addEvent('domready', function(){
test = new TestClass();
});
var TestClass = new Class({
Implements: [Options, Events],
initialize: function(){
this.renderData($('parent'),$$('span'))
},
renderData : function(parent, children){
children.each(function(e, index){
console.log(parent);
}.bind(this));
}
});
and it works fine... but i'm no really sure what's the problem on your code