feat: support Angular 16.1 #27030

leosvelperez · 2023-06-14T09:47:24Z

Closes Cypress 12.4.0 does not work with @angular-devkit/build-angular 16.1.0 #27049

Additional details

In Angular 16.1, some internal files' locations consumed by the Cypress Angular handler changed. This causes Cypress to error with:

Your configFile threw an error from: cypress.config.ts

We stopped running your tests because your config file crashed.

Error: Could not resolve "@angular-devkit/build-angular/src/webpack/configs/common.js". Do you have "@angular-devkit/build-angular" and "@angular-devkit/core" installed?
...

For reference, this is the commit in the Angular CLI where the change was made: angular/angular-cli@466d86d

Steps to test

How has the user experience changed?

PR Tasks

Have tests been added/updated?
Has a PR for user-facing changes been opened in cypress-documentation?
Have API changes been updated in the type definitions?

cypress-app-bot · 2023-06-14T09:47:47Z

Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.

cypress · 2023-06-14T10:38:04Z

2 failed and 29 flaky tests on run #47826 ↗︎

2	27217	1307	0	29

Details:

feat: support Angular 16.1
Project: cypress	Commit: `f9e281c1d1`
Status: Failed	Duration: 14:48 💡
Started: Jun 16, 2023 4:20 PM	Ended: Jun 16, 2023 4:35 PM

scaffold-project.cy.ts • 1 failed test • launchpad-e2e

View Output Video

Test		Artifacts
scaffolding new projects > generates valid config file for pristine project without cypress installed		`Output` `Screenshots` `Video`

commands/querying/querying.cy.js • 1 failed test • 5x-driver-webkit

View Output Video

Test		Artifacts
... > throws when alias property isnt just a digit		`Output` `Video`

commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-electron

View Output Video

Test		Artifacts
network stubbing > intercepting request > can delay and throttle a StaticResponse		`Output` `Video`

commands/waiting.cy.js • 1 flaky test • 5x-driver-electron

View Output Video

Test		Artifacts
... > errors > throws when waiting for 2nd response to route		`Output` `Video`

cypress/cypress.cy.js • 3 flaky tests • 5x-driver-electron

View Output Video

Test		Artifacts
... > correctly returns currentRetry		`Output` `Video`
... > correctly returns currentRetry		`Output` `Video`
... > correctly returns currentRetry		`Output` `Video`

commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-firefox

View Output Video

Test		Artifacts
network stubbing > intercepting request > can delay and throttle a StaticResponse		`Output`

e2e/origin/basic_login.cy.ts • 1 flaky test • 5x-driver-firefox

View Output Video

Test		Artifacts
basic login > visit primary first > does not redirect		`Output`

The first 5 flaky specs are shown, see all 16 specs in Cypress Cloud.

_{This comment has been generated by cypress-bot as a result of this
project's GitHub integration settings.}

npm/webpack-dev-server/src/helpers/angularHandler.ts

leosvelperez · 2023-06-15T14:31:24Z

@jordanpowell88 @lmiller1990 The pipeline didn't run and Circle CI is showing this notice in the workflow: The user who triggered the build may not have permission to a context being used. Visit our help article, [Troubleshooting Builds "Unauthorized" due to contexts](https://support.circleci.com/hc/en-us/articles/360050273651-Builds-Unauthorized-due-to-contexts).

Is there anything I should do to unblock this? Or is this something you can help me with?

lmiller1990 · 2023-06-15T22:56:57Z

Hi @leosvelperez, I think I need to kick off the pipeline, since you are an external contributor. I'll do that now, and give your code a review.

lmiller1990 · 2023-06-15T23:47:32Z

npm/webpack-dev-server/src/helpers/angularHandler.ts

@@ -195,6 +208,15 @@ export async function getAngularCliModules (projectRoot: string) {
  }
 }

