feat: cancel mentorship request (#814)

.nvmrc

@@ -0,0 +1 @@
+14

cypress.json

@@ -1,7 +1,7 @@
 {
   "baseUrl": "http://localhost:3000",
   "videoUploadOnPasses": false,
-  "defaultCommandTimeout": 60000,
-  "responseTimeout": 60000,
+  "defaultCommandTimeout": 30000,
+  "responseTimeout": 30000,
   "supportFile": "cypress/support/index.ts"
 }

cypress/builders/mentorship-requests/index.ts

@@ -0,0 +1,23 @@
+import { MentorshipRequest } from '../../../src/types/models';
+import { userBuilder } from '../users/current/get';
+
+const defaultMentorshipRequest: MentorshipRequest = {
+  id: '123',
+  mentor: userBuilder({
+    name: 'Mentor',
+  }),
+  mentee: userBuilder(),
+  status: 'Approved',
+  date: '1609748339000',
+  message: 'hi',
+  background: 'yes',
+  expectation: 'the world',
+  isMine: false,
+};
+
+export const mentorshipRequestBuilder = (
+  overrides: Partial<MentorshipRequest>
+) => ({
+  ...defaultMentorshipRequest,
+  ...overrides,
+});

cypress/integration/me/home.spec.ts

@@ -1,5 +1,6 @@
 import { withSuccess } from '../../builders/response';
 import { userBuilder } from '../../builders/users/current/get';
+import { getByTestId } from '../../support';
 
 describe('Me / home', () => {
   before(() => {

cypress/integration/me/mentorship-requests.spec.js

@@ -0,0 +1,151 @@
+/* eslint-disable no-undef */
+/// <reference types="cypress" />
+
+import { userBuilder } from '../../builders/users/current/get';
+import { mentorshipRequestBuilder } from '../../builders/mentorship-requests';
+import { withSuccess } from '../../builders/response';
+
+import reqData from '../../fixtures/mentorship-requests/get.json';
+import { STATUS } from '../../../src/helpers/mentorship';
+
+const response = withSuccess(userBuilder());
+const { data: user } = response;
+const { data: requests } = reqData;
+const reqType = {
+  approved: requests.find(({ status }) => status === STATUS.approved),
+  rejected: requests.find(({ status }) => status === STATUS.rejected),
+  new: requests.find(({ status }) => status === STATUS.new),
+};
+
+const regex = ({ mentee: { id } }) => new RegExp(`User ${id}`);
+
+describe('Mentorship Requests', () => {
+  describe('Mentor requests', () => {
+    beforeEach(() => {
+      cy.login();
+      cy.intercept('GET', '/users/current', withSuccess(user));
+
+      cy.intercept('GET', `/mentorships/${user._id}/requests`, {
+        fixture: 'mentorship-requests/get',
+      });
+      cy.visit(`/me/requests`);
+    });
+
+    it('Should show spinner while loading requests', () => {
+      cy.get('[role=status]').should('exist');
+    });
+
+    it('got 3 requests', () => {
+      cy.findByText('Mentorship Requests')
+        .get('ul')
+        .findAllByText(/User.*/)
+        .should('exist')
+        .should('have.length', 3);
+    });
+
+    describe('Mentorship Content', () => {
+      it('Should expand and show more details on request item click', () => {
+        const errorMessage =
+          'Unable to find an element by: [data-testid="request-content"]';
+
+        cy.on('fail', err => {
+          expect(err.message).to.contain(errorMessage);
+        });
+
+        cy.findAllByTestId('request-content');
+      });
+
+      it('Should toggle item on Click', () => {
+        cy.findByText('Mentorship Requests')
+          .get('ul')
+          .findByText(regex(reqType.new))
+          .click();
+
+        cy.findAllByTestId('request-content');
+      });
+
+      it('Should only expand one item at a time', () => {
+        const { message } = reqType.new;
+        const errorMessage = `Unable to find an element with the text: ${message}`;
+        cy.on('fail', err => {
+          expect(err.message).to.contain(errorMessage);
+        });
+
+        cy.findByText('Mentorship Requests')
+          .get('ul')
+          .findByText(regex(reqType.rejected))
+          .click();
+
+        cy.findAllByTestId('request-content').within(() => {
+          cy.findByText(message).should('not.exist');
+        });
+      });
+
+      it('Should have Message, Background and Expectation', () => {
+        cy.findAllByTestId('request-content')
+          .findAllByText(/Message|Background|Expectations/)
+          .should('have.length', 3);
+        cy.findAllByTestId('request-content')
+          .get('p')
+          .then($ps => {
+            // 3 for each mentorship request + 1 no My Mentorship Requests
+            expect($ps).to.have.length(10);
+          });
+      });
+    });
+  });
+
+  describe('Cancel request', () => {
+    let mentorships = [
+      mentorshipRequestBuilder({
+        id: reqType.new.id,
+        status: 'New',
+        isMine: true,
+      }),
+    ];
+
+    const testkit = {
+      cancelButton: () => cy.get('button').contains('Cancel request'),
+    };
+
+    beforeEach(() => {
+      cy.login();
+      cy.intercept('GET', '/users/current', withSuccess(user));
+      cy.intercept(
+        'GET',
+        `/mentorships/${user._id}/requests`,
+        withSuccess(mentorships)
+      );
+      cy.intercept('PUT', `/mentorships/${user._id}/requests/789`, {
+        success: true,
+        // can't use withSuccess because the payload has no "data" prop (unlike other endpoints) :(
+        mentorship: { status: 'Cancelled' },
+      }).as('updateMentorshipStatus');
+      cy.visit(`/me/requests`);
+
+      cy.get('li')
+        .contains(mentorships[0].mentor.name)
+        .click();
+    });
+
+    it('should display cancel button', () => {
+      testkit.cancelButton();
+    });
+
+    it('should display cancel request modal', () => {
+      testkit.cancelButton().click();
+
+      cy.get('header').contains('Cancel mentorship request');
+    });
+
+    it('should cancel the request when user clicks on cancel', () => {
+      testkit.cancelButton().click();
+      cy.get('button')
+        .contains(/^Cancel$/)
+        .click();
+      cy.wait('@updateMentorshipStatus');
+
+      cy.get('[role=status]').contains(/^Cancelled$/);
+    });
+  });
+});

cypress/support/commands.ts

@@ -1,3 +1,5 @@
+import '@testing-library/cypress/add-commands';
+
 Cypress.Commands.add('filterByName', name => {
   cy.getByTestId('name-filter-autocomplete')
     .type(name)
@@ -10,3 +12,19 @@ Cypress.Commands.add('login', () => {
     JSON.stringify({ expiresAt: 1887058578000 })
   );
 });
+
+Cypress.Commands.add('getByTestId', function(testId: string) {
+  return cy.get(`[data-testid="${testId}"]`);
+});
+
+Cypress.Commands.add('getAllByTestId', function(testId: string) {
+  return cy.get(`[data-testid="${testId}"]`);
+});
+
+Cypress.Commands.add('getByAltText', function(alt: string) {
+  return cy.get(`[alt="${alt}"]`);
+});
+
+Cypress.Commands.add('getByText', function(text: string) {
+  return cy.contains(text);
+});

cypress/support/index.ts

@@ -1,7 +1,6 @@
 /// <reference types="cypress" />
 
 import './commands';
-import '@testing-library/cypress/add-commands';
 
 declare global {
   namespace Cypress {

package.json

@@ -41,9 +41,9 @@
     "deploy": "gh-pages -d build",
     "prettier": "prettier \"**/*.{json,js}\" --check --loglevel log",
     "prettier:fix": "prettier \"**/*.{json,js}\" --write",
-    "cy:run": "concurrently -kill-others --success first \"yarn storybook\" \"cypress run\"",
+    "cy:run": "concurrently -kill-others --success first \"yarn storybook\" \"wait-on http://localhost:6006 && cypress run\"",
     "cy:open": "concurrently -kill-others --success first \"yarn storybook\" \"cypress open\"",
-    "cy:open:tests": "concurrently -kill-others --success first \"BROWSER=none yarn start | cypress open\" \"cypress open\"",
+    "cy:open:tests": "concurrently -kill-others --success first \"BROWSER=none yarn start\" \"cypress open\"",
     "test:e2e": "is-ci \"test:e2e:run\" \"test:e2e:dev\"",
     "test:e2e:run": "start-server-and-test start http://localhost:3000 cy:run",
     "test:e2e:dev": "start-server-and-test start http://localhost:3000 cy:open",
@@ -67,7 +67,7 @@
     "@storybook/addon-essentials": "^6.2.9",
     "@storybook/preset-create-react-app": "^3.1.7",
     "@storybook/react": "^6.2.9",
-    "@testing-library/cypress": "^4.1.1",
+    "@testing-library/cypress": "^7.0.6",
     "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.3",
@@ -83,7 +83,7 @@
     "ajv": "^6.10.2",
     "concurrently": "^5.3.0",
     "cors": "^2.8.5",
-    "cypress": "^6.2.0",
+    "cypress": "^7.6.0",
     "execa": "^2.0.4",
     "gh-pages": "^2.1.1",
     "image-type": "^4.1.0",
@@ -98,7 +98,8 @@
     "ora": "^3.4.0",
     "prettier": "^1.18.2",
     "start-server-and-test": "^1.10.0",
-    "typescript": "^4.3.2"
+    "typescript": "^4.3.2",
+    "wait-on": "^6.0.0"
   },
   "license": "MIT",
   "resolutions": {

src/Me/Me.tsx

@@ -8,7 +8,7 @@ import Header from './Header/Header';
 import Main from './Main';
 import Navbar from './Navigation/Navbar';
 import Home from './Routes/Home';
-import MentorshipReq from '../Me/MentorshipReq';
+import MentorshipRequests from '../Me/MentorshipRequests';
 import { GlobalStyle } from './styles/global';
 import { desktop } from './styles/shared/devices';
 
@@ -46,7 +46,7 @@ const Me = ({
           <Main>
             <Switch>
               <Route path={`${url}/requests`}>
-                <MentorshipReq />
+                <MentorshipRequests />
               </Route>
               <Route path={`${url}`}>
                 <Home />