changes - margin, colour, shadow to Me, Avatar, index, Navbar, Profile (

#700) Co-authored-by: rachel-wong <[email protected]>
Coding-Coach · Apr 15, 2020 · 4349034 · 4349034
1 parent ec44ea3
commit 4349034
Show file tree

Hide file tree

Showing 33 changed files with 467 additions and 382 deletions.
diff --git a/babel-plugin-macros.config.js b/babel-plugin-macros.config.js
@@ -3,6 +3,6 @@ const isDev = process.env.NODE_ENV !== 'production';
 module.exports = {
   styledComponents: {
     fileName: isDev,
-    displayName: isDev
-  }
-}
+    displayName: isDev,
+  },
+};
diff --git a/cypress/fixtures/mentors/get.json b/cypress/fixtures/mentors/get.json
@@ -1,107 +1,88 @@
 {
-    "success":true,
-    "filters":{
-       "countries":[
-          {
-             "id":"FR",
-             "label":"France"
-          },
-          {
-             "id":"US",
-             "label":"United States of America"
-          }
-       ],
-       "languages":[
-          {
-             "id":"en",
-             "label":"English"
-          },
-          {
-             "id":"es",
-             "label":"Spanish"
-          },
-          {
-             "id":"fr",
-             "label":"French"
-          }
-       ],
-       "technologies":[
-          "android",
-          "css",
-          "graphql",
-          "html",
-          "kotlin",
-          "python",
-          "reactjs",
-          "unit testing"
-       ]
-    },
-    "pagination":{
-       "total":439,
-       "page":1,
-       "limit":1000,
-       "hasMore":false
-    },
-    "data":[
-       {
-          "spokenLanguages":[
-             "en",
-             "fr"
-          ],
-          "tags":[
-             "android",
-             "kotlin",
-             "unit testing"
-          ],
-          "_id":"2",
-          "name":"Sandra Anuj",
-          "avatar":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAG1BMVEXMzMyWlpaqqqq3t7fFxcW+vr6xsbGjo6OcnJyLKnDGAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABAElEQVRoge3SMW+DMBiE4YsxJqMJtHOTITPeOsLQnaodGImEUMZEkZhRUqn92f0MaTubtfeMh/QGHANEREREREREREREtIJJ0xbH299kp8l8FaGtLdTQ19HjofxZlJ0m1+eBKZcikd9PWtXC5DoDotRO04B9YOvFIXmXLy2jEbiqE6Df7DTleA5socLqvEFVxtJyrpZFWz/pHM2CVte0lS8g2eDe6prOyqPglhzROL+Xye4tmT4WvRcQ2/m81p+/rdguOi8Hc5L/8Qk4vhZzy08DduGt9eVQyP2qoTM1zi0/uf4hvBWf5c77e69Gf798y08L7j0RERERERERERH9P99ZpSVRivB/rgAAAABJRU5ErkJggg==",
-          "createdAt":"2019-10-18T03:55:24.331Z",
-          "country":"FR",
-          "title":"Senior Software Engineer",
-          "channels": [ 
-            {
-               "id": "sandra",
-               "type": "github",
-               "_id": "5d543b745d08e470cb2a3e4b"
-            },
-            { "_id": "5d543b745d08e470cb2a3e4a", 
-              "type": "twitter", 
-              "id": "sandra"
-            }
-         ]
-       },
-       {
-          "spokenLanguages":[
-             "es",
-             "en"
-          ],
-          "tags":[
-             "python",
-             "reactjs",
-             "html",
-             "css",
-             "graphql"
-          ],
-          "_id":"1",
-          "name":"Brent M. Clark",
-          "avatar":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAG1BMVEXMzMyWlpaqqqq3t7fFxcW+vr6xsbGjo6OcnJyLKnDGAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABAElEQVRoge3SMW+DMBiE4YsxJqMJtHOTITPeOsLQnaodGImEUMZEkZhRUqn92f0MaTubtfeMh/QGHANEREREREREREREtIJJ0xbH299kp8l8FaGtLdTQ19HjofxZlJ0m1+eBKZcikd9PWtXC5DoDotRO04B9YOvFIXmXLy2jEbiqE6Df7DTleA5socLqvEFVxtJyrpZFWz/pHM2CVte0lS8g2eDe6prOyqPglhzROL+Xye4tmT4WvRcQ2/m81p+/rdguOi8Hc5L/8Qk4vhZzy08DduGt9eVQyP2qoTM1zi0/uf4hvBWf5c77e69Gf798y08L7j0RERERERERERH9P99ZpSVRivB/rgAAAABJRU5ErkJggg==",
-          "createdAt":"2019-10-17T02:57:41.864Z",
-          "country":"US",
-          "description":"Hello =)",
-          "title":"Sr. Software Engineer",
-          "channels": [   
-            {
-               "id": "brent_m_clark",
-               "type": "twitter",
-               "_id": "5d543b745d08e470cb2a3e3f"
-            },
-            {
-               "id": "brentmclark",
-               "type": "github",
-               "_id": "5d543b745d08e470cb2a3e3e"
-            }
-         ]
-       }
+  "success": true,
+  "filters": {
+    "countries": [
+      {
+        "id": "FR",
+        "label": "France"
+      },
+      {
+        "id": "US",
+        "label": "United States of America"
+      }
+    ],
+    "languages": [
+      {
+        "id": "en",
+        "label": "English"
+      },
+      {
+        "id": "es",
+        "label": "Spanish"
+      },
+      {
+        "id": "fr",
+        "label": "French"
+      }
+    ],
+    "technologies": [
+      "android",
+      "css",
+      "graphql",
+      "html",
+      "kotlin",
+      "python",
+      "reactjs",
+      "unit testing"
     ]
- }
+  },
+  "pagination": {
+    "total": 439,
+    "page": 1,
+    "limit": 1000,
+    "hasMore": false
+  },
+  "data": [
+    {
+      "spokenLanguages": ["en", "fr"],
+      "tags": ["android", "kotlin", "unit testing"],
+      "_id": "2",
+      "name": "Sandra Anuj",
+      "avatar": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAG1BMVEXMzMyWlpaqqqq3t7fFxcW+vr6xsbGjo6OcnJyLKnDGAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABAElEQVRoge3SMW+DMBiE4YsxJqMJtHOTITPeOsLQnaodGImEUMZEkZhRUqn92f0MaTubtfeMh/QGHANEREREREREREREtIJJ0xbH299kp8l8FaGtLdTQ19HjofxZlJ0m1+eBKZcikd9PWtXC5DoDotRO04B9YOvFIXmXLy2jEbiqE6Df7DTleA5socLqvEFVxtJyrpZFWz/pHM2CVte0lS8g2eDe6prOyqPglhzROL+Xye4tmT4WvRcQ2/m81p+/rdguOi8Hc5L/8Qk4vhZzy08DduGt9eVQyP2qoTM1zi0/uf4hvBWf5c77e69Gf798y08L7j0RERERERERERH9P99ZpSVRivB/rgAAAABJRU5ErkJggg==",
+      "createdAt": "2019-10-18T03:55:24.331Z",
+      "country": "FR",
+      "title": "Senior Software Engineer",
+      "channels": [
+        {
+          "id": "sandra",
+          "type": "github",
+          "_id": "5d543b745d08e470cb2a3e4b"
+        },
+        { "_id": "5d543b745d08e470cb2a3e4a", "type": "twitter", "id": "sandra" }
+      ]
+    },
+    {
+      "spokenLanguages": ["es", "en"],
+      "tags": ["python", "reactjs", "html", "css", "graphql"],
+      "_id": "1",
+      "name": "Brent M. Clark",
+      "avatar": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAG1BMVEXMzMyWlpaqqqq3t7fFxcW+vr6xsbGjo6OcnJyLKnDGAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABAElEQVRoge3SMW+DMBiE4YsxJqMJtHOTITPeOsLQnaodGImEUMZEkZhRUqn92f0MaTubtfeMh/QGHANEREREREREREREtIJJ0xbH299kp8l8FaGtLdTQ19HjofxZlJ0m1+eBKZcikd9PWtXC5DoDotRO04B9YOvFIXmXLy2jEbiqE6Df7DTleA5socLqvEFVxtJyrpZFWz/pHM2CVte0lS8g2eDe6prOyqPglhzROL+Xye4tmT4WvRcQ2/m81p+/rdguOi8Hc5L/8Qk4vhZzy08DduGt9eVQyP2qoTM1zi0/uf4hvBWf5c77e69Gf798y08L7j0RERERERERERH9P99ZpSVRivB/rgAAAABJRU5ErkJggg==",
+      "createdAt": "2019-10-17T02:57:41.864Z",
+      "country": "US",
+      "description": "Hello =)",
+      "title": "Sr. Software Engineer",
+      "channels": [
+        {
+          "id": "brent_m_clark",
+          "type": "twitter",
+          "_id": "5d543b745d08e470cb2a3e3f"
+        },
+        {
+          "id": "brentmclark",
+          "type": "github",
+          "_id": "5d543b745d08e470cb2a3e3e"
+        }
+      ]
+    }
+  ]
+}
diff --git a/cypress/fixtures/users/current/get.json b/cypress/fixtures/users/current/get.json
@@ -1,12 +1,9 @@
 {
-    "data": {
-        "_id": 1,
-        "email": "[email protected]",
-        "username": "brentmclark",
-        "roles": [
-            "Mentor"
-        ],
-        "avatar": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtBAMAAADINP+pAAAAG1BMVEXMzMyWlpa+vr6xsbG3t7fFxcWqqqqjo6OcnJzvcxCxAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAANElEQVQ4jWNgGAUjGDCZpcBJZMBsgiCRgat5M4OJAohEBYlCigzhYBINGCcD1YPIUTCsAADs9gb4p4yG2QAAAABJRU5ErkJggg=="
-    }
+  "data": {
+    "_id": 1,
+    "email": "[email protected]",
+    "username": "brentmclark",
+    "roles": ["Mentor"],
+    "avatar": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtBAMAAADINP+pAAAAG1BMVEXMzMyWlpa+vr6xsbG3t7fFxcWqqqqjo6OcnJzvcxCxAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAANElEQVQ4jWNgGAUjGDCZpcBJZMBsgiCRgat5M4OJAohEBYlCigzhYBINGCcD1YPIUTCsAADs9gb4p4yG2QAAAABJRU5ErkJggg=="
+  }
 }
