Allow demo component tests and update FormlyPresetModule.forTesting

[MaxKless]

DEPENDS ON #3256 !! -> merged

What is the current behavior? (You can also link to an open issue here)
Currently, formly provides great test tooling to make writing jest tests for custom formly components (types, wrappers, extensions) easier.
However, testing formly from the outside (so components in an angular app that use formly) is not considered a lot.

What is the new behavior (if this is a feature change)?
This PR updates the jest config so that it is possible to write tests for demo components, which are "outside" components from a formly perspective. This means that functionality regarding testing can be written and tested right inside formly.
It also introduces a test for the preset example, in which the new FormlyPresetModule.forTesting method is used.

I came to this idea because I had trouble writing clean unit tests in my app that uses formly. I ended up writing my own testing module to import in jest tests. When I built the preset module, I knew there was going to be some trouble with testing it but I had nowhere in the formly repo to fix and verify this problem. Now this is possible.

Please check if the PR fulfills these requirements

• The commit messages follow our guidelines: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format
• A unit test has been written for this change.
• Running npm run build produced a successful build. (Unit testing can be done by running npm test;)
• My code has been linted. (npm run lint to do this. npm run build will fail if there are files not linted.)

Please provide a screenshot of this feature before and after your code changes, if applicable.

Other information:

[netlify]

✅ Deploy Preview for formly-dev ready!

Name	Link
🔨 Latest commit	5919b1e
🔍 Latest deploy log	https://app.netlify.com/sites/formly-dev/deploys/6256c91dcb5b260008dfdedf
😎 Deploy Preview	https://deploy-preview-3271--formly-dev.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for formly-dev ready!

Name	Link
🔨 Latest commit	9c9551c
🔍 Latest deploy log	https://app.netlify.com/sites/formly-dev/deploys/62e287daba733b000a39373e
😎 Deploy Preview	https://deploy-preview-3271--formly-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[MaxKless]

Any thoughts on this, @aitboudad ?

[aitboudad]

instead of making it for testing purpose only, I'd prefer to provide a way to define presets through FormlyPresetModule . For naming we could use forRoot or withConfig.

[MaxKless]

instead of making it for testing purpose only, I'd prefer to provide a way to define presets through FormlyPresetModule . For naming we could use forRoot or withConfig.

Makes sense, but do you want to replace the current way using the FormlyModule or just add another way?

[aitboudad]

Makes sense, but do you want to replace the current way using the FormlyModule or just add another way?

For now just add another way, later we may deprecate the FormlyModule way.

[MaxKless]

Okay, I added a way to declare presets through the FormlyPresetModule.
The demo component test isn't really necessary anymore because it's now forRoot instead of forTesting.

I still think it could be useful though, so just let me know what you think, @aitboudad.

Also, is there anything I can do about the failing tests? I can't see the netflify logs so no idea what's going on there...

[aitboudad]

Also, is there anything I can do about the failing tests? I can't see the netflify logs so no idea what's going on there...

Not related to this issue but it should work now.

[aitboudad]

Could you please update the preset section as well https://github.com/ngx-formly/ngx-formly/blob/main/docs/formly-field-presets.md#defining-a-preset