javascript - 从 javascript 生成 Angular 指令的 html 绑定(bind)模板

Question

我最近编写了几个单元测试，我想知道是否有一种方法可以使 html 字符串(绑定(bind)模板)吸引来自 javascript 函数的指令(或组件)。这是一个例子。

我有一些指令，我正在像这样测试它

function test($rootScope, $compile) {
    var scope = $rootScope.$new();
    var elem = $compile(angular.element(
        '<app-foo-bar attr1="val1" attr2="val2"></app-foo-bar>'
    ))(scope);
    scope.$apply();
}

声明元素字符串似乎有点尴尬，尤其是在有十几个属性的情况下。如果有一个函数可以像这样从对象生成 html 字符串，那么对于单元测试来说将非常方便。

genHtmlString('fooBar', {
    attr1: 'val1',
    attr2: 'val2'
});

输出当然是

<app-foo-bar attr1="val1" attr2="val2"></app-foo-bar>

这对我来说似乎是一个常见问题，但我找不到任何有助于编写此类函数的 Angular 、 karma 或 Jasmine 功能。

Answer 1

当然你可以做到这一点，该算法基本上会迭代对象属性并将其字符串化。

首先，您必须将元素驼峰名称转换为破折号。你可以使用下面的函数来做到这一点(我从 this gist 偷来的，嘘)。

function camelCaseToDash(myStr) {
  return myStr.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
}

然后您可以迭代对象上的每个属性并呈现 attrs，最后将其组合在 html 标记中。

以下代码片段实现了一个简单的解决方案，但错误处理非常差，并且仅处理属性，您可能想要实现内部内容和内容。

function camelCaseToDash(myStr) {
  return myStr.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
}

function genHtmlString(elmName, props) {

  props = props || {};

  var
    tagName = camelCaseToDash(elmName),
    htmlString = '<' + tagName;

  Object.keys(props).map(function(key) {
    htmlString += ' ' + (camelCaseToDash(key) + '="' + props[key] + '"');
  });

  return htmlString + '></' + tagName + '>';
}

var htmlString = genHtmlString('fooBar', {
  attr1: 'val1',
  attr2: 'val2',
  A: 'b',
  b: '',
  attrWithMultipleWords: 'HORAY!'
});

console.log(htmlString);