CODEWITHSUNDEEP
dartdart-polymerdart-unittest
Stephen__T
Stephen__T

Reputation: 2032

The built-in library 'dart:html' is not available on the stand-alone VM

I'd like to be able to unit test my custom polymer elements.

Given a component in lib/web_components:

class Foo extends PolymerElement {
  Foo.created() : super.created();
}

and a test in test/web_components:

main() {
  test("Should Be a PolymerElement", (){
    Foo undertest = new Foo.created();

    expect(undertest, new isInstanceOf<PolymerElement>());
  });
}

Running the test results in the error mentioned in the title. How can I avoid this error?

Edit:

So I've tried adding @TestOn('content-shell') at the top of my client side test files, and adding @TestOn('vm') to the server side tests.

In Grinder I have:

@Task('Test')
test() {
  new PubApp.local('test').run([]);
  new PubApp.local('test').run(["-p", "content-shell"]);
}

The server-side tests run fine but the client-side tests throw the following error:

pub run test -p content-shell test/web_component/foo_test.dart
  "Failed to start content shell: No such file or directory"

Edit 2:

I've tried running in the dartium platform with the following command since content-shell doesn't seem to work:

pub run test:test -p dartium test/web_component/foo_test.dart

The result is:

Failed to load "test/web_component/foo_test.dart": type 'test.backend.declarer.Declarer' is not a subtype of type 'test.backend.declarer.Declarer' of 'function result'.
  packages/test/test.dart 44:32                          _declarer
  packages/test/test.dart 108:5                          test
  foo_test.dart 9:3                     main
  package:test                                           IframeListener.start
  foo_test.dart.browser_test.dart 6:18  main

Upvotes: 1

Views: 2259

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657268

You need to create an html page for the test and run the test in the browser. The new test package has a decent readme explaining how to do that. (I have an issue that browser tests time out often. This is a known issue and will probably be fixed soon.)

Update See Instantiating polymer element via dart code, Dynamically create polymer element for how to create a Polymer element dynamically.

Instead of main() use

@whenPolymerReady
init() {

@TestOn('content-shell') is ok but it's better to use @TestOn('browser') and then specify the concrete browser using the -p argument (-pchrome, -pdartium, -pfirefox, -pcontent-shell, ... see test README for a list of supported browsers). You can pass more than one -p at a time to run the tests at more than one browser.

You can also use a custom HTML page for the test

<!doctype html>
<!-- custom_html_test.html -->
<html>
  <head>
    <title>browser/polymer test</title>
    <link rel="import" href="app_element.html">
    <link rel="import" href="child_element.html">
    <link rel="x-dart-test" href="html_test.dart">
    <script src="packages/test/dart.js"></script>
  </head>
  <body>
    <div id="granny">
      <div>
        <div id="parent">
          <div>
            <div id="child">child</div>
          </div>
        </div>
      </div>
    </div>
    <app-element id="polymer-parent" unresolved>
      <child-element id="polymer-child"></child-element>
    </app-element>
  </body>
</html>

where the file names needs to be the same as the Dart test file except .html as file extension and <link rel="x-dart-test" href="html_test.dart"> refers to your Dart test file. app-element, child-element are Polymer elements I used in my test (like your Foo)

Another update I assume you need to use a custom HTML file (not tried without yet) for Polymer tests because otherwise there is no way to register an entry point for the transformer. And then add the html file as entry point to the Polymer transformer section in pubspec.yaml

Upvotes: 3

Related Questions