CODEWITHSUNDEEP
javascriptunit-testingdart
Yuri P.
Yuri P.

Reputation: 369

DART - exception in unit testing

I wrote a simple code to demonstrate my problem with the unit-testing. I have prog.html and prog.dart as a program that has to be tested. It works Ok. In the same folder I have test,html and test,dart that represent a unit test. Here is the code:

prog.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prog</title>
    <link rel="stylesheet" href="prog.css">
  </head>
  <body>
    <h1>Test</h1>
    <div id="myDiv">
     Now you see me
    </div>
    <script type="application/dart" src="prog.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

prog.dart

import 'dart:html';

var myDiv;
void main() {
  myDiv=querySelector("#myDiv")
  ..text="Now you don't";
}

test.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="import" href="prog.html">
    <script type="application/dart" src="test.dart"></script>
    <script src="packages/browser/dart.js"></script>
    </head>
</html>

test.dart:

import 'dart:html';
import 'package:unittest/unittest.dart';
import 'package:unittest/html_config.dart';
import 'prog.dart' as prog;


main(){
  useHtmlConfiguration();
  prog.main();
  test('test 1', (){
    expect(prog.myDiv, hasLength(greaterThan(0)), reason:"Zero length");
  });
}

I include prog.html into test.html using 

<link rel="import" href="prog.html">

However, when I run test.html in Dartium, I am getting

Breaking on exception: The null object does not have a setter 'text='.

in

  ..text="Now you don't";

It seems that prog.dart does not see prog.html, so myDiv is null.

All the files are in the same root level (web).

What am I doing wrong?

Edited based on Günter's suggestions:

I modified the HTML file to build the DOM before running the DART code. But somehow DART script runs before the DIV is appended to BODY (I do not see any debug alert messages) and I am still getting null when accessing ..text:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="import" href="prog.html">
    <script>
    function getProg (){
      var content = document.querySelector('link[rel="import"]').import;
      var newBody = content.body;
      alert('getting div');
      var myDiv = content.getElementById("myDiv"); 
      alert(myDiv);
      document.body.appendChild(myDiv.cloneNode(true));
    }
    </script>

    </head>

    <body onload="getProg();">
    <!-- 
    <body>
         <div id="myDiv">
            Now you see me
         </div>
    -->

    </body>
    <script type="application/dart" src="test.dart"></script>
    <script src="packages/browser/dart.js"></script>
</html>

With actual DIV in the body uncommented everything runs normally.

Edit:

Here is the code that works:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="import" href="prog.html">
    <script>
    function getProg (){
      var content = document.querySelector('link[rel="import"]').import;
      var newBody = content.body;
      document.body.innerHTML = newBody.innerHTML;
      var script1 = document.createElement('script');
      script1.type = 'application/dart';
      script1.src = 'test.dart';
      document.body.appendChild(script1);
      var script2 = document.createElement('script');
      script2.src = 'packages/browser/dart.js';
      document.body.appendChild(script2);
    }
    </script>
  </head>
  <body onload="getProg();"></body>
</html>

Upvotes: 2

Views: 365

Answers (1)

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

Reputation: 657218

Importing an html file doesn't mean that its content is included in the page with the import tag.

http://www.html5rocks.com/en/tutorials/webcomponents/imports/ (see Using the content).

There are several way you can access the content (for example using a script).

EDIT

I don't think this is the right attempt for web app testing.

  • I suggest either something like https://pub.dartlang.org/packages/webdriver
  • or you could embed your application into a Polymer element which you can use in your test.html file.
  • When you build your application of smaller Polymer elements you can test these smaller parts which may also be reusable. For testing the whole application use something like WebDriver (see first item).

There might be better technologies out there for testing web apps, but I didn't use any of them myself yet.
I use Polymer elements which are easy (easier) to test or Angular which has it's own testing story (also with Dart unit tests, but it is was designed to be testable from the beginning).

Upvotes: 1

Related Questions