Integration tests for Rally Web Platform

.circleci/config.yml

@@ -6,7 +6,7 @@ orbs:
   # The Node.js orb contains a set of prepackaged CircleCI configuration you can utilize
   # Orbs reduce the amount of configuration required for common tasks.
   # See the orb documentation here: https://circleci.com/developer/orbs/orb/circleci/node
-  node: circleci/node@4.1
+  node: circleci/node@4.7.0
 
 jobs:
   # Below is the definition of your job to build and test your app, you can rename and customize it as you want.
@@ -15,7 +15,7 @@ jobs:
     # You can specify an image from Dockerhub or use one of our Convenience Images from CircleCI's Developer Hub.
     # A list of available CircleCI Docker Convenience Images are available here: https://circleci.com/developer/images/image/cimg/node
     docker:
-      - image: cimg/node:15.1
+      - image: cimg/openjdk:16.0.2-node
     # Then run your tests!
     # CircleCI will report the results back to your VCS provider.
     steps:
@@ -34,9 +34,17 @@ jobs:
           root: .
           paths:
             - .
-      #- run:
-      #    name: Run tests
-      #    command: npm run test:unit
+      - run:
+          name: Install Nightly Firefox and dependencies for official Google Chrome package
+          command: sudo add-apt-repository ppa:ubuntu-mozilla-daily/ppa && sudo apt update && sudo apt install firefox-trunk default-jre fonts-liberation libgbm1 xdg-utils
+      - run:
+          name: Download and install official Google Chrome package
+          command: wget 'https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb' && sudo dpkg -i google-chrome-stable_current_amd64.deb
+      - run:
+          name: Run tests
+          command: npm run test:integration
+      - store_artifacts:
+          path: ./screenshots
   site-deploy:
     docker:
       - image: cimg/node:15.1
@@ -45,7 +53,7 @@ jobs:
           at: .
       - run:
           name: Firebase Deploy
-          command: ./node_modules/.bin/firebase deploy --only hosting --token "$FIREBASE_TOKEN"
+          command: ./node_modules/.bin/firebase deploy --only hosting,functions --token "$FIREBASE_TOKEN"
 workflows:
   # Below is the definition of your workflow.
   # Inside the workflow, you provide the jobs you want to run, e.g this workflow runs the build-and-test job above.

README.md

@@ -1,14 +1,27 @@
-# Rally Web Platform Spike
+# Rally Web Platform
 
