ci: add e2e tests on deployments

.github/workflows/deploy-happy-stack.yml

@@ -11,6 +11,7 @@ env:
   DOCKER_BUILDKIT: 1
   COMPOSE_DOCKER_CLI_BUILD: 1
   DOCKER_REPO: ${{ secrets.ECR_REPO }}/
+  DEPLOYMENT_STAGE: ${{ github.ref == 'refs/heads/prod' && 'prod' || github.ref == 'refs/heads/staging' && 'stage' || 'dev' }}
 
 permissions:
   id-token: write
@@ -39,15 +40,6 @@ jobs:
         with:
           registry: ${{ secrets.ECR_REPO }}
       - uses: actions/checkout@v2
-      - name: Set deployment stage variable
-        run : |
-          if [[ "${{ github.ref }}" == "refs/heads/prod" ]]; then
-            echo "DEPLOYMENT_STAGE=prod" >> $GITHUB_ENV
-          elif [[ "${{ github.ref }}" == "refs/heads/staging" ]]; then
-            echo "DEPLOYMENT_STAGE=stage" >> $GITHUB_ENV
-          else
-            echo "DEPLOYMENT_STAGE=dev" >> $GITHUB_ENV
-          fi
       - name: Setup envfile
         run: |
           mkdir /home/runner/work/custom
@@ -60,5 +52,56 @@ jobs:
           stack-name: explorer-${{ env.DEPLOYMENT_STAGE }}stack
           create-tag: "true"
           env: ${{ env.DEPLOYMENT_STAGE }}
-          env-file: /home/runner/work/custom/envfile 
+          env-file: /home/runner/work/custom/envfile
           happy_version: "0.79.1"
+  smoke-test:
+    timeout-minutes: 30
+    runs-on: ubuntu-22.04
+    needs:
+      - upgrade
+    strategy:
+      fail-fast: false
+    defaults:
+      run:
+        working-directory: client
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "npm"
+          cache-dependency-path: "package-lock.json"
+      - name: Install dependencies
+        run: |
+          npm ci
+          npx playwright install --with-deps
+
+      # Run e2e tests
+      - name: Run e2e tests
+        run: npm run e2e-${DEPLOYMENT_STAGE}
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          # This is `npm run build-archive-storybook`
+          buildScriptName: "build-archive-storybook"
+
+      - name: Upload FE test results as an artifact
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-report
+          path: /Users/runner/work/single-cell-explorer/single-cell-explorer/client/playwright-report
+          retention-days: 14
+
+      - name: Upload blob report to GitHub Actions Artifacts
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: all-blob-reports
+          path: /Users/runner/work/single-cell-explorer/single-cell-explorer/client/blob-report
+        retention-days: 1

client/__tests__/common/constants.ts

@@ -7,13 +7,12 @@ export const APP_URL_BASE =
   process.env.CXG_URL_BASE || `http://localhost:${ENV_DEFAULT.CXG_CLIENT_PORT}`;
 
 const DEFAULT_BASE_PATH = "d";
-export const testURL = APP_URL_BASE.includes("localhost")
-  ? [APP_URL_BASE, DEFAULT_BASE_PATH, DATASET].join("/")
-  : APP_URL_BASE;
+export const testURL = [APP_URL_BASE, DEFAULT_BASE_PATH, DATASET, ""].join("/");
 export const pageURLTruncate = [
   APP_URL_BASE,
   DEFAULT_BASE_PATH,
   DATASET_TRUNCATE,
+  "",
 ].join("/");
 
 export const BLUEPRINT_SAFE_TYPE_OPTIONS = { delay: 50 };

client/__tests__/e2e/e2e.test.ts

@@ -1,4 +1,4 @@
 /**
  * Smoke test suite that will be run in GHA
  * Tests included in this file are expected to be relatively stable and test core features
  *
@@ -55,6 +55,7 @@
   DATASET,
   DATASET_TRUNCATE,
   pageURLTruncate,
+  testURL,
 } from "../common/constants";
 import { goToPage } from "../util/helpers";
 
@@ -92,6 +93,7 @@
 const data = datasets[DATASET];
 const dataTruncate = datasets[DATASET_TRUNCATE];
 
+// TODO #754
 test.beforeEach(mockSetup);
 
 describe("did launch", () => {
@@ -152,31 +154,33 @@
     }
   });
 
-  test("categories and values from dataset appear and properly truncate if applicable", async ({
-    page,
-  }) => {
-    await goToPage(page, pageURLTruncate);
+  // TODO(seve) #753
+  test.fixme(
+    "categories and values from dataset appear and properly truncate if applicable",
+    async ({ page }) => {
+      await goToPage(page, pageURLTruncate);
 
-    for (const label of Object.keys(
-      dataTruncate.categorical
-    ) as (keyof typeof dataTruncate.categorical)[]) {
-      const element = await page.getByTestId(`category-${label}`).innerHTML();
+      for (const label of Object.keys(
+        dataTruncate.categorical
+      ) as (keyof typeof dataTruncate.categorical)[]) {
+        const element = await page.getByTestId(`category-${label}`).innerHTML();
 
-      expect(element).toMatchSnapshot();
+        expect(element).toMatchSnapshot();
 
-      await page.getByTestId(`${label}:category-expand`).click();
+        await page.getByTestId(`${label}:category-expand`).click();
 
-      const categories = await getAllCategoriesAndCounts(label, page);
+        const categories = await getAllCategoriesAndCounts(label, page);
 
-      expect(Object.keys(categories)).toMatchObject(
-        Object.keys(dataTruncate.categorical[label])
-      );
+        expect(Object.keys(categories)).toMatchObject(
+          Object.keys(dataTruncate.categorical[label])
+        );
 
-      expect(Object.values(categories)).toMatchObject(
-        Object.values(dataTruncate.categorical[label])
-      );
+        expect(Object.values(categories)).toMatchObject(
+          Object.values(dataTruncate.categorical[label])
+        );
+      }
     }
-  });
+  );
 
   test("continuous data appears", async ({ page }) => {
     await goToPage(page);
@@ -615,6 +619,11 @@
     test("diffexp", async ({ page }) => {
       if (option.withSubset) return;
 
+      const runningAgainstDeployment = !testURL.includes("localhost");
+
+      // this test will take longer if we're running against a deployment
+      if (runningAgainstDeployment) test.slow();
+
       await setup(option, page);
 
       // set the two cell sets to b cells vs nk cells
@@ -656,7 +665,7 @@
           // (thuang): Assumes Pop2 geneset has NKG7 gene
           expect(page.getByTestId("NKG7:gene-label")).toBeVisible();
         },
-        { page }
+        { page, timeoutMs: runningAgainstDeployment ? 20000 : undefined }
       );
 
       genesHTML = await page.getByTestId("gene-set-genes").innerHTML();

client/package.json

@@ -12,6 +12,9 @@
     "clean": "rimraf build",
     "dev": "npm run build -- configuration/webpack/webpack.config.dev.js",
     "e2e": "playwright test",
+    "e2e-dev": "CXG_URL_BASE=https://cellxgene.dev.single-cell.czi.technology playwright test",
+    "e2e-stage": "CXG_URL_BASE=https://cellxgene.staging.single-cell.czi.technology playwright test",
+    "e2e-prod": "CXG_URL_BASE=https://cellxgene.cziscience.com playwright test",
     "fmt": "eslint --fix src __tests__",
     "lint": "eslint src __tests__ & npm run type-check",
     "prod": "npm run build -- configuration/webpack/webpack.config.prod.js",