Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add support for angular 17 #28152

Merged
merged 11 commits into from
Nov 7, 2023
Merged

feat: add support for angular 17 #28152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
bd44311
feat(webpack-dev-server): add support for angular 17
jordanpowell88 Oct 26, 2023
d1279e6
update changelog
jordanpowell88 Oct 26, 2023
1944869
fix broken spec pattern
jordanpowell88 Oct 26, 2023
f5b0c94
update to rc 2 for cli
jordanpowell88 Oct 26, 2023
9e7d20a
remove = from dependency minVersion lists
jordanpowell88 Nov 1, 2023
b1044e1
Merge branch 'develop' into jordanpowell88/angular-17
jordanpowell88 Nov 1, 2023
a27fd7b
update angular 17 rc version and update dep test
jordanpowell88 Nov 1, 2023
2630c7c
add projectDirFolder to fixtures for angular-17
jordanpowell88 Nov 1, 2023
6cb89d3
resolve broken system tests
jordanpowell88 Nov 3, 2023
d9e0b46
Merge branch 'develop' into jordanpowell88/angular-17
jordanpowell88 Nov 3, 2023
5ac72a5
update ct project dir angular version
jordanpowell88 Nov 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions cli/CHANGELOG.md
View file
Open in desktop
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).

Comment on lines +6 to +9
Copy link
Contributor

Choose a reason for hiding this comment

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

Since this is a feature we should bump the next version number to 13.5.0, right?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yup

Copy link
Member

Choose a reason for hiding this comment

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

This check should have ensured this was bumped before merging...

**Bugfixes:**

- Fixed an issue determining visibility when an element is hidden by an ancestor with a shared edge. Fixes [#27514](https://github.com/cypress-io/cypress/issues/27514).
Expand Down
43 changes: 35 additions & 8 deletions npm/webpack-dev-server/cypress/e2e/angular.cy.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
File renamed without changes.
0 ...1/src/app/components/signals.component.ts → ...r/src/app/components/signals.component.ts
View file
Open in desktop
File renamed without changes.
39 changes: 0 additions & 39 deletions system-tests/projects/angular-16.1/package.json
View file
Open in desktop

This file was deleted.

24 changes: 12 additions & 12 deletions system-tests/projects/angular-16/package.json
View file
Open in desktop
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
Open in desktop

This file was deleted.

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

This file was deleted.