Question

我正在尝试测试自定义角度组件。我想检查组件类的状态。为此，有两个选择：

获取范围内的组件
使用网络组件xtag

问题：

我的范围总是空的 - 我在控制台中调试我使用karma在浏览器中运行测试。 xtag 会返回 HtmlElement 类，因此我无法访问我的属性（使用dart投射？）

代码：

library vader.panel_spec;
import '../_specs.dart';
import "package:vader/components/vader_component.dart";

  main(){
    describe('Tests for Panel UI',(){
      TestBed _;
      Scope _scope;
      Element ngAppElement;
      beforeEach(async(inject((TestBed tb, Scope scope, VmTurnZone zone, TemplateCache cache) {
        _ = tb;
        _scope = scope;
        addToTemplateCache(cache, 'packages/vader/components/panel.html');
        addToTemplateCache(cache, 'packages/vader/components/window/window.html');

      })));
      beforeEachModule((Module module) {
        ngAppElement = new DivElement()..attributes['ng-app'] = '';
        module
          ..install(new VaderComponentModule());
        module..bind(Node, toValue: ngAppElement);
        document.body.append(ngAppElement);
      });
      afterEach(() {
        ngAppElement.remove();
        ngAppElement = null;
      });
      compile(html) {
        ngAppElement.setInnerHtml(html, treeSanitizer: new NullTreeSanitizer());
        _.compile(ngAppElement);
        return ngAppElement.firstChild;
      }

      it("should collapse when clicked", async((){
        Element panel = compile("<v-panel>CollapsedItem</v-panel>");
        microLeap();
        _.rootScope.apply();
        Element contentPanel = panel.querySelector('.content-panel');
        expect(contentPanel.classes.contains('collapse'), isFalse);
        _.triggerEvent(panel.querySelector('#collapse-icon'), 'click');
        _.rootScope.apply();
        window.console.debug(_.rootScope.context);
        var comp = panel.xtag;
        expect(comp.doCollapse, isTrue);
      }));


    });

  }


library ng_specs;

import 'dart:html' hide Animation;

import 'package:angular/angular.dart';
import 'package:angular/mock/module.dart';

import 'package:guinness/guinness_html.dart' as gns;

export 'dart:html' hide Animation;
export 'package:unittest/unittest.dart' hide expect;
export 'package:guinness/guinness_html.dart';

export 'package:mock/mock.dart';
export 'package:di/di.dart';
export 'package:di/dynamic_injector.dart';
export 'package:angular/angular.dart';
export 'package:angular/application.dart';
export 'package:angular/introspection.dart';
export 'package:angular/core/annotation.dart';
export 'package:angular/core/registry.dart';
export 'package:angular/core/module_internal.dart';
export 'package:angular/core_dom/module_internal.dart';
export 'package:angular/core/parser/parser.dart';
export 'package:angular/core/parser/lexer.dart';
export 'package:angular/directive/module.dart';
export 'package:angular/formatter/module.dart';
export 'package:angular/routing/module.dart';
export 'package:angular/animate/module.dart';
export 'package:angular/mock/module.dart';
export 'package:perf_api/perf_api.dart';

es(String html) {
  var div = new DivElement();
  div.setInnerHtml(html, treeSanitizer: new NullTreeSanitizer());
  return new List.from(div.nodes);
}

e(String html) => es(html).first;


Expect expect(actual, [matcher]) {
  final expect = new Expect(actual);
  if (matcher != null) {
    expect.to(matcher);
  }
  return expect;
}

class Expect extends gns.Expect {
  Expect(actual) : super(actual);

  NotExpect get not => new NotExpect(actual);

  toBeValid() => _expect(actual.valid && !actual.invalid, true,
  reason: 'Form is not valid');

  toBePristine() => _expect(actual.pristine && !actual.dirty, true,
  reason: 'Form is dirty');

  get _expect => gns.guinness.matchers.expect;
}

class NotExpect extends gns.NotExpect {
  NotExpect(actual) : super(actual);

  toBeValid() => _expect(actual.valid && !actual.invalid, false,
  reason: 'Form is valid');

  toBePristine() => _expect(actual.pristine && !actual.dirty, false,
  reason: 'Form is pristine');

  get _expect => gns.guinness.matchers.expect;
}


_injectify(fn) {
  // The function does two things:
  // First: if the it() passed a function, we wrap it in
  //        the "sync" FunctionComposition.
  // Second: when we are calling the FunctionComposition,
  //         we inject "inject" into the middle of the
  //         composition.
  if (fn is! FunctionComposition) fn = sync(fn);
  return fn.outer(inject(fn.inner));
}

// Replace guinness syntax elements to inject dependencies.
beforeEachModule(fn) => gns.beforeEach(module(fn), priority:1);
beforeEach(fn) => gns.beforeEach(_injectify(fn));
afterEach(fn) => gns.afterEach(_injectify(fn));
it(name, fn) => gns.it(name, _injectify(fn));
iit(name, fn) => gns.iit(name, _injectify(fn));

_removeNgBinding(node) {
  if (node is Element) {
    node = node.clone(true) as Element;
    node.classes.remove('ng-binding');
    node.querySelectorAll(".ng-binding").forEach((Element e) {
      e.classes.remove('ng-binding');
    });
    return node;
  }
  return node;
}
/**
 * It adds an html template into the TemplateCache.
 */
void addToTemplateCache(TemplateCache cache, String path) {
  HttpRequest request = new HttpRequest();
  request.open("GET", path, async : false);
  request.send();
  cache.put(path, new HttpResponse(200, request.responseText));
}


main() {
  gns.beforeEach(setUpInjector, priority:3);
  gns.afterEach(tearDownInjector);

  gns.guinnessEnableHtmlMatchers();
  gns.guinness.matchers.config.preprocessHtml = _removeNgBinding;
}

Answer 1

使用ngInjector(panel).get(PanelComponent)或ngDirectives(panel)[0]。请参阅文档here。

角镖测试，范围是空的

1 个答案: