feat: ensure webpack is built before e2e tests (#1171)

* Add test_e2e script

* Fix typo

* remove build webpack

* rename build:webpack:serve -> webpack:serve

* Add rationale for writeToDisk

.github/workflows/ci.yml

@@ -52,8 +52,6 @@ jobs:
       run: yarn test:e2e:jest
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps
-    - name: Build Webpack
-      run: yarn build:webpack:dev
     - name: Run Playwright tests
       run: yarn test:e2e
     - uses: actions/upload-artifact@v3

base-theme/assets/webpack/webpack.dev.ts

@@ -18,6 +18,18 @@ const devOverrides: Configuration = {
 
   devtool: "eval-source-map",
 
+  devServer: {
+    host:          env.WEBPACK_HOST,
+    port:          env.WEBPACK_PORT,
+    devMiddleware: {
+      // Compiled assets are written to disk so that they can be
+      // accessed through the hugo server.
+      //
+      // You can find more details here: https://github.com/mitodl/ocw-hugo-themes/issues/1096
+      writeToDisk: true
+    }
+  },
+
   watch: env.WEBPACK_WATCH_MODE,
 
   plugins: [

package.json

@@ -15,9 +15,10 @@
     "build": "yarn with-env -- ./package_scripts/build.sh",
     "build:githash": "mkdir -p base-theme/dist/static && git rev-parse HEAD > base-theme/dist/static/hash.txt",
     "build:hugo": "hugo -d ../dist -v",
-    "build:webpack:dev": "cross-env NODE_ENV=development WEBPACK_WATCH_MODE=false webpack --config base-theme/assets/webpack/webpack.dev.ts",
     "build:hugo:debug": "hugo -d ../dist -v --templateMetrics --debug",
     "build:webpack": "cross-env NODE_ENV=production webpack --config base-theme/assets/webpack/webpack.prod.ts",
+    "build:webpack:dev": "cross-env NODE_ENV=development WEBPACK_WATCH_MODE=false webpack --config base-theme/assets/webpack/webpack.dev.ts",
+    "webpack:serve": "cross-env NODE_ENV=development webpack serve --config base-theme/assets/webpack/webpack.dev.ts",
     "webpack:stats": "NODE_ENV=production webpack --config base-theme/assets/webpack/webpack.prod.ts --profile --json > stats.json",
     "webpack:analyze": "webpack-bundle-analyzer stats.json dist",
     "fmt": "yarn fmt:check --write",
@@ -26,7 +27,7 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:verbose": "jest --verbose",
-    "test:e2e": "yarn with-env --dev -- playwright test",
+    "test:e2e": "yarn with-env --dev -- ./package_scripts/test_e2e.sh",
     "test:e2e:jest": "yarn jest --testPathIgnorePatterns='/node_modules/' --testPathPattern='/tests-e2e/jest/'",
     "typecheck": "tsc --noEmit",
     "with-env": "ts-node ./package_scripts/with-env.ts"

package_scripts/test_e2e.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+set -euo pipefail
+
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[0;33m'
+RESET='\033[0m'
+
+if [[ "$NODE_ENV" == "development" ]]; then
+    # Check if the webpack server is responsive
+    if ! nc -z -w 10 "$WEBPACK_HOST" "$WEBPACK_PORT"; then
+        echo -e "${YELLOW}Webpack server at $WEBPACK_HOST:$WEBPACK_PORT is not responsive."
+        echo -e "Run webpack server in the background for faster start-up times."
+        echo -e "\n\t yarn webpack:serve \n${RESET}"
+
+        echo "Building webpack..."
+        if ! yarn build:webpack:dev; then
+            echo -e "\n${RED}Command 'yarn build:webpack:dev' failed. Exiting...${RESET}\n"
+            exit 1
+        fi
+    else
+        echo -e "${GREEN}Found Webpack server at $WEBPACK_HOST:$WEBPACK_PORT, skipping manual build.${RESET}"
+    fi
+fi
+
+playwright test $@