Jeremy  Reilly

Jeremy Reilly

1603955580

Simulate Browser Interactions with Testing Library’s UserEvent

My Journey

Like most, when I first started using Testing LibraryI used Fire Event to test component interactions. After all, this API shipped with the library itself and was used in the test examples in the documentation. But I soon discovered that Fire Event had serious limitations. I would try clicking something and the expected effect did not happen. Why?

Browser Events

To understand this issue, we need to better understand browser events. When a user clicks something in their browser, multiple events are triggered — mouseDownmouseUpclick, and focus. Similarly, when typing something, the keyDownkeyUp, and keyPress events all trigger! Because a single user interaction could trigger multiple events, developers have multiple options for implementation. This is where I ran into my issue.

Fire Event

Fire Event, unfortunately, requires you to use the method for the corresponding event handler to trigger. If an element has an onClick event handler, I have to use fireEvent.click; if an element has an onMouseDown event handler, I have to use fireEvent.mouseDown. In other words, I need to know the exact implementation of the event handler to successfully use fireEvent.

#react #jest #integration-testing #unit-testing #react-testing-library #react native

What is GEEK

Buddha Community

Simulate Browser Interactions with Testing Library’s UserEvent
Jeremy  Reilly

Jeremy Reilly

1603955580

Simulate Browser Interactions with Testing Library’s UserEvent

My Journey

Like most, when I first started using Testing LibraryI used Fire Event to test component interactions. After all, this API shipped with the library itself and was used in the test examples in the documentation. But I soon discovered that Fire Event had serious limitations. I would try clicking something and the expected effect did not happen. Why?

Browser Events

To understand this issue, we need to better understand browser events. When a user clicks something in their browser, multiple events are triggered — mouseDownmouseUpclick, and focus. Similarly, when typing something, the keyDownkeyUp, and keyPress events all trigger! Because a single user interaction could trigger multiple events, developers have multiple options for implementation. This is where I ran into my issue.

Fire Event

Fire Event, unfortunately, requires you to use the method for the corresponding event handler to trigger. If an element has an onClick event handler, I have to use fireEvent.click; if an element has an onMouseDown event handler, I have to use fireEvent.mouseDown. In other words, I need to know the exact implementation of the event handler to successfully use fireEvent.

#react #jest #integration-testing #unit-testing #react-testing-library #react native

Chumarat Pat

Chumarat Pat

1599639298

Interaction Testing with React Testing Library

Testing is complicated. I’ve certainly never been good at it. For the longest time, I’ve only been focused on basic function input-output unit tests. Why? Because they were easy — you didn’t need to render HTML, you didn’t need to query DOM elements, you didn’t need to interact with said DOM elements. But of course, React component testing is a necessity for any mature codebase. And it finally came time for me to sit down and figure it out.

That’s when I discovered React Testing Library. And suddenly, everything seemingly became much simpler. All the complexities that I’ve encountered, but not understood, that made me put off React component testing disappeared. Hopefully, the same will happen for you.

#react-testing-library #unit-testing #react #jest #interaction-testing

Mikel  Okuneva

Mikel Okuneva

1596804900

Guide To Cross Browser Testing On Older Browser Versions

“How do I perform website testing on older browser versions? Is it even necessary?”

Have you ever wondered about these questions? If you did, you’re not the only one. At some point, every web tester or web developer ponders on these. And it is logical to do so. After all, new browser versions are released every month. Which makes it difficult for testers & developers to maintain a record of emerging & deprecated features. Not to forget, the never-ending release requirements are constantly squeezing your bandwidth.

It can be an overwhelming task to ensure a cross-browser compatible website, that works seamlessly even on older browsers. Which is why some of our clients have also enquired if it is important for them to test on older browser versions? If so, which browsers should they consider for cross-browser testing? And I am going to help you get answers to these questions in this article.

Why Is It Important To Test On Older Browser Versions?

The past decade has witnessed an immense rise in internet usage. The internet traffic at a global level continues to rise significantly with each passing day. There was a time when surfing the internet meant double-clicking on the IE icon on your desktops.

But over the years we have been introduced to a wide array of browsers including, but not limited to Google Chrome, Opera, Safari, Mozilla Firefox, and Microsoft Edge. As per StatCounter, Google Chrome and Safari dominate the browser market with a share of 65% and 17% each from June 2019 — June 2020.

Image for post

But did you notice something else here?

Internet Explorer & Edge legacy browsers are still having enough browser market share to have themselves listed among the top 10 most used browsers worldwide in the last year. And you might be surprised to realize that Internet Explorer has been deprecated in 2015 and hasn’t received any update since then.

The emergence of modern browsers led IE to its deathbed. A majority of us weren’t bothered by the death of IE because deep down the notorious IE has caused all of us a fair share of troubles. Remember those good old days when IE was used as a default browser? 🙂

