chore: use vitest (with nx atomizer) for e2e tests and use pnpm catalogs (#2720)

Author: JamesHenry

.github/workflows/nx-migrate.yml

@@ -39,7 +39,7 @@ jobs:
       - name: Check if @nx/workspace was changed as part of the latest commit on the PR
         id: nrwl-workspace-package-check
         run: |
-          git diff HEAD~1 -G"@nx/workspace" --exit-code package.json && echo "@nx/workspace unchanged" || echo "::set-output name=was-changed::true"
+          git diff HEAD~1 -G"'?@nx/workspace'?:" --exit-code pnpm-workspace.yaml && echo "@nx/workspace unchanged" || echo "::set-output name=was-changed::true"
 
       - uses: pnpm/action-setup@v4
         if: ${{ steps.nrwl-workspace-package-check.outputs.was-changed == 'true' }}
@@ -66,11 +66,11 @@ jobs:
           # Checkout the PR branch using the github CLI
           gh pr checkout ${{ github.event.pull_request.number }}
 
-          # Get the version of Nx we are migrating to
-          NX_VERSION=$(node -e "console.log(require('./package.json').devDependencies['@nx/workspace'])")
+          # Get the version of Nx we are migrating to from the pnpm-workspace.yaml catalog
+          NX_VERSION=$(yq eval '.catalogs.default["@nx/workspace"] // .catalog["@nx/workspace"]' pnpm-workspace.yaml)
 
-          # Revert renovate's changes to package.json and pnpm-lock.yaml so that it is a clean migrate from the status quo
-          git checkout HEAD~1 -- package.json pnpm-lock.yaml
+          # Revert renovate's changes to pnpm-workspace.yaml and pnpm-lock.yaml so that it is a clean migrate from the status quo
+          git checkout HEAD~1 -- pnpm-workspace.yaml pnpm-lock.yaml
 
           # We need to expect lock file changes to be applicable
           pnpm install --ignore-scripts --frozen-lockfile=false

.github/workflows/update-e2e-snapshots-for-renovate.yml

@@ -43,8 +43,8 @@ jobs:
 
           for package in "${packages[@]}"
           do
-            # It's important we have the leading and trailing (escaped) " here so we know it is an exact match of the package name
-            git diff HEAD~1 -G"\"$package\"" --exit-code package.json && echo "$package unchanged" || echo "::set-output name=was-changed::true"
+            # Check for changes to the catalog definitions in pnpm-workspace.yaml
+            git diff HEAD~1 -G"'?$package'?:" --exit-code pnpm-workspace.yaml && echo "$package unchanged" || echo "::set-output name=was-changed::true"
           done
 
       - uses: pnpm/action-setup@v4
@@ -69,7 +69,11 @@ jobs:
           # Checkout the PR branch using the github CLI
           gh pr checkout ${{ github.event.pull_request.number }}
 
+          # Run install and dedupe
           pnpm install --ignore-scripts
+          pnpm dedupe
+
+          # Build all packages
           pnpm build
 
           # Update the e2e test snapshots

.github/workflows/update-formatting-for-renovate.yml

@@ -42,8 +42,8 @@ jobs:
 
           for package in "${packages[@]}"
           do
-            # It's important we have the leading and trailing (escaped) " here so we know it is an exact match of the package name
-            git diff HEAD~1 -G"\"$package\"" --exit-code package.json && echo "$package unchanged" || echo "::set-output name=was-changed::true"
+            # Check for changes to the catalog definitions in pnpm-workspace.yaml
+            git diff HEAD~1 -G"'?$package'?:" --exit-code pnpm-workspace.yaml && echo "$package unchanged" || echo "::set-output name=was-changed::true"
           done
 
       - uses: pnpm/action-setup@v4
@@ -70,7 +70,7 @@ jobs:
 
           pnpm install --ignore-scripts
 
-          # Reset any changes that happened before formatting (e.g. to the package.json and lock file) so that we don't commit them
+          # Reset any changes that happened before formatting (e.g. to the pnpm-workspace.yaml and lock file) so that we don't commit them
           git reset --hard
 
           # Update the formatting of all relevant files

.github/workflows/update-native-event-names-for-renovate.yml

@@ -43,8 +43,8 @@ jobs:
 
           for package in "${packages[@]}"
           do
-            # It's important we have the leading and trailing (escaped) " here so we know it is an exact match of the package name
-            git diff HEAD~1 -G"\"$package\"" --exit-code package.json && echo "$package unchanged" || echo "::set-output name=was-changed::true"
+            # Check for changes to the catalog definitions in pnpm-workspace.yaml
+            git diff HEAD~1 -G"'?$package'?:" --exit-code pnpm-workspace.yaml && echo "$package unchanged" || echo "::set-output name=was-changed::true"
           done
 
       - uses: pnpm/action-setup@v4
@@ -71,7 +71,7 @@ jobs:
 
           pnpm install --ignore-scripts
 
-          # Reset any changes that happened before updating the event names (e.g. to the package.json and lock file) so that we don't commit them
+          # Reset any changes that happened before updating the event names (e.g. to the pnpm-workspace.yaml and lock file) so that we don't commit them
           git reset --hard
 
           # Regenerate the file containing the event names

e2e/jest.config.ts

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`eslint-8--inline-template-fixer should generate the expected inline template fixer result 1`] = `
+exports[`eslint-8--inline-template-fixer > should generate the expected inline template fixer result 1`] = `
 "
 import { Component } from '@angular/core';
 