-This repository contains the code for the user management experience. It is implemented in [Sveltekit](https://kit.svelte.dev/), a next.js-like framework for [Svelte](https://svelte.dev/).
+This repository contains the code needed to build the Rally Web Platform.
+Mozilla Rally is an opt-in data collection platform.
+
+The Rally Web Platform consists of:
+
+- A static website, built with Svelte.
+- A storage and authentication backend, powered by Firebase.
+- One or more WebExtensions which collect and submit user browsing data.
+
+The website is used to create/log in to a Rally account, and allows users to
+control what data is collected by any installed WebExtension(s).
+
+WebExtensions are built from the [Rally Study Template](https://github.com/mozilla-rally/study-template).
 
 ## Requirements
-* [Node.js](https://nodejs.org/en/)
-* [Mozilla web-ext](https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/)
 
-This repository contains the code needed to build the Rally Study 01 Web Extension. 
-The study submits data through [Mozilla Rally's Web Extension](https://github.com/mozilla-rally/rally-core-addon),
-or can be run locally without Mozilla Rally installed on your computer.
+* [Node.js](https://nodejs.org/en/)
+* [Firebase](https://firebase.google.com/docs/cli)
+  * Authentication
+  * Functions
+  * Firestore
+  * Hosting
 
 ## Quickstart
 
@@ -17,25 +30,103 @@ or can be run locally without Mozilla Rally installed on your computer.
 3. Run `npm run dev` to spin up the dev environment at `localhost:3000`
 4. Run `npm run build` to build the app; the results will be in `/build`
 
+## Emulating the server backend (Firebase)
+
+### Starting the emulators
+The `firebase-tools` node package provides a suite of emulators for the various Firebase services:
+`npm install -g firebase-tools`
+
+By default, all emulators specified in `./firebase.json` will be started with an empty database and no user accounts:
+`firebase emulators:start`
+
+NOTE: any modifications you make within the emulators will not be saved, by default! You can save all data on exit
+by passing `--export-on-exit`:
+`firebase emulators:start --export-on-exit ./my-test-data/`
+
+You may then load this data into the emulator on startup:
+`firebase emulators:start --import ./my-test-data/`
+
+You may find the test data used for integration tests helpfully for local development too:
+`firebase emulators:start ./tests/integration/testdata`
+
+### Configuring and using the emulators
+
+Firebase will output something similar to the following:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ ✔  All emulators ready! It is now safe to connect your app. │
+│ i  View Emulator UI at http://localhost:4000                │
+└─────────────────────────────────────────────────────────────┘
+
+┌────────────────┬────────────────┬─────────────────────────────────┐
+│ Emulator       │ Host:Port      │ View in Emulator UI             │
+├────────────────┼────────────────┼─────────────────────────────────┤
+│ Authentication │ localhost:9099 │ http://localhost:4000/auth      │
+├────────────────┼────────────────┼─────────────────────────────────┤
+│ Functions      │ localhost:5001 │ http://localhost:4000/functions │
+├────────────────┼────────────────┼─────────────────────────────────┤
+│ Firestore      │ localhost:8080 │ http://localhost:4000/firestore │
+├────────────────┼────────────────┼─────────────────────────────────┤
+│ Hosting        │ localhost:5000 │ n/a                             │
+└────────────────┴────────────────┴─────────────────────────────────┘
+  Emulator Hub running at localhost:4400
+  Other reserved ports: 4500
+
+Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
+```
+
+You may now browse to http://localhost:4000 to access the various emulator control panels,
+which allow you to add/remove users and documents from the Firestore database.
+
+### Configuring the Rally Web Platform website and WebExtensions to use the emulators
+
+When the website is re-built in "test integration" mode, it will automatically deploy to the emulated Firebase Hosting:
+`npm run build:test:integration`
+
+Clients wishing to connect to the Firebase emulators, including the website any WebExtensions, must set
+this explicitly in their code after initializing the services.
+
+Connecting to the Firebase Authentication
+```ts
+const auth = getAuth(app);
+connectAuthEmulator(auth, 'http://localhost:9099');
+```
+
+Connecting to the Firebase Firestore emulator:
+```ts
+db = getFirestore(app);
+connectFirestoreEmulator(db, 'localhost', 8080);
+```
+
 ## Tests
 
-This repository comes (aspirationally) with 
-- unit tests: run `npm run test:unit`
+Integration tests can be run with:
+
 - integration tests: run `npm run test:integration`
 
-These are currently severely underdeveloped right now.
-Once we feel a bit more comfortable with the state of this branch,
-we will prioritize integration testing.
+This uses Selenium and the Firebase Emulators to run the full Rally Web Platform stack and test that
+the various supported UX flows work as expected.
+
+This repository comes (aspirationally) with unit tests:
+- run `npm run test:unit`
+
+These are currently severely underdeveloped right now, we are currently prioritizing
+integration testing.
+
 
 ## Organization
 
-There are two primary source file directories: `src/lib` and `src/routes`:
 - `src/lib` – the components and utility functions utilized in the frontend.
   - `src/lib/stores` – contains the overarching application store & any derived stores. These set in the context of the layouts in `src/routes`, which gives access to the global store to all children components (including pages).
   - `src/lib/views` – the standalone views that get utilized for individual pages. We are breaking these out separately because we utilize the same content & functionality blocks on multiple routes (e.g. for onboarding, `/welcome/terms` and for the main view, `/terms`).
   - The rest of the components and functions in `/src/lib/` are used throughout the page components and the views.
 - `src/routes` – the page components utilized in the routes. Sveltekit's routing is directory-based; so `src/routes/terms/index.svelte` maps to `/terms`, and `src/routes/welcome/profile/index.svelte` maps to `/welcome/profile`.
 
+- `functions` - Firebase functions needed to support the Rally Web Platform.
+
 `svelte.config.js` – contains the configuration of the Sveltekit app. Sveltekit utilizes Vite under the hood, and has support for both Vite and Rollup plugins.
 
-`firebase.config.js` – contains our public firebase configuration for this application.
+`firebase.config.js` – contains our public firebase configuration for this application.
+
+`firebase.json` - contains the server-side configuration for this Firebase project.

babel.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+        ['@babel/preset-env', { targets: { node: 'current' } }],
+        '@babel/preset-typescript',
+    ],
+};

docs/rally_token.mermaid

@@ -0,0 +1,8 @@
+sequenceDiagram
+    Rally Website->>Firebase: User credentials
+    Firebase-->>Rally Website: IDToken (web)
+    Rally Website->>Rally Function: IDToken (web)
+    Rally Function-->>Rally Website: Custom Token
+    Rally Website->>Rally Extension: Custom Token
+    Rally Extension-->>Firebase: Custom Token
+    Firebase-)Rally Extension: IDToken (extension)

firebase.json

@@ -1,6 +1,34 @@
 {
   "hosting": {
     "public": "build",
-    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  },
+  "functions": {
+    "source": "functions",
+    "predeploy": [
+      "npm --prefix \"$RESOURCE_DIR\" run lint",
+      "npm --prefix \"$RESOURCE_DIR\" run build"
+    ]
+  },
+  "emulators": {
+    "auth": {
+      "port": 9099
+    },
+    "functions": {
+      "port": 5001
+    },
+    "firestore": {
+      "port": 8080
+    },
+    "hosting": {
+      "port": 5000
+    },
+    "ui": {
+      "enabled": true
+    }
   }
 }

functions/.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  root: true,
+  env: {
+    es6: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "google",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: ["tsconfig.json", "tsconfig.dev.json"],
+    sourceType: "module",
+  },
+  ignorePatterns: [
+    "/lib/**/*", // Ignore built files.
+  ],
+  plugins: [
+    "@typescript-eslint",
+    "import",
+  ],
+  rules: {
+    quotes: ["error", "double"],
+  },
+};

functions/.gitignore

@@ -0,0 +1,9 @@
+# Compiled JavaScript files
+lib/**/*.js
+lib/**/*.js.map
+
+# TypeScript v1 declaration files
+typings/
+
+# Node.js dependency directory
+node_modules/