Merge pull request #116 from Appsilon/e2e-tests

E2e tests

.Rbuildignore

@@ -7,3 +7,4 @@
 ^\.lintr$
 ^\.github$
 ^pkgdown$
+^e2e

.github/workflows/e2e-tests.yml

@@ -0,0 +1,30 @@
+name: Cypress Tests
+
+on: push
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install R
+        uses: r-lib/actions/setup-r@v2
+        with:
+          r-version: release
+
+      - name: Install R dependencies
+        uses: r-lib/actions/setup-r-dependencies@v2
+        with:
+          cache-version: 2
+          needs: check
+          pak-version: 'devel'
+          extra-packages: any::devtools, any::optparse, local::.
+
+      - name: Cypress install and run
+        uses: cypress-io/github-action@v5
+        with:
+          working-directory: e2e
+          command: yarn e2e-test

.github/workflows/r-cmd-check.yml

@@ -52,7 +52,7 @@ jobs:
           cache-version: 2
           needs: check
           pak-version: 'stable'
-          extra-packages: local::. # Necessary to avoid object usage linter errors.
+          extra-packages: any::devtools, any::optparse, local::.
 
       - name: R CMD check
         uses: r-lib/actions/check-r-package@v2

.gitignore

@@ -55,3 +55,8 @@ inst/doc
 data/
 
 *.DS_Store
+
+# Cypress
+e2e/yarn-error.log
+e2e/cypress/downloads
+e2e/cypress/videos

e2e/create_test_template.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+if [ "$#" -ne 1 ]; then
+    echo "Usage: $0 <custom_text>"
+    exit 1
+fi
+
+custom_text="$1"
+cy_spec_out="$1.cy.js"
+
+# Escape special characters in the custom_text to use in sed
+escaped_custom_text=$(printf '%s\n' "$custom_text" | sed -e 's/[\/&]/\\&/g')
+
+# Replace with sed
+cat "cypress/e2e/template.template" | sed "s/<<<var_1>>>/$escaped_custom_text/g"  >> cypress/e2e/$cy_spec_out
+
+echo "cypress/e2e/$cy_spec_out created"

e2e/cypress.config.js

@@ -0,0 +1,27 @@
+const { defineConfig } = require("cypress");
+const { initPlugin } = require("cypress-plugin-snapshots/plugin");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+      initPlugin(on, config);     // this is cypress/plugins/index.js in Cypress v9
+      return config;
+    },
+    excludeSpecPattern: [
+      "**/__snapshots__/*",
+      "**/__image_snapshots__/*"
+    ]
+  },
+  env: {
+    "cypress-plugin-snapshots": {
+      "imageConfig": {
+        "threshold": 1, // Amount in pixels or percentage before snapshot image is invalid
+        "thresholdType": "percent" // Can be either "pixels" or "percent"
+      },
+    },
+    "screenshotConfig": {
+      "timeout": 60000
+    },
+  }
+});

e2e/cypress/README.md

@@ -0,0 +1,42 @@
+## Updating e2e tests
+When adding new shiny app examples to the `inst/examples` folder we encourage you to add e2e tests for these example apps.
+
+### Adding tests manually
+You can add any e2e spec file manually. In order to catch these tests with the script that we'll use to run the e2e tests of shiny apps you only need to put the example Shiny apps in the `inst/examples` folder and create an e2e spec file under `tests/cypress/e2e` following the same name. For example if the newly created example app is named `myNewShinyApp` and is located at `inst/examples/myNewShinyApp` then the spec file should be named `tests/cypress/e2e/myNewShinyApp.cy.js`.
+
+### Using `create_test_template.sh`
+
+You can use the `tests/create_test_template.sh` to create a runnable e2e template test.
+Let's use the script assuming that you have created an example shiny app in the `inst/examples` folder named `myNewShinyApp`
+
+1. Go to the `tests/` folder
+2. Run `create_test_template myNewShinyApp`. Note that the parameter passed to the script should be the name of the 
+folder in which the example app was created. This will create a template spec file:
+  a. An `.cy.js` spec file at `tests/cypress/e2e/myNewShinyApp.cy.js` that will contain a simple e2e snapshot test. You can 
+add more tests to this file that are expected for your shiny app.
+
+After running the script you would be able to run the following script for the newly created tests
+```bash
+# Run the e2e tests
+run_cypress_tests.sh myNewShinyApp
+```
+
+### Running tests
+
+**Running a single test**  
+Given an example app named `myNewShinyApp` under the `inst/examples` folder and a spec file named `myNewShinyApp.cy.js` in the `tests/cypress/e2e` folder you can run the e2e tests for this app in the following way:
+1. Go to the terminal
+2. Run the following command (when located in the `tests/` folder)
+```bash
+# Run the e2e tests
+run_cypress_tests.sh myNewShinyApp
+```
+
+**Running all of the e2e tests**
+1. Go to the terminal
+2. Run the following command (when located in the `tests/` folder)*
+```bash
+# Run the e2e tests
+run_cypress_tests.sh
+```
+<small>***Note that we are running the same exact command without specifying an example app name**</small>

