Watch integration test bundle (#14748)

.vscode/tasks.json

@@ -19,6 +19,14 @@
         "runOn": "folderOpen",
       },
     },
+    {
+      "label": "Watch web app",
+      "detail": "Watch files and build the JavaScript bundle (no development server).",
+      "type": "npm",
+      "script": "watch-web",
+      "problemMatcher": [],
+      "isBackground": true,
+    },
     {
       "label": "Watch code generation",
       "detail": "Watch files and generate types when files are changed",

client/web/gulpfile.js

@@ -41,6 +41,24 @@ async function webpack() {
   }
 }
 
+/**
+ * Watch files and update the webpack bundle on disk without starting a dev server.
+ */
+async function watchWebpack() {
+  const compiler = createWebpackCompiler(webpackConfig)
+  compiler.hooks.watchRun.tap('Notify', () => log('Webpack compiling...'))
+  await new Promise(() => {
+    compiler.watch({ aggregateTimeout: 300 }, (error, stats) => {
+      logWebpackStats(stats)
+      if (error || stats.hasErrors()) {
+        log.error('Webpack compilation error')
+      } else {
+        log('Webpack compilation done')
+      }
+    })
+  })
+}
+
 async function webpackDevelopmentServer() {
   const sockHost = process.env.SOURCEGRAPH_HTTPS_DOMAIN || 'sourcegraph.test'
   const sockPort = Number(process.env.SOURCEGRAPH_HTTPS_PORT || 3443)
@@ -82,12 +100,29 @@ async function webpackDevelopmentServer() {
 const build = gulp.series(gulp.parallel(schema, graphQlOperations, graphQlSchema), gulp.parallel(webpack))
 
 /**
- * Watches everything and rebuilds on file changes.
+ * Starts a development server, watches everything and rebuilds on file changes.
  */
-const watch = gulp.series(
+const development = gulp.series(
   // Ensure the typings that TypeScript depends on are build to avoid first-time-run errors
   gulp.parallel(schema, graphQlSchema),
   gulp.parallel(watchSchema, watchGraphQlSchema, watchGraphQlOperations, webpackDevelopmentServer)
 )
 
-module.exports = { build, watch, webpackDevServer: webpackDevelopmentServer, webpack }
+/**
+ * Watches everything, rebuilds on file changes and writes the bundle to disk.
+ * Useful to running integration tests.
+ */
+const watch = gulp.series(
+  // Ensure the typings that TypeScript depends on are build to avoid first-time-run errors
+  gulp.parallel(schema, graphQlSchema),
+  gulp.parallel(watchSchema, watchGraphQlSchema, watchGraphQlOperations, watchWebpack)
+)
+
+module.exports = {
+  build,
+  watch,
+  dev: development,
+  webpackDevServer: webpackDevelopmentServer,
+  webpack,
+  watchWebpack,
+}

dev/Procfile

@@ -8,7 +8,7 @@ frontend: env CONFIGURATION_MODE=server SITE_CONFIG_ESCAPE_HATCH_PATH=$HOME/.sou
 watch: ./dev/changewatch.sh
 nginx: nginx -p . -g 'daemon off;' -c $PWD/dev/nginx.conf 2>&1 | grep -v 'could not open error log file'
 caddy: ./dev/caddy.sh run --watch --config=dev/Caddyfile
-web: ./node_modules/.bin/gulp --color watch
+web: ./node_modules/.bin/gulp --color dev
 syntect_server: ./dev/syntect_server.sh
 zoekt-indexserver-0: ./dev/zoekt/wrapper indexserver 0
 zoekt-indexserver-1: ./dev/zoekt/wrapper indexserver 1

doc/dev/background-information/testing.md

@@ -127,7 +127,8 @@ Test coverage from integration tests is tracked in [Codecov](https://codecov.io/
 
 To run integration tests for the web app:
 
-1. Run `yarn build-web` in the repository root to build a JavaScript bundle.
+1. Run `yarn watch-web` in the repository root in a separate terminal to watch files and build a JavaScript bundle. You can also launch it as the VS Code task "Watch web app".
+  - Alternatively, `yarn build-web` will only build a bundle once.
 1. Run `yarn test-integration` in the repository root to run the tests.
 
 A Sourcegraph instance does not need to be running, because all backend interactions are stubbed.

enterprise/dev/Procfile

@@ -8,7 +8,7 @@ frontend: env CONFIGURATION_MODE=server SITE_CONFIG_ESCAPE_HATCH_PATH=$HOME/.sou
 watch: ./dev/changewatch.sh
 nginx: nginx -p . -g 'daemon off;' -c $PWD/dev/nginx.conf 2>&1 | grep -v 'could not open error log file'
 caddy: ./dev/caddy.sh run --watch --config=dev/Caddyfile
-web: ./node_modules/.bin/gulp --color watch
+web: ./node_modules/.bin/gulp --color dev
 syntect_server: ./dev/syntect_server.sh
 zoekt-indexserver-0: ./dev/zoekt/wrapper indexserver 0
 zoekt-indexserver-1: ./dev/zoekt/wrapper indexserver 1

gulpfile.js

@@ -29,13 +29,13 @@ const build = gulp.series(generate, webWebpack)
 /**
  * Watches everything and rebuilds on file changes.
  */
-const watch = gulp.parallel(watchGenerate, webWebpackDevServer)
+const dev = gulp.parallel(watchGenerate, webWebpackDevServer)
 
 module.exports = {
   generate,
   watchGenerate,
   build,
-  watch,
+  dev,
   schema,
   graphQlSchema,
   watchGraphQlSchema,

package.json

@@ -19,6 +19,7 @@
     "build-ts": "tsc -b tsconfig.all.json",
     "graphql-lint": "graphql-schema-linter cmd/frontend/graphqlbackend/schema.graphql",
     "build-web": "yarn --cwd client/web run build",
+    "watch-web": "yarn --cwd client/web run watch",
     "generate": "gulp generate",
     "watch-generate": "gulp watchGenerate",
     "test": "jest --testPathIgnorePatterns end-to-end regression integration storybook",