docs: add Angular CLI example

[LayZeeDK]

Summary/ Motivation (TLDR;)

Add an Angular CLI example to the repository.

Related issues

• Closes Add Angular #170

@nvh95 @ntt261298
Here's an example using Angular CLI with Jest via @angular-builders/jest.

[netlify]

✅ Deploy Preview for jest-preview-library canceled.

Name	Link
🔨 Latest commit	46756f9
🔍 Latest deploy log	https://app.netlify.com/sites/jest-preview-library/deploys/62fbf66b0f22790008901b0c

[nvh95]

Thank you @LayZeeDK very much for your wonderful PR. I hope that there are more Angular folks will use jest-preview to save their time after your PR.

I left some feedback. I can brief those:

• Rename current README to README-angular.md then add README.md to instruct integrating jest-preview to an Angular project.
• Update jest.config.js to
  • Better Intellisense
  • Add CSS processor
  • Add file processor
  • Only watch file in src (by adding roots)
• Add test watch mode to package.json
• Include "counter" when ng serve
• Can you add a sample of using CSS and Sass?
• Can you add an image using URL (beside base64)?
• import CSS file directly in src/test-setup.ts to support styling. jest-preview/transforms/css will handle it for you

Again. Thank you very much. Please let me know if you want to discuss anything regarding my feedback. Thanks.

[nvh95]

@LayZeeDK

I just read the raw global CSS stylesheet and append it to the document. I don't know how we would add Sass support although it is supported by Angular CLI.

I see, I left a comment in the feedback above. You can use CSS file transform, then import .css and .scss file directly. More at https://www.jest-preview.com/docs/getting-started/installation/#2-configure-jests-transform-to-transform-css-and-files

Additionally, it would be interesting to run Angular in development mode to enable Angular Developer Tools.

Sorry, I haven't got your point. (Please forgive me I haven't had a chance to use Angular in production yet)

I plan to add an Angular Testing Library example even though Angular's built-in TestBed API seems to work well.

That would be awesome. Currently, all existing examples are using @testing-library packages. But Jest Preview is framework agnostic, so it just needs a JSDOM environment. Thank you very much for this plan.

[LayZeeDK]

Additionally, it would be interesting to run Angular in development mode to enable Angular Developer Tools.

Sorry, I haven't got your point. (Please forgive me I haven't had a chance to use Angular in production yet)

Angular has two runtime modes:

• Production mode, used for deployed apps
• Development mode, used for local app development

The ng serve command Angular developers use to start a Webpack Development Server usually runs Angular in development mode which adds runtime checks that degrade performance and enables Angular Developer Tools to be used as a web extension.

I'm not sure how to instruct the @angular-builders/jest:run Angular CLI builder to start the application in development mode or whether this is something Jest Preview could support.

[nvh95]

Hi @LayZeeDK. Thank you for your updates. You resolved all the suggestions I made before. I ran the example and I think it's good for now.
Even though the styles are not fully processed. We can work around by #237 until jest-preview can support it natively.

Your PR looks good to me. Please mark the PR as ready, I will merge it right after this. I can do the workaround with styleUrls after merging this PR (You are welcome if you want to import those CSS files directly).

Again, thank you very much for your help.

[LayZeeDK]

@nvh95
I used the workaround to import component styles in tests and documented this in the example project's readme file.

[nvh95]

@LayZeeDK 🚀🚀
@all-contributors please add @LayZeeDK for example

[allcontributors]

@nvh95

I've put up a pull request to add @LayZeeDK! 🎉