fix(testing): revert change & fix playwright tests (#4310)

* fix(testing): revert change & fix playwright tests

* fix(constants): add type to import statement

* refactor(e2e): delete browser test

This test was originally added to ensure playwright was working.

At this point, we know it works so removing this test because it doesn't help
with anything specific to code-server and only adds unnecessary code to the
codebase plus increases the e2e test job duration.

* chore(e2e): use 1 worker for e2e test

I don't know if it's a resources issue, playwright, or code-server but it seems
like the e2e tests choke when multiple workers are used.

This change is okay because our CI runner only has 2 cores so it would only use
1 worker anyway, but by specifying it in our playwright config, we ensure more
stability in our e2e tests working correctly.

See these PRs:
- #3263
- #4310

* revert(vscode): add missing route with redirect

* chore(vscode): update to latest fork

* Touch up compilation step.

* Bump vendor.

* Fix VS Code minification step

* Move ClientConfiguration to common

Common code must not import Node code as it is imported by the browser.

* Ensure lib directory exists before curling

cURL errors now because VS Code was moved and the directory does not
exist.

* Update incorrect e2e test help output

Revert workers change as well; this can be overridden when desired.

* Add back extension compilation step

* Include missing resources in release

This includes a favicon, for example.  I opted to include the entire
directory to make sure we do not miss anything.  Some of the other
stuff looks potentially useful (like completions).

* Set quality property in product configuration

When httpWebWorkerExtensionHostIframe.html is fetched it uses the web
endpoint template (in which we do not include the commit) but if the
quality is not set it prepends the commit to the web endpoint instead.
The new static endpoint does not use/handle commits so this 404s.

Long-term we might want to make the new static endpoint use commits like
the old one but we will also need to update the various other static
URLs to include the commit.

For now I just fixed this by adding the quality since:
  1. Probably faster than trying to find and update all static uses.
  2. VS Code probably expects it anyway.
  3. Gives us better control over the endpoint.

* Update VS Code

This fixes several build issues.

* Bump vscode.

* Bump.

* Bump.

* Use CLI directly.

* Update tests to reflect new upstream behavior.

* Move unit tests to after the build

Our code has new dependencies on VS Code that are pulled in when the
unit tests run.  Because of this we need to build VS Code before running
the unit tests (as it only pulls built code).

* Upgrade proxy-agent dependencies

This resolves a security report with one of its dependencies (vm2).

* Symlink VS Code output directory before unit tests

This is necessary now that we import from the out directory.

* Fix issues surrounding persistent processes between tests.

* Update VS Code cache directories

These were renamed so the cached paths need to be updated.  I changed
the key as well to force a rebuild.

* Move test symlink to script

This way it works for local testing as well.

I had to use out-build instead of out-vscode-server-min because Jest
throws some obscure error about a handlebars haste map.

* Fix listening on a socket

* Update VS Code

It contains fixes for missing files in the build.

* Standardize disposals

* Dispose HTTP server

Shares code with the test HTTP server.  For now it is a function but
maybe we should make it a class that is extended by tests.

* Dispose app on exit

* Fix logging link errors

Unfortunately the logger currently chokes when provided with error
objects.

Also for some reason the bracketed text was not displaying...

* Update regex used by e2e to extract address

The address was recently changed to use URL which seems to add a
trailing slash when using toString, causing the regex match to fail.

* Log browser console in e2e tests

* Add base back to login page

This is used to set cookies when using a base path.

* Remove login page test

The file this was testing no longer exists.

* Use path.posix for static base

Since this is a web path and not platform-dependent.

* Add test for invalid password

Co-authored-by: Teffen Ellis <[email protected]>
Co-authored-by: Asher <[email protected]>

Author: 3 people

.github/workflows/ci.yaml

@@ -19,8 +19,6 @@ jobs:
     name: Pre-build checks
     runs-on: ubuntu-latest
     timeout-minutes: 15
-    env:
-      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2
@@ -54,14 +52,6 @@ jobs:
         run: yarn lint
         if: success()
 
-      - name: Run code-server unit tests
-        run: yarn test:unit
-        if: success()
-
-      - name: Upload coverage report to Codecov
-        run: yarn coverage
-        if: success()
-
   audit-ci:
     name: Run audit-ci
     needs: prebuild
@@ -98,6 +88,8 @@ jobs:
     needs: prebuild
     runs-on: ubuntu-latest
     timeout-minutes: 30
+    env:
+      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
     steps:
       - uses: actions/checkout@v2
         with:
@@ -146,14 +138,25 @@ jobs:
           path: |
             vendor/modules/code-oss-dev/.build
             vendor/modules/code-oss-dev/out-build
-            vendor/modules/code-oss-dev/out-vscode
-            vendor/modules/code-oss-dev/out-vscode-min
-          key: vscode-build-${{ steps.vscode-rev.outputs.rev }}
+            vendor/modules/code-oss-dev/out-vscode-server
+            vendor/modules/code-oss-dev/out-vscode-server-min
+          key: vscode-server-build-${{ steps.vscode-rev.outputs.rev }}
 
       - name: Build vscode
         if: steps.cache-vscode.outputs.cache-hit != 'true'
         run: yarn build:vscode
 
+      # Our code imports code from VS Code's `out` directory meaning VS Code
+      # must be built before running these tests.
+      # TODO: Move to its own step?
+      - name: Run code-server unit tests
+        run: yarn test:unit
+        if: success()
+
+      - name: Upload coverage report to Codecov
+        run: yarn coverage
+        if: success()
+
       # The release package does not contain any native modules
       # and is neutral to architecture/os/libc version.
       - name: Create release package

ci/build/build-code-server.sh

@@ -20,6 +20,8 @@ main() {
   source ./ci/lib.sh
   OS="$(uname | tr '[:upper:]' '[:lower:]')"
 
+  mkdir -p ./lib
+
   if ! [ -f ./lib/coder-cloud-agent ]; then
     echo "Downloading the cloud agent..."
 

ci/build/build-release.sh

@@ -68,7 +68,7 @@ EOF
 bundle_vscode() {
   mkdir -p "$VSCODE_OUT_PATH"
   rsync "$VSCODE_SRC_PATH/yarn.lock" "$VSCODE_OUT_PATH"
-  rsync "$VSCODE_SRC_PATH/out-vscode${MINIFY:+-min}/" "$VSCODE_OUT_PATH/out"
+  rsync "$VSCODE_SRC_PATH/out-vscode-server${MINIFY:+-min}/" "$VSCODE_OUT_PATH/out"
 
   rsync "$VSCODE_SRC_PATH/.build/extensions/" "$VSCODE_OUT_PATH/extensions"
   if [ "$KEEP_MODULES" = 0 ]; then
@@ -80,9 +80,8 @@ bundle_vscode() {
   rsync "$VSCODE_SRC_PATH/extensions/yarn.lock" "$VSCODE_OUT_PATH/extensions"
   rsync "$VSCODE_SRC_PATH/extensions/postinstall.js" "$VSCODE_OUT_PATH/extensions"
 
-  mkdir -p "$VSCODE_OUT_PATH/resources/"{linux,web}
-  rsync "$VSCODE_SRC_PATH/resources/linux/" "$VSCODE_OUT_PATH/resources/linux/"
-  rsync "$VSCODE_SRC_PATH/resources/web/" "$VSCODE_OUT_PATH/resources/web/"
+  mkdir -p "$VSCODE_OUT_PATH/resources/"
+  rsync "$VSCODE_SRC_PATH/resources/" "$VSCODE_OUT_PATH/resources/"
 
   # Add the commit and date and enable telemetry. This just makes telemetry
   # available; telemetry can still be disabled by flag or setting.
@@ -91,6 +90,7 @@ bundle_vscode() {
   {
     "enableTelemetry": true,
     "commit": "$(git rev-parse HEAD)",
+    "quality": "stable",
     "date": $(jq -n 'now | todate')
   }
 EOF

ci/build/build-vscode.sh

@@ -11,13 +11,9 @@ main() {
 
   cd vendor/modules/code-oss-dev
 
-  yarn gulp compile-build compile-extensions-build compile-extension-media compile-web
-
-  yarn gulp optimize --gulpfile ./coder.js
-
-  if [[ $MINIFY ]]; then
-    yarn gulp minify --gulpfile ./coder.js
-  fi
+  # extensions-ci compiles extensions and includes their media.
+  # compile-web compiles web extensions. TODO: Unsure if used.
+  yarn gulp extensions-ci compile-web "vscode-server${MINIFY:+-min}"
 }
 
 main "$@"

ci/build/npm-postinstall.sh

@@ -57,6 +57,9 @@ main() {
   esac
 
   OS="$(uname | tr '[:upper:]' '[:lower:]')"
+
+  mkdir -p ./lib
+
   if curl -fsSL "https://github.com/cdr/cloud-agent/releases/latest/download/cloud-agent-$OS-$ARCH" -o ./lib/coder-cloud-agent; then
     chmod +x ./lib/coder-cloud-agent
   else

ci/dev/test-e2e.sh

@@ -1,6 +1,13 @@
 #!/usr/bin/env bash
 set -euo pipefail
 
+help() {
+  echo >&2 "  You can build with 'yarn watch' or you can build a release"
+  echo >&2 "  For example: 'yarn build && yarn build:vscode && KEEP_MODULES=1 yarn release'"
+  echo >&2 "  Then 'CODE_SERVER_TEST_ENTRY=./release yarn test:e2e'"
+  echo >&2 "  You can manually run that release with 'node ./release'"
+}
+
 main() {
   cd "$(dirname "$0")/../.."
 
@@ -21,13 +28,13 @@ main() {
   # wrong (native modules version issues, incomplete build, etc).
   if [[ ! -d $dir/out ]]; then
     echo >&2 "No code-server build detected"
-    echo >&2 "You can build it with 'yarn build' or 'yarn watch'"
+    help
     exit 1
   fi
 
   if [[ ! -d $dir/vendor/modules/code-oss-dev/out ]]; then
     echo >&2 "No VS Code build detected"
-    echo >&2 "You can build it with 'yarn build:vscode' or 'yarn watch'"
+    help
     exit 1
   fi
 

ci/dev/test-unit.sh

@@ -3,12 +3,26 @@ set -euo pipefail
 
 main() {
   cd "$(dirname "$0")/../.."
-  cd test/unit/node/test-plugin
+
+  source ./ci/lib.sh
+
+  pushd test/unit/node/test-plugin
   make -s out/index.js
+  popd
+
+  # Our code imports from `out` in order to work during development but if you
+  # have only built for production you will have not have this directory.  In
+  # that case symlink `out` to a production build directory.
+  local vscode="vendor/modules/code-oss-dev"
+  local link="$vscode/out"
+  local target="out-build"
+  if [[ ! -e $link ]] && [[ -d $vscode/$target ]]; then
+    ln -s "$target" "$link"
+  fi
+
   # We must keep jest in a sub-directory. See ../../test/package.json for more
   # information. We must also run it from the root otherwise coverage will not
   # include our source files.
-  cd "$OLDPWD"
   CS_DISABLE_PLUGINS=true ./test/node_modules/.bin/jest "$@"
 }
 

package.json

@@ -19,7 +19,7 @@
     "release:prep": "./ci/build/release-prep.sh",
     "test:e2e": "./ci/dev/test-e2e.sh",
     "test:standalone-release": "./ci/build/test-standalone-release.sh",
-    "test:unit": "./ci/dev/test-unit.sh",
+    "test:unit": "./ci/dev/test-unit.sh --forceExit --detectOpenHandles",
     "test:scripts": "./ci/dev/test-scripts.sh",
     "package": "./ci/build/build-packages.sh",
     "postinstall": "./ci/dev/postinstall.sh",

src/browser/pages/login.html

@@ -30,6 +30,7 @@ <h1 class="main">Welcome to code-server</h1>
         <div class="content">
           <form class="login-form" method="post">
             <input class="user" type="text" autocomplete="username" />
+            <input id="base" type="hidden" name="base" value="/" />
             <div class="field">
               <input
                 required
@@ -47,5 +48,13 @@ <h1 class="main">Welcome to code-server</h1>
         </div>
       </div>
     </div>
+    <script>
+      // Inform the backend about the path since the proxy might have rewritten
+      // it out of the headers and cookies must be set with absolute paths.
+      const el = document.getElementById("base")
+      if (el) {
+        el.value = window.location.pathname
+      }
+    </script>
   </body>
 </html>

src/common/emitter.ts

@@ -7,7 +7,7 @@ import { logger } from "@coder/logger"
 export type Callback<T, R = void | Promise<void>> = (t: T, p: Promise<void>) => R
 
 export interface Disposable {
-  dispose(): void
+  dispose(): void | Promise<void>
 }
 
 export interface Event<T> {

src/common/util.ts

@@ -50,35 +50,6 @@ export const resolveBase = (base?: string): string => {
   return normalize(url.pathname)
 }
 
-/**
- * Get client-side configuration embedded in the HTML or query params.
- */
-export const getClientConfiguration = <T extends CodeServerLib.ClientConfiguration>(): T => {
-  let config: T
-  try {
-    config = JSON.parse(document.getElementById("coder-options")!.getAttribute("data-settings")!)
-  } catch (error) {
-    config = {} as T
-  }
-
-  // You can also pass options in stringified form to the options query
-  // variable. Options provided here will override the ones in the options
-  // element.
-  const params = new URLSearchParams(location.search)
-  const queryOpts = params.get("options")
-  if (queryOpts) {
-    config = {
-      ...config,
-      ...JSON.parse(queryOpts),
-    }
-  }
-
-  config.base = resolveBase(config.base)
-  config.csStaticBase = resolveBase(config.csStaticBase)
-
-  return config
-}
-
 /**
  * Wrap the value in an array if it's not already an array. If the value is
  * undefined return an empty array.
@@ -94,7 +65,7 @@ export const arrayify = <T>(value?: T | T[]): T[] => {
 }
 
 // TODO: Might make sense to add Error handling to the logger itself.
-export function logError(logger: { error: (msg: string) => void }, prefix: string, err: Error | string): void {
+export function logError(logger: { error: (msg: string) => void }, prefix: string, err: unknown): void {
   if (err instanceof Error) {
     logger.error(`${prefix}: ${err.message} ${err.stack}`)
   } else {

src/node/app.ts

@@ -4,13 +4,24 @@ import express, { Express } from "express"
 import { promises as fs } from "fs"
 import http from "http"
 import * as httpolyglot from "httpolyglot"
+import { Disposable } from "../common/emitter"
 import * as util from "../common/util"
 import { DefaultedArgs } from "./cli"
+import { disposer } from "./http"
 import { isNodeJSErrnoException } from "./util"
 import { handleUpgrade } from "./wsRouter"
 
 type ListenOptions = Pick<DefaultedArgs, "socket" | "port" | "host">
 
+export interface App extends Disposable {
+  /** Handles regular HTTP requests. */
+  router: Express
+  /** Handles websocket requests. */
+  wsRouter: Express
+  /** The underlying HTTP server. */
+  server: http.Server
+}
+
 const listen = (server: http.Server, { host, port, socket }: ListenOptions) => {
   return new Promise<void>(async (resolve, reject) => {
     server.on("error", reject)
@@ -41,41 +52,48 @@ const listen = (server: http.Server, { host, port, socket }: ListenOptions) => {
 /**
  * Create an Express app and an HTTP/S server to serve it.
  */
-export const createApp = async (args: DefaultedArgs): Promise<[Express, Express, http.Server]> => {
-  const app = express()
-
-  app.use(compression())
+export const createApp = async (args: DefaultedArgs): Promise<App> => {
+  const router = express()
+  router.use(compression())
 
   const server = args.cert
     ? httpolyglot.createServer(
         {
           cert: args.cert && (await fs.readFile(args.cert.value)),
           key: args["cert-key"] && (await fs.readFile(args["cert-key"])),
         },
-        app,
+        router,
       )
-    : http.createServer(app)
+    : http.createServer(router)
+
+  const dispose = disposer(server)
 
   await listen(server, args)
 
-  const wsApp = express()
-  handleUpgrade(wsApp, server)
+  const wsRouter = express()
+  handleUpgrade(wsRouter, server)
 
-  return [app, wsApp, server]
+  return { router, wsRouter, server, dispose }
 }
 
 /**
  * Get the address of a server as a string (protocol *is* included) while
  * ensuring there is one (will throw if there isn't).
+ *
+ * The address might be a URL or it might be a pipe or socket path.
  */
-export const ensureAddress = (server: http.Server): string => {
+export const ensureAddress = (server: http.Server, protocol: string): URL | string => {
   const addr = server.address()
+
   if (!addr) {
-    throw new Error("server has no address")
+    throw new Error("Server has no address")
   }
+
   if (typeof addr !== "string") {
-    return `http://${addr.address}:${addr.port}`
+    return new URL(`${protocol}://${addr.address}:${addr.port}`)
   }
+
+  // If this is a string then it is a pipe or Unix socket.
   return addr
 }