Feature/issue 314

[RascalTwo]

Description

Implements front-end End-to-End testing using Cypress with code coverage results, additionally intercepting the Discord OAuth2 requests using nock to allow for testing of the entire login flow.

This is quite a large PR, but it contains mostly the new test files with a few additions to the express server and of course new package.json scripts.

---

The new packages are:

• @cypress/code-coverage
  • Collects code coverage during Cypress tests.
• @cypress/instrument-cra
  • Instruments Create-React-App code, for later collection via @cypress/code-coverage.
• cross-env
  • Enable cross-platform usage of environment variables in package.json scripts, which needed to set the server to run in test mode.
• cypress
  • E2E Frontend testing tool.
• eslint-plugin-cypress
  • ESLint plugin for Cypress, to allow for linting of Cypress test files.
• nock
  • HTTP request intercepting library, used to intercept requests from Passport.js to Discord, making it possible to test the entire login flow.
• nyc
  • Instruments code for code coverage collection, used by the server to collect code coverage results.
  • Additionally used to merge the server & client code coverage results into a single report.
  • Lastly used to generate an HTML & LCOV report of these results.
• start-server-and-test
  • Allows the execution of a second command to wait for a resource to be available, in our case starts up the servers and waits for them to be ready before starting Cypress.

---

Newly added scripts include:

• /package.json
  • coverage-concurrent
    • Similar to dev-concurrent, it starts up both the client and server in coverage mode - collecting code coverage results.
  • wait-for-coverage-concurrent
    • Starts up coverage-concurrent but via start-server-and-test, ensuring Cypress isn't opened until the servers are ready.
  • test-frontend
    • Starts up the servers and then runs the frontend tests, combining and generating coverage reports after.
  • dev-frontend-tests
    • Starts up the servers and then opens up the Cypress interactive GUI, allowing for the visual inspection of running tests.
• /server/package.json
  • start:coverage
    • Start the server with nyc, collecting code coverage results.
• /client/package.json
  • start:coverage
    • Start the react-scripts development server, but with @cypress/instrument-cra to instrument the code for code coverage collection.

---

There exists only one additional environment variable:

• CYPRESS_NO_DELAYS
  • Will disable all necessary delays during testing if set.
  • The delays exist in the first place due to the desire to wait for animations to complete before interacting with the animated components.

---

The changes to the backend are mostly to allow for the mocking of the Discord OAuth2 requests, these have been encapsulated in a new file passport-discord-mocking.js, containing both the usage of nock to mock intercept the requests and the responses for each request endpoints.

Additional backend changes include the disabling of logging - both console.log()s and usage of morgan - when running the tests. This was done by using the standard NODE_ENV variable, and only enabling logging when NODE_ENV is not test.

---

It can be difficult to understand what the mocking has changed unless one knows how it was working before, so here is a diagram of the original flow between the frontend client, our Express server with Passport.js, and lastly the Discord API:

sequenceDiagram
    participant C as Client
    participant S as Server
    participant D as Discord
    autonumber
    note right of C: Click Login
    C ->>  S: /auth/discord
    activate S
    S ->>  D: /oauth2/authorize
    activate D
    deactivate S
    note right of S: Redirect
    D -->> S: /auth/discord/callback?code=CODE
    deactivate D
    activate S
    note left of D: Click Authorize
    S ->>  D: /api/oauth2/token
    activate D
    deactivate S
    D -->> S: Access & Refresh tokens
    activate S
    deactivate D
    S ->>  D: /api/users/@me
    deactivate S
    activate D
    D -->> S: Profile Info
    activate S
    deactivate D
    S ->>  D: /api/users/@me/guilds
    deactivate S
    activate D
    D -->> S: Joined Guilds array
    activate S
    deactivate D
    note over S: DiscordStrategy
    note left of S: Session Created
    S ->>  C: Homepage
    deactivate S

Loading

The most important part of this is that the difference implemented when the server is running in test mode is that instead of making requests to the real Discord API, the Passport.js requests will instead be intercepted by nock and mocked with the appropriate response - based on the hardcoded user codes.

Additionally, Cypress has one role to play in the testing, and that is to intercept the request made to the /auth/discord endpoint that would usually redirect the user to the Discord OAuth2 page, and instead redirect the user back to the Express server with a custom code that will be exchanged for the preset responses.

