Skip to content

Commit

Permalink
feat: add support for angular 17 (#28152)
Browse files Browse the repository at this point in the history 
* feat(webpack-dev-server): add support for angular 17

* update changelog

* fix broken spec pattern

* update to rc 2 for cli

* remove = from dependency minVersion lists

* update angular 17 rc version and update dep test

* add projectDirFolder to fixtures for angular-17

* resolve broken system tests

* update ct project dir angular version
  • Loading branch information
@jordanpowell88
jordanpowell88 authored Nov 7, 2023
1 parent 9f19f9a commit e8fc268
Show file tree
Hide file tree
Showing 16 changed files with 3,813 additions and 3,256 deletions.
4 changes: 4 additions & 0 deletions cli/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@

_Released 11/7/2023 (PENDING)_

**Features:**

- Adds Component Testing support for Angular version 17. Addresses [#28153](https://github.com/cypress-io/cypress/issues/28153).

**Bugfixes:**

- Fixed an issue where clicking a link to download a file could cause a page load timeout when the download attribute was missing. Note: download behaviors in experimental Webkit are still an issue. Fixes [#14857](https://github.com/cypress-io/cypress/issues/14857).
Expand Down
43 changes: 35 additions & 8 deletions npm/webpack-dev-server/cypress/e2e/angular.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@
/// <reference path="../support/e2e.ts" />
import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'

const WEBPACK_ANGULAR: ProjectFixtureDir[] = ['angular-13', 'angular-14', 'angular-15', 'angular-16', 'angular-16.1']
const WEBPACK_ANGULAR: ProjectFixtureDir[] = [
'angular-13',
'angular-14',
'angular-15',
'angular-16',
'angular-17',
]

// Add to this list to focus on a particular permutation
const ONLY_PROJECTS: ProjectFixtureDir[] = []
Expand Down Expand Up @@ -46,7 +52,9 @@ for (const project of WEBPACK_ANGULAR) {
cy.contains('app.component.cy.ts').click()
cy.waitForSpecToFinish({ passCount: 1 }, 60000)

cy.get('li.command').first().within(() => {
cy.get('li.command')
.first()
.within(() => {
cy.get('.command-method').should('contain', 'mount')
cy.get('.command-message').should('contain', 'AppComponent')
})
Expand All @@ -60,7 +68,11 @@ for (const project of WEBPACK_ANGULAR) {
cy.withCtx(async (ctx) => {
await ctx.actions.file.writeFileInProject(
ctx.path.join('src', 'app', 'app.component.html'),
(await ctx.file.readFileInProject(ctx.path.join('src', 'app', 'app.component.html'))).replace('Hello World', 'Hello Cypress'),
(
await ctx.file.readFileInProject(
ctx.path.join('src', 'app', 'app.component.html'),
)
).replace('Hello World', 'Hello Cypress'),
)
})

Expand All @@ -69,7 +81,11 @@ for (const project of WEBPACK_ANGULAR) {
cy.withCtx(async (ctx) => {
await ctx.actions.file.writeFileInProject(
ctx.path.join('src', 'app', 'app.component.html'),
(await ctx.file.readFileInProject(ctx.path.join('src', 'app', 'app.component.html'))).replace('Hello Cypress', 'Hello World'),
(
await ctx.file.readFileInProject(
ctx.path.join('src', 'app', 'app.component.html'),
)
).replace('Hello Cypress', 'Hello World'),
)
})

Expand All @@ -84,17 +100,26 @@ for (const project of WEBPACK_ANGULAR) {

// Create compilation error
cy.withCtx(async (ctx) => {
const componentFilePath = ctx.path.join('src', 'app', 'app.component.ts')
const componentFilePath = ctx.path.join(
'src',
'app',
'app.component.ts',
)

await ctx.actions.file.writeFileInProject(
componentFilePath,
(await ctx.file.readFileInProject(componentFilePath)).replace('class', 'classaaaaa'),
(
await ctx.file.readFileInProject(componentFilePath)
).replace('class', 'classaaaaa'),
)
})

// The test should fail and the stack trace should appear in the command log
cy.waitForSpecToFinish({ failCount: 1 }, 60000)
cy.contains('The following error originated from your test code, not from Cypress.').should('exist')
cy.contains(
'The following error originated from your test code, not from Cypress.',
).should('exist')

cy.get('.test-err-code-frame').should('be.visible')
})

Expand All @@ -105,7 +130,9 @@ for (const project of WEBPACK_ANGULAR) {
cy.withCtx(async (ctx) => {
await ctx.actions.file.writeFileInProject(
ctx.path.join('src', 'app', 'new.component.cy.ts'),
await ctx.file.readFileInProject(ctx.path.join('src', 'app', 'app.component.cy.ts')),
await ctx.file.readFileInProject(
ctx.path.join('src', 'app', 'app.component.cy.ts'),
),
)
})

Expand Down
8 changes: 4 additions & 4 deletions packages/launchpad/cypress/e2e/config-warning.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,9 +216,9 @@ describe('component testing dependency warnings', () => {
cy.get('[data-cy-testingtype="component"]').click()
cy.get('[data-cy="warning-alert"]', { timeout: 12000 }).should('exist')
.should('contain.text', 'Warning: Component Testing Mismatched Dependencies')
.should('contain.text', 'vite. Expected ^=2.0.0 || ^=3.0.0 || ^=4.0.0, found 2.0.0-beta.70')
.should('contain.text', 'react. Expected ^=16.0.0 || ^=17.0.0 || ^=18.0.0, found 15.6.2.')
.should('contain.text', 'react-dom. Expected ^=16.0.0 || ^=17.0.0 || ^=18.0.0 but dependency was not found.')
.should('contain.text', 'vite. Expected ^2.0.0 || ^3.0.0 || ^4.0.0, found 2.0.0-beta.70')
.should('contain.text', 'react. Expected ^16.0.0 || ^17.0.0 || ^18.0.0, found 15.6.2.')
.should('contain.text', 'react-dom. Expected ^16.0.0 || ^17.0.0 || ^18.0.0 but dependency was not found.')

cy.get('.warning-markdown').find('li').should('have.length', 3)
})
Expand All @@ -235,7 +235,7 @@ describe('component testing dependency warnings', () => {
cy.get('[data-cy-testingtype="component"]', { timeout: 12000 }).click()
cy.get('[data-cy="warning-alert"]', { timeout: 12000 }).should('exist')
.should('contain.text', 'Warning: Component Testing Mismatched Dependencies')
.should('contain.text', '@vue/cli-service. Expected ^=4.0.0 || ^=5.0.0, found 3.12.1.')
.should('contain.text', '@vue/cli-service. Expected ^4.0.0 || ^5.0.0, found 3.12.1.')
.should('contain.text', 'vue. Expected ^3.0.0, found 2.7.8.')

cy.get('.warning-markdown').find('li').should('have.length', 2)
Expand Down
26 changes: 13 additions & 13 deletions packages/scaffold-config/src/dependencies.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const WIZARD_DEPENDENCY_WEBPACK = {
package: 'webpack',
installer: 'webpack',
description: 'Webpack is a module bundler',
minVersion: '^=4.0.0 || ^=5.0.0',
minVersion: '^4.0.0 || ^5.0.0',
} as const

export const WIZARD_DEPENDENCY_VUE_2 = {
Expand All @@ -31,7 +31,7 @@ export const WIZARD_DEPENDENCY_REACT = {
package: 'react',
installer: 'react',
description: 'A JavaScript library for building user interfaces',
minVersion: '^=16.0.0 || ^=17.0.0 || ^=18.0.0',
minVersion: '^16.0.0 || ^17.0.0 || ^18.0.0',
} as const

export const WIZARD_DEPENDENCY_REACT_DOM = {
Expand All @@ -40,7 +40,7 @@ export const WIZARD_DEPENDENCY_REACT_DOM = {
package: 'react-dom',
installer: 'react-dom',
description: 'This package serves as the entry point to the DOM and server renderers for React',
minVersion: '^=16.0.0 || ^=17.0.0 || ^=18.0.0',
minVersion: '^16.0.0 || ^17.0.0 || ^18.0.0',
} as const

export const WIZARD_DEPENDENCY_TYPESCRIPT = {
Expand All @@ -49,7 +49,7 @@ export const WIZARD_DEPENDENCY_TYPESCRIPT = {
package: 'typescript',
installer: 'typescript',
description: 'TypeScript is a language for application-scale JavaScript',
minVersion: '^=3.4.0 || ^=4.0.0 || ^=5.0.0',
minVersion: '^3.4.0 || ^4.0.0 || ^5.0.0',
} as const

export const WIZARD_DEPENDENCY_REACT_SCRIPTS = {
Expand All @@ -58,7 +58,7 @@ export const WIZARD_DEPENDENCY_REACT_SCRIPTS = {
package: 'react-scripts',
installer: 'react-scripts',
description: 'Create React apps with no build configuration',
minVersion: '^=4.0.0 || ^=5.0.0',
minVersion: '^4.0.0 || ^5.0.0',
} as const

export const WIZARD_DEPENDENCY_VUE_CLI_SERVICE = {
Expand All @@ -67,7 +67,7 @@ export const WIZARD_DEPENDENCY_VUE_CLI_SERVICE = {
package: '@vue/cli-service',
installer: '@vue/cli-service',
description: 'Standard Tooling for Vue.js Development',
minVersion: '^=4.0.0 || ^=5.0.0',
minVersion: '^4.0.0 || ^5.0.0',
} as const

export const WIZARD_DEPENDENCY_VITE = {
Expand All @@ -76,7 +76,7 @@ export const WIZARD_DEPENDENCY_VITE = {
package: 'vite',
installer: 'vite',
description: 'Vite is dev server that serves your source files over native ES modules',
minVersion: '^=2.0.0 || ^=3.0.0 || ^=4.0.0',
minVersion: '^2.0.0 || ^3.0.0 || ^4.0.0',
} as const

export const WIZARD_DEPENDENCY_NUXT = {
Expand All @@ -94,7 +94,7 @@ export const WIZARD_DEPENDENCY_NEXT = {
package: 'next',
installer: 'next',
description: 'The React Framework for Production',
minVersion: '^=10.0.0 || ^=11.0.0 || ^=12.0.0 || ^=13.0.0',
minVersion: '^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0',
} as const

export const WIZARD_DEPENDENCY_ANGULAR_CLI = {
Expand All @@ -103,7 +103,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_CLI = {
package: '@angular/cli',
installer: '@angular/cli',
description: 'CLI tool that you use to initialize, develop, scaffold, and maintain Angular applications.',
minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0 || ^=16.0.0',
minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0',
} as const

export const WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR = {
Expand All @@ -112,7 +112,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR = {
package: '@angular-devkit/build-angular',
installer: '@angular-devkit/build-angular',
description: 'Angular Webpack build facade',
minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0 || ^=16.0.0',
minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0',
} as const

export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
Expand All @@ -121,7 +121,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
package: '@angular/core',
installer: '@angular/core',
description: 'The core of the Angular framework',
minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0 || ^=16.0.0',
minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0',
} as const

export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
Expand All @@ -130,7 +130,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
package: '@angular/common',
installer: '@angular/common',
description: 'Commonly needed Angular directives and services',
minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0 || ^=16.0.0',
minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0',
} as const

export const WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC = {
Expand All @@ -139,7 +139,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC = {
package: '@angular/platform-browser-dynamic',
installer: '@angular/platform-browser-dynamic',
description: 'Library for using Angular in a web browser with JIT compilation',
minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0 || ^=16.0.0',
minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0',
} as const

export const WIZARD_DEPENDENCY_SVELTE: Cypress.CypressComponentDependency = {
Expand Down
2 changes: 1 addition & 1 deletion system-tests/project-fixtures/angular/cypress.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default defineConfig({
'@angular/platform-browser': require.resolve('@angular/platform-browser'),
'@angular/platform-browser-dynamic/testing': require.resolve('@angular/platform-browser-dynamic/testing'),
'@angular/platform-browser-dynamic': require.resolve('@angular/platform-browser-dynamic'),
'zone.js/testing': require.resolve('zone.js/dist/zone-testing'),
'zone.js/testing': require.resolve('zone.js/testing'),
'zone.js': require.resolve('zone.js'),
},
},
Expand Down
0 ...rc/app/components/signals.component.cy.ts → ...rc/app/components/signals.component.cy.ts
View file
File renamed without changes.
0 ...1/src/app/components/signals.component.ts → ...r/src/app/components/signals.component.ts
View file
File renamed without changes.
39 changes: 0 additions & 39 deletions system-tests/projects/angular-16.1/package.json
View file

This file was deleted.

24 changes: 12 additions & 12 deletions system-tests/projects/angular-16/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "angular-16",
"name": "angular-16.1",
"version": "0.0.0",
"private": true,
"scripts": {
Expand All @@ -10,22 +10,22 @@
"test": "ng test"
},
"dependencies": {
"@angular/animations": "^16.0.0-next.5",
"@angular/common": "^16.0.0-next.5",
"@angular/compiler": "^16.0.0-next.5",
"@angular/core": "^16.0.0-next.5",
"@angular/forms": "^16.0.0-next.5",
"@angular/platform-browser": "^16.0.0-next.5",
"@angular/platform-browser-dynamic": "^16.0.0-next.5",
"@angular/router": "^16.0.0-next.5",
"@angular/animations": "^16.1.0",
"@angular/common": "^16.1.0",
"@angular/compiler": "^16.1.0",
"@angular/core": "^16.1.0",
"@angular/forms": "^16.1.0",
"@angular/platform-browser": "^16.1.0",
"@angular/platform-browser-dynamic": "^16.1.0",
"@angular/router": "^16.1.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.0.0-next.6",
"@angular/cli": "~16.0.0-next.6",
"@angular/compiler-cli": "^16.0.0-next.5",
"@angular-devkit/build-angular": "^16.1.0",
"@angular/cli": "~16.1.0",
"@angular/compiler-cli": "^16.1.0",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
Expand Down
14 changes: 0 additions & 14 deletions system-tests/projects/angular-16/src/app/components/signals.component.cy.ts
View file

This file was deleted.

14 changes: 0 additions & 14 deletions system-tests/projects/angular-16/src/app/components/signals.component.ts
View file

This file was deleted.

Loading

5 comments on commit e8fc268

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on e8fc268 Nov 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux arm64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.5.0/linux-arm64/develop-e8fc26895354366211ace7e6550fe38c348c28bd/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on e8fc268 Nov 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the darwin x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.5.0/darwin-x64/develop-e8fc26895354366211ace7e6550fe38c348c28bd/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on e8fc268 Nov 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.5.0/linux-x64/develop-e8fc26895354366211ace7e6550fe38c348c28bd/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on e8fc268 Nov 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the darwin arm64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.5.0/darwin-arm64/develop-e8fc26895354366211ace7e6550fe38c348c28bd/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on e8fc268 Nov 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the win32 x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.5.0/win32-x64/develop-e8fc26895354366211ace7e6550fe38c348c28bd/cypress.tgz

Please sign in to comment.