@angular-extensions/ pretty-html-log 页面存档备份,存于互联网档案馆

用Jest改进角元件测试的调试!

@angular-extension/pretty-html-log是一个模块,它用Jest的微风进行调试组件测试. 增加了一个 phl 用于打印 内侧HTML 页:1 ComponentFixture页:1 DebugElement页:1 NativeElement 或HTML字符串.

• 为什么你要使用这个模块
• 特征
• 开始
  • 安装
  • 使用量
    • 通过导入使用
    • 通过全球使用
• API 密码
• 实例
  • 在特定调试中通过
  • 实例
  • 打印角评语
  • 更改主题
• 进一步资源
  • 博客文章
  • 视频教程

为什么你要使用这个模块

当调试组件测试时,往往需要检查DOM. 最常见的做法是使用古老的 console.log 有一些缺点.

首先,总是打字很烦人

fixture.debugElement.nativeElement.innerHTML;

此外 console.log 语句不会非常容易读取地打印 HTML 。 因此,我们仍然需要将字符串复制到一个新的HTML文件并格式化,才能检查. 不是用这个 @angular-extensions/ pretty-html-log 页面存档备份,存于互联网档案馆来啊!

特征

• 规定 a phl 突出显示和漂亮打印a fixture, (中文(简体) ), debugElement, (中文(简体) ), nativeElement 甚至是简单的 HTML 字符串 - 您不必担心如何到达 HTML, 只需将您要打印的东西传递给 phl 方法.
• 如果你使用更漂亮的(你应该使用;);), pretty-html-log将选择 根据您更漂亮的配置, 将您更漂亮的配置上上并相当的打印 HTML 字符串 。 @ @ info

开始

安装

此模块只在开发期间使用,因此可以被安装为dev依赖.

npm i -D @angular-extensions/pretty-html-log

使用量

pretty-html-log可以用两种不同的方式使用. 第一个也是最 简单的方法就是简单地导入 phl 函数输入测试中.

通过导入使用

这个 @angular-extensions/pretty-html-log 软件包提供 phl 可以用来打印一个 fixture, (中文(简体) ), debugElement, (中文(简体) ), nativeElement 甚至是普通的 HTML 字符串。 只需在调试和打印HTML时导入它.

import { phl } from '@angular-extensions/pretty-html-log';

describe('my test suite', () => {
  it('should be green', () => {
    phl(fixture); // This will pretty print the fixture
    expect(myTable.getRows()).toBe(5);
  });
});

导入 phl 函数是直接的 。 然而,由于phl常被作为临时工具使用,因此在文件的顶部添加一个导入会很麻烦. 这很容易被遗忘,需要在事后进行人工清理.

如果我们能用一下 phl 函数不需要导入。 让我们来看看如何设置 phl 全球功能.

为了确保未使用的进口说明得到清理,我们应该配置我们的eslint来清理未使用的进口. 更多内容: https://www.npmjs.com/package/eslint-plugin-未使用-进口。 。 。 .

通过全球使用

来做 phl 全球可用、导入和运行下列方法: jest.setup.ts 文档.

import { setupPhl } from '@angular-extensions/pretty-html-log';

setupPhl();

API 密码

这个 phl 方法有下列签名:

<T>(
  ngHTMLElement: NgHTMLElement<T>,
  enableComments = false,
  theme = THEMES.DRACULA
)

实例

在特定调试中通过

在测试中您只需写出以下一行 .

phl(fixture.debugElement.query(By.css('mat-tab-body')));

这将打印以下字符串到您的控制台 。 取决于您的测试配置 可能会遇到一个问题 与控制台的补丁。 在这种情况下,它最好报告: 问题 并使用 logNgHTML 函数直接.

phl(fixture.debugElement.query(By.css('mat-tab-body')));

实例

记录固定器的内容内置HTML

phl(fixture);

调试元素(或多个调试元素)

phl(fixture.debugElement);

土著元素(或多个土著元素)

phl(fixture.debugElement.nativeElement);

甚至是简单的 HTML 字符串

phl('<h1>Foo</h1>');

打印角评语

Angular 为我们的HTML文件添加了一些注释. 通常,在调试我们的测试时,我们不需要它们. 因此,他们 未默认打印。 不过,有些情况下,你想要刊登这些评论。 要这样做,你 可以通过 true 作为额外的一面旗子 logNgHTML 方法.

phl(fixture, true);

更改主题

@angular-extensions/pretty-html-log 允许您打印不同主题的 html 日志. 目前,我们支持(DRACULA、VSCODE和材料)。 主题可以导入自 pretty-html-log,基础库 @angular-extensions/pretty-html-log 取决于.

import { THEMES } from 'pretty-html-log';

console.logNgHTML(fixture, false, THEMES.VSCODE);

进一步资源

博客文章

Jest 改进角部件测试的调试 是一个在 AngularIn Depth 上显示 @angular-extensions/pretty-html-log 在项目中使用和设置.

视频教程