Skip to content

Commit

Permalink
fix(webpack-dev-server): add typeRoots to generated tsconfig for angu…
Browse files Browse the repository at this point in the history 
…lar (#27117)

* feat(webpack-dev-server): generate a local tsconfig file

* chore: remove comments

* chore: use relative paths

* test(webpack-dev-server): update tsconfig tests

* test(webpack-dev-server): update tsconfig tests

* test(webpack-dev-server): update tsconfig tests

* test(webpack-dev-server): upt outDir path

* chore: build binary

* Update npm/webpack-dev-server/src/helpers/angularHandler.ts

Co-authored-by: Stokes Player <stokes@cypress.io>

* fix(webpack-dev-server): use tmp but add typeRoots

* chore: update workflow to build binary

* remove redundant node_modules/types

* remove node_modules/types from assertions

---------

Co-authored-by: Stokes Player <stokes@cypress.io>
  • Loading branch information
@jordanpowell88 @warrensplayer
jordanpowell88 and warrensplayer authored Jul 18, 2023
1 parent ddec92d commit 376795f
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 30 deletions.
11 changes: 7 additions & 4 deletions .circleci/workflows.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ mainBuildFilters: &mainBuildFilters
- /^release\/\d+\.\d+\.\d+$/
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
- 'update-v8-snapshot-cache-on-develop'
- 'chore/use_cloud_m1_runners'
- 'jordanpowell88/angular-tsconfig'
- 'fix/chrome_crash_recovery'

# usually we don't build Mac app - it takes a long time
# but sometimes we want to really confirm we are doing the right thing
Expand All @@ -41,7 +42,8 @@ macWorkflowFilters: &darwin-workflow-filters
- equal: [ develop, << pipeline.git.branch >> ]
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
- equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
- equal: [ 'chore/use_cloud_m1_runners', << pipeline.git.branch >> ]
- equal: ['jordanpowell88/angular-tsconfig', << pipeline.git.branch >> ]
- equal: [ 'mschile/issue-26900_browserCriClient', << pipeline.git.branch >> ]
- matches:
pattern: /^release\/\d+\.\d+\.\d+$/
value: << pipeline.git.branch >>
Expand All @@ -52,7 +54,8 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
- equal: [ develop, << pipeline.git.branch >> ]
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
- equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
- equal: [ 'chore/use_cloud_m1_runners', << pipeline.git.branch >> ]
- equal: [ 'jordanpowell88/angular-tsconfig', << pipeline.git.branch >> ]
- equal: [ 'mschile/issue-26900_browserCriClient', << pipeline.git.branch >> ]
- matches:
pattern: /^release\/\d+\.\d+\.\d+$/
value: << pipeline.git.branch >>
Expand Down Expand Up @@ -142,7 +145,7 @@ commands:
- run:
name: Check current branch to persist artifacts
command: |
if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "update-v8-snapshot-cache-on-develop" && "$CIRCLE_BRANCH" != "mschile/issue-26900_browserCriClient" ]]; then
if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "update-v8-snapshot-cache-on-develop" && "$CIRCLE_BRANCH" != "jordanpowell88/angular-tsconfig" ]]; then
echo "Not uploading artifacts or posting install comment for this branch."
circleci-agent step halt
fi
Expand Down
10 changes: 7 additions & 3 deletions npm/webpack-dev-server/src/helpers/angularHandler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,19 +136,23 @@ export async function generateTsConfig (devServerConfig: AngularWebpackDevServer
includePaths.push(...polyfills.map((p: string) => getProjectFilePath(workspaceRoot, p)))
}

const cypressTypes = getProjectFilePath(workspaceRoot, 'node_modules', 'cypress', 'types', 'index.d.ts')
const typeRoots = [
getProjectFilePath(workspaceRoot, 'node_modules'),
]

includePaths.push(cypressTypes)
const types = ['cypress']

const tsConfigContent = JSON.stringify({
extends: getProjectFilePath(projectRoot, buildOptions.tsConfig ?? 'tsconfig.json'),
compilerOptions: {
outDir: getProjectFilePath(projectRoot, 'out-tsc/cy'),
allowSyntheticDefaultImports: true,
skipLibCheck: true,
types,
typeRoots,
},
include: includePaths,
})
}, null, 2)

const tsConfigPath = path.join(await getTempDir(), 'tsconfig.json')

Expand Down
35 changes: 12 additions & 23 deletions npm/webpack-dev-server/test/handlers/angularHandler.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,29 +19,24 @@ import '../support'
import { scaffoldMigrationProject } from '../test-helpers/scaffoldProject'

chai.use(chaiPromise)