e2e/cypress/e2e/areaChart.cy.js

@@ -0,0 +1,14 @@
+describe('areaChart Snapshots', () => {
+    it('Screenshots are matching up', () => {
+      cy.visit('http://127.0.0.1:8888')
+        .then(() => {
+            cy.wait(10000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+            cy.get(".center-track")
+              .should('have.length', 1)
+              .each( ($element, index, $list) => {
+                cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+              })
+        });
+    })
+  });

e2e/cypress/e2e/barChart.cy.js

@@ -0,0 +1,14 @@
+describe('barChart Snapshots', () => {
+  it('Screenshots are matching up', () => {
+    cy.visit('http://127.0.0.1:8888')
+      .then(() => {
+          cy.wait(10000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+          cy.get(".center-track")
+            .should('have.length', 1)
+            .each( ($element, index, $list) => {
+              cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+            })
+      });
+  })
+});

e2e/cypress/e2e/circularLinearWithBrush.cy.js

@@ -0,0 +1,28 @@
+describe('circularLinearWithBrush Snapshots', () => {
+  it('Screenshots are matching up', () => {
+    cy.visit('http://127.0.0.1:8888')
+      .then(() => {
+          cy.wait(10000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+          cy.get(".center-track")
+            .should('have.length', 3)
+            .each( ($element, index, $list) => {
+              cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+            })
+
+          // Interact with selectizeInput
+          cy.get('.selectize-control').click();
+          cy.get('div[data-value="chrX"]').click();
+          cy.get('#go_to_chr').click();
+
+          cy.wait(5000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+          // event to listen to
+          cy.get(".center-track")
+            .should('have.length', 3)
+            .each( ($element, index, $list) => {
+              const snapshotName = `circular-linear-with-brush-snapshot-track-${index}`
+              cy.wrap($element).should('be.visible').toMatchImageSnapshot(name = snapshotName);
+            })
+      });
+  })
+});

e2e/cypress/e2e/circularVisualEncoding.cy.js

@@ -0,0 +1,15 @@
+describe('circularVisualEncoding Snapshots', () => {
+    it('Screenshots are matching up', () => {
+      cy.visit('http://127.0.0.1:8888')
+        .then(() => {
+            cy.wait(10000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+            cy.get(".center-track")
+              .should('have.length', 1)
+              .each( ($element, index, $list) => {
+                cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+              })
+        });
+    })
+  });
+

e2e/cypress/e2e/ideograms.cy.js

@@ -0,0 +1,15 @@
+describe('ideogram Snapshots', () => {
+    it('Screenshots are matching up', () => {
+      cy.visit('http://127.0.0.1:8888')
+        .then(() => {
+            cy.wait(10000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+            cy.get(".center-track")
+              .should('have.length', 1)
+              .each( ($element, index, $list) => {
+                cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+              })
+        });
+    })
+  });
+

e2e/cypress/e2e/lineChart.cy.js

@@ -0,0 +1,15 @@
+describe('lineChart Snapshots', () => {
+    it('Screenshots are matching up', () => {
+      cy.visit('http://127.0.0.1:8888')
+        .then(() => {
+            cy.wait(10000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+            cy.get(".center-track")
+              .should('have.length', 1)
+              .each( ($element, index, $list) => {
+                cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+              })
+        });
+    })
+  });
+

e2e/cypress/e2e/multiTrackApp.cy.js

@@ -0,0 +1,15 @@
+describe('multiTrackApp Snapshots', () => {
+    it('Screenshots are matching up', () => {
+      cy.visit('http://127.0.0.1:8888')
+        .then(() => {
+            cy.wait(10000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+            cy.get(".center-track")
+              .should('have.length', 1)
+              .each( ($element, index, $list) => {
+                cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+              })
+        });
+    })
+  });
+

e2e/cypress/e2e/pointPlot.cy.js

@@ -0,0 +1,15 @@
+describe('pointPlot Snapshots', () => {
+    it('Screenshots are matching up', () => {
+      cy.visit('http://127.0.0.1:8888')
+        .then(() => {
+            cy.wait(10000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+            cy.get(".center-track")
+              .should('have.length', 1)
+              .each( ($element, index, $list) => {
+                cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+              })
+        });
+    })
+  });
+

e2e/cypress/e2e/ruleMarks.cy.js

@@ -0,0 +1,15 @@
+describe('ruleMarks Snapshots', () => {
+    it('Screenshots are matching up', () => {
+      cy.visit('http://127.0.0.1:8888')
+        .then(() => {
+            cy.wait(10000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+            cy.get(".center-track")
+              .should('have.length', 1)
+              .each( ($element, index, $list) => {
+                cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+              })
+        });
+    })
+  });
+

e2e/cypress/e2e/sarsCov2.cy.js

@@ -0,0 +1,15 @@
+describe('sarsCov2 Snapshots', () => {
+    it('Screenshots are matching up', () => {
+      cy.visit('http://127.0.0.1:8888')
+        .then(() => {
+            cy.wait(20000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+            cy.get(".center-track")
+              .should('have.length', 5)
+              .each( ($element, index, $list) => {
+                cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+              })
+        });
+    })
+  });
+

e2e/cypress/e2e/staticCircularBar.cy.js

@@ -0,0 +1,15 @@
+describe('staticCircularBar Snapshots', () => {
+    it('Screenshots are matching up', () => {
+      cy.visit('http://127.0.0.1:8888')
+        .then(() => {
+            cy.wait(10000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+            cy.get(".center-track")
+              .should('have.length', 1)
+              .each( ($element, index, $list) => {
+                cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+              })
+        });
+    })
+  });
+

e2e/cypress/e2e/structuralVariant.cy.js

@@ -0,0 +1,15 @@
+describe('structuralVariant Snapshots', () => {
+    it('Screenshots are matching up', () => {
+      cy.visit('http://127.0.0.1:8888')
+        .then(() => {
+            cy.wait(10000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+            cy.get(".center-track")
+              .should('have.length', 1)
+              .each( ($element, index, $list) => {
+                cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+              })
+        });
+    })
+  });
+

e2e/cypress/e2e/template.template

@@ -0,0 +1,15 @@
+describe('<<<var_1>>> Snapshots', () => {
+    it('Screenshots are matching up', () => {
+      cy.visit('http://127.0.0.1:8888')
+        .then(() => {
+            cy.wait(10000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+            cy.get(".center-track")
+              .should('have.length', 1)
+              .each( ($element, index, $list) => {
+                cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+              })
+        });
+    })
+  });
+

e2e/cypress/e2e/textAnnotation.cy.js

@@ -0,0 +1,15 @@
+describe('textAnnotation Snapshots', () => {
+    it('Screenshots are matching up', () => {
+      cy.visit('http://127.0.0.1:8888')
+        .then(() => {
+            cy.wait(10000); // TODO (Fede Jul 24 2023) Remove explicit waits when we found an onRender/onAnimateTransform, etc.
+
+            cy.get(".center-track")
+              .should('have.length', 1)
+              .each( ($element, index, $list) => {
+                cy.wrap($element).should('be.visible').toMatchImageSnapshot();
+              })
+        });
+    })
+  });
+