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

fix: angular 14.2 mount compilation error #23593

Merged
merged 4 commits into from
Aug 29, 2022
Merged

fix: angular 14.2 mount compilation error #23593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8a3d179
fix: angular 14.2 mount compilation error
ZachJW34 Aug 29, 2022
1e3b94b
fix cypress scehmatic
ZachJW34 Aug 29, 2022
d7f4cfe
Merge branch 'develop' into zachw/angular-14-2
ZachJW34 Aug 29, 2022
d6cdd3b
use static overrideTemplate
ZachJW34 Aug 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions npm/angular/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
},
"dependencies": {},
"devDependencies": {
"@angular/common": "^14.0.6",
"@angular/core": "^14.0.6",
"@angular/platform-browser-dynamic": "^14.0.6",
"@angular/common": "^14.2.0",
"@angular/core": "^14.2.0",
"@angular/platform-browser-dynamic": "^14.2.0",
"@cypress/mount-utils": "0.0.0-development",
"typescript": "^4.7.4",
"zone.js": "~0.11.4"
Expand Down
14 changes: 8 additions & 6 deletions npm/angular/src/mount.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import { Component, EventEmitter, Type } from '@angular/core'
import {
ComponentFixture,
getTestBed,
TestBed,
TestModuleMetadata,
TestBed,
} from '@angular/core/testing'
import {
BrowserDynamicTestingModule,
Expand Down Expand Up @@ -144,12 +144,12 @@ function initTestBed<T> (

const componentFixture = createComponentFixture(component) as Type<T>

TestBed.configureTestingModule({
getTestBed().configureTestingModule({
...bootstrapModule(componentFixture, configRest),
})

if (providers != null) {
TestBed.overrideComponent(componentFixture, {
getTestBed().overrideComponent(componentFixture, {
add: {
providers,
},
Expand All @@ -172,6 +172,8 @@ function createComponentFixture<T> (
component: Type<T> | string,
): Type<T | WrapperComponent> {
if (typeof component === 'string') {
// getTestBed().overrideTemplate is available in v14+
// The static TestBed.overrideTemplate is available across versions
TestBed.overrideTemplate(WrapperComponent, component)

return WrapperComponent
Expand All @@ -192,7 +194,7 @@ function setupFixture<T> (
component: Type<T>,
config: MountConfig<T>,
): ComponentFixture<T> {
const fixture = TestBed.createComponent(component)
const fixture = getTestBed().createComponent(component)

fixture.whenStable().then(() => {
fixture.autoDetectChanges(config.autoDetectChanges ?? true)
Expand Down Expand Up @@ -309,6 +311,6 @@ getTestBed().initTestEnvironment(

setupHooks(() => {
// Not public, we need to call this to remove the last component from the DOM
TestBed['tearDownTestingModule']()
TestBed.resetTestingModule()
getTestBed()['tearDownTestingModule']()
Copy link
Contributor

Choose a reason for hiding this comment

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

So this function isn't part of the public API for TestBed? Would it make sense to guard it with a try/catch to keep us from blowing up, or would that just break tests in a less-obvious way?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

An error thrown here makes sense, since otherwise it would lead to some really strange behavior (like not removing the previously mounted component). Since it threw, it was very easy to track down what was going on and get a fix for it.

It is marked as a public property, just not exposed on the interface for some reason.

getTestBed().resetTestingModule()
})
12 changes: 6 additions & 6 deletions npm/cypress-schematic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
"test": "mocha -r @packages/ts/register --reporter mocha-multi-reporters --reporter-options configFile=../../mocha-reporter-config.json src/**/*.spec.ts"
},
"dependencies": {
"@angular-devkit/architect": "^0.1401.0",
"@angular-devkit/core": "^14.1.0",
"@angular-devkit/schematics": "^14.1.0",
"@schematics/angular": "^14.1.0",
"@angular-devkit/architect": "^0.1402.1",
"@angular-devkit/core": "^14.2.1",
"@angular-devkit/schematics": "^14.2.1",
"@schematics/angular": "^14.2.1",
"jsonc-parser": "^3.0.0",
"rxjs": "~6.6.0"
},
"devDependencies": {
"@angular-devkit/schematics-cli": "^14.1.0",
"@angular/cli": "^14.1.0",
"@angular-devkit/schematics-cli": "^14.2.1",
"@angular/cli": "^14.2.1",
"@types/chai-enzyme": "0.6.7",
"@types/mocha": "8.0.3",
"@types/node": "^18.0.6",
Expand Down
12 changes: 12 additions & 0 deletions npm/cypress-schematic/src/ct.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,17 @@ const runCommandInProject = (command: string, projectPath: string) => {
return execa(ex, args, { cwd: projectPath, stdio: 'inherit' })
}

// Since the schematic downloads a new version of cypress, the latest changes of
// @cypress/angular won't exist in the tmp project. To fix this, we replace the
// contents of the <project-path>/node_modules/cypress/angular with the latest
// contents of cli/angular
const copyAngularMount = async (projectPath: string) => {
await fs.copy(
path.join(__dirname, '..', '..', '..', 'cli', 'angular'),
path.join(projectPath, 'node_modules', 'cypress', 'angular'),
)
}

const cypressSchematicPackagePath = path.join(__dirname, '..')

const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-13', 'angular-14']
Expand All @@ -35,6 +46,7 @@ describe('ng add @cypress/schematic / e2e and ct', function () {

await runCommandInProject(`yarn add @cypress/schematic@file:${cypressSchematicPackagePath}`, projectPath)
await runCommandInProject('yarn ng add @cypress/schematic --e2e --component', projectPath)
await copyAngularMount(projectPath)
await runCommandInProject('yarn ng run angular:ct --watch false --spec src/app/app.component.cy.ts', projectPath)
})
}
Expand Down
22 changes: 11 additions & 11 deletions system-tests/projects/angular-14/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,22 @@
"watch": "ng build --watch --configuration development"
},
"dependencies": {
"@angular/animations": "^14.0.0",
"@angular/common": "^14.0.0",
"@angular/compiler": "^14.0.0",
"@angular/core": "^14.0.0",
"@angular/forms": "^14.0.0",
"@angular/platform-browser": "^14.0.0",
"@angular/platform-browser-dynamic": "^14.0.0",
"@angular/router": "^14.0.0",
"@angular/animations": "^14.2.0",
"@angular/common": "^14.2.0",
"@angular/compiler": "^14.2.0",
"@angular/core": "^14.2.0",
"@angular/forms": "^14.2.0",
"@angular/platform-browser": "^14.2.0",
"@angular/platform-browser-dynamic": "^14.2.0",
"@angular/router": "^14.2.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.0.0",
"@angular/cli": "~14.0.0",
"@angular/compiler-cli": "^14.0.0",
"@angular-devkit/build-angular": "^14.2.0",
"@angular/cli": "~14.2.0",
"@angular/compiler-cli": "^14.2.0",
"typescript": "~4.7.2"
},
"projectFixtureDirectory": "angular"
Expand Down
Loading