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.
Related
I recently tried TDD methodology and i really liked it. You can write some tests for specified unit, imitate different behavior, data and mock object that allows you to check only small piece of code without need of running entire application. But I have some questions about unit visualization.
Suppose we have a simple chat application with homepage, lobby and chat widget components (p. 1).
When you are working on chat widget component (for example), you can write unit test for it and don't care about other components. But what if want to see widget render results? It is so annoying to run entire application, go to lobby page, switch to chat widget tab every time I changed my code.
Are there are any practices to run render unit tests? Does it depend on technology stack?
My frontend stack: React, Redux, Jest + React testing library.
If a test shows you rendered content, than it is not a unit test. The result of a unit test must be binary (failure or success). If you have to look at test output to figure out if it was successful, it is not a unit test.
What you are looking for it not unit tests but UI test. For the Web context selenium comes to mind. It is used the define scenarios for poking at your UI and asserting on outcomes. You can also use it to automate the process of
"run entire application, go to lobby page, switch to chat widget tab every time I changed my code".
I am trying to write tests for one of our rich text components which was implemented with slate js editor in react js. So when writing tests, I am retrieveing the element div[contenteditable='true'], but not able to simulate events like change, blur, focus. The handlers attached to editor component are not getting called. I tried multiple combinations, but no luck. Can someone please help on this? Is it possible to simulate events for contenteditable element using testing library (contenteditable is implemented using slatejs)?
Like you've discovered, contenteditable isn't supported by JSDOM. React Testing Library (RTL) is built on top of JSDOM, so it's not possible to test the Slate editor properly with RTL until JSDOM implements support for contenteditable.
Use a browser automation library together with Testing Library
Your options are then to use a tool that creates a real browser context. Testing Library have integrations with many tools that do exactly that: TestCafe, Cypress, Nightwatch, Puppeteer.
You can also use the above tools on their own, without Testing Library.
I've solved this using Puppeteer, and there are two approaches:
Run a local server and tell Puppeteer to go to something like localhost:3000
Set the content directly with page.setContent(htmlString)
(1) is the most common, and you'll find many guides for this since it's a common approach for end-to-end testing (google search).
(2) is a little trickier because you will have to transform and bundle your source for each test, and then inject it as HTML into the browser page. I prefer this approach because the testing experience is much more similar to using RTL. I've created a repository with an example of this setup with the Slate editor here: https://github.com/marcusstenbeck/puppeteer-react-testing-template/
I am automating tests using selenium webdriver using test ng framework. Here am trying to implement POI and factory Design pattern.
Basically am testing on two websites (Which differs in GUI interface)which has login pages
Login Name and Password and login button but the challenging part is webelements has different ID in both the websites.
HOw to write a generic methods for this?
For locators i have a an enum class where i take the instance of each value and call it in the method.
As id is different than for sure you need to define both elements. There is no such solution for it.
In your testcase you can implement a check which defines that you on which environment and accordingly it will pass the element
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 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.