Question

我尝试为我的代码编写单元测试（使用 qunit ），以生成SVG路径作为字符串。其中一个测试应该是该东西是否真的是有效的SVG。

在Chrome浏览器控制台中，只需执行以下操作即可轻松进行测试：

$("<svg xmlns=\"http://www.w3.org/2000/svg\"><path d=\"asdsdsadas\" /></svg>")

这将失败并显示相应的错误消息：

错误：属性d =＆＃34; asdsdsadas＆＃34;
的值无效

但是，它也会返回无效文档，就像它可以正常一样。

当我在qunit中运行此代码时，错误将打印到浏览器控制台中，但单元测试仍然成功，因为它实际上并不是例外。我也没有成功抓住它。

我已尝试覆盖console.error，但显然此错误源于更深层次，并不关心JavaScript技巧。

有人知道如何正确识别此错误吗？

Answer 1

从字符串中捕获svg解析错误的常规方法是使用DOMParser()对象。

如果确实将无效字符串传递给parseFromString()方法，则DOMParser将返回错误文档。

var invalidMarkup = "<svg xmlns=\"http://www.w3.org/2000/svg\"><path d\"M0,0\" /></svg>";
var oParser = new DOMParser();
var doc = oParser.parseFromString(invalidMarkup, 'image/svg+xml');

var failed = doc.documentElement.nodeName.indexOf('parsererror')>-1;

if(failed){
  snippet.log('failed to load the doc : '+doc.documentElement.nodeName);
  }

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

但是你在问题中给出的标记是有效的svg + xml标记解析器不会抱怨它。

var yourMarkup = "<svg xmlns=\"http://www.w3.org/2000/svg\"><path d=\"asdsdsadas\" /></svg>";
var oParser = new DOMParser();
var doc = oParser.parseFromString(yourMarkup, 'image/svg+xml');

var failed = doc.documentElement.nodeName.indexOf('parsererror') > -1;

if (failed) {
  snippet.log('failed to load the doc : ' + doc.documentElement.nodeName);
} else {
  snippet.log('success');
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Chrome控制台告诉您的是，它无法绘制d的{{1}}属性中包含的整个细分。

Per specs，

路径数据中错误处理的一般规则是SVG用户代理应将“路径”元素呈现为（但不包括）路径包含路径数据规范中第一个错误的命令。

因此，在您的确切情况下，不会呈现任何内容，但也不会抛出任何错误。

以编程方式检测此类错误的唯一方法是获取<path>，并检查它是否与您在此属性中添加的细分数量相对应。

但IMO，你应该在生成它时直接测试你的值。

如何捕获SVG解析错误？

1 个答案: