diff --git a/.circleci/workflows.yml b/.circleci/workflows.yml index 9ce01cc70d71..fd0647ddc691 100644 --- a/.circleci/workflows.yml +++ b/.circleci/workflows.yml @@ -134,7 +134,7 @@ commands: - run: name: Check current branch to persist artifacts command: | - if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "fix-duplicate-and-expired-cookies" ]]; then + if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "astone123/ventura-webpack-permission-testing" ]]; then echo "Not uploading artifacts or posting install comment for this branch." circleci-agent step halt fi diff --git a/npm/webpack-dev-server/cypress/e2e/webpack-dev-server.cy.ts b/npm/webpack-dev-server/cypress/e2e/webpack-dev-server.cy.ts index 4f587e24b6f1..06e85369ea81 100644 --- a/npm/webpack-dev-server/cypress/e2e/webpack-dev-server.cy.ts +++ b/npm/webpack-dev-server/cypress/e2e/webpack-dev-server.cy.ts @@ -39,4 +39,22 @@ describe('Config options', () => { expect(verifyFile).to.eq('OK') }) }) + + it('recompiles with new spec and custom indexHtmlFile', () => { + cy.scaffoldProject('webpack5_wds4-react') + cy.openProject('webpack5_wds4-react', ['--config-file', 'cypress-webpack-dev-server-custom-index.config.ts']) + cy.startAppServer('component') + + cy.visitApp() + + cy.withCtx(async (ctx) => { + await ctx.actions.file.writeFileInProject( + ctx.path.join('src', 'New.cy.js'), + await ctx.file.readFileInProject(ctx.path.join('src', 'App.cy.jsx')), + ) + }) + + cy.contains('New.cy.js').click() + cy.waitForSpecToFinish({ passCount: 2 }) + }) }) diff --git a/npm/webpack-dev-server/src/CypressCTWebpackPlugin.ts b/npm/webpack-dev-server/src/CypressCTWebpackPlugin.ts index 8cb128b2bbca..9aef4e5aa676 100644 --- a/npm/webpack-dev-server/src/CypressCTWebpackPlugin.ts +++ b/npm/webpack-dev-server/src/CypressCTWebpackPlugin.ts @@ -13,6 +13,7 @@ export interface CypressCTWebpackPluginOptions { supportFile: string | false devServerEvents: EventEmitter webpack: Function + indexHtmlFile: string } export type CypressCTContextOptions = Omit @@ -47,6 +48,7 @@ export class CypressCTWebpackPlugin { private supportFile: string | false private compilation: Webpack45Compilation | null = null private webpack: Function + private indexHtmlFile: string private readonly projectRoot: string private readonly devServerEvents: EventEmitter @@ -57,6 +59,7 @@ export class CypressCTWebpackPlugin { this.projectRoot = options.projectRoot this.devServerEvents = options.devServerEvents this.webpack = options.webpack + this.indexHtmlFile = options.indexHtmlFile } private addLoaderContext = (loaderContext: object, module: any) => { @@ -64,6 +67,7 @@ export class CypressCTWebpackPlugin { files: this.files, projectRoot: this.projectRoot, supportFile: this.supportFile, + indexHtmlFile: this.indexHtmlFile, } }; @@ -93,11 +97,16 @@ export class CypressCTWebpackPlugin { } /* - * `webpack --watch` watches the existing specs and their dependencies for changes, - * but we also need to add additional dependencies to our dynamic "browser.js" (generated - * using loader.ts) when new specs are created. This hook informs webpack that browser.js - * has been "updated on disk", causing a recompliation (and pulling the new specs in as - * dependencies). + * `webpack --watch` watches the existing specs and their dependencies for changes. + * When new specs are created, we need to trigger a recompilation to add the new specs + * as dependencies. This hook informs webpack that `component-index.html` has been "updated on disk", + * causing a recompilation (and pulling the new specs in as dependencies). We use the component + * index file because we know that it will be there since the project is using Component Testing. + * + * We were using `browser.js` before to cause a recompilation but we ran into an + * issue with MacOS Ventura that will not allow us to write to files inside of our application bundle. + * + * See https://github.com/cypress-io/cypress/issues/24398 */ private onSpecsChange = async (specs: Cypress.Cypress['spec'][]) => { if (!this.compilation || _.isEqual(specs, this.files)) { @@ -110,7 +119,7 @@ export class CypressCTWebpackPlugin { // eslint-disable-next-line no-restricted-syntax const utimesSync: UtimesSync = inputFileSystem.fileSystem.utimesSync ?? fs.utimesSync - utimesSync(path.resolve(__dirname, 'browser.js'), new Date(), new Date()) + utimesSync(path.join(this.projectRoot, this.indexHtmlFile), new Date(), new Date()) } /** diff --git a/npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts b/npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts index 0c3e1dbacfa3..e251968c59b5 100644 --- a/npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts +++ b/npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts @@ -89,6 +89,7 @@ export function makeCypressWebpackConfig ( devServerEvents, supportFile, webpack, + indexHtmlFile, }), ], devtool: 'inline-source-map', diff --git a/npm/webpack-dev-server/test/devServer-e2e.spec.ts b/npm/webpack-dev-server/test/devServer-e2e.spec.ts index 42f3a621374b..4ab871743c34 100644 --- a/npm/webpack-dev-server/test/devServer-e2e.spec.ts +++ b/npm/webpack-dev-server/test/devServer-e2e.spec.ts @@ -68,7 +68,7 @@ const cypressConfig = { supportFile: '', isTextTerminal: true, devServerPublicPathRoute: root, - indexHtmlFile: path.join(__dirname, 'component-index.html'), + indexHtmlFile: 'test/component-index.html', } as any as Cypress.PluginConfigOptions describe('#devServer', () => { @@ -170,7 +170,7 @@ describe('#devServer', () => { await closeServer(close) }) - it('touches browser.js when a spec file is added and recompile', async function () { + it('touches component index when a spec file is added and recompile', async function () { // File watching only enabled when running in `open` mode cypressConfig.isTextTerminal = false const devServerEvents = new EventEmitter() @@ -187,13 +187,13 @@ describe('#devServer', () => { absolute: `${root}/test/fixtures/bar.spec.js`, } - const oldmtime = fs.statSync('./dist/browser.js').mtimeMs + const oldmtime = fs.statSync(cypressConfig.indexHtmlFile).mtimeMs await once(devServerEvents, 'dev-server:compile:success') devServerEvents.emit('dev-server:specs:changed', [newSpec]) await once(devServerEvents, 'dev-server:compile:success') - const updatedmtime = fs.statSync('./dist/browser.js').mtimeMs + const updatedmtime = fs.statSync(cypressConfig.indexHtmlFile).mtimeMs expect(oldmtime).to.not.equal(updatedmtime) diff --git a/system-tests/project-fixtures/react/cypress-webpack-dev-server-custom-index.config.ts b/system-tests/project-fixtures/react/cypress-webpack-dev-server-custom-index.config.ts new file mode 100644 index 000000000000..c4efc3bcf799 --- /dev/null +++ b/system-tests/project-fixtures/react/cypress-webpack-dev-server-custom-index.config.ts @@ -0,0 +1,10 @@ +import { defineConfig } from 'cypress' +import defaultConfig from './cypress-webpack.config' + +export default defineConfig({ + ...defaultConfig, + component: { + ...defaultConfig.component as Cypress.Config['component'], + indexHtmlFile: 'my-component-index.html', + }, +}) diff --git a/system-tests/project-fixtures/react/my-component-index.html b/system-tests/project-fixtures/react/my-component-index.html new file mode 100644 index 000000000000..ac6e79fd83df --- /dev/null +++ b/system-tests/project-fixtures/react/my-component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + \ No newline at end of file