Add cypress

.github/workflows/build.yml

@@ -16,3 +16,32 @@ jobs:
       - run: npm run build
       - run: bundle install
       - run: JEKYLL_ENV=production bundle exec jekyll build --verbose
+
+  cypress:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ruby/setup-ruby@v1
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: ".nvmrc"
+      - run: npm ci
+      - run: bundle install
+      - name: Cypress run
+        uses: cypress-io/[email protected] # use the explicit version number
+        with:
+          build: npm run cypress:prepare
+          start: npm run serve
+          wait-on: "http://localhost:4000"
+          install: false
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: cypress-videos
+          path: cypress/videos

.gitignore

@@ -9,3 +9,6 @@ js/bundled/
 .idea
 _data/podcast.*.parcel-cache
 .parcel-cache
+_data/events/TEST_EVENT.json
+cypress/videos/
+cypress/screenshots/

_config.yml

@@ -88,6 +88,8 @@ exclude:
   - vendor/gems/
   - vendor/ruby/
   - .cache/
+  - cypress/
+  - .parcel-cache/
 
 keep_files:
   - js/

cypress.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    supportFile: false,
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/events_are_shown.cy.js

@@ -0,0 +1,60 @@
+describe("Events are shown on the front page", () => {
+  let testEvent;
+  before(() => {
+    cy.readFile("_data/events/TEST_EVENT.json").then((f) => (testEvent = f));
+  });
+
+  it("lists the test event", () => {
+    cy.visit("http://localhost:4000");
+
+    cy.get("#upcoming-events > div").as("upcomingEvents");
+    cy.get("@upcomingEvents")
+      .find(".lead")
+      .scrollIntoView()
+      .should((s) => {
+        const text = s.text();
+        expect(text).to.match(/view all \d+ events/);
+
+        const [_, numberOfEvents] = /view all (\d+) events/.exec(text);
+        expect(Number(numberOfEvents)).to.be.greaterThan(0);
+      });
+
+    cy.get("@upcomingEvents")
+      .contains(testEvent.title)
+      .parents("tr")
+      .as("eventRow");
+
+    cy.get("@eventRow").should("contain.text", "Virtual");
+    cy.get("@eventRow").find("a").should("have.attr", "href", testEvent.url);
+  });
+
+  it("lists the event on the event page", () => {
+    cy.visit("http://localhost:4000");
+    cy.get("#upcoming-events > div > .lead").find("a").click();
+
+    cy.get(".card")
+      .contains(testEvent.title)
+      .parents(".card")
+      .as("testEventCard");
+
+    cy.get("@testEventCard")
+      .find(".card-header")
+      .should("contain.text", "VIRTUAL")
+      .should("contain.text", testEvent.date.start.substring(0, 10))
+      .should("contain.text", testEvent.date.start.substring(11, 16));
+
+    cy.get("@testEventCard")
+      .find(".card-body:visible")
+      .should("contain.text", testEvent.title)
+      .should("contain.text", testEvent.spoken_language)
+      .should("contain.text", "Ensemble");
+
+    cy.get("@testEventCard").find(".card-header").click();
+
+    cy.get("@testEventCard").should("contain.text", testEvent.description);
+    cy.get("@testEventCard")
+      .find("a")
+      .contains("Sign-Up")
+      .should("have.attr", "href", testEvent.url);
+  });
+});