feat(testing): bump cypress to latest for angular CT (#17788)
Co-authored-by: Leosvel Pérez Espinosa <leosvel.perez.espinosa@gmail.com>
This commit is contained in:
Caleb Ukle
GitHub
parent
bd7157bb83
commit
8a63d38f42
@ -14,8 +14,7 @@ import {
|
||||
import { names } from '@nx/devkit';
|
||||
import { join } from 'path';
|
||||
|
||||
// TODO(leo): enable when https://github.com/cypress-io/cypress/pull/27030 is merged and released
|
||||
describe.skip('Angular Cypress Component Tests', () => {
|
||||
describe('Angular Cypress Component Tests', () => {
|
||||
let projectName: string;
|
||||
const appName = uniq('cy-angular-app');
|
||||
const usedInAppLibName = uniq('cy-angular-lib');
|
||||
|
||||
@ -178,8 +178,7 @@ describe('env vars', () => {
|
||||
'should allow CT and e2e in the same project',
|
||||
async () => {
|
||||
await testCtAndE2eInProject('next');
|
||||
// TODO(leo): uncomment when https://github.com/cypress-io/cypress/pull/27030 is merged and released
|
||||
// await testCtAndE2eInProject('angular');
|
||||
await testCtAndE2eInProject('angular');
|
||||
await testCtAndE2eInProject('react');
|
||||
},
|
||||
TEN_MINS_MS
|
||||
|
||||
@ -59,12 +59,6 @@
|
||||
"version": "16.4.0-beta.10",
|
||||
"description": "Remove tsconfig.e2e.json and add settings to project tsconfig.json. tsConfigs executor option is now deprecated. The project level tsconfig.json file should be used instead.",
|
||||
"implementation": "./src/migrations/update-16-4-0/tsconfig-sourcemaps"
|
||||
},
|
||||
"update-16-4-0-warn-incompatible-angular-cypress": {
|
||||
"cli": "nx",
|
||||
"version": "16.4.0-beta.11",
|
||||
"description": "Cypress Component Testing is broken with Angular 16.1.0. Warn about it if the workspace has Angular >= 16.1.0 and Angular projects using Component Testing.",
|
||||
"implementation": "./src/migrations/update-16-4-0/warn-incompatible-angular-cypress"
|
||||
}
|
||||
},
|
||||
"packageJsonUpdates": {
|
||||
@ -79,6 +73,18 @@
|
||||
"alwaysAddToPackageJson": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"16.5.0": {
|
||||
"version": "16.5.0-beta.0",
|
||||
"requires": {
|
||||
"cypress": ">=12.0.0 <12.16.0"
|
||||
},
|
||||
"packages": {
|
||||
"cypress": {
|
||||
"version": "^12.16.0",
|
||||
"alwaysAddToPackageJson": false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,242 +0,0 @@
|
||||
import type { ProjectConfiguration, ProjectGraph, Tree } from '@nx/devkit';
|
||||
import { addProjectConfiguration, logger } from '@nx/devkit';
|
||||
import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
|
||||
import { readModulePackageJson } from 'nx/src/utils/package-json';
|
||||
import migration from './warn-incompatible-angular-cypress';
|
||||
|
||||
jest.mock('nx/src/utils/package-json');
|
||||
let projectGraph: ProjectGraph;
|
||||
jest.mock('@nx/devkit', () => ({
|
||||
...jest.requireActual('@nx/devkit'),
|
||||
createProjectGraphAsync: () => Promise.resolve(projectGraph),
|
||||
}));
|
||||
|
||||
describe('warn-incompatible-angular-cypress migration', () => {
|
||||
let tree: Tree;
|
||||
let mockReadModulePackageJson: jest.Mock<
|
||||
ReturnType<typeof readModulePackageJson>
|
||||
> = readModulePackageJson as never;
|
||||
|
||||
beforeEach(() => {
|
||||
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
|
||||
jest.resetAllMocks();
|
||||
});
|
||||
|
||||
it('should not warn when Angular is not installed', async () => {
|
||||
mockReadModulePackageJson.mockReturnValue(null);
|
||||
addProject(
|
||||
tree,
|
||||
'app1',
|
||||
{
|
||||
root: 'apps/app1',
|
||||
targets: {
|
||||
'component-test': {
|
||||
executor: '@nx/cypress:cypress',
|
||||
options: {
|
||||
testingType: 'component',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
['npm:react']
|
||||
);
|
||||
const loggerSpy = jest.spyOn(logger, 'warn');
|
||||
|
||||
await migration(tree);
|
||||
|
||||
expect(loggerSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not warn when Angular version is lower than 16.1.0', async () => {
|
||||
mockReadModulePackageJson.mockReturnValue({
|
||||
packageJson: { name: '@angular/core', version: '16.0.0' },
|
||||
path: '',
|
||||
});
|
||||
addProject(
|
||||
tree,
|
||||
'app1',
|
||||
{
|
||||
root: 'apps/app1',
|
||||
targets: {
|
||||
'component-test': {
|
||||
executor: '@nx/cypress:cypress',
|
||||
options: {
|
||||
testingType: 'component',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
['npm:@angular/core']
|
||||
);
|
||||
const loggerSpy = jest.spyOn(logger, 'warn');
|
||||
|
||||
await migration(tree);
|
||||
|
||||
expect(loggerSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not warn when there are no Angular projects', async () => {
|
||||
mockReadModulePackageJson.mockReturnValue({
|
||||
packageJson: { name: '@angular/core', version: '16.1.0' },
|
||||
path: '',
|
||||
});
|
||||
addProject(
|
||||
tree,
|
||||
'app1',
|
||||
{
|
||||
root: 'apps/app1',
|
||||
targets: {
|
||||
'component-test': {
|
||||
executor: '@nx/cypress:cypress',
|
||||
options: {
|
||||
testingType: 'component',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
['npm:react']
|
||||
);
|
||||
const loggerSpy = jest.spyOn(logger, 'warn');
|
||||
|
||||
await migration(tree);
|
||||
|
||||
expect(loggerSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not warn when the Angular projects are not using Cypress Component Testing', async () => {
|
||||
mockReadModulePackageJson.mockReturnValue({
|
||||
packageJson: { name: '@angular/core', version: '16.1.0' },
|
||||
path: '',
|
||||
});
|
||||
addProject(
|
||||
tree,
|
||||
'app1',
|
||||
{
|
||||
root: 'apps/app1',
|
||||
targets: {
|
||||
'component-test': {
|
||||
executor: '@nx/cypress:cypress',
|
||||
options: {
|
||||
testingType: 'component',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
['npm:react']
|
||||
);
|
||||
addProject(
|
||||
tree,
|
||||
'app2',
|
||||
{
|
||||
root: 'apps/app2',
|
||||
targets: {
|
||||
e2e: {
|
||||
executor: '@nx/cypress:cypress',
|
||||
options: {
|
||||
testingType: 'e2e',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
['npm:@angular/core']
|
||||
);
|
||||
const loggerSpy = jest.spyOn(logger, 'warn');
|
||||
|
||||
await migration(tree);
|
||||
|
||||
expect(loggerSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should warn when there is an Angular project using Cypress Component Testing', async () => {
|
||||
mockReadModulePackageJson.mockReturnValue({
|
||||
packageJson: { name: '@angular/core', version: '16.1.0' },
|
||||
path: '',
|
||||
});
|
||||
addProject(
|
||||
tree,
|
||||
'app1',
|
||||
{
|
||||
root: 'apps/app1',
|
||||
targets: {
|
||||
'component-test': {
|
||||
executor: '@nx/cypress:cypress',
|
||||
options: {
|
||||
testingType: 'component',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
['npm:@angular/core']
|
||||
);
|
||||
const loggerSpy = jest.spyOn(logger, 'warn');
|
||||
|
||||
await migration(tree);
|
||||
|
||||
expect(loggerSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should warn only once when there are multiple Angular projects using Cypress Component Testing', async () => {
|
||||
mockReadModulePackageJson.mockReturnValue({
|
||||
packageJson: { name: '@angular/core', version: '16.1.0' },
|
||||
path: '',
|
||||
});
|
||||
addProject(
|
||||
tree,
|
||||
'app1',
|
||||
{
|
||||
root: 'apps/app1',
|
||||
targets: {
|
||||
'component-test': {
|
||||
executor: '@nx/cypress:cypress',
|
||||
options: {
|
||||
testingType: 'component',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
['npm:@angular/core']
|
||||
);
|
||||
addProject(
|
||||
tree,
|
||||
'app2',
|
||||
{
|
||||
root: 'apps/app2',
|
||||
targets: {
|
||||
e2e: {
|
||||
executor: '@nx/cypress:cypress',
|
||||
options: {
|
||||
testingType: 'component',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
['npm:@angular/core']
|
||||
);
|
||||
const loggerSpy = jest.spyOn(logger, 'warn');
|
||||
|
||||
await migration(tree);
|
||||
|
||||
expect(loggerSpy).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
function addProject(
|
||||
tree: Tree,
|
||||
projectName: string,
|
||||
config: ProjectConfiguration,
|
||||
dependencies: string[]
|
||||
): void {
|
||||
projectGraph = {
|
||||
dependencies: {
|
||||
[projectName]: dependencies.map((d) => ({
|
||||
source: projectName,
|
||||
target: d,
|
||||
type: 'static',
|
||||
})),
|
||||
},
|
||||
nodes: {
|
||||
[projectName]: { data: config, name: projectName, type: 'app' },
|
||||
},
|
||||
};
|
||||
addProjectConfiguration(tree, projectName, config);
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
import type { Tree } from '@nx/devkit';
|
||||
import { createProjectGraphAsync, logger, stripIndents } from '@nx/devkit';
|
||||
import { forEachExecutorOptions } from '@nx/devkit/src/generators/executor-options-utils';
|
||||
import { readModulePackageJson } from 'nx/src/utils/package-json';
|
||||
import { lt } from 'semver';
|
||||
import type { CypressExecutorOptions } from '../../executors/cypress/cypress.impl';
|
||||
|
||||
export default async function (tree: Tree) {
|
||||
const angularVersion = getInstalledAngularVersion();
|
||||
if (!angularVersion || lt(angularVersion, '16.1.0')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const angularProjects = await getAngularProjects();
|
||||
if (!angularProjects.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
let skipChecking = false;
|
||||
forEachExecutorOptions(
|
||||
tree,
|
||||
'@nx/cypress:cypress',
|
||||
(options: Partial<CypressExecutorOptions>, projectName) => {
|
||||
if (skipChecking || !angularProjects.includes(projectName)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (options.testingType === 'component') {
|
||||
skipChecking = true;
|
||||
logger.warn(
|
||||
stripIndents`Some of your Angular projects are setup for Cypress Component testing.
|
||||
The current version of Cypress does not support component testing for Angular 16.1 so your tests may fail.
|
||||
If your component tests fail, here are some recommended next steps:
|
||||
|
||||
- Revert these changes and update Nx without updating Angular ("nx migrate latest --interactive"). You can update Angular once the issue has been resolved
|
||||
- Keep these changes but temporarily disable the component tests until this issue is resolved
|
||||
|
||||
Check https://github.com/nrwl/nx/issues/17720 for more details.
|
||||
|
||||
`
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async function getAngularProjects(): Promise<string[]> {
|
||||
const projectGraph = await createProjectGraphAsync();
|
||||
|
||||
return Object.entries(projectGraph.dependencies)
|
||||
.filter(([node, dep]) =>
|
||||
dep.some(
|
||||
({ target }) =>
|
||||
!projectGraph.externalNodes?.[node] && target === 'npm:@angular/core'
|
||||
)
|
||||
)
|
||||
.map(([projectName]) => projectName);
|
||||
}
|
||||
|
||||
function getInstalledAngularVersion(): string {
|
||||
try {
|
||||
const {
|
||||
packageJson: { version },
|
||||
} = readModulePackageJson('@angular/core');
|
||||
|
||||
return version;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,7 @@ export const nxVersion = require('../../package.json').version;
|
||||
export const eslintPluginCypressVersion = '^2.10.3';
|
||||
export const typesNodeVersion = '16.11.7';
|
||||
export const cypressViteDevServerVersion = '^2.2.1';
|
||||
export const cypressVersion = '^12.11.0';
|
||||
export const cypressVersion = '^12.16.0';
|
||||
export const cypressWebpackVersion = '^2.0.0';
|
||||
export const webpackHttpPluginVersion = '^5.5.0';
|
||||
export const viteVersion = '^4.3.4';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user