Jest setup for angular projects. I have found using jest for unit tests is more performant and also has a great snapshoting feature for diffing components between commits.
You'll notice a few __snapshots__ directories along side specs. They are generated by Jest when you invoke expect(fixture).toMatchSnapshot(); within test definitions. These are text snapshots of the compiled dom for the component with any configuration it had at the point in time. This is handy, because we can create expectations given various scenarios that the dom should be a certain way. This allows developers to safely modify components, and see all the implications of their changes. Perhaps there is a deep edge case they didn't foresee in their change. When a developer runs their tests or commit, they will need to base all the snapshot tests, and update any that fail, potentially shining light on said deep edge case.
In terms of how you should write you functional tests, the angular team have some great documentation. Keep in mind the angular core team push the jasmine test framework. But the ideas are the same.
There is not much going on here other then a silly no purpose app thrown together using the angular-cli generated app.
Run npm run devfor a dev server. Should automatically navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Where here for jest though, so run npm run test:watch to run the all tests. Test rerun automatically if you change any of the sourcec files.
Generate a nice test coverage report with npm run test:coverage.
Run `npm run test:snapshot to log to the console a snapshot of current coverage. Might be handy for some continuous integration needs.
I'm not sure if there's a better way, but I manually delete any snapshots that need to be updated, then run the tests which generate new ones and the commit the changes for future tests.