I am using protractorjs to test a site built with angular.
The angular site generates a lot charts using Highcharts http://www.highcharts.com/.
I am finding it difficult to test these charts via protractorjs for EtoE testing.
Does anyone know a better way of testing Highcharts with
protractor or any other testing tools.
What I am basically looking is for checking whether the
-highchart was loaded on the page,
-checking if the toolstip show data from the JSON file
-The number of bars showing on the highchart have correct values fetched from the JSON.
- Extracting the Highchart JSON from the server response.
Thanks.
There aren't a ton of details here, but I use RSpec against an Angular project just like yours that also uses highcharts.
Your charts should be in a div somewhere with an id. In my app it's wrapped in .highcharts-container. You can wait on those to appear and assert against them.
There should be a class named .highcharts-tooltip that you can find and assert against a specific value as well.
Related
A noob here.
I am exploring the capabilities of AngularJS, Spring Boot and Highcharts.
I want to know if we can build following funtionality:
If I call pieExpenses.html it should just render a page with pie chart.
If call index.html, I should be able render other content along with pieChart (pieExpenses.html) inside it.
I was able to find example for functionality 1 using this project, but was confused with functionality 2.
Thanks in Advance
Hi I am developing a few SharePoint Web Parts with ReactJS and are ready to test them. Installed Mocha and Chai ok and test runs ran OK. The first two apps I am testing work as follows:
1. Search component - A jQuery Autocomplete that pulls data via the Fetch method and pushes this to the Input Div to perform searching and appends this data to some Input fields.
2. A-Z List - A Directory type application that allows users to navigate through locations from A to Z and view particular details about each location. Again data is pulled from SharePoint list via Fetch and then objectified:
(var myobj = data.map(item){return {value: item.title }} ).
They both make use of Material-UI themes (MUI) and in particular - Tabs,Tables,TextField, RaisedButton,Dialog.
I also have Interfaces as mentioned in separate classes.
Now I want to test and writing a some test and want to do tests with Describe and It methods but since this is my first time doing formal software testing I was wondering a few things and need advice:
What high level functionality should I test?
If I was to begin I am thinking of testing the following elements/components:
2a. Render method - Render()
2b. Class definitions - export default SearchCmp extends Component
2c. Main Divs - Important divs that need to be rendered.
2d. Navigation in the AZ list
2e. Fetch return - Does it equal to true?
So all in all I don't know if I am planning this right with the above areas to be included and two can you provide code sample or advice for such tests if they will be useful for me? jsdom is available too as we can't have access to real dom.
Thanks
Following this guidlines : NodeJS Testing with Chai and Code Quality. https://www.lynda.com/Node-js-tutorials/Assertion-libraries-correctness/587672/654554-4.html?srchtrk=index%3a1%0alinktypeid%3a2%0aq%3achai%0apage%3a1%0as%3arelevance%0asa%3atrue%0aproducttypeid%3a2
Once finished I should be in better position to design Unit and Integration tests.
I want to implement interactive svg in Angular Js application. Here is a glimpse of Svg which I will be using. I Know how to use an Svg in angular but the purpose of this question is not this. I want to make it dynamic. Like when I click "Punjab", the svg zooms in and show me regions, and upon clicking a specific region , it shows me the data which i will be getting through backend. So I am just curious, is this even possible ?
Based on your requirement you can use google map which can be easily integrated with Angular. Also I suggest to check D3.js.
Its Javascript library for creating SVG dynamically and can be easily integrated via Angular directives. There are plenty of examples available for the same.
I'm confused
it seems there is 2 way to run reactjs projects
1. in browser between html and script tags
2. not between html and script tags(it runs on browser) but it's different
I'm confused. explain it to me plz
React is a technology that is rendering custom web components into the browser, when you have a view, let's say dashboard composed of multiple React components, you have two ways to display that to a user:
1/ you display the html that typically contains the root React element and load an associated JavaScript script which contains all the React logic, then fetch the required data of that dashboard, so it will render all your graphs and stuff.
2/ when the user request that specific page, your server application already knows which data are required to render the initial view, so it will compute in advance how the page looks like and send a final first version to the user, it is called server-side rendering. From there obviously the page can be dynamically modified by local JavaScript running in browser afterwards, based on user interaction.
Both approaches have pros and cons, like testing capabilities, speed of execution, and so on... so I encourage you to read about the topic on the web, you can find tons of articles on React server-side rendering that will explain that better than me:
https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/
https://github.com/mhart/react-server-example
I am trying to find a solution for an image slider such as Amazing Slider and how to integrate it in my e-commerce web-app which I have developed using Angular JS. I want to have features such as lightbox and a slider with thumbnails underneath, and also video integration. I know its a lot to ask but its a shame that this very strong framework lacks (to my knowledge) a proper image viewer. Has anyone tried this integration before? Are there any other solutions. After doing a google search all I found is bootstrap UI and a gist for lightbox. But these are not anywhere near of what I am asking for. Please advise.
The reason AngularJS does not have such an inbuilt facility is that AngularJS was not meant to address such things. Its an application framework. It is not meant to be a UI framework.
Having said that, I am assuming you have the images you want to render in some sort of collection in AngularJS. So you can just write a very simple directive which will take your collection as a ng-model and render the slider for you. This allows you to reuse this component in multiple places in your app.
If you have only one place in your app that you need the slider, then just a simple ng-repeat will suffice.