Testing angular component

Issue

I want to write a unit test (test/src/rating/rating.html/dart) for my <rating> component (lib/rating/rating.dart/html).

void main() {
  useHtmlEnhancedConfiguration();

  ng.Scope _rootScope;
  dom.Element _element;
  ngMock.TestBed _tb;

  setUp(() {
    try {
    ngMock.setUpInjector();

      ngMock.module((ng.Module module) {
        module.install(new RatingModule());
      });

      ngMock.inject((ng.Scope scope, ngMock.TestBed testBed) {
        _rootScope = scope;
        _rootScope['rate'] = 3;
        _tb = testBed;
        _element = _tb.compile('<rating value="rate"></rating>', scope: _rootScope);
        _rootScope.$digest();

      });
      print('setUp done');
    } catch(e) {
      print(e);
    }
  });

The line _element = _tb.compile('<rating value="rate>... fails with

[Unexpected request: GET packages/bootstrap_angular/rating/rating.html

I changed the components templateUrl to template and assigned the template HTML as string and got rid of the exception.

Am I doing something wrong or is this not (yet) supported?

Solution

I created an issue in the Angular.dart GitHub repository.
With the response I got I figured this out which works but is rather verbose:

void main() {
  useHtmlEnhancedConfiguration();

  ng.Scope _rootScope;
  dom.Element _element;
  ngMock.TestBed _tb; 
  ngMock.MockHttpBackend _backend; // new

  setUp(() {
    Future f;
    try {
    ngMock.setUpInjector();

      ngMock.module((ng.Module module) {
        module.install(new RatingModule());
      });

      ngMock.inject((ng.Scope scope, ngMock.TestBed testBed) {
        _rootScope = scope;
        _rootScope['rate'] = 3;
        _tb = testBed;

        f = dom.HttpRequest.getString('/bootstrap_angular/packages/bootstrap_angular/rating/rating.html') // new
        .then((ratingTemplate) { // new
          _backend = new ngMock.MockHttpBackend(); // new
          print(ratingTemplate); // just debug output
          _backend.expect('GET').respond(ratingTemplate); // new

          _element = _tb.compile('<rating value="rate"></rating>', scope: _rootScope);
          var element =_element.shadowRoot.querySelector('i');
          _rootScope.$digest();
        });
      });
    } catch(e) {
      print(e);
    }
    return f; // new 
    // return a future to make the tests wait until setUp is done
    // found in this question 
    // How to wait for an asynchronous setup in a unit test, in Dart?
    // http://stackoverflow.com/questions/14994518
  });

Answered By – Günter Zöchbauer

Answer Checked By – Cary Denson (FlutterFixes Admin)