-
diff --git a/cypress/integration/login.spec.js b/cypress/integration/login.spec.js
@@ -1,18 +1,17 @@
-import { createPublicKey } from "crypto";
+import { createPublicKey } from 'crypto';
 
 const { cy } = global;
 
 describe('login', () => {
-	it('should be able to login a user', () => {
+  it('should be able to login a user', () => {
     cy.login();
-    cy.server({urlMatchingOptions: { matchBase: false, dot: true }});
+    cy.server({ urlMatchingOptions: { matchBase: false, dot: true } });
     cy.route('GET', '/users/current', 'fixture:users/current/get');
     cy.route('GET', '/mentors?limit=*', 'fixture:mentors/get');
-    cy.visit('/')
+    cy.visit('/');
     cy.getByTestId('user-avatar')
       .getByAltText('[email protected]')
-      .click()
-    cy.getByText('Logout')
-      .should('have.length', 1)
-	})
-})
+      .click();
+    cy.getByText('Logout').should('have.length', 1);
+  });
+});
diff --git a/cypress/integration/mentors.js b/cypress/integration/mentors.js
@@ -1,13 +1,13 @@
 const { cy } = global;
 
 describe('Mentor Filtering', () => {
-  before(function(){
+  before(function() {
     cy.login();
-    cy.server({urlMatchingOptions: { matchBase: false, dot: true }});
+    cy.server({ urlMatchingOptions: { matchBase: false, dot: true } });
     cy.route('GET', '/users/current', 'fixture:users/current/get');
     cy.route('GET', '/mentors?limit=*', 'fixture:mentors/get');
     cy.visit('/');
-  })
+  });
   it('can filter by technology', () => {
     cy.filterByName('Brent M Clark')
       .getByTestId('technology-filter-autocomplete')
@@ -37,45 +37,58 @@ describe('Mentor Filtering', () => {
   });
 
   it('can clear filter', () => {
-    cy.filterByName('Brent M Clark')
+    cy.filterByName('Brent M Clark');
     cy.get('div.input-container:nth-child(3)').within(() => {
-      cy.getByText('clear').click()
-    })
-    
+      cy.getByText('clear').click();
+    });
+
     cy.getByTestId('name-filter-autocomplete').should('have.value', '');
   });
 
-  it( 'verify filtered technology label on mentors card', ()=> {
+  it('verify filtered technology label on mentors card', () => {
     cy.getByTestId('technology-filter-autocomplete')
       .type('reactjs')
       .type('{enter}');
-    cy.getAllByTestId('mentor-card').first()
-      .get('.tag').contains('reactjs')
+    cy.getAllByTestId('mentor-card')
+      .first()
+      .get('.tag')
+      .contains('reactjs');
   });
 
-  it( 'verify filtered country label on mentors card', ()=> {
+  it('verify filtered country label on mentors card', () => {
     cy.getByTestId('country-filter-autocomplete')
       .type('United States')
       .type('{enter}');
-    cy.getAllByTestId('mentor-card').first()
-      .get('.country').contains('US')
-  })
+    cy.getAllByTestId('mentor-card')
+      .first()
+      .get('.country')
+      .contains('US');
+  });
 
-  it('logged users can click on mentors channel', () => { 
-    cy.filterByName('Brent M Clark')
-    cy.getAllByTestId('mentor-card').first()
+  it('logged users can click on mentors channel', () => {
+    cy.filterByName('Brent M Clark');
+    cy.getAllByTestId('mentor-card')
+      .first()
       .get('div.channels')
       .first()
       .click();
   });
 
-  it ('user can like mentor', ()=> {
-    cy.get('button.like-button').first().click();
-    cy.get('button.like-button i').first().should('have.class', 'liked')
-  })
+  it('user can like mentor', () => {
+    cy.get('button.like-button')
+      .first()
+      .click();
+    cy.get('button.like-button i')
+      .first()
+      .should('have.class', 'liked');
+  });
 
-  it ('user can unlike mentor', ()=> {
-    cy.get('button.like-button').first().click();
-    cy.get('button.like-button i').first().should('have.class', 'fa-heart-o')
-  })
+  it('user can unlike mentor', () => {
+    cy.get('button.like-button')
+      .first()
+      .click();
+    cy.get('button.like-button i')
+      .first()
+      .should('have.class', 'fa-heart-o');
+  });
 });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -5,5 +5,8 @@ Cypress.Commands.add('filterByName', name => {
 });
 
 Cypress.Commands.add('login', () => {
-  window.localStorage.setItem('auth-data', JSON.stringify({expiresAt: 1887058578000}))
-})
+  window.localStorage.setItem(
+    'auth-data',
+    JSON.stringify({ expiresAt: 1887058578000 })
+  );
+});
diff --git a/cypress/support/index.js b/cypress/support/index.js
@@ -3,15 +3,14 @@ import '@testing-library/cypress/add-commands';
 
 let polyfill;
 
-const { before, cy, Cypress } = global 
+const { before, cy, Cypress } = global;
 
 // Polyfill window.fetch because thre 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) => {
-      polyfill = contents;
-    });
+  cy.readFile('node_modules/whatwg-fetch/dist/fetch.umd.js').then(contents => {
+    polyfill = contents;
+  });
 });
 
 // use `Cypress` instead of `cy` so this persists across all tests