Merge branch 'develop' into allow-network-warning

.editorconfig

@@ -7,11 +7,17 @@ trim_trailing_whitespace = true
 charset = utf-8
 indent_style = space
 
-[*.{html,yml,yaml,vue}]
-indent_size = 2
-
-[*.{ts,scss,json,js}]
+# As we convert components to the Vue 3
+# composition API and remove deprecated SCSS features,
+# we will gradually move from 4-space to 2-space indentation
+# on these file types.
+[src/**.{ts,scss}]
+indent_size = 4
+[tests/**.{ts}]
 indent_size = 4
 
-[package.json]
+[tests/e2e/**.ts]
+indent_size = 2
+
+[*.{html,yml,yaml,vue,json,js}]
 indent_size = 2

.eslintrc.json

@@ -0,0 +1,26 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/essential",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-type-checked"
+    ],
+    "parserOptions": {
+        "project": true,
+        "ecmaVersion": 12,
+        "parser": "@typescript-eslint/parser",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "no-unused-vars": [ "off" ],
+        "@typescript-eslint/no-unused-vars": [ "off" ]
+    }
+}

.github/workflows/node.js.yml

@@ -7,25 +7,80 @@ on:
   push:
     branches: [ develop ]
   pull_request:
-    branches: [ develop ]
 
 jobs:
-  build:
-
+  lint:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
     - uses: actions/checkout@v2
+
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v2
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
-    - run: npm install
+
+    - run: npm ci
+    - run: npm run lint
     - run: npm run build
+
+  unit-tests:
+    # Lint is fast. If we wait for it we guarantee a cache hit on dependencies.
+    needs: lint
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - run: npm ci
     - run: npm test
+
+  e2e-tests:
+    # Lint is fast. If we wait for it we guarantee a cache hit on dependencies.
+    needs: lint
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        submodules: 'true'
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - run: docker compose -f e2e_test_stack/docker-compose.yml build
+    - run: docker compose -f e2e_test_stack/docker-compose.yml pull
+
+    - run: npm ci
+
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+
+    - run: npm run e2e:once

.gitignore

@@ -20,3 +20,8 @@ yarn-error.log*
 *.sln
 *.sw*
 coverage
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "e2e_test_stack/autograder-server"]
+	path = e2e_test_stack/autograder-server
+	url = [email protected]:eecs-autograder/autograder-server.git

.postcssrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-    plugins: {
-        autoprefixer: {}
-    }
-}
+  plugins: {
+    autoprefixer: {},
+  },
+};

.prettierrc.yml

@@ -0,0 +1 @@
+embeddedLanguageFormatting: off

Dockerfile-website-dev

@@ -1,13 +1,13 @@
-FROM ubuntu:xenial
+FROM ubuntu:jammy
 
 RUN mkdir -p /usr/src/app/src
 RUN apt-get update --fix-missing
 
 WORKDIR /usr/src/app
 
-RUN apt-get install -y curl
-RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
-RUN apt-get install -y nodejs
+RUN apt-get install -y curl gnupg wget
+RUN wget https://nodejs.org/dist/v16.9.1/node-v16.9.1-linux-x64.tar.gz
+RUN tar -xf node-v16.9.1-linux-x64.tar.gz -C /usr/local --strip-components=1 --no-same-owner
 
 COPY package.json .
 COPY package-lock.json .
@@ -16,8 +16,4 @@ COPY .postcssrc.js .
 COPY vue.config.js .
 COPY tsconfig.json .
 
-# HACK: For some reason, npm install exits nonzero the first time,
-# even though the packages installed successfully. The second time,
-# it succeeds. This may just be due to running out of memory when
-# running in a VM.
-RUN bash -c 'npm install || npm install'
+RUN npm ci

Dockerfile-website-prod

@@ -1,13 +1,13 @@
-FROM nginx:1.13
+FROM nginx:1.25
 
 RUN apt-get update --fix-missing
 RUN mkdir -p /usr/src/app/src
 
 WORKDIR /usr/src/app
 
-RUN apt-get install -y curl gnupg
-RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
-RUN apt-get install -y nodejs
+RUN apt-get install -y curl gnupg wget
+RUN wget https://nodejs.org/dist/v16.9.1/node-v16.9.1-linux-x64.tar.gz
+RUN tar -xf node-v16.9.1-linux-x64.tar.gz -C /usr/local --strip-components=1 --no-same-owner
 
 COPY package.json .
 COPY package-lock.json .
@@ -16,7 +16,7 @@ COPY .postcssrc.js .
 COPY vue.config.js .
 COPY tsconfig.json .
 
-RUN npm install
+RUN npm ci
 
 COPY . /usr/src/app
 RUN npm run build

README.md

@@ -6,24 +6,67 @@ For information about contributing to Autograder.io, see our
 ## Setup
 Follow the [dev stack setup tutorial](https://github.com/eecs-autograder/autograder-full-stack/blob/master/docs/development_setup.md) for the [autograder-full-stack repo](https://github.com/eecs-autograder/autograder-full-stack).
 
-## Dev commands
-The unit tests currently support Node.js version 12 (newer versions may work too).
-You can install this version with [NVM](https://github.com/nvm-sh/nvm/blob/master/README.md)
+Our CI is currently configured to use NodeJS 16.
+The component tests (which now use vitest as their runner) should work with Node 20,
+but `npm run build` (which still uses vue-cli-services) will ONLY work with Node 16
+The component tests currently use Node.js version 20 (newer versions may work too).
+You can install specific node versions with [NVM](https://github.com/nvm-sh/nvm/blob/master/README.md)
 by running:
 ```
-nvm install 12
+nvm install 16
 ```
 
-To run the unit tests (with coverage):
+Next, install npm dependencies:
+```
+npm ci
+npx playwright install --with-deps
+```
+
+## Linting and Testing
+To run linters (eslint, Prettier, type checking, etc.):
+```
+npm run lint
+npm run build
+```
+
+To run the unit tests:
 ```
 npm test
 ```
 
+We recently started adding end-to-end tests written with Playwright.
+Running them requires building and starting the end-to-end test stack:
+```
+# Build the stack
+docker compose -f e2e_test_stack/docker-compose.yml build
+
+# Start the stack in the foreground
+npm run e2e:serve
+
+# Or start the stack in the background
+npm run e2e:served
+```
+
+To run the e2e tests headless:
+```
+npm run e2e
+```
+
+To run the e2e tests in UI mode:
+```
+npm run e2e -- --ui
+```
+
 ## Coding Standards
 In addition to the items listed here, all source code must follow our
 [Typescript/Vue coding standards](https://github.com/eecs-autograder/autograder.io/blob/master/coding_standards_typescript_vue.md).
 
-Run `npm run build` to check for some style issues using TSLint. All code must be free of TSLint errors. This command should also be treated as the single source of truth for type checking, as different editor plugins have various shortcomings.
+We are in the process of formatting the codebase using Prettier.
+At this time, only apply Prettier to the following:
+- New components written using the composition API
+- Test cases for new components
+- Components being converted to use the composition API
+Add the names of such files to the Prettier and eslint commands in static_analysis.bash.
 
 - HTML/CSS
     - Prefer classes to id's unless you can guarantee that only one element