feat: support Angular 19 with Cypress Component Testing #30675
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
AtofStryker
added
npm: @cypress/angular
cypress
|
||||||||||||||||||||||||||||||||||||||||
| Project |
cypress
|
| Branch Review |
feat/support_angular_19
|
| Run status |
|
| Run duration | 19m 35s |
| Commit |
|
| Committer | AtofStryker |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
5
|
Pending
|
1326
|
Skipped
|
0
|
Passing
|
29379
|
| View all changes introduced in this branch ↗︎ | |
UI Coverage
46.07%
|
|
|---|---|
|
Untested elements
|
187
|
|
Tested elements
|
164
|
Accessibility
92.55%
|
|
|---|---|
|
Failed rules
|
3 critical
8 serious
2 moderate
2 minor
|
|
Failed elements
|
892
|
AtofStryker
force-pushed
the
feat/support_angular_19
branch
from
e8781d0 to
5cf8490
Compare
AtofStryker
commented
Nov 26, 2024
| }).catch((e) => { | ||
| // If this promise does not settle in Angular 19 it is rejected | ||
| // https://github.com/angular/angular/blob/main/CHANGELOG.md#1900-2024-11-19 | ||
| // eslint-disable-next-line no-console |
There was a problem hiding this comment.
whenStable now rejects if it doesn't settle in Angular 19
we likely don't want to propagate this failure up and fail, just log it to the console. some users trigger stability manually for some difference use cases (see #30327)
AtofStryker
commented
Nov 26, 2024
| @Component({ selector: 'cy-wrapper-component', template: '' }) | ||
| // if using the Wrapper Component (template strings), the component itself cannot be | ||
| // a standalone component | ||
| @Component({ selector: 'cy-wrapper-component', template: '', standalone: false }) |
There was a problem hiding this comment.
since template strings require a references to the actual component in the test module, the component cannot be a standalone component
AtofStryker
commented
Nov 26, 2024
| @@ -25,7 +25,7 @@ const runCommandInProject = (command: string, projectPath: string) => { | |||
|
|
|||
| const cypressSchematicPackagePath = path.join(__dirname, '..') | |||
|
|
|||
| const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-17', 'angular-18'] | |||
| const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-18', 'angular-19'] | |||
There was a problem hiding this comment.
dropped 17 here for the schematic testing since it is time consuming and the schematic in 18 follows almost an identical pattern of that in 17
AtofStryker
commented
Nov 26, 2024
| @@ -0,0 +1,96 @@ | |||
| { | |||
| "$schema": "./node_modules/@angular/cli/lib/config/schema.json", | |||
There was a problem hiding this comment.
moved from project-fixtures/angular/angular.json
AtofStryker
commented
Nov 26, 2024
| @@ -104,6 +104,13 @@ describe(`Angular CLI versions`, () => { | |||
| browser: 'chrome', | |||
| expectedExitCode: 0, | |||
| }) | |||
|
|
|||
| systemTests.it('angular signals', { | |||
There was a problem hiding this comment.
I think I made a booboo when I merged #29621. I wrote the system test but didn't actually add the code to run it 🙈
AtofStryker
force-pushed
the
feat/support_angular_19
branch
from
5cf8490 to
438f978
Compare
cacieprins
approved these changes
Dec 2, 2024
AtofStryker
force-pushed
the
feat/support_angular_19
branch
from
438f978 to
0abd1d7
Compare
AtofStryker
force-pushed
the
feat/support_angular_19
branch
from
0abd1d7 to
7f453d7
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Additional details
Cypress 14 will support Angular 19 Component Testing OOTB, with autodetected framework, scaffolding, and setup
Steps to test
take the built binary and test this against a new angular 19 project with the angular cli with
ng new(or run the project tests).How has the user experience changed?
Cypress Component Testing users will now have angular 19 support built into scaffolding
The main difference with Angular 19 is that
standalonecomponents are the new default via settingstandalonetotrue, effectively making thengModulepattern obsolete. Angular 18 started scaffolding standalone components by default.To make our system tests backwards compatible , I have set the
standaloneoption in the component tests tofalsesince they use thengModulepattern since Angular 17.2-19 use the same project fixture directory. Thestandalonecomponent option has been around since Angular 14, so this is not an issue for our supported older versions.I also needed to move the
angular.jsonout of the angular project fixture and into theangular-17-angular-19directories since there are some slight differences in the json structure that are required to get thecypress-schematicto work correctly (buildTargetvsbrowserTargetPR Tasks
cypress-documentation? chore: update angular docs to include Angular 19 cypress-documentation#6018type definitions?