mirror/cypress
1
0
Fork 0
mirror of https://github.com/cypress-io/cypress.git synced 2026-04-21 14:40:05 -05:00
Code Issues Packages Projects Releases Wiki Activity

chore: add support for Angular 16 (#26052)

Browse Source 
* feat(angular): add support for Angular 16

* chore: update angular 16 pre-release version

* feat: handle getStylesConfig returning a Promise in Angular 16 (#26559)

* chore: remove next from deps to prepare for release

* remove .only, add angular-16 to webpack-dev-server e2e tests

---------

Co-authored-by: Leosvel Pérez Espinosa <leosvel.perez.espinosa@gmail.com>
Co-authored-by: astone123 <adams@cypress.io>
This commit is contained in:
Jordan
2023-04-24 09:57:12 -04:00
committed by GitHub
parent 4d6da9c077
commit e2439b19b4
13 changed files with 6161 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
npm/webpack-dev-server/cypress/e2e/angular.cy.ts
+2 -2
View File
@@ -2,12 +2,12 @@
/// <reference path="../support/e2e.ts" />
import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
const WEBPACK_REACT: ProjectFixtureDir[] = ['angular-13', 'angular-14', 'angular-15']
const WEBPACK_ANGULAR: ProjectFixtureDir[] = ['angular-13', 'angular-14', 'angular-15', 'angular-16']
// Add to this list to focus on a particular permutation
const ONLY_PROJECTS: ProjectFixtureDir[] = []
for (const project of WEBPACK_REACT) {
for (const project of WEBPACK_ANGULAR) {
if (ONLY_PROJECTS.length && !ONLY_PROJECTS.includes(project)) {
continue
}
npm/webpack-dev-server/src/helpers/angularHandler.ts
+21 -16
View File
@@ -260,28 +260,33 @@ async function getAngularCliWebpackConfig (devServerConfig: AngularWebpackDevSer
buildOptions,
context,
(wco: any) => {
const stylesConfig = getStylesConfig(wco)
// We modify resolve-url-loader and set `root` to be `projectRoot` + `sourceRoot` to ensure
// imports in scss, sass, etc are correctly resolved.
// https://github.com/cypress-io/cypress/issues/24272
stylesConfig.module.rules.forEach((rule: RuleSetRule) => {
rule.rules?.forEach((ruleSet) => {
if (!Array.isArray(ruleSet.use)) {
return
}
ruleSet.use.map((loader) => {
if (typeof loader !== 'object' || typeof loader.options !== 'object' || !loader.loader?.includes('resolve-url-loader')) {
// Starting in Angular 16, the `getStylesConfig` function returns a `Promise`.
// We wrap it with `Promise.resolve` so we support older version of Angular
// returning a non-Promise result.
const stylesConfig = Promise.resolve(getStylesConfig(wco)).then((config) => {
// We modify resolve-url-loader and set `root` to be `projectRoot` + `sourceRoot` to ensure
// imports in scss, sass, etc are correctly resolved.
// https://github.com/cypress-io/cypress/issues/24272
config.module.rules.forEach((rule: RuleSetRule) => {
rule.rules?.forEach((ruleSet) => {
if (!Array.isArray(ruleSet.use)) {
return
}
const root = projectConfig.buildOptions.workspaceRoot || path.join(devServerConfig.cypressConfig.projectRoot, projectConfig.sourceRoot)
ruleSet.use.map((loader) => {
if (typeof loader !== 'object' || typeof loader.options !== 'object' || !loader.loader?.includes('resolve-url-loader')) {
return
}
debug('Adding root %s to resolve-url-loader options', root)
loader.options.root = root
const root = projectConfig.buildOptions.workspaceRoot || path.join(devServerConfig.cypressConfig.projectRoot, projectConfig.sourceRoot)
debug('Adding root %s to resolve-url-loader options', root)
loader.options.root = root
})
})
})
return config
})
return [getCommonConfig(wco), stylesConfig]
packages/scaffold-config/src/dependencies.ts
+5 -5
View File
@@ -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',
minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0' || '^=16.0.0',
} as const
export const WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR = {
@@ -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',
minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0' || '^=16.0.0',
} as const
export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
@@ -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',
minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0' || '^=16.0.0',
} as const
export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
@@ -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',
minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0' || '^=16.0.0',
} as const
export const WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC = {
@@ -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',
minVersion: '^=13.0.0 || ^=14.0.0 || ^=15.0.0' || '^=16.0.0',
} as const
export const WIZARD_DEPENDENCY_SVELTE: Cypress.CypressComponentDependency = {
system-tests/project-fixtures/angular/cypress.config.ts
+1
View File
@@ -11,6 +11,7 @@ export default defineConfig({
resolve: {
alias: {
'@angular/common/http': require.resolve('@angular/common/http'),
'@angular/common/testing': require.resolve('@angular/common/testing'),
'@angular/common': require.resolve('@angular/common'),
'@angular/core/testing': require.resolve('@angular/core/testing'),
'@angular/core': require.resolve('@angular/core'),
system-tests/projects/angular-14/src/app/components/standalone.component.cy.ts → system-tests/project-fixtures/angular/src/app/components/standalone.component.cy.ts
View File
system-tests/projects/angular-14/src/app/components/standalone.component.ts → system-tests/project-fixtures/angular/src/app/components/standalone.component.ts
View File
system-tests/projects/angular-15/src/app/components/standalone.component.cy.ts
-21
View File
@@ -1,21 +0,0 @@
import { StandaloneComponent } from './standalone.component'
describe('StandaloneComponent', () => {
it('can mount a standalone component', () => {
cy.mount(StandaloneComponent, {
componentProperties: {
name: 'Angular',
},
})
cy.get('h1').contains('Hello Angular')
})
it('can mount a standalone component using template', () => {
cy.mount('<app-standalone name="Angular"></app-standalone>', {
imports: [StandaloneComponent],
})
cy.get('h1').contains('Hello Angular')
})
})
system-tests/projects/angular-15/src/app/components/standalone.component.ts
-10
View File
@@ -1,10 +0,0 @@
import { Component, Input } from '@angular/core'
@Component({
standalone: true,
selector: 'app-standalone',
template: `<h1>Hello {{ name }}</h1>`,
})
export class StandaloneComponent {
@Input() name!: string
}
system-tests/projects/angular-16/package.json
+39
View File
@@ -0,0 +1,39 @@
{
"name": "angular-16",
"version": "0.0.0",
"private": true,
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"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",
"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",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~4.9.4"
},
"projectFixtureDirectory": "angular"
}
system-tests/projects/angular-16/src/app/components/signals.component.cy.ts
+14
View File
@@ -0,0 +1,14 @@
import { SignalsComponent } from './signals.component'
describe('SiganlsComponent', () => {
it('can mount a signals component', () => {
cy.mount(SignalsComponent)
})
it('can increment the count using a signal', () => {
cy.mount(SignalsComponent)
cy.get('span').contains(0)
cy.get('button').click()
cy.get('span').contains(1)
})
})
system-tests/projects/angular-16/src/app/components/signals.component.ts
+14
View File
@@ -0,0 +1,14 @@
import { Component, signal } from '@angular/core'
@Component({
standalone: true,
selector: 'app-signals',
template: `<span>{{ count() }}</span> <button (click)="increment()">+</button>`,
})
export class SignalsComponent {
count = signal(0)
increment (): void {
this.count.update((_count: number) => _count + 1)
}
}
system-tests/projects/angular-16/yarn.lock
+6064
View File
File diff suppressed because it is too large Load Diff
system-tests/test/component_testing_spec.ts
+1 -1
View File
@@ -115,7 +115,7 @@ describe(`React major versions with Webpack`, function () {
}
})
const ANGULAR_MAJOR_VERSIONS = ['13', '14', '15']
const ANGULAR_MAJOR_VERSIONS = ['13', '14', '15', '16']
describe(`Angular CLI major versions`, () => {
systemTests.setup()