mariposa_test 1.1.0

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 18

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())),
        ),
      );
    });
}

1.1.0

  • Depend on at least mariposa@1.1.0-alpha.
  • Rename DOMTester to DomTester, etc.

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.1.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub 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.1.0 Aug 30, 2018 Go to the documentation of mariposa_test 1.1.0 Download mariposa_test 1.1.0 archive
1.0.0 Jun 25, 2018 Go to the documentation of mariposa_test 1.0.0 Download mariposa_test 1.0.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
5
Health:
Code health derived from static analysis. [more]
13
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
60
Overall:
Weighted score of the above. [more]
18
Learn more about scoring.

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

  • Dart: 2.0.0
  • pana: 0.12.3

Platforms

Detected platforms: unsure

Low code quality prevents platform classification.

Issues and suggestions

Fix platform conflicts.

Low code quality prevents platform classification.

Fix lib/src/dom_tester.dart.

Analysis of lib/src/dom_tester.dart failed with 4 errors:

line 12 col 15: The name 'Text' is defined in the libraries 'dom.dart' and 'text.dart'.

line 13 col 30: The getter 'data' isn't defined for the class 'Node'.

line 155 col 21: The constructor returns type 'dynamic' that isn't of expected type 'Node'.

line 155 col 25: The name 'Text' is defined in the libraries 'dom.dart' and 'text.dart'.

Fix lib/src/matchers.dart.

Analysis of lib/src/matchers.dart failed with 3 errors:

line 108 col 29: The argument type '() → Node' can't be assigned to the parameter type 'Node'.

line 124 col 33: The argument type '() → Node' can't be assigned to the parameter type 'Node'.

line 125 col 33: The argument type '() → Node' can't be assigned to the parameter type 'Node'.

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.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev <3.0.0
angel_container ^1.0.0-alpha 1.0.0-alpha.9
html ^0.13.0 0.13.3+3
html_builder ^1.0.0 1.0.5
mariposa ^1.1.0-alpha 1.1.0-alpha.3
matcher ^0.12.0 0.12.4
tuple ^1.0.0 1.0.2
Transitive dependencies
args 1.5.0
charcode 1.1.2
collection 1.14.11
csslib 0.14.5
js 0.6.1+1
logging 0.11.3+2
meta 1.1.6
path 1.6.2
quiver 2.0.0+1
source_span 1.4.1
stack_trace 1.9.3
utf 0.9.0+5
Dev dependencies
test ^1.0.0
zen ^1.0.0 1.0.0