I encounter a problem that I can't resolve with the angularjs online help.
I'm writing angularjs/karma scenario test where I want to verify that a part a view which displays a purse amount persists after page navigation. The purse amount comes from a bound value.
View code:
<div class="label">Mon Compte<br>{{ User.getBalance() | currency }}</div>
Scenario code:
var b1 = binding('User.getBalance() | currency');
browser().navigateTo('/another-route');
var b2 = binding('User.getBalance() | currency');
expect(b1).toEqual(b2);
Failed scenario result:
expected {"name":"select binding 'User.getBalance() | currency'","fulfilled":true,"value":"4 353,90 €"} but was "4 353,90 €"
What I understand is that it tries to compare a promise with text value which doesn't work, but I have no idea to solve this.
The answer depends on what you are actually trying to test. Are you trying to assert that the text displayed in your VIEW is some value or are you trying to assert that the MODEL is staying the same? If it's the VIEW you are interested in you are on the right track. My suggestion would be to use Protractor rather than Karma.
Take a look at the documentation and let me know if you still can't get your tests working.
On the other hand if it is the MODEL you are interested in, things become a bit more complicated. You will not be able to simulate the browser navigation with a standard unit test. You would have to either create a mock service that lets you simulate the route provider or use a third party library like ngMidwayTester. Take a look here for more help with that.
Related
I'm trying to get data from a Highchart, but I only have a "None" value.
The chart needs a password to be accessed, but I have the same problem with the chart on this page.
Using the browser's DevTools I can get the y value from highchart using:
Highcharts.charts[0].series[0].data[0].y
Thus, combining this code with a loop structure I can have all the y values.
The problem is when I try to use Selenium to webscraping those values. I'm using the code below
page.execute_script('Highcharts.charts[0].series[0].data[0].y')
The answer I expect is 2 (as in DevTools), but instead I'm getting "None" as answer.
I already tried to use Beautifulsoup to retrieve the y value from the <path> tag, but it doesn't meet the expected value.
The HTML source seems to be complex (I'm not expert in these area). The full xpath of the <svg> is:
/html/body/form/div[3]/div[2]/div[2]/section/div/div/div[2]/div/section/div/div/div/div[2]/div[2]/div[1]/div[2]/div/div/svg
Also, I can't find any <iframe>, which could be avoiding me from accessing the graph.
Does anyone knows what I'm doing wrong? (I'm beginner in this area, so let me know if any further information is necessary)
After a long time stuck in it, I figured out how to solve this problem.
My mistake is that I was sending to my browser, via selenium, the js script below to be executed.
page.execute_script('Highcharts.charts[0].series[0].data[0].y')
This code is working perfectly but it doesn't return to me any value. So, in order to have the y value (that is what I need), I just need to use a "return" in the previously code. The final code is
page.execute_script('return Highcharts.charts[0].series[0].data[0].y')
I am using VMWare Clarity datagrid with single selection.
Behind the scene, I am receiving updated data and randomly, the selected row is no more selected.
I found those links where they seemed to have the same issue and looks like it is fixed in 0.12.2, but I don't see that from side:
https://github.com/vmware/clarity/issues/484
https://github.com/vmware/clarity/issues/2342
Here my code
html
<clr-datagrid [clDgRowSelection]="true" [(clrDgSingleSelected)]="selectedUnit">
...
<clr-dg-row *clrDgItems="let unit of units" [clrDgItem]="unit" (click)="backupSelectedUnit(unit)">
...
</clr-dg-row>
</clr-datagrid>
JS
myfunc() {
this.units = this.getUpdatedUnits();
}
Thanks in advance
You are missing the trackBy on *clrDgItems. Whenever you are dealing with objects you receive from the server, you really want to make sure you are using trackBy to help Angular (and thus Clarity) know how to compare your objects. Otherwise the only comparison Angular can perform is reference equality, which isn't preserved when you keep getting updated objects from the server. Here is the official documentation for it, and you can find a maybe more readable explanation in the template syntax docs.
*clrDgItems supports the same trackBy option as *ngFor, so you can just write:
<clr-dg-row *clrDgItems="let unit of units; trackBy: trackById" ...>
where trackById is a function you add to your component that looks like this:
trackById = (index, unit) => unit.id
I'm assuming here that the objects you receive from the server have an id, but you can use any other way to identify them depending on your specific use case.
I have a question about React Syntax.
I was conceptualising a rebuild of my website in React and was writing code to access the data-attribute value.
The method I used to get the data-attribute value was:
e.target.getAttribute('data-menuItem');
and that seemed to work just fine. Upon further investigation I read about the alternative notation for the same method looks like:
e.target.attributes.getNamedItem('data-menuItem').value
I would just like to know if the second method I mentioned is best practice or if it really matters at all.
Your help is much appreciated.
Thanks
Moe
Let suppose that you have <div data-pg="abc"></div> in your html then in react you can retrieve data attributes:
let val = e.target.dataset.pg
Now your val will have abc.
To retrieve value of data attribute, alternative way is:
let val = e.target.getAttribute('data-pg')
There is no real difference (DOM-wise) between getAttribute and attributes.getNamedItem - both exists in all modern browsers and you can use any of them.
The attributes property returns a live collection of all attribute nodes registered to the specified node, while the getAttribute function gives you direct access to the value of the attribute you wanted.
I would like to style a couple of elements using a filter to decipher if it should be yellow or red.
I understand filters should not carry logic operations in them as such so am guessing a service is the first port of call before i create any filter for it.
I am leveraging data from a backend (still a bit unsure of the Backend model here, but know I can leverage certain objects to obtain the data needed for working on) I mostly need to know if i`m on the right path by using a service to control the logical outcome and then a filter to provide 'filtration' of that outcome.
BTW: sorry, im waiting for my project to checkout from SVN at mo so cannot provide a skeleton attempt.
Will do in a bit though .....
Any advice before hand will be much appreciated
:) Gruffy - thanks for reading
You can directly set the class attribute if you want, so your filter can simply return the CSS class to apply:
<p class="{{'foo'|myFilter}}">Foo</p>
Here's a fiddle showing what I mean.
Bit of a crazy one, certainly a very very frustrating one!
I have a pretty basic ng-repeat going on and it's working in 95% of the cases. However a few of the binds just aren't displaying.
Basic use:
<p>{{result.thingy}}</p>
Nothing shows up in the HTML
However if I use
<p>{{result.thingy | json}}</p>
Then it displays, but with quotemarks around it.
So the data is there, how come it won't show? Is it somehow an invalid type?
I have ported this across from another Angular app which displays it fine, so I suppose there might be a difference in the Angular version or something like that, but this seems crazy to me.
It also shows if I use | number
Apologies, I can't share the data apart from that when I print the full JSON to the screen, it looks like:
"thingy": { "pounds": "174", "pence": "08" }