Feature/issue 314

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
     es2021: true,
     node: true,
     browser: true,
+    "cypress/globals": true
   },
   extends: ["eslint:recommended", "plugin:react/recommended", "prettier"],
   parserOptions: {
@@ -16,7 +17,7 @@ module.exports = {
     ecmaVersion: "latest",
     sourceType: "module",
   },
-  plugins: ["react", "react-hooks", "prettier"],
+  plugins: ["react", "react-hooks", "prettier", "cypress"],
   rules: {
     indent: [
       "error",

.gitignore

@@ -3,5 +3,9 @@ node_modules
 .vscode
 build
 .DS_Store
-.mongo
+.mongo*
 formLogic.txt
+coverage
+.nyc_output
+cypress/screenshots
+cypress/videos

client/package.json

@@ -2,6 +2,7 @@
   "proxy": "http://localhost:2121",
   "scripts": {
     "start": "react-scripts start",
+    "start:coverage": "react-scripts -r @cypress/instrument-cra start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
@@ -31,5 +32,6 @@
     "tailwindcss": "^3.2.2",
     "axios": "^1.1.3",
     "nanoid": "^4.0.0"
-  }
+  },
+  "cypressWebpackConfigPath": "../node_modules/react-scripts/config/webpack.config.js"
 }

cypress.config.js

@@ -0,0 +1,55 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  env: {
+    CYPRESS_NO_DELAYS: process.env.CYPRESS_NO_DELAYS
+  },
+  e2e: {
+    baseUrl: "http://localhost:3000",
+    experimentalRunAllSpecs: true,
+    setupNodeEvents(on, config) {
+      require("@cypress/code-coverage/task")(on, config);
+      on("task", {
+        clearDatabase() {
+          require("dotenv").config({ path: "./server/config/.env" });
+          return require("./server/config/database")().then(async conn => {
+            for (const { name } of await conn.connection.db
+              .listCollections()
+              .toArray()) {
+              await conn.connection.db.collection(name).deleteMany();
+            }
+            return null;
+          });
+        },
+        createEvent({
+          title,
+          description,
+          startAt,
+          endAt,
+          location,
+          user,
+          groupId,
+        }) {
+          require("dotenv").config({ path: "./server/config/.env" });
+          return require("./server/config/database")().then(async () => {
+            const { Event } = require("./server/models/Event");
+            const event = await Event.create({
+              title,
+              description,
+              startAt,
+              endAt,
+              location,
+              user,
+              groupId,
+            });
+            return event;
+          });
+        },
+        generateObjectId() {
+          return require("mongoose").Types.ObjectId().toString();
+        },
+      });
+      return config;
+    },
+  },
+});

cypress/e2e/auth.cy.js

@@ -0,0 +1,75 @@
+/// <reference types="cypress" />
+
+import { getMonthAndYear } from "../support/functions";
+import tgt from "../support/tgt";
+
+describe("Discord OAuth works", () => {
+  it("100Dever is allowed in & back", () => {
+    cy.login("100_DEVER", true);
+    tgt.auth.button.login().should("not.exist");
+    tgt.calendar.currentMonthAndYear().contains(getMonthAndYear());
+
+    tgt.auth.button.logout().click();
+    cy.login("100_DEVER");
+
+    tgt.auth.button.login().should("not.exist");
+    tgt.calendar.currentMonthAndYear().contains(getMonthAndYear());
+  });
+
+  describe("Welcome Model", () => {
+    it("Is shown until dismissed", () => {
+      cy.login("100_DEVER");
+      tgt.modal.get().contains("Hello, 100Dever#0001");
+
+      cy.reload();
+      tgt.modal.get().contains("Hello, 100Dever#0001");
+    });
+
+    for (const backdrop of [false, true]) {
+      it(`Dismissible via ${backdrop ? "backdrop" : "close button"}`, () => {
+        cy.login("100_DEVER");
+        tgt.modal.get().contains("Hello, 100Dever#0001");
+        tgt.modal.close(backdrop);
+
+        cy.reload();
+        tgt.modal.get().should("not.exist");
+      });
+    }
+  });
+
+  for (const button of ["Login with Discord", "Log In"]) {
+    it(`"${button}" button works`, () => cy.login("100_DEVER", false, button));
+  }
+
+  it(`Calendar "Login" button works`, () => {
+    tgt.landing.button.calendar().click();
+    cy.login("100_DEVER", false, "Login");
+  });
+
+  it("Rejection for outsiders", () => {
+    cy.login("JOHN_DOE");
+    tgt.modal.get().contains("only 100Devs users are allowed");
+    tgt.modal.close();
+    tgt.auth.button.login().should("exist");
+  });
+
+  it("Logout from Calendar", () => {
+    cy.login("100_DEVER", true);
+    tgt.auth.button.logout().click();
+    tgt.auth.button.login().should("exist");
+  });
+
+  it("Log Out from Landing", () => {
+    cy.login("100_DEVER", true);
+    tgt.nav.button.home().click();
+    tgt.auth.button.logout("Logout").click();
+    tgt.auth.button.login().should("exist");
+  });
+
+  it("Logout from Landing", () => {
+    cy.login("100_DEVER", true);
+    tgt.nav.button.home().click();
+    tgt.auth.button.logout("Log Out").click();
+    tgt.auth.button.login().should("exist");
+  });
+});

