over_react_test 3.0.0 copy "over_react_test: ^3.0.0" to clipboard
over_react_test: ^3.0.0 copied to clipboard

Platformweb

A library for testing OverReact components

OverReact Test #

Pub Build Status Documentation

A library for testing OverReact components.

Using it in your project #

  1. Import it into your test files:

    import 'package:over_react_test/over_react_test.dart';
    
  2. 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 using foo.Bar.menuItem
    • target the 4th item using foo.Bar.menuItem.3
    • target the item corresponding to an item with id baz123 using foo.Bar.menuItem.baz123

    This won't always be needed, but it comes in handy in certain cases.

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.