feat(profile): Add Top Contributor badge feature (#38348)

Co-authored-by: Twaha Rahman <39026437+Twaha-Rahman@users.noreply.github.com>
Co-authored-by: Twaha Rahman <mahi6703890@gmail.com>
Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>

client/src/components/Header/Header.test.js

@@ -70,7 +70,7 @@ describe('<NavLinks />', () => {
     expect(avatarHasClass(componentTree, 'gold-border')).toBeTruthy();
   });
 
-  it('has avatar with green border for top contributors', () => {
+  it('has avatar with blue border for top contributors', () => {
     const topContributorUserProps = {
       user: {
         username: 'test-user',
@@ -84,7 +84,7 @@ describe('<NavLinks />', () => {
       .create(<AuthOrProfile {...topContributorUserProps} />)
       .toJSON();
 
-    expect(avatarHasClass(componentTree, 'green-border')).toBeTruthy();
+    expect(avatarHasClass(componentTree, 'blue-border')).toBeTruthy();
   });
   it('has avatar with purple border for donating top contributors', () => {
     const topDonatingContributorUserProps = {

client/src/components/Header/components/universalNav.css

@@ -189,8 +189,8 @@
   border: 2px solid var(--yellow-gold);
 }
 
-.nav-list .green-border {
-  border: 2px solid var(--green-mid);
+.nav-list .blue-border {
+  border: 2px solid var(--blue-mid);
 }
 
 .nav-list .purple-border {

client/src/components/helpers/borderColorPicker.js

@@ -1,6 +1,6 @@
 export default function borderColorPicker(isDonating, isTopContributor) {
   if (isDonating && isTopContributor) return 'purple-border';
-  else if (isTopContributor) return 'green-border';
+  else if (isTopContributor) return 'blue-border';
   else if (isDonating) return 'gold-border';
   else return 'default-border';
 }

client/src/components/layouts/variables.css

@@ -17,7 +17,7 @@
   --blue-light: #99c9ff;
   --blue-dark: #002ead;
   --green-light: #acd157;
-  --green-mid: green;
+  --blue-mid: #198eee;
   --purple-mid: darkviolet;
   --green-dark: #00471b;
   --red-light: #ffadad;

client/src/components/profile/components/Camper.js

@@ -11,6 +11,7 @@ import {
 import { AvatarRenderer } from '../../helpers';
 
 import SocialIcons from './SocialIcons';
+import Link from '../../helpers/Link';
 
 import './camper.css';
 
@@ -120,7 +121,8 @@ function Camper({
         <div>
           <br />
           <p className='text-center yearsTopContributor'>
-            <FontAwesomeIcon icon={faAward} /> Top Contributor
+            <FontAwesomeIcon icon={faAward} />{' '}
+            <Link to={'/top-contributors'}>Top Contributor</Link>
           </p>
           <p className='text-center'>{joinArray(yearsTopContributor)}</p>
         </div>

client/src/components/profile/components/camper.css

@@ -24,8 +24,8 @@
   border: 10px solid var(--yellow-gold);
 }
 
-.avatar-container .green-border {
-  border: 10px solid var(--green-mid);
+.avatar-container .blue-border {
+  border: 10px solid var(--blue-mid);
 }
 
 .avatar-container .purple-border {

cypress/integration/top-contributor.js

@@ -0,0 +1,42 @@
+/* global cy */
+
+describe('Top contributor in user profile', () => {
+  before(() => {
+    cy.clearCookies();
+    cy.exec('npm run seed:auth-user -- --top-contributor');
+  });
+
+  after(() => {
+    cy.exec('npm run seed');
+  });
+
+  beforeEach(() => {
+    cy.login();
+    cy.contains('Profile').click({ force: true });
+
+    // The following line is only required if you want to test it in development
+    // cy.contains('Preview custom 404 page').click();
+  });
+
+  it('Should show `Top Contributor` text with badge', () => {
+    cy.contains('Top Contributor')
+      .parent()
+      .within(() => {
+        cy.contains('Top Contributor').should('be.visible');
+        cy.get('svg').should('be.visible');
+      });
+  });
+
+  // eslint-disable-next-line max-len
+  it('Should take user to `Top Contributor` page when `Top Contributor` gets clicked', () => {
+    cy.contains('Top Contributor').should(
+      'have.attr',
+      'href',
+      '/top-contributors'
+    );
+  });
+
+  it('Should show years when it was achieved', () => {
+    cy.contains('2017, 2018 and 2019').should('be.visible');
+  });
+});

tools/scripts/seed/seedAuthUser.js

@@ -4,6 +4,8 @@ const MongoClient = require('mongodb').MongoClient;
 const ObjectId = require('mongodb').ObjectID;
 const debug = require('debug');
 
+const envVariables = process.argv;
+
 const log = debug('fcc:tools:seedLocalAuthUser');
 const { MONGOHQ_URL } = process.env;
 
@@ -73,7 +75,9 @@ MongoClient.connect(MONGOHQ_URL, { useNewUrlParser: true }, function(
         isMachineLearningPyCertV7: false,
         completedChallenges: [],
         portfolio: [],
-        yearsTopContributor: [],
+        yearsTopContributor: envVariables.includes('--top-contributor')
+          ? ['2017', '2018', '2019']
+          : [],
         rand: 0.6126749173148205,
         theme: 'default',
         profileUI: {
@@ -91,7 +95,7 @@ MongoClient.connect(MONGOHQ_URL, { useNewUrlParser: true }, function(
         badges: {
           coreTeam: []
         },
-        isDonating: false,
+        isDonating: envVariables.includes('--donor'),
         emailAuthLinkTTL: null,
         emailVerifyTTL: null
       });