sequenceDiagram
    participant C as Client
    participant S as Server
    participant N as nock
    participant CY as Cypress
    autonumber
    note right of C: Click Login
    C ->>  S: /auth/discord
    activate S
    S ->>  CY: /oauth2/authorize
    deactivate S
    activate CY
    note right of S: Redirect
    CY -->> S: /auth/discord/callback?code=CUSTOM_CODE
    deactivate CY
    activate S
    S ->>  N: /api/oauth2/token
    deactivate S
    activate N
    N -->>  S: Mock Access & Refresh tokens
    deactivate N
    activate S
    S ->>  N: /api/users/@me/
    deactivate S
    activate N
    N -->>  S: Mock Profile Info
    deactivate N
    activate S
    S ->>  N: /api/users/@me/guilds
    deactivate S
    activate N
    N -->>  S: Mock Guilds array
    deactivate N
    activate S
    note over S: DiscordStrategy
    note left of S: Session Created
    S ->>  C: Homepage
    deactivate S

Loading

---

Now to move on to the actual new Cypress files:

• cypress.config.js
  • Mostly the configuration for Cypress, including the base URL, some flags, and custom task functions.
  • clearDatabase
    • Clears the connected MongoDB database.
  • createEvent
    • Creates a new Event document.
  • generateObjectId
    • Generates a new ObjectId.
• cypress
  • videos & screenshots
    • Videos & screenshots that are generated when running the tests, are ignored by git.
  • support
    • e2e.js
      • Imports the code-coverage logic, and custom commands, and adds a custom beforeEach hook to reset the database before each test and visit the homepage.
    • functions.js
      • Helper functions, mostly for dealing with dates.
    • commands.js
      • login
        • Login to the backend using the provided user code.
      • createOwnEvents
        • Create a number of events for the user code provided.
    • tgt.js
      • A collection of component-scoped actions & queries for Together as a whole.
      • This makes the actual tests more readable, additionally allowing for any updates to a single component in the future to be made in one place.
  • e2e
    • auth.cy.js
      • 100Dev members can log in and come back
      • Outsiders aren't logged in and are shown a rejection
      • All login/logout buttons work
    • landing.cy.js
      • Links
      • Hamburger menu
    • calendar.cy.js
      • Links
      • Accessible via the calendar button
      • Guest users can't create events
      • Current day is highlighted
      • Month is changeable via buttons & scrolling
      • Only shows events for the current month
    • view-event-modal.cy.js
      • Event models are shown when clicking on an event
      • Non-authors of events can't see the delete buttons
      • Authors can delete individual & all recurring events
    • create-event-form.cy.js
      • The event creation form is accessible and prevents any invalid submissions
      • The expected network requests are made to the backend
      • Created events are instantly shown on the calendar

---

I did discover a number of unused code segments while writing the tests, while some may have future use I'll list them just in case:

• /events/:id route, linked getOne controller, and getById DataService method
• ensureGuest middleware
• User avatarURL virtual
• useProvideModel() handleToggle function
• useProvideFormModel() handleToggle function

Additionally, I ran across two bugs while writing the tests:

• Guests can not view the event modal - already documented in Modals not displaying for unauthenticated guest users/visitors. #279
  • Left an integration into the visibility test that may pass it in view-event-modal.cy.js depending on implementation.
• Non-recurring events have the Delete All Events button, which currently only throws an error.
  • As the desired behavior is unknown - whether the button should not exist on non-recurring events, or if it should behave the same as the Delete Specific Event button - I left nothing in the tests relating to it.
  • The underlying issue is that non-recurring events have a groupId of null, hence the button results in a DELETE request to /events/deleteAllEvents/null.
• More of an inconvenience than a bug that the modal containing the UserForm for creating events can only be exited by clicking the backdrop - it has no explicit close button.

Type of change

Please select everything applicable. Please, do not delete any lines.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
  • Describing at minimum the new package.json scripts test-frontend and dev-frontend-tests

Issue

• Is this related to a specific issue? If so, please specify: Closes Implement Front-End Test Suite #314

Checklist

• This PR is up to date with the development branch, and merge conflicts have been resolved
• I have executed npm run lint and resolved any outstanding errors. Most issues can be solved by executing npm run format
• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented on my code, particularly in hard-to-understand areas
• My changes generate no new warnings

[isaaclee12]

This dude is cracked I swear

[Caleb-Cohen]

This dude is cracked I swear

Just Rascal being Rascal.