@@ -15,7 +15,7 @@ export class TestComponent {}
 "
 `;
 
-exports[`eslint-8--inline-template-fixer should generate the expected inline template fixer result 2`] = `
+exports[`eslint-8--inline-template-fixer > should generate the expected inline template fixer result 2`] = `
 {
   "@angular-eslint/builder": "0.0.0-e2e",
   "@angular-eslint/eslint-plugin": "0.0.0-e2e",

e2e/src/__snapshots__/eslint-8--inline-template-fixer.test.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`eslint-8--new-workspace-create-application-false-ng-add-then-project should pass linting when running ng-add before creating any projects 1`] = `
+exports[`eslint-8--new-workspace-create-application-false-ng-add-then-project > should pass linting when running ng-add before creating any projects 1`] = `
 {
   "@angular-eslint/builder": "0.0.0-e2e",
   "@angular-eslint/eslint-plugin": "0.0.0-e2e",
@@ -24,96 +24,96 @@ exports[`eslint-8--new-workspace-create-application-false-ng-add-then-project sh
 }
 `;
 
-exports[`eslint-8--new-workspace-create-application-false-ng-add-then-project should pass linting when running ng-add before creating any projects 2`] = `
+exports[`eslint-8--new-workspace-create-application-false-ng-add-then-project > should pass linting when running ng-add before creating any projects 2`] = `
 "{
-  \\"root\\": true,
-  \\"ignorePatterns\\": [
-    \\"projects/**/*\\"
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
   ],
-  \\"overrides\\": [
+  "overrides": [
     {
-      \\"files\\": [
-        \\"*.ts\\"
+      "files": [
+        "*.ts"
       ],
-      \\"extends\\": [
-        \\"eslint:recommended\\",
-        \\"plugin:@typescript-eslint/recommended\\",
-        \\"plugin:@angular-eslint/recommended\\",
-        \\"plugin:@angular-eslint/template/process-inline-templates\\"
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
       ],
-      \\"rules\\": {}
+      "rules": {}
     },
     {
-      \\"files\\": [
-        \\"*.html\\"
+      "files": [
+        "*.html"
       ],
-      \\"extends\\": [
-        \\"plugin:@angular-eslint/template/recommended\\",
-        \\"plugin:@angular-eslint/template/accessibility\\"
+      "extends": [
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility"
       ],
-      \\"rules\\": {}
+      "rules": {}
     }
   ]
 }
 "
 `;
 
-exports[`eslint-8--new-workspace-create-application-false-ng-add-then-project should pass linting when running ng-add before creating any projects 3`] = `
+exports[`eslint-8--new-workspace-create-application-false-ng-add-then-project > should pass linting when running ng-add before creating any projects 3`] = `
 "{
-  \\"extends\\": \\"../../.eslintrc.json\\",
-  \\"ignorePatterns\\": [
-    \\"!**/*\\"
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
   ],
-  \\"overrides\\": [
+  "overrides": [
     {
-      \\"files\\": [
-        \\"*.ts\\"
+      "files": [
+        "*.ts"
       ],
-      \\"rules\\": {
-        \\"@angular-eslint/directive-selector\\": [
-          \\"error\\",
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
           {
-            \\"type\\": \\"attribute\\",
-            \\"prefix\\": \\"app\\",
-            \\"style\\": \\"camelCase\\"
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
           }
         ],
-        \\"@angular-eslint/component-selector\\": [
-          \\"error\\",
+        "@angular-eslint/component-selector": [
+          "error",
           {
-            \\"type\\": \\"element\\",
-            \\"prefix\\": \\"app\\",
-            \\"style\\": \\"kebab-case\\"
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
           }
         ]
       }
     },
     {
-      \\"files\\": [
-        \\"*.html\\"
+      "files": [
+        "*.html"
       ],
-      \\"rules\\": {}
+      "rules": {}
     }
   ]
 }
 "
 `;
 
-exports[`eslint-8--new-workspace-create-application-false-ng-add-then-project should pass linting when running ng-add before creating any projects 4`] = `
-Object {
+exports[`eslint-8--new-workspace-create-application-false-ng-add-then-project > should pass linting when running ng-add before creating any projects 4`] = `
+{
   "builder": "@angular-eslint/builder:lint",
-  "options": Object {
-    "lintFilePatterns": Array [
+  "options": {
+    "lintFilePatterns": [
       "projects/app-project/**/*.ts",
       "projects/app-project/**/*.html",
     ],
   },
 }
 `;
 
-exports[`eslint-8--new-workspace-create-application-false-ng-add-then-project should pass linting when running ng-add before creating any projects 5`] = `
+exports[`eslint-8--new-workspace-create-application-false-ng-add-then-project > should pass linting when running ng-add before creating any projects 5`] = `
 "
-Linting \\"app-project\\"...
+Linting "app-project"...
 
 All files pass linting.
 "