Jest-preset-angular: snapshot tests have a lot of whitespace

[Haroenv]

Some trimming might happen here: https://github.com/thymikee/jest-preset-angular/blob/master/AngularSnapshotSerializer.js, not too sure where to start

[thymikee]

The whitespace comes mostly from Jest's HTMLSerializer not clearing it up. It used to, but after Mark's adjustments it was gone. There was probably some good reason for it, but I don't remember.
cc @pedrottimark

[pedrottimark]

Yes, in https://github.com/facebook/jest/pull/4275 the plugin stopped trimming because it can remove content:

• content space at the beginning of a text node
• content newline (for example, in pre or textarea elements)
• an empty text node (which I think was possible in earlier versions of React)

Now it does look messy if content has line breaks and indentation like this test file:
https://github.com/SimenB/pretty-format-crash/blob/master/something.html

Y’all can fill a gap in my knowledge: does Angular render “insignificant” space to DOM?

[thymikee]

@pedrottimark looks like this, that's why I initially went with just trimming it.

[ghost]

Hi, what is the situation with this? I have recently implemented this package for my angular application but i have noticed a lot of whitespace in between elements. In some cases there are 4 blank lines in between elements. I can see it's coming from the AngularSnapshotSerializer.js.

Maybe there is something I can do to fix this.

[pedrottimark]

@ewantavenerdemo Because I came to https://github.com/facebook/jest/tree/master/packages/pretty-format package from experience with React instead of Angular, some help is welcome.

When React renders to browser DOM or test environment, it does not add any extra space or newline between elements. Therefore the DOMElement plugin does not remove space or newline at the beginning of a line, because it is significant.

Does Angular render “pretty printing” newline and indentation space:

• to browser DOM? always? by default, but is there an option to omit?
• in test environment only? always? by default, but is there an option to omit?

[ghost]

Ok. I've been having a look at the AngularSnapshotSerializer.js and seeing if i can resolve the formatting issue.

The original content before 'print' is called has lots of '/n'. When you call print (is this pretty-format?) you need to pass some configurations. I've tried to do this locally however when I set the 'min: true' in the config it doesn't seem to do anything. If I do a replace outside it will remove the '/n's but your own formatting by the serializer doesn't work.

From what I understand, if you do print(html, { min: true }); it should remove the new lines from the source. However, this doesn't work.

Does anyone else understand this?

[ahnpnl]

You can find documentation of pretty-format here: https://github.com/facebook/jest/blob/master/packages/pretty-format/README.md

They say:
The 3 properties of config are min in options and:

spacing and edgeSpacing are newline if min is false
spacing is space and edgeSpacing is empty string if min is true

[ghost]

Yes, but why does min: true not make any difference. Also, the opts from the print function in the serializer and not passed to the print function (pretty-format). I can't see if there is an issue raised as it's part of jest and not a repo on it's own.

[seopei]

I solved this problem by setting 'preserveWhitespaces' to false.
At the moment this compiler option is true by default, but starting with Angular 6 this option will be false. So it is recommended to enable this feature in general.

preserveWhitespaces
This option tells the compiler whether to remove blank text nodes from compiled templates. This option is true by default.
Note: It is recommended to set this explicitly to false as it emits smaller template factory modules and might be set to false by default in the future.
[https://angular.io/guide/aot-compiler#preservewhitespaces]

In my component tests if have something like this:

beforeEach(() => {
    TestBed.configureCompiler({preserveWhitespaces: false} as any)
      .configureTestingModule({
        schemas: [NO_ERRORS_SCHEMA],
        declarations: [...],
        providers: [...],
        imports: [...]
      });
  });

[https://stackoverflow.com/questions/48671255/angular-set-preservewhitespace-in-karma-tests]

This will remove all annoying whitespace and blank lines.

[Hotell]

nice ! although it's private api of configureCompiler but works so far. thanks @seopei

[Hotell]

Also this could be included within setupJest.js WDYT @thymikee ? we can submit a PR

[ahnpnl]

Hi @Hotell, I think that would help a lot for basic setup of the preset

cc @thymikee

[ahnpnl]

@Hotell I wonder if the next release of Angular which will set preserveWhitespaces to false by default also applies to TestBed. If it does, we can wait for Angular without modifying here. anyways, it's only about ugly snapshots but nothing is broken. What do you think ?

[thymikee]

@Hotell Nah, I don't want this in setupFiles, unless it would live as a helper function to set up the TestBed. I guess that's rather specific to someone's suite. However, if someone could provide some helpers with examples on how to efficiently use them, that would be nice

[Hotell]

@AhnpGit yeah that's true

@thymikee yeah that's reasonable. I already did some helpers for setting up testbed so I can create PR with also added Typescript support. Lemme know if I should proceed 😎 Cheers! https://github.com/Hotell/react-tools-for-better-angular-apps/blob/example-app/src/modules/testing/configure.ts

[thymikee]

Hm, it also requires importing angular stuff which will slow down the tests for everybody (e.g. when testing just functions, not components/services). But I'd really like to have a guide on this!
Would you think something like docs/Setup.md makes sense? So this section would have it's own file: https://github.com/thymikee/jest-preset-angular#angular-testing-environment-setup for example

[Hotell]

exactly what I wanted to suggest haha + I can release it as npm package and not "complicating" this within this project. Will do the docs then . Thanks !