Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@angular-extensions/pretty-html-log
Advanced tools
Changelog
Readme
Improved debugging of Angular component tests with Jest!
The @angular-extension/pretty-html-log is a module that makes debugging component tests with Jest a breeze. It adds a
phl
method which pretty prints the innerHTML of aComponentFixture
, aDebugElement
, aNativeElement
or an HTML string.
When debugging component tests, it’s often necessary to inspect the DOM. The most common approach to do so is by using the good old console.log
which has some downsides.
First of all, it’s annoying to always type
fixture.debugElement.nativeElement.innerHTML;
Moreover, the console.log
statement doesn’t print the HTML in a very readable way. Therefore we still need to copy the string in a new HTML file and format it to be able to inspect it. Not with @angular-extensions/pretty-html-log!
phl
method that highlights and pretty prints a fixture
, debugElement
, nativeElement
or even a plain HTML string - you don't have to worry how to get to the HTML, just pass the thing you want to print to the phl
method.This module will only be used during development and can therefore be installed as a dev dependency.
npm i -D @angular-extensions/pretty-html-log
The @angular-extensions/pretty-html-log
package provides a phl
method that you can use to pretty print a fixture
, debugElement
, nativeElement
or even a plain HTML string. Simply import it while debugging and pretty print that 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);
});
});
Note that this way adds a import method. To make sure this import statement gets cleaned up we should configure our eslint to clean up unused imports. More: https://www.npmjs.com/package/eslint-plugin-unused-imports.
The phl
method has the following signature:
<T>(
ngHTMLElement: NgHTMLElement<T>,
enableComments = false,
theme = THEMES.DRACULA
)
Property | Description |
---|---|
ngHTMLElement | Value to extract the html from and pretty print it to the console: ComponentFixture |
enableComments (default: false) | When set to true we print the generated comments by Angular. For example: <!--bindings={"ng-reflect-ng-for-of":... |
theme: (default: DRACULA) | pretty-html-log themes (DRACULA, VSCODE and MATERIAL) |
In your test you can simply write the following line.
phl(fixture.debugElement.query(By.css('mat-tab-body')));
Which will print the following string to your console. Depending on your test configuration you
might run into an issue with the patch of the console. In such cases its best to report an issue and use the logNgHTML
function directly.
phl(fixture.debugElement.query(By.css('mat-tab-body')));
Log the content innerHTML of a fixture
phl(fixture);
of a debugElement (or multiple debugElements)
phl(fixture.debugElement);
of a nativeElement (or multiple nativeElements)
phl(fixture.debugElement.nativeElement);
or even a simple HTML string
phl('<h1>Foo</h1>');
Angular adds some comments to our HTML file. Usually, when debugging our tests, we don't need them. Therefore they
are not printed by default. However, there are cases where you want to print those comments. To do so, you
can pass true
as an additional flag tot he logNgHTML
method.
phl(fixture, true);
@angular-extensions/pretty-html-log
allows you to print the html logs in different themes.
Currently, we support (DRACULA, VSCODE and MATERIAL). The themes can be importet from pretty-html-log
, the base library @angular-extensions/pretty-html-log
depends on.
import { THEMES } from 'pretty-html-log';
console.logNgHTML(fixture, false, THEMES.VSCODE);
Improved debugging of Angular component tests in Jest is a write up on AngularInDepth that shows how @angular-extensions/pretty-html-log
is used and set up in a project.
FAQs
**Improved debugging of Angular component tests with Jest!**
The npm package @angular-extensions/pretty-html-log receives a total of 12,042 weekly downloads. As such, @angular-extensions/pretty-html-log popularity was classified as popular.
We found that @angular-extensions/pretty-html-log demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.