feat: mentorship request (#787)

.gitignore

@@ -38,3 +38,6 @@ cypress/screenshots
 
 # ESLint
 .eslintcache
+
+#debug
+debug.log

.travis.yml

@@ -8,9 +8,9 @@ cache:
     - "$HOME/.yarn-cache"
     - "$HOME/travis/.cache/Cypress"
 script:
+  - NODE_ENV=production yarn predeploy
   - cypress install
   - yarn test
-  - NODE_ENV=production yarn predeploy
 addons:
   apt:
     packages:

README.md

@@ -6,7 +6,6 @@
 [![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
 
 
-
 ## Support Us
 
 CodingCoach is a FREE platform that is built and managed entirely by volunteers. As always, there are ongoing costs to run this site such as servers, domains, email, and more.  Please consider becoming a patron so we can continue our mission of being accessible and free ❤️
@@ -20,9 +19,16 @@ Pre-release version of Coding Coach.
 **Please read our [Mentorships Guideline](https://docs.google.com/document/d/1zKCxmIh0Sd4aWLiQncICOGm6uf38S0kJ0xb0qErNFVA/edit?ts=5dc96ff1)**
 
 1. Go to https://mentors.codingcoach.io/
-1. Search for a mentor - use the filters for better matching
-1. Find one or more? Register to get their details.
-1. Reach out to them.
+2. Register (or Login)
+3. Search for a mentor - use the filters for better matching
+4. Find one or more? Hit the "Apply" button in their card
+5. Fill the request form
+6. Wait for the mentor accept your request (We'll send you an email either if the mentor accepts or declines your request)
+7. Contact them using one of their channels
+
+We're aware that some mentors are not active and we are working on ways to keep only the active mentors.
+If you didn't receive any response, you can apply to more mentors.
+**Don't forget** to let the the other mentors to know once you started a mentorship.
 
 ## Want to be a mentor?
 

cypress.json

@@ -1,5 +1,6 @@
 {
   "baseUrl": "http://localhost:3000",
   "videoUploadOnPasses": false,
-  "defaultCommandTimeout": 15000
+  "defaultCommandTimeout": 60000,
+  "responseTimeout": 60000
 }

cypress/fixtures/mentorship-requests/get.json

@@ -0,0 +1,50 @@
+{
+  "success": true,
+  "data": [
+    {
+      "id": 123,
+      "mentee": {
+        "id": "001",
+        "name": "User 001",
+        "avatar": "https://avatars0.githubusercontent.com/u/219207?s=88&v=4",
+        "title": "J web dev"
+      },
+      "status": "Approved",
+      "date": 1609748339000,
+      "message": "hi",
+      "background": "yes",
+      "expectation": "the world",
+      "isMine": false
+    },
+    {
+      "id": 456,
+      "mentee": {
+        "id": "002",
+        "name": "User 002",
+        "avatar": "https://avatars0.githubusercontent.com/u/219207?s=88&v=4",
+        "title": "J web dev"
+      },
+      "status": "Rejected",
+      "date": 1604013539000,
+      "message": "Hi, I’m JD and I’m looking for a mentor who can help me find my first job as a software developer. I’ve been learning JavaScript for the last 6 months and I think I’m ready.",
+      "background": "I’ve been working as an accountant for the last 2 years, but ever since I wrote my first line of code I enjoyed so much.",
+      "expectation": "Would be nice to have weekly meetings, but I know you might be busy so please let me know if this works for you.",
+      "isMine": false
+    },
+    {
+      "id": 789,
+      "mentee": {
+        "id": "003",
+        "name": "User 003",
+        "avatar": "https://avatars0.githubusercontent.com/u/219207?s=88&v=4",
+        "title": "J web dev"
+      },
+      "status": "New",
+      "date": 1609283939000,
+      "message": "Hi, I’m JD and I’m looking for a mentor who can help me find my first job as a software developer. I’ve been learning JavaScript for the last 6 months and I think I’m ready.",
+      "background": "I’ve been working as an accountant for the last 2 years, but ever since I wrote my first line of code I enjoyed so much.",
+      "expectation": "Would be nice to have weekly meetings, but I know you might be busy so please let me know if this works for you.",
+      "isMine": false
+    }
+  ]
+}

cypress/fixtures/mentorship-requests/put.json

@@ -0,0 +1,6 @@
+{
+  "success": true,
+  "mentorship": {
+    "status": "Viewed"
+  }
+}

cypress/integration/mentorship-requests.spec.js

@@ -0,0 +1,90 @@
+/* eslint-disable no-undef */
+import userData from '../fixtures/users/current/get.json';
+import reqData from '../fixtures/mentorship-requests/get.json';
+import { STATUS } from '../../src/helpers/mentorship';
+
+const { cy } = global;
+
+const { data: user } = userData;
+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', () => {
+  before(function() {
+    cy.login();
+    cy.intercept('GET', '/users/current', { fixture: 'users/current/get' });
+    cy.intercept('GET', `/mentorships/${user._id}/requests`, {
+      fixture: 'mentorship-requests/get',
+    });
+    cy.intercept('PUT', `/mentorships/${user._id}/requests/${reqType.new.id}`, {
+      fixture: 'mentorship-requests/put',
+    });
+    cy.visit(`/me/requests`);
+  });
+
+  // TODO enable it if possible
+  // it('Should show spinner while loading requests', () => {
+  //   cy.findAllByRole('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', 9);
+      cy.findAllByTestId('request-content')
+        .get('p')
+        .then($ps => {
+          // 3 for each mentorship request + 1 no My Mentorship Requests
+          expect($ps).to.have.length(10);
+        });
+    });
+  });
+});