+async function getInstalledPackageVersion (pkgName: string, projectRoot: string): Promise<string> {
+  const packageJsonPath = require.resolve(`${pkgName}/package.json`, { paths: [projectRoot] })


Just had to double check, but this looks fine - some packages do not expose package.json, but this one does: https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/core/package.json#L23

lmiller1990 · 2023-06-15T23:59:26Z

npm/webpack-dev-server/src/helpers/angularHandler.ts

@@ -165,10 +166,22 @@ export async function getTempDir (): Promise<string> {
 }

 export async function getAngularCliModules (projectRoot: string) {
+  let angularVersion: string


The code looks reasonable. I'd like to see an End to End testing verifying Angular 16.1 is working - can you add one here? https://github.com/cypress-io/cypress/blob/develop/npm/webpack-dev-server/cypress/e2e/angular.cy.ts#L5

Just follow the existing patterns, you can add a new Angular 16.1 project. Thanks!

I added the E2E project for Angular 16.1. It seems you'll need to kick off the pipeline again.

Doing this now.

leosvelperez · 2023-06-20T13:56:02Z

hey @lmiller1990! Thanks for the review!

Is there anything I can do to unblock this? I'm unsure if the failing checks are related to my change, but it doesn't look like it.

system-tests/test/component_testing_spec.ts

system-tests/projects/angular-16.1/src/app/components/signals.component.cy.ts

lmiller1990 · 2023-06-20T22:42:12Z

hey @lmiller1990! Thanks for the review!

Is there anything I can do to unblock this? I'm unsure if the failing checks are related to my change, but it doesn't look like it.

Looks good now. I'll get this one merged up for you.

It'll be in the next release, which will be in 2 weeks (we release every 2 weeks). That'll be early July.

lmiller1990 · 2023-06-21T08:11:20Z

Got some unrelated flake. Please give me another day, I'll get this green and merged up.

leosvelperez · 2023-06-21T10:36:51Z

@lmiller1990 thanks!

It'll be in the next release, which will be in 2 weeks (we release every 2 weeks). That'll be early July.

Is there any way this could be released earlier than that?

Releasing in 2 weeks means Angular projects (both with Angular CLI and NX) using Cypress component testing will be hit with this error. Given the Angular 16.1.0 release was over a week ago, that's a total of 3 weeks where folks can't update or can't create new Angular projects using Cypress component testing.

lmiller1990 · 2023-06-21T20:00:27Z

@lmiller1990 thanks!

It'll be in the next release, which will be in 2 weeks (we release every 2 weeks). That'll be early July.

Is there any way this could be released earlier than that?

Releasing in 2 weeks means Angular projects (both with Angular CLI and NX) using Cypress component testing will be hit with this error. Given the Angular 16.1.0 release was over a week ago, that's a total of 3 weeks where folks can't update or can't create new Angular projects using Cypress component testing.

I can surface this internally, we don't generally do off cycle releases for issues outside of major regressions - I cannot commit to this right now, since releasing a new version takes the best part of a day, but maybe we can make it happen. It definitely won't be until next week, though, at the earliest -- doing a release is a bit more involved (more than we'd probably like it to be).

Great to see the Angular community is so proactive with fixing/patching things to the latest version! Thank you for this, I'll try to get it merged (again) today.

lmiller1990 · 2023-06-21T21:36:02Z

I think your branch/container is cursed 👻

I remade it and it passed CI first time: #27106

Let's use that PR, it's ready to go - can you add yourself as a reviewer and approve @leosvelperez ?

lmiller1990 · 2023-06-21T21:37:30Z

Close in favor of #27106

All commits maintained, should be fine.

leosvelperez marked this pull request as ready for review June 14, 2023 10:07

leosvelperez marked this pull request as draft June 14, 2023 10:39

leosvelperez force-pushed the feat/angular-16.1-support branch from 6fe4440 to d9a15a7 Compare June 14, 2023 10:51

leosvelperez marked this pull request as ready for review June 14, 2023 10:53

nagash77 assigned mschile Jun 14, 2023

leosvelperez commented Jun 14, 2023

View reviewed changes

npm/webpack-dev-server/src/helpers/angularHandler.ts Outdated Show resolved Hide resolved

mschile requested a review from jordanpowell88 June 14, 2023 20:04

lmiller1990 self-requested a review June 14, 2023 23:27

leosvelperez force-pushed the feat/angular-16.1-support branch from d9a15a7 to 6c4d09a Compare June 15, 2023 08:38

blazekv mentioned this pull request Jun 15, 2023

Cypress 12.4.0 does not work with @angular-devkit/build-angular 16.1.0 #27049

Closed

lmiller1990 reviewed Jun 15, 2023

View reviewed changes

leosvelperez force-pushed the feat/angular-16.1-support branch from 6c4d09a to f9e281c Compare June 16, 2023 08:17

leosvelperez mentioned this pull request Jun 19, 2023

feat(angular): support angular v16.1 nrwl/nx#17155

Merged

leosvelperez force-pushed the feat/angular-16.1-support branch from f9e281c to 691b852 Compare June 19, 2023 15:42

lmiller1990 approved these changes Jun 19, 2023

View reviewed changes

jordanpowell88 approved these changes Jun 20, 2023

View reviewed changes

n4imLess reviewed Jun 20, 2023

View reviewed changes

system-tests/test/component_testing_spec.ts Outdated Show resolved Hide resolved

system-tests/projects/angular-16.1/src/app/components/signals.component.cy.ts Outdated Show resolved Hide resolved

NicolasCaous mentioned this pull request Jun 21, 2023

Angular component test is not triggering autoDetectChanges #26990

Closed

leosvelperez and others added 3 commits June 21, 2023 15:51

feat: support Angular 16.1

53e7fe5

chore: update changelog

0bdeb01

chore: update naming

392ae5f

jordanpowell88 force-pushed the feat/angular-16.1-support branch from 268d344 to 392ae5f Compare June 21, 2023 19:52

lmiller1990 closed this Jun 21, 2023

lmiller1990 mentioned this pull request Jun 21, 2023

feat: support Angular 16.1 #27106

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support Angular 16.1 #27030

feat: support Angular 16.1 #27030

leosvelperez commented Jun 14, 2023 •

edited

Loading

cypress-app-bot commented Jun 14, 2023

cypress bot commented Jun 14, 2023 •

edited

Loading

leosvelperez commented Jun 15, 2023

lmiller1990 commented Jun 15, 2023

lmiller1990 Jun 15, 2023

lmiller1990 Jun 15, 2023

leosvelperez Jun 16, 2023

lmiller1990 Jun 19, 2023

leosvelperez commented Jun 20, 2023

lmiller1990 commented Jun 20, 2023

lmiller1990 commented Jun 21, 2023

leosvelperez commented Jun 21, 2023

lmiller1990 commented Jun 21, 2023 •

edited

Loading

lmiller1990 commented Jun 21, 2023

lmiller1990 commented Jun 21, 2023

feat: support Angular 16.1 #27030

feat: support Angular 16.1 #27030

Conversation

leosvelperez commented Jun 14, 2023 • edited Loading

Additional details

Steps to test

How has the user experience changed?

PR Tasks

cypress-app-bot commented Jun 14, 2023

cypress bot commented Jun 14, 2023 • edited Loading

2 failed and 29 flaky tests on run #47826 ↗︎

leosvelperez commented Jun 15, 2023

lmiller1990 commented Jun 15, 2023

lmiller1990 Jun 15, 2023

Choose a reason for hiding this comment

lmiller1990 Jun 15, 2023

Choose a reason for hiding this comment

leosvelperez Jun 16, 2023

Choose a reason for hiding this comment

lmiller1990 Jun 19, 2023

Choose a reason for hiding this comment

leosvelperez commented Jun 20, 2023

lmiller1990 commented Jun 20, 2023

lmiller1990 commented Jun 21, 2023

leosvelperez commented Jun 21, 2023

lmiller1990 commented Jun 21, 2023 • edited Loading

lmiller1990 commented Jun 21, 2023

lmiller1990 commented Jun 21, 2023

leosvelperez commented Jun 14, 2023 •

edited

Loading

cypress bot commented Jun 14, 2023 •

edited

Loading

lmiller1990 commented Jun 21, 2023 •

edited

Loading