cypress/e2e/calendar.cy.js

@@ -0,0 +1,100 @@
+/// <reference types="cypress" />
+
+import {
+  createOffsetDate,
+  ensureInMiddleOfMonthAndDay,
+  getMonthAndYear,
+} from "../support/functions";
+import tgt from "../support/tgt";
+
+describe("Calendar", () => {
+  const setToTenthOfFebruary2023 = () =>
+    cy.clock(new Date(2023, 1, 10), ["Date"]);
+
+  describe("To Guests", () => {
+    beforeEach(setToTenthOfFebruary2023);
+
+    it("Visible", () => {
+      tgt.landing.button.calendar().click();
+      tgt.calendar.currentMonthAndYear().contains("February, 2023");
+      // The current day - the 10th - should be highlighted differently
+      cy.contains("10").parent().invoke("attr", "style").should("exist");
+    });
+
+    it("Read-only", () => {
+      // Clicking the Add Event and + buttons should do nothing
+      tgt.landing.button.calendar().click();
+      tgt.calendar.button.addEvent().click();
+      tgt.modal.get().should("not.exist");
+
+      cy.contains("10").parent().find("button").click({ force: true });
+      tgt.modal.get().should("not.exist");
+    });
+  });
+
+  describe("Links open in new tabs", () => {
+    for (const [name, buttonText, match] of [
+      ["discord", "Join Team", /discord:\/\//],
+      ["feedback", "Feedback", /https:\/\/github.com/],
+      ["help", "Help", /https:\/\/github.com/],
+    ]) {
+      it(name, () => {
+        cy.visit("/", {
+          onBeforeLoad(win) {
+            cy.stub(win, "open").as(`open${name}Tab`);
+          },
+        });
+        tgt.landing.button.calendar().click();
+        cy.contains("button", buttonText).click();
+        cy.get(`@open${name}Tab`).should("have.been.calledWithMatch", match);
+      });
+    }
+  });
+
+  it("Scrolling changes month", () => {
+    setToTenthOfFebruary2023();
+
+    tgt.landing.button.calendar().click();
+    tgt.calendar.currentMonthAndYear().contains("February, 2023");
+
+    tgt.calendar.button.previousMonth().click();
+    tgt.calendar.currentMonthAndYear().contains("January, 2023");
+
+    tgt.calendar.button.nextMonth().click();
+    tgt.calendar.currentMonthAndYear().contains("February, 2023");
+
+    cy.get("main").trigger("wheel", { deltaY: -1 });
+    tgt.calendar.currentMonthAndYear().contains("January, 2023");
+
+    cy.get("main").trigger("wheel", { deltaY: 1 });
+    tgt.calendar.currentMonthAndYear().contains("February, 2023");
+  });
+
+  it("Shows events only for the correct month", () => {
+    const now = ensureInMiddleOfMonthAndDay();
+    const nextMonth = createOffsetDate(now, "Month", 1);
+
+    cy.createOwnEvents("100_DEVER", {
+      title: "Test Title",
+      description: "Test Description",
+      location: "Test Location",
+      startAt: nextMonth,
+      endAt: new Date(nextMonth.getTime() + 1),
+      groupId: null,
+    });
+
+    const monthAndYear = getMonthAndYear(now);
+    const nextMonthAndYear = getMonthAndYear(nextMonth);
+    tgt.modal.close();
+    tgt.calendar.currentMonthAndYear().contains(monthAndYear);
+    cy.contains("Test Title").should("not.exist");
+
+    tgt.calendar.button.nextMonth().click();
+    tgt.calendar.currentMonthAndYear().contains(nextMonthAndYear);
+    cy.contains("Test Title");
+
+    tgt.calendar.button.previousMonth().click();
+    tgt.calendar.currentMonthAndYear().contains(monthAndYear);
+    cy.contains("Test Title").should("not.exist");
+  });
+});