I'm writing Jest unit tests for Storybook components to be observed in the Interactions addon. These tests should be able to compare the return data, emitted from a component to its story, to the expected values. I do see the data returned in the Actions addon. I've found that it might be possible to do by dynamically updating args with the data and then comparing the args to the expected values. I've found several solutions that are supposedly meant for React or Vue 3. But I'm looking for something that would work with Vue 2 until the project is moved to Vue 3.
Would be great if anyone had a solution. Thank you.
Related
Context: On a project (C#/.Net in backend and integration tests, TypeScript/React in frontend) I have complex integration tests that are more like "test scenarios": they test the business logic through the UI and somehow test the functionalities of the UI, for example: it ensures an input field is readonly after having done some modification in the page.
I mainly have 2 issues with those tests:
Finding DOM elements
Most of the tests describe a scenario but for some reason the testing framework has been designed to represent what is on the page of the frontend. For example, a test might go to a form page for edition and then click on the "Attachments" tab to get the attachments panel and then do some clicks to upload a file.
To do that, I've been asked to modify the working frontend to add a "data-id" attribute on the elements that should be clicked by the integration test. I can't say why but this sounds wrong to me. It feels like I'm going to introduce code (even simple) of the integration tests to the frontend application.
So my first question is: how does everybody usually find their DOM elements?
My concern is that if I actually look for the elements using an xpath or CSS selector I will end up with tests that have a strong dependency on the DOM generated by the frontend while using data-id would probably make it more flexible. So if you decide to change the location of an element, you will break easily the integration tests.
On the other hand, I have the feeling that the tests are describing a bit too well what they are doing and for example they should be simplified from a 3 steps logic Go to attachments > Select file > Click add attachment to a single step logic Call magic helper that will upload an attachment in order to have this logic in one single place.
Limit of the integration tests
We have backend unit tests, frontend unit tests and integration tests. Integration tests outnumber everything by a factor of 2 or 3 the rest. And I'm not sure that we put the right stuff in those integration tests.
For example all the different login methods are tested by integration test. The account/bad password locking mechanism is also tested by integration test. We don't have/need unit tests at all and most of the time they feel duplicated with the integration tests.
To get more into this example I think the logic of the account/bad password locking should be tested by unit tests while the integration tests should check only the login methods that require an integration with an external service (using Windows credentials for example or OAuth).
But I'm not sure of what exactly I would put where. So my question is: how do you determine if a test belongs in an integration test or backend/frontend unit test? Is there a list of questions you should ask yourself?
Some interesting reading on the subject: Frontend testing: what and how to test, and what tool to use?
Especially:
Don't write tests for every small corner case. These tests are expensive to write and take too long to run. You should focus on the cases that explore most of your functionality. If you write too many tests at this level you will probably test the same functionality that you have previously tested on your unit tests (supposing you have written them).
Under 'Tips' in the react documentation they describe a pattern for communicating between components where a parent component calls a method on the child (via a ref).
See https://facebook.github.io/react/tips/expose-component-functions.html
I am using a third party react component that requires me to use this approach.
I would like to unit test my component and check that it calls the child's method (with the right parameters) under the right circumstances, but I'm having trouble figuring out how...
For the example in the Facebook documentation, how would I write a test that checks Todos calls animate on the last Todo when it should?
Consider using Facebook's Flux pattern. By using this pattern, you'll have separated UI components from state management; state management is facilitated with "stores". The stores end up coordinating state between components. Now your views don't communicate directly. In addition, data only flows one way.
Note that there are many Flux implementations you can use, such as reFlux. You can find many of these by searching available NPM packages
...So, how to test this?
Once you've settled on a pattern, you can google a lot of resources, blogs, and examples for testing. Currently, there are two main approaches for unit testing: Jest and Jasmine. Facebook recommends using Jest:
For a unit test to operate on a truly isolated unit of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial.
...
Flux stores often receive a great deal of formal unit test coverage, as this is where the application state and logic lives. Stores are arguably the most important place in a Flux application to provide coverage
I’m planning to build what will eventually be a large SPA with lots of data (in a grid).
It seems a good idea to use a MVC framework. I am mainly looking at AngularJS and EmberJS.
There are arguments for both, but it seems to me that EmberJS has some advantages that Angular does not. In particular, since I will have lots of data in a grid, I am afraid that choosing Angular will eventually cause me performance issues.
However, unit testing is also very important to me.
I haven’t been able to find much information about unit (not integration) testing of EmberJS.
Is Ember a significantly worse choice than Angular if unit testing is important? (As it currently stands)?
Please note that I am talking about unit tests, not integration tests. It seems to me that if I am going to build a large SPA, then it is important to test not just the surface of the app, but to be able to test each component/part/class individually and mock out the rest.
I've found unit testing in Ember to be relatively straightforward.
The are two things to make sure you understand in order to be successful writing Ember unit tests.
First, you will sometimes need to provide an object with a container (e.g. an Ember.DefaultContainer instance) when you create it for testing. The container is the crux of Ember's dependency injection mechanisms. Definitely need to learn about it.
Second, you will need to understand the Ember run loop in order to make sure the changes you make in your unit tests will propagate (e.g. computed properties with dependent keys becoming invalidated) before you assert that the new value is what you expect.
I would highly recommend reviewing the unit tests for Ember itself. You will find many useful techniques there.
Recently,I am studying about django test. Because I need to build unittest and integration test in my website.But I find that the tutorial of integration test in django is really less and it often occurs when I hit a link named "integration test" ,I only see the title "functional tests".So,are they the same? if not,how can I start a integrstion test in django?
You cannot compare these notions.
The opposite to integration testing is unit testing. Unit testing - is testing different isolated parts (usually small code blocks) of your system separately - it's very focused, integration testing is testing how these different parts of your system work together - for example, url routing, logic in views, logging, querying your models etc.
Functional testing is a type of black box testing that usually checks that some (usually documented) piece of functionality works as expected.
You may have all sorts of tests in your django project:
unit tests of different library, helper functions
view tests (this could be already called integration tests, because it may include dealing with models, logging etc)
ui tests (high-level tests, that could be called functional/integration/system)
..
If you don't have tests at all, I'd start with high-level tests. For example, I'd take selenium and django_selenium and write some in-browser tests that will go through pre-defined scenarios, like login->do smth->logoff, login with incorrect credentials->see error etc - and these tests would be called functional and system and integration and ui and etc - you got it I think.
See also:
Testing Django Applications
A Guide to Testing in Django
Carl Mayer's "Testing and Django" slides
Integration Testing in Python
Hope that helps.
I'm just starting my first MVC3 application, and I'm not sure how to unit-test it. I was planning to break out helper classes (static helpers, usually) into a separate assembly, as well as model classes, so that I could test them with NUnit.
So I'm OK on helper classes; but how do I test model classes (considering that they're annotated for NHibernate and tied to the database), and how can I test my views and controllers?
What are the specific tools and techniques I need to test NHibernate-bound models, as well as ASP.NET views and controllers? I'm not sure. NUnit only solves some of the problem.
Edit: Here's some samples of code -- I'm not on my dev machine right now, so I don't have real code to show-case.
Models: Anything from the ActiveRecord documentation
Controllers: The standard HomeController from the MVC3 documentation
Views: Any strongly-typed view (let's say Create) generated from the right-click context menu (Add > View)
Specific questions:
How I can test saving models without actually saving to the main/production database
Scope for testing views; should I simply test fields exist? What about validation error messages?
Controllers: scope for testing. Should I test that actions touch and deform database data as expected (eg. /get/id gets that object; /delete/id deletes that object)?
You can get there by various kinds of tests, but you need to apply them wisely depending on what you are going to test:
Use unit test to test your controllers, or your business logic, without hitting the database.
Use integration testing by running on an in-memory database (which NHibernate supports and is easy to setup). You can make sure a scenario actually works, e.g. using a valid scenario, all the business logic is working, your controller pass the data to persistence mechanism and it goes correctly into the database.
You can use UI Testing using frameworks such as Selenium but only do that where really needed, because it is not easy as two previous types of tests, and would become hard to maintain and fragile.
It is a best practice to keep your view (UI) thin, and test other layers behind the UI, as testing the UI probably does not worth all the hassle.