feat: add stricter tests to catch shiny errors

.github/workflows/deploy.yml

@@ -25,6 +25,7 @@ env:
   SHINYAPPSIO_ACCOUNT: genentech
   APP_PREFIX: NEST
   GITHUB_PAT: ${{ secrets.REPO_GITHUB_TOKEN }}
+  APP_NAME: ${{ matrix.directory }}
 
 jobs:
   deploy:
@@ -163,12 +164,18 @@ jobs:
         working-directory: ${{ matrix.directory }}
         run: cat renv.lock
 
+      - name: Read number of tabs from JSON file
+        id: read-tabs
+        run: |
+          num_tabs=$(jq -r ".\"${{ matrix.directory }}\"" _internal/tabs.json)
+          echo "NUM_TABS=${num_tabs}" >> $GITHUB_ENV
+
       - name: Front end test to check if the app works fine
         if: steps.find-cypress.outputs.has-cypress-tests == 'true'
         uses: cypress-io/github-action@v6
         with:
           build: npm install cypress --save-dev
-          working-directory: ${{ matrix.directory }}/tests
+          working-directory: _internal/tests
           start: npm run run-app
           wait-on: "http://localhost:3333"
           wait-on-timeout: 500

.gitignore

@@ -57,3 +57,4 @@ rsconnect/
 
 # Markdown generated files
 */README.html
+_internal/tests/node_modules

_internal/tabs.json

@@ -0,0 +1,11 @@
+{
+  "RNA-seq": 10,
+  "basic-teal": 1,
+  "efficacy": 15,
+  "exploratory": 16,
+  "longitudinal": 8,
+  "early-dev": 10,
+  "patient-profile": 10,
+  "python": 0,
+  "safety": 12
+}

_internal/tests/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {},
+    baseUrl: 'http://localhost:3333',
+    supportFile: false,
+  },
+})

_internal/tests/cypress/.gitignore

@@ -0,0 +1,2 @@
+/screenshots/
+/videos/

_internal/tests/cypress/e2e/app.cy.js

@@ -0,0 +1,45 @@
+describe("app", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("Starts", () => {});
+
+  it.only("Has expected teal tabs", () => {
+    cy.get(".nav.nav-pills a[data-bs-toggle=tab]", { timeout: 30000 }).should(
+      "have.length",
+      Cypress.env("NUM_TABS")
+    );
+  });
+
+  it("Navigates to all tabs without error", () => {
+    cy.get(".nav.nav-pills a[data-bs-toggle=tab]", { timeout: 30000 }).each(
+      ($el) => {
+        cy.wrap($el).as("tealTab");
+
+        cy.get("@tealTab").then(($el2) => {
+          cy.log(`Navigating to: ${$el2[0].innerText}`);
+        });
+
+        cy.get("@tealTab").click();
+
+        cy.get("@tealTab").invoke("attr", "href").as("hrefTab");
+
+        cy.waitForStabilityAndCatchError("body");
+
+        cy.get("@hrefTab").then((hrefTab) => {
+          cy.get(`${hrefTab}.tab-pane.active`)
+            .should("be.visible")
+            .within(() => {
+              cy.get("*")
+                .filter(":visible")
+                .should("have.length.gte", 1)
+                .then(($el3) => {
+                  cy.wrap($el3).contains(/.+/);
+                });
+            });
+        });
+      }
+    );
+  });
+});

_internal/tests/cypress/support/commands.js

@@ -0,0 +1,33 @@
+Cypress.Commands.add(
+  "waitForStabilityAndCatchError",
+  (selector, stabilityPeriod = 300) => {
+    let lastInnerHTML = "";
+    let timesRun = 0;
+    const checkInterval = 100;
+    const maxTimesRun = stabilityPeriod / checkInterval;
+
+    function checkForChanges() {
+      cy.get(selector).then(($el) => {
+        // Check for shiny-output-error class anywhere in the body
+        if (Cypress.$("body").find(".shiny-output-error").length > 0) {
+          throw new Error(
+            "shiny-output-error class detected during stability check"
+          );
+        }
+
+        const currentInnerHTML = $el.prop("innerHTML");
+        if (currentInnerHTML !== lastInnerHTML) {
+          lastInnerHTML = currentInnerHTML;
+          timesRun = 0;
+        } else if (timesRun < maxTimesRun) {
+          timesRun += 1;
+        } else {
+          return;
+        }
+        cy.wait(checkInterval).then(checkForChanges);
+      });
+    }
+
+    checkForChanges();
+  }
+);