Code Monkey home page Code Monkey logo

over_react_test's Introduction

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.

over_react_test's People

Contributors

aaronlademann-wf avatar annawatson-wk avatar brianblanchard-wf avatar clairesarsam-wf avatar corwinsheahan-wf avatar danielszopa-wk avatar dianachen-wf avatar evanweible-wf avatar greglittlefield-wf avatar hunterbreathat-wk avatar jacehensley-wf avatar jayudey-wf avatar joebingham-wk avatar joelleibow-wf avatar johnbland-wf avatar kealjones-wk avatar leviwith-wf avatar olesiathoms-wk avatar rm-astro-wf avatar rmconsole-readonly-wk avatar rmconsole2-wf avatar rmconsole3-wf avatar rmconsole4-wk avatar rmconsole5-wk avatar rmconsole6-wk avatar rmconsole7-wk avatar robbecker-wf avatar robrbecker avatar seanburke-wf avatar sydneyjodon-wk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.