mariposa_test 1.0.0

  • README.md
  • Example
  • Installing
  • Versions
  • new49

mariposa_test

Pub build status

Infrastructure for unit-testing Mariposa widgets:

  • The DOMTester class, which can interactively run tests against a tree, supporting events and DOM traversal.
  • Multiple Matcher functions that can be used in unit tests.
  • convertNode, which converts a package:html Node to a package:html_builder Node.

For best results, use package:test.

DOMTester

Those familiar with Flutter's WidgetTester will understand the DOMTester class. This class renders Mariposa widgets into an AST from package:html, which can then be interacted with, as though it were a real browser DOM. Oof course, things like Web API's will be unavailable from a command-line setting, but the best practice is to use abstraction to mock these things in at testing time, anyways.

The DOMTester API is more or less the same as mariposa/dom or mariposa/string:

import 'dart:async';
import 'package:html_builder/elements.dart';
import 'package:mariposa/mariposa.dart';
import 'package:mariposa_test/mariposa_test.dart';
import 'package:test/test.dart';

void main() {
  DOMTester tester;

  var app = () {
    return div(
      c: [
        h1(
          id: 'foo',
          className: 'heading',
          c: [text('H1!!!')],
        ),
        myWidget(),
        myOtherWidget(),
      ],
    );
  };

  setUp(() {
    tester = new DOMTester()..render(app);
  });

  tearDown(() => tester.close());
}

However, DOMTester exposes the following functionality for easy testing:

  • getElementById
  • querySelector
  • querySelectorAll
  • fire - Fire an event from an element
  • nextEvent - Listen for the next event of a specific type fired by an element

DOMTester methods deal with objects of the type DOMTesterElement, which has a property nativeElement that points to a package:html element. For complex functionality, feel free to use this provision.

void main() {
  test('getElementById', () {
      expect(tester.getElementById('foo'), h1Element);
    });
  
    test('getElementsByClassName', () {
      expect(tester.getElementsByClassName('heading'), contains(h1Element));
    });
  
    test('getElementsByTagName', () {
      expect(tester.getElementsByTagName('h1'), contains(h1Element));
    });
  
    test('querySelector', () {
      expect(h1Element?.nativeElement?.text, 'H1!!!');
    });
  
    test('querySelectorAll', () {
      expect(tester.querySelectorAll('.heading'), contains(h1Element));
    });
    
    test('fire', () {
      tester.fire(h1Element, 'the event', someData);
    });
    
    test('handle click', () async {
      var ev = await tester.nextEvent(h1Element, 'the event');
      expect(ev, isNotNull);
    });
}

Matchers

All of the below Matcher functions accept either concrete objects, or Matcher instances; therefore, they can be combined together.

Single-node

  • hasTagName - Matches a node's tag name
  • hasAttributes - Matches a node's attributes
  • hasChildren - Matches a node's children
  • hasClass - Matches a node's class attribute
  • hasClassString - Matches a node's class attribute, after transforming it to a String
  • hasClassList - Matches a node's class attribute, after transforming it to a List<String>
void main() {
  test('hasTagName', () {
    expect(br(), hasTagName('br'));
  });

  test('hasAttributes', () {
    expect(
      h('p', {'foo': 'bar', 'baz': 'quux'}),
      allOf(
        hasAttributes(containsPair('foo', 'bar')),
        isNot(hasAttributes(containsPair('foo', 'baz'))),
      ),
    );
  });

  test('hasChildren', () {
    expect(
      div(c: [br()]),
      allOf(
        hasChildren(anyElement(rendersTo('<br>'))),
        isNot(hasChildren(anyElement(rendersTo('<hr>')))),
      ),
    );
  });
  
  test('hasClassList', () {
    expect(
      h('a', {'class': 'b c'}),
      allOf(
        hasClassList(['b', 'c']),
        isNot(hasClassList(['d'])),
      ),
    );
  });
}

Two-node

  • rendersTo - Asserts that a node renders to a given HTML string or Matcher.
  • rendersEqualTo - Asserts that two nodes produce the same output.
void main() {
    test('rendersTo', () {
      expect(
        div(c: [br()]),
        allOf(
          rendersTo('<div><br></div>'),
          isNot(rendersTo('<dip><hr></dip>')),
        ),
      );
    });
  
    test('rendersEqualTo', () {
      expect(
        div(c: [br()]),
        allOf(
          rendersEqualTo(div(c: [br()])),
          rendersEqualTo(h('div', {}, [br()])),
          isNot(rendersEqualTo(p())),
        ),
      );
    });
}

example/main.dart

import 'package:html_builder/elements.dart';
import 'package:mariposa_test/mariposa_test.dart';
import 'package:test/test.dart';

void main() {
  test('hasTagName', () {
    expect(br(), hasTagName('br'));
  });

  test('hasAttributes', () {
    expect(
      h('p', {'foo': 'bar', 'baz': 'quux'}),
      allOf(
        hasAttributes(containsPair('foo', 'bar')),
        isNot(hasAttributes(containsPair('foo', 'baz'))),
      ),
    );
  });

  test('hasChildren', () {
    expect(
      div(c: [br()]),
      allOf(
        hasChildren(anyElement(rendersTo('<br>'))),
        isNot(hasChildren(anyElement(rendersTo('<hr>')))),
      ),
    );
  });
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  mariposa_test: "^1.0.0"

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter packages get

Alternatively, your editor might support pub get or flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


      import 'package:mariposa_test/mariposa_test.dart';
  
Version Uploaded Documentation Archive
1.0.0 Jun 25, 2018 Go to the documentation of mariposa_test 1.0.0 Download mariposa_test 1.0.0 archive

Analysis

We analyzed this package on Jul 13, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.63.0
  • pana: 0.11.3

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
6 / 100
Health:
Code health derived from static analysis. [more]
100 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80 / 100
Overall score:
Weighted score of the above. [more]
49
Learn more about scoring.

Platforms

Detected platforms: Flutter, web, other

No platform restriction found in primary library package:mariposa_test/mariposa_test.dart.

Suggestions

  • Maintain CHANGELOG.md.

    Changelog entries help clients to follow the progress in your code.

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 1 hint.

    Run dartfmt to format lib/mariposa_test.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev <3.0.0
html ^0.13.0 0.13.3+1
html_builder ^1.0.0 1.0.5
mariposa ^1.0.0 1.0.1
matcher ^0.12.0 0.12.3
tuple ^1.0.0 1.0.1
Transitive dependencies
args 1.4.3
charcode 1.1.2
collection 1.14.10
csslib 0.14.4
js 0.6.1
logging 0.11.3+1
path 1.6.1
quiver_hashcode 1.0.0
source_span 1.4.0
stack_trace 1.9.2
utf 0.9.0+4
Dev dependencies
test ^0.12.0
zen ^1.0.0 1.0.0