Image for post

However, it is intriguing to notice that the IE community still exists. Even after Chris Jackson, Microsoft Security Chief insisted people to stop using IE.

Well, we have considered an example of the fallen king IE but what about the reigning king Google Chrome?

Earlier, we realized the browser market share. Now, let’s dig deeper and look into the browser version market share.

#manual-testing #browser-testing #browsers #testing

A Beginner’s Guide to Automated Cross-Browser Compatibility Testing

Benefits of Automated Cross-Browser Compatibility Testing

There are countless benefits of implementing a proper strategy for automated cross-browser compatibility testing for all your web applications or websites. Let’s dive deeper into the most crucial advantages

  • Seamless User Experience, Build’s Compatibility, and Quality Assurance
  • Mitigate Risks Early at Speed
  • Shorten Release Cycle and Ship Code Faster
  • Cost Efficiency, Time Efficiency, Test coverage, and Accuracy

Such a varying combination of browsers, devices, OS, and screen-resolutions provide better test coverage for your application. Automated cross-browser compatibility testing naturally helps avoid human-errors, thus availing better accuracy too.

#testing #beginners #automated cross-browser #browsers #cross-browser compatibility testing

Tamia  Walter

Tamia Walter

1596754901

Testing Microservices Applications

The shift towards microservices and modular applications makes testing more important and more challenging at the same time. You have to make sure that the microservices running in containers perform well and as intended, but you can no longer rely on conventional testing strategies to get the job done.

This is where new testing approaches are needed. Testing your microservices applications require the right approach, a suitable set of tools, and immense attention to details. This article will guide you through the process of testing your microservices and talk about the challenges you will have to overcome along the way. Let’s get started, shall we?

A Brave New World

Traditionally, testing a monolith application meant configuring a test environment and setting up all of the application components in a way that matched the production environment. It took time to set up the testing environment, and there were a lot of complexities around the process.

Testing also requires the application to run in full. It is not possible to test monolith apps on a per-component basis, mainly because there is usually a base code that ties everything together, and the app is designed to run as a complete app to work properly.

Microservices running in containers offer one particular advantage: universal compatibility. You don’t have to match the testing environment with the deployment architecture exactly, and you can get away with testing individual components rather than the full app in some situations.

Of course, you will have to embrace the new cloud-native approach across the pipeline. Rather than creating critical dependencies between microservices, you need to treat each one as a semi-independent module.

The only monolith or centralized portion of the application is the database, but this too is an easy challenge to overcome. As long as you have a persistent database running on your test environment, you can perform tests at any time.

Keep in mind that there are additional things to focus on when testing microservices.

  • Microservices rely on network communications to talk to each other, so network reliability and requirements must be part of the testing.
  • Automation and infrastructure elements are now added as codes, and you have to make sure that they also run properly when microservices are pushed through the pipeline
  • While containerization is universal, you still have to pay attention to specific dependencies and create a testing strategy that allows for those dependencies to be included

Test containers are the method of choice for many developers. Unlike monolith apps, which lets you use stubs and mocks for testing, microservices need to be tested in test containers. Many CI/CD pipelines actually integrate production microservices as part of the testing process.

Contract Testing as an Approach

As mentioned before, there are many ways to test microservices effectively, but the one approach that developers now use reliably is contract testing. Loosely coupled microservices can be tested in an effective and efficient way using contract testing, mainly because this testing approach focuses on contracts; in other words, it focuses on how components or microservices communicate with each other.

Syntax and semantics construct how components communicate with each other. By defining syntax and semantics in a standardized way and testing microservices based on their ability to generate the right message formats and meet behavioral expectations, you can rest assured knowing that the microservices will behave as intended when deployed.

Ways to Test Microservices

It is easy to fall into the trap of making testing microservices complicated, but there are ways to avoid this problem. Testing microservices doesn’t have to be complicated at all when you have the right strategy in place.

There are several ways to test microservices too, including:

  • Unit testing: Which allows developers to test microservices in a granular way. It doesn’t limit testing to individual microservices, but rather allows developers to take a more granular approach such as testing individual features or runtimes.
  • Integration testing: Which handles the testing of microservices in an interactive way. Microservices still need to work with each other when they are deployed, and integration testing is a key process in making sure that they do.
  • End-to-end testing: Which⁠—as the name suggests⁠—tests microservices as a complete app. This type of testing enables the testing of features, UI, communications, and other components that construct the app.

What’s important to note is the fact that these testing approaches allow for asynchronous testing. After all, asynchronous development is what makes developing microservices very appealing in the first place. By allowing for asynchronous testing, you can also make sure that components or microservices can be updated independently to one another.

#blog #microservices #testing #caylent #contract testing #end-to-end testing #hoverfly #integration testing #microservices #microservices architecture #pact #testing #unit testing #vagrant #vcr