Search code examples
dartfunctional-testingdart-unittest

Access the DOM in Dart unit tests

I am trying to write a test for the Pirate Badge tutorial thats meant to get people started using Dart.

I have the following directory structure:

Project Structure of Pirate Badge with tests

The code in 6-piratebadge is an untouched version of what comes in the tutorial.

What I have added is the test package.

test/test.html contains:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
</head>
<body>

<script type="application/dart" src="test.dart"></script>
<script type="text/javascript" src="packages/unittest/test_controller.js"></script>
</body>
</html>

and test/test.dart contains:

import 'package:unittest/unittest.dart';
import 'package:unittest/html_config.dart';
import 'dart:html';
import '../6-piratebadge/piratebadge.dart' as app;

void main() {
  useHtmlConfiguration();
  app.main();
  var button = querySelector("#generateButton");
  test('button text', (){
    expect(button.text, equals('Aye! Gimme a name!'));
  });
}

I run the test like this, from the directory above web:

Content\ Shell web/test/test.html

And I get "Error: Script error." (I am deliberately not using --dump-render-tree so I can inspect the output in the console of the launched browser). The essence of it seems to be this message:

5500:1287:0827/110337:24546692395575:INFO:CONSOLE(0)] "Exception: The null object does not have a getter 'onInput'.

NoSuchMethodError: method not found: 'onInput'
Receiver: null
Arguments: []", source: file:///Users/mikehogan/projects/learning/one-hour-codelab-master/web/6-piratebadge/piratebadge.dart (0)

This is occurring on in these lines of the piratebadge.dart:

void  main() {
  InputElement inputField = querySelector('#inputName');
  inputField.onInput.listen(updateBadge);

So I guess the input with ID "inputName" is not being found.

Its is in piratebadge.html though:

  <div>
    <input type="text" id="inputName" maxlength="15" disabled>
  </div>

Any idea what I am doing wrong?

Solution

  • piratebadge.html is only a file in the same package but not related to your unit test in any way. '#inputName' wasn't found because the test.html file doesn't contain it.

    You can try attempts discussed in this question DART - exception in unit testing