cypress/support/index.js

@@ -5,7 +5,7 @@ let polyfill;
 
 const { before, cy, Cypress } = global;
 
-// Polyfill window.fetch because thre is no native support from Cypress yet
+// Polyfill window.fetch because there is no native support from Cypress yet
 // Adapted from: https://github.com/cypress-io/cypress/issues/95#issuecomment-517594737
 before(() => {
   cy.readFile('node_modules/whatwg-fetch/dist/fetch.umd.js').then(contents => {

package.json

@@ -26,13 +26,15 @@
     "react-select": "^3.0.4",
     "react-tippy": "^1.2.3",
     "react-toastify": "^5.3.2",
+    "react-transition-group": "^4.4.1",
     "styled-components": "^5.0.0-beta.8",
     "svg-country-flags": "^1.2.6"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "node scripts/pre-build.js && react-scripts build && yarn build-storybook",
-    "test": "yarn prettier:fix && react-scripts test && yarn test:e2e:run",
+    "build": "node scripts/pre-build.js && react-scripts build",
+    "test": "yarn test:unit && yarn test:e2e:run",
+    "test:unit": "react-scripts test",
     "test:unit:update-snapshot": "react-scripts test -u",
     "eject": "react-scripts eject",
     "predeploy": "yarn run build",
@@ -42,7 +44,6 @@
     "cy:run": "concurrently -kill-others --success first \"yarn storybook\" \"cypress run\"",
     "cy:open": "concurrently -kill-others --success first \"yarn storybook\" \"cypress open\"",
     "test:e2e": "is-ci \"test:e2e:run\" \"test:e2e:dev\"",
-    "pretest:e2e:run": "yarn run build",
     "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",
     "storybook": "start-storybook -p 6006",
@@ -66,7 +67,8 @@
     "@storybook/react": "^6.1.11",
     "@testing-library/cypress": "^4.1.1",
     "@testing-library/jest-dom": "^5.1.1",
-    "@testing-library/react": "^9.5.0",
+    "@testing-library/react": "^11.2.3",
+    "@testing-library/user-event": "^12.6.3",
     "@types/react-router-dom": "^5.1.4",
     "@types/styled-components": "^5.1.0",
     "ajv": "^6.10.2",

public/index.html

@@ -82,12 +82,14 @@
       crossorigin="anonymous"
     />
     <link
-      rel="preload"
+      rel="stylesheet"
+      type="text/css"
       href="https://fonts.googleapis.com/css?family=Lato:400,400i"
       as="font"
       type="font/woff2"
       crossorigin="true"
     />
+
     <title>Coding Coach</title>
     <!-- Google Analytics -->
     <script>

src/Me/Me.js

@@ -8,6 +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 { GlobalStyle } from './styles/global';
 import { desktop } from './styles/shared/devices';
 
@@ -22,6 +23,9 @@ const Me = ({ match: { url } }) => {
           <Header />
           <Main>
             <Switch>
+              <Route path={`${url}/requests`}>
+                <MentorshipReq />
+              </Route>
               <Route path={`${url}`}>
                 <Home />
               </Route>