chore: update angular project

[jstnjs]

Hi,

I like the project and always wanted to try update a plain angular project. Feel free to decline :)

[kettanaito]

Hi, @jstnjs. Thanks for opening this!

Can you tell me more what these changes pursue?

[jstnjs]

Hi,

I just realised something is still going wrong in the editor. I'll post an update somewhere this week with an overview of the changes I did.

[jstnjs]

Hey @kettanaito

I took a stab at fixing the issue you pointed out in the file. There are some strange behaviors at play.

When you set up a clean Angular app and add Jest, everything works fine. But as soon as you add Cypress, the types in the editor start breaking (even though the tests run successfully). For instance, the editor throws this error:
Property 'toBeVisible' does not exist on type 'Assertion'.

To resolve this, I excluded cypress.config.ts from tsconfig.json, as suggested here.

That seemed to fix it... or so I thought. I created a custom CounterComponent to further test this, and whenever any kind of dependency injection is involved (via the inject function or a constructor), the types break again, causing test failures.

After inspecting the testing-library package code, I noticed they included jest.config.ts and jest.setup.ts in tsconfig.spec.json, which resolved these issues.

Another challenge: tests pass in the editor, but fail when running npm run test:integration. It seems they only succeed in the editor because they run one spec file at a time. When running multiple tests with test:integration, you get an error like this:

ReferenceError: Response is not defined
> 1 | import { http, graphql, HttpResponse } from 'msw'

It appears this is due to the unavailability of the fetch API in jsdom (related issues: #930, #7007, and #13834). As per the MSW documentation, I added the jest-fixed-jsdom package to help address this.

Summary of updates:

• Updated Angular to the latest builder with server-side rendering support.
• Moved Jest configuration to TypeScript and removed globalSetup (no longer needed).
• Updated code syntax to use Angular's new control flow (@if instead of *ngIf).
• Refactored to make code more declarative by leveraging Angular's async capabilities for observables.
• Switched to using the inject function for services, as recommended by Angular (they even have a migration guide for this).
• Aligned tsconfig files with a newly created Angular project’s configuration.
• Updated packages and removed @types/testing-library__jest-dom (now deprecated).

If you have any questions about specific details, let me know!

[jstnjs]

I'm writing a article on MSW with Angular and just noticed something. The service worker script was included in the production bundle. I changed the config to include the script only in development.