Testing on Frontend: what and how to test, and which tool to use?

Question

I have been writing tests for my Ruby code for a while, but as a frontend developer, I am clearly interested in bringing this into the code that I write for my frontend code. There are quite a few different options that I played with:

• CasperJS
• Capybara and rspec
• Jasmine
• Cucumber or just rspec

What do people use for testing? And what's next, what do people check? Just javascript? Links? Forms? Hardcoded content?

Any thoughts would be greatly appreciated.

Answer 1

I had the same questions a few months ago, and after talking with many developers and doing a lot of research, I found out about it. You should use unit JavaScript to use your JavaScript, write a small set of user interface integration tests, and avoid testing and rendering tools. Let me explain this in more detail.

First, consider the test pyramid . This is an interesting analogy created by Mike Cohn to help you decide what type of testing you should do. At the bottom of the pyramid are single tests that are durable and provide quick feedback. They should become the basis of your testing strategy and, thus, occupy most of the pyramid. Upstairs you have user interface tests. These are tests that directly interact with your user interface, for example, for example, Selenium. Although these tests can help you find errors, they are more expensive and provide very slow feedback. In addition, depending on the tool you use, they become very fragile, and you end up spending more time maintaining these tests than writing the actual production code. The service level, in the middle, includes integration tests that do not require an interface. For example, in Rails, you test your REST interface directly, rather than interacting with DOM elements.

Now back to your question. I found out that I can significantly reduce the number of errors in my project, which is a web application written in Spring Roo (Java) with a bunch of JavaScript, just by writing enough unit tests for JS. In my application, a lot of logic is written in JS, and this is what I am testing here. I don't care how the page actually looks, or if the animation plays as it should. I check to see if the modules I write in JS will follow the expected logic if the element classes are correctly assigned and if the error conditions are well handled. For these tests, I used Jasmine. This is a great tool. It is very easy to learn and has nice bullying called spies. Jasmine-jQuery adds more functionality if you use jQuery. In particular, it allows you to specify fixtures that are snippets of HTML code, so you don’t have to manually mock the DOM. I integrated this tool with maven, and these tests are part of my CI strategy.

You should be careful with UI tests, especially if you rely on recording / playback tools like Selenium. As the user interface changes frequently, these tests continue to break down, and you will spend a lot of time figuring out whether the tests really failed or are just out of date. In addition, they do not add as much value as unit tests. Since they need an integrated environment to run, you basically like to run them only after you finish development, when the cost of the fix will be higher.

However, for smoke / regression tests, UI tests are very useful. If you need to automate them, you have to watch out for some of the dangers. Write your tests, do not write them down . The recorded tests usually rely on automatically generated xpaths that break for every small change you make in your code. I believe that Cucumber is a good basis for writing these tests, and you can use it with WebDriver to automate browser interactions. Code thinking about tests . In UI tests, you will need to easily find elements so you don't have to rely on complex xpaths. Adding class and identifier elements where you will not usually be frequent. Do not record tests for each small corner case. These tests are expensive to write and too long to run. You should focus on cases that explore most of your functions. If you wrote too many tests at this level, you are likely to experience the same functions that you previously tested on your unit tests (assuming you wrote them).

In my current project, I use Spock and Geb to write user interface tests. I find these tools amazing. They are written in Groovy, which is better suited to my Java project.

Answer 2

There are many options and tools for this. But their choice depends on whether you have a web interface or is it a desktop application?

Suppose from the tools you mentioned the web interface about. I would suggest Selenium (aka WebDriver): http://seleniumhq.org/docs/

There are many languages ​​that it supports (Ruby is listed). It can be run in a variety of browsers, and it is quite easy to use with a large number of tutorials and tips. Oh and it's free of course :)

Answer 3

I, though, since this post receives a lot of sympathy, I would post my answer to my question, since now I am writing a lot of tests and how you are testing the front end, now a lot has changed.

So, in terms of FE testing, I spent a lot of time using karma with Jasmine , although karma will work well with other test suites like mocha and qunit. Although they are great, and karma allows you to interact directly with browsers to run your tests. The downside is that your test suite is getting large, and it can get pretty slow.

I recently switched to Jest , which is much faster, and if your application uses enzyme to write the application with a snapshot, it gives you really good coverage. Speaking of coverage, Jest has Istanbul coverage, built-in and customized and mocking, really easy to use. Its flaw is not tested in the browser, and it uses something called jsdom , which is fast but has some troubles. Personally, I don’t think this is a big problem, especially when I compile my code through webpack / babel, which means that the errors in the cross browser are quite minor and are far from each other, so this is usually not a problem if you manually test the test (and imo you should).

From the point of view of working in the rails stack, it is now very easy now that gp webpacker is now available, and the use of npm and node is generally much more excluded. I would recommend using nvm for node version control

Although this is not rigorous testing, I would also recommend using linting, as it also causes a lot of problems in your code. For JS I use eslint with prettier and scss / css I use stylelint

In terms of what to test, I think that since Carlos is talking about a test pyramid, it’s still relevant, because the theory does not change, it's just tools. I would also add, to be practical in tests, I would always test, but what level and coverage will depend on the project. It is important to manage time and spend hours / days on a short life cycle project. Large / long-term projects, the benefits of a larger test suite are obviously greater.

In any case, I hope this helps people who are considering the issue.