Awesome
OverReact Test
A library for testing OverReact components.
Using it in your project
-
Import it into your test files:
import 'package:over_react_test/over_react_test.dart';
-
Run your tests:
$ dart run test test/your_test_file.dart
Naming Conventions
Variables and Types
Usage | Actual Type | Suggested Referencing |
---|---|---|
render and render helper functions | ReactComponent | Element | instance |
Component class | ReactClass | type |
VDOM Instance (invoked UiProps ) | ReactElement | -ReactElement or not suffixed |
findDomNode , queryByTestId , etc. | Element | node |
The Dart component | react.Component (backed by ReactComponent ) | dartInstance |
Invoked UiFactory | UiProps | builder |
Example:
test('my test' () {
var sampleBuilder = Sample();
var sampleReactElement = sampleBuilder(); // Or var sample = sampleBuilder();
var instance = render(sampleInstance);
SampleComponent sampleDartInstance = getDartComponent(instance);
var sampleNode = findDomNode(instance);
});
Test IDs
When coming up with test ID strings:
-
DO NOT use spaces; space-delimited strings will be treated as separate test IDs
Just like CSS class names, you can use multiple test IDs together, and use any one of them to target a given component/node.
-
PREFER following our naming scheme for consistency across projects:
<library>.<Component>[.<subpart>...].<part>
We recommend including a library abbreviation and component name within a test ID so that it's easy to track down where that ID came from.
Namespacing (
.<subpart>
) can be added however it makes sense.Finally, test IDs should be descriptive and useful in the context of tests.
Examples:
wsd.DatepickerPrimitive.goToSelectedButton
sox.AbstractDataLayoutGroup.headerBlock.title
-
CONSIDER adding multiple IDs to serve different purposes
for (var i = 0; i < items.length; i++) { // ... ..addTestId('foo.Bar.menuItem') ..addTestId('foo.Bar.menuItem.$i') ..addTestId('foo.Bar.menuItem.${items[i].id}') // ... }
With the output of above code, you can:
- target all of the
Bar
component's menu items usingfoo.Bar.menuItem
- target the 4th item using
foo.Bar.menuItem.3
- target the item corresponding to an item with id
baz123
usingfoo.Bar.menuItem.baz123
This won't always be needed, but it comes in handy in certain cases.
- target all of the
Documentation
You would never skip reading the docs for a new language you are asked to learn, so please don't skip over reading our API documentation either.
Contributing
Yes please! (Please read our contributor guidelines first)
Versioning
The over_react_test
library adheres to Semantic Versioning:
- Any API changes that are not backwards compatible will bump the major version (and reset the minor / patch).
- Any new functionality that is added in a backwards-compatible manner will bump the minor version (and reset the patch).
- Any backwards-compatible bug fixes that are added will bump the patch version.