describe('angularHandler', function () {
this.timeout(1000 * 60)

it('sources the config from angular-13', async () => {
const projectRoot = await scaffoldMigrationProject('angular-13')

process.chdir(projectRoot)

const devServerConfig = {
cypressConfig: {
projectRoot,
specPattern: 'src/**/*.cy.ts',
} as Cypress.PluginConfigOptions,
framework: 'angular',
} as AngularWebpackDevServerConfig

const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await angularHandler(devServerConfig)

expect(webpackConfig).to.exist
expect((webpackConfig?.entry as any).main).to.be.undefined
expect(sourceWebpackModulesResult.framework?.importPath).to.include(path.join('@angular-devkit', 'build-angular'))

const { buildOptions } = await expectNormalizeProjectConfig(projectRoot)

await expectLoadsAngularJson(projectRoot)
Expand All @@ -54,21 +49,18 @@ describe('angularHandler', function () {
const projectRoot = await scaffoldMigrationProject('angular-14')

process.chdir(projectRoot)

const devServerConfig = {
cypressConfig: {
projectRoot,
specPattern: 'src/**/*.cy.ts',
} as Cypress.PluginConfigOptions,
framework: 'angular',
} as AngularWebpackDevServerConfig

const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await angularHandler(devServerConfig)

expect(webpackConfig).to.exist
expect((webpackConfig?.entry as any).main).to.be.undefined
expect(sourceWebpackModulesResult.framework?.importPath).to.include(path.join('@angular-devkit', 'build-angular'))

const { buildOptions } = await expectNormalizeProjectConfig(projectRoot)

await expectLoadsAngularJson(projectRoot)
Expand All @@ -81,21 +73,18 @@ describe('angularHandler', function () {
const projectRoot = await scaffoldMigrationProject('angular-15')

process.chdir(projectRoot)

const devServerConfig = {
cypressConfig: {
projectRoot,
specPattern: 'src/**/*.cy.ts',
} as Cypress.PluginConfigOptions,
framework: 'angular',
} as AngularWebpackDevServerConfig

const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await angularHandler(devServerConfig)

expect(webpackConfig).to.exist
expect((webpackConfig?.entry as any).main).to.be.undefined
expect(sourceWebpackModulesResult.framework?.importPath).to.include(path.join('@angular-devkit', 'build-angular'))

const { buildOptions } = await expectNormalizeProjectConfig(projectRoot)

await expectLoadsAngularJson(projectRoot)
Expand Down Expand Up @@ -129,7 +118,6 @@ describe('angularHandler', function () {
const projectRoot = await scaffoldMigrationProject('angular-custom-config')

process.chdir(projectRoot)

const devServerConfig = {
framework: 'angular',
cypressConfig: {
Expand All @@ -140,13 +128,11 @@ describe('angularHandler', function () {
projectConfig: customProjectConfig,
},
} as unknown as AngularWebpackDevServerConfig

const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await angularHandler(devServerConfig)

expect(webpackConfig).to.exist
expect((webpackConfig?.entry as any).main).to.be.undefined
expect(sourceWebpackModulesResult.framework?.importPath).to.include(path.join('@angular-devkit', 'build-angular'))

await expectLoadsAngularJson(projectRoot)
await expectLoadsAngularCLiModules(projectRoot)
await expectGeneratesTsConfig(devServerConfig, customProjectConfig.buildOptions)
Expand Down Expand Up @@ -181,28 +167,22 @@ const expectNormalizeProjectConfig = async (projectRoot: string) => {

return projectConfig
}

const expectLoadsAngularJson = async (projectRoot: string) => {
const angularJson = await getAngularJson(projectRoot)

expect(angularJson).to.not.be.null

await expect(getAngularJson(path.join('..', projectRoot))).to.be.rejected
}

const expectLoadsAngularCLiModules = async (projectRoot: string) => {
const angularCliModules = await getAngularCliModules(projectRoot)

expect(angularCliModules.generateBrowserWebpackConfigFromContext).to.not.be.null
expect(angularCliModules.getStylesConfig).to.not.be.null
expect(angularCliModules.getCommonConfig).to.not.be.null

await expect(getAngularCliModules(path.join('..', projectRoot))).to.be.rejected
}

const expectLoadsAngularBuildOptions = (buildOptions: BuildOptions) => {
const tsConfig = 'tsconfig.cypress.json'

let finalBuildOptions = getAngularBuildOptions(buildOptions, tsConfig)

expect(finalBuildOptions.aot).to.be.false
Expand All @@ -211,7 +191,6 @@ const expectLoadsAngularBuildOptions = (buildOptions: BuildOptions) => {
expect(finalBuildOptions.outputHashing).to.equal('none')
expect(finalBuildOptions.budgets).to.be.undefined
}

const expectGeneratesTsConfig = async (devServerConfig: AngularWebpackDevServerConfig, buildOptions: any) => {
const { projectRoot } = devServerConfig.cypressConfig
let tsConfigPath = await generateTsConfig(devServerConfig, buildOptions)
Expand All @@ -228,11 +207,16 @@ const expectGeneratesTsConfig = async (devServerConfig: AngularWebpackDevServerC
outDir: toPosix(path.join(projectRoot, 'out-tsc/cy')),
allowSyntheticDefaultImports: true,
skipLibCheck: true,
typeRoots: [
toPosix(path.join(projectRoot, 'node_modules')),
],
types: [
'cypress',
],
},
include: [
toPosix(path.join(projectRoot, 'src/**/*.cy.ts')),
toPosix(path.join(projectRoot, 'src/polyfills.ts')),
toPosix(path.join(projectRoot, 'node_modules/cypress/types/index.d.ts')),
],
})

Expand All @@ -256,11 +240,16 @@ const expectGeneratesTsConfig = async (devServerConfig: AngularWebpackDevServerC
outDir: toPosix(path.join(projectRoot, 'out-tsc/cy')),
allowSyntheticDefaultImports: true,
skipLibCheck: true,
typeRoots: [
toPosix(path.join(projectRoot, 'node_modules')),
],
types: [
'cypress',
],
},
include: [
toPosix(path.join(projectRoot, 'src/**/*.cy.ts')),
toPosix(supportFile),
toPosix(path.join(projectRoot, 'node_modules/cypress/types/index.d.ts')),
],
})
}

4 comments on commit 376795f

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 376795f Jul 18, 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/12.17.2/linux-x64/develop-376795f125054c4a70cb1a9b75b01c1a42cccf93/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 376795f Jul 18, 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/12.17.2/darwin-x64/develop-376795f125054c4a70cb1a9b75b01c1a42cccf93/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 376795f Jul 18, 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/12.17.2/darwin-x64/develop-376795f125054c4a70cb1a9b75b01c1a42cccf93/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 376795f Jul 18, 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/12.17.2/win32-x64/develop-376795f125054c4a70cb1a9b75b01c1a42cccf93/cypress.tgz

Please sign in to comment.