feat: add back the forum nav item (#40060)

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

@@ -30,31 +30,14 @@ describe('<NavLinks />', () => {
     const shallow = new ShallowRenderer();
     shallow.render(<AuthOrProfile {...landingPageProps} />);
     const result = shallow.getRenderOutput();
-    // expect(result.props.children).toEqual('Sign In');
-
-    expect(deepChildrenProp(result, 0).children === 'Curriculum').toBeTruthy();
 
     expect(
-      result.props.children[1].props['data-test-label'] === 'landing-small-cta'
+      hasForumNavItem(result) &&
+        hasCurriculumNavItem(result) &&
+        hasSignInButton(result)
     ).toBeTruthy();
   });
 
-  it('has Curriculum and Portfolio links when user signed in on /learn', () => {
-    const defaultUserProps = {
-      user: {
-        username: 'test-user',
-        picture: 'https://freecodecamp.org/image.png'
-      },
-      pending: false
-    };
-    const shallow = new ShallowRenderer();
-    shallow.render(<AuthOrProfile {...defaultUserProps} />);
-    const result = shallow.getRenderOutput();
-
-    expect(hasCurriculumNavItem(result)).toBeTruthy();
-    expect(hasProfileNavItem(result)).toBeTruthy();
-  });
-
   it('has avatar with default border for default users', () => {
     const defaultUserProps = {
       user: {
@@ -120,28 +103,30 @@ describe('<NavLinks />', () => {
   });
 });
 
-const deepChildrenProp = (component, childNumber) =>
-  component.props.children[childNumber].props.children.props;
+const navigationLinks = (component, navItem) => {
+  return component.props.children[0].props.children[navItem].props.children
+    .props;
+};
 
-const hasProfileNavItem = component => {
-  const profileElement = deepChildrenProp(component, 1);
-  return (
-    profileElement.children[0] === 'Profile' &&
-    profileElement.to === '/test-user'
-  );
+const profileNavItem = component => component[2].children[0];
+
+const hasForumNavItem = component => {
+  const { children, to } = navigationLinks(component, 0);
+  return children === 'Forum' && to === 'https://forum.freecodecamp.org';
 };
 
 const hasCurriculumNavItem = component => {
-  const curriculumElement = deepChildrenProp(component, 0);
-  return (
-    curriculumElement.children === 'Curriculum' &&
-    curriculumElement.to === '/learn'
-  );
+  const { children, to } = navigationLinks(component, 1);
+  return children === 'Curriculum' && to === '/learn';
 };
 
+const hasSignInButton = component =>
+  component.props.children[1].props.children === 'Sign In';
+
 const avatarHasClass = (componentTree, classes) => {
+  // componentTree[1].children[0].children[1].props.className
   return (
-    componentTree[1].children[0].children[1].props.className ===
+    profileNavItem(componentTree).children[1].props.className ===
     'avatar-container ' + classes
   );
 };

client/src/components/Header/components/NavLinks.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link, SkeletonSprite, AvatarRenderer } from '../../helpers';
 import PropTypes from 'prop-types';
 import Login from '../components/Login';
+import { forumLocation } from '../../../../../config/env.json';
 
 const propTypes = {
   displayMenu: PropTypes.bool,
@@ -15,6 +16,26 @@ export function AuthOrProfile({ user, pending }) {
   const isTopContributor =
     user && user.yearsTopContributor && user.yearsTopContributor.length > 0;
 
+  const CurriculumAndForumLinks = (
+    <>
+      <li>
+        <Link
+          className='nav-link'
+          external={true}
+          sameTab={true}
+          to={forumLocation}
+        >
+          Forum
+        </Link>
+      </li>
+      <li>
+        <Link className='nav-link' to='/learn'>
+          Curriculum
+        </Link>
+      </li>
+    </>
+  );
+
   if (pending) {
     return (
       <div className='nav-skeleton'>
@@ -24,22 +45,14 @@ export function AuthOrProfile({ user, pending }) {
   } else if (!isUserSignedIn) {
     return (
       <>
-        <li>
-          <Link className='nav-link' to='/learn'>
-            Curriculum
-          </Link>
-        </li>
+        {CurriculumAndForumLinks}
         <Login data-test-label='landing-small-cta'>Sign In</Login>
       </>
     );
   } else {
     return (
       <>
-        <li>
-          <Link className='nav-link' to='/learn'>
-            Curriculum
-          </Link>
-        </li>
+        {CurriculumAndForumLinks}
         <li>
           <Link className='nav-link' to={`/${user.username}`}>
             Profile

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

@@ -127,7 +127,7 @@
 .nav-skeleton {
   height: var(--header-height);
   margin-right: 15px;
-  width: 200px;
+  width: 350px;
 }
 
 .nav-list .fcc-loader {
@@ -208,7 +208,7 @@
   }
 }
 
-@media (max-width: 999px) {
+@media (max-width: 1079px) {
   .site-header {
     padding-right: 0;
     padding-left: 0;
@@ -274,7 +274,7 @@
   }
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 1080px) {
   .universal-nav-middle {
     flex: 1 0 30%;
     margin-right: 0px;

client/src/components/search/searchBar/searchbar.css

@@ -136,7 +136,7 @@ and arrow keys */
   right: 15px;
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 1080px) {
   .ais-SearchBox-input {
     width: 100%;
     max-width: 500px;

cypress/integration/learn/common-components/navbar.js

@@ -3,8 +3,7 @@
 const selectors = {
   heading: "[data-test-label='landing-header']",
   smallCallToAction: "[data-test-label='landing-small-cta']",
-  firstNavigationLink: '.nav-list .nav-link:first-child',
-  lastNavigationLink: '.nav-list .nav-link:last-child',
+  navigationLinks: '.nav-list',
   avatarContainer: '.avatar-container',
   defaultAvatar: '.avatar-container svg'
 };
@@ -12,6 +11,7 @@ const selectors = {
 describe('Navbar', () => {
   beforeEach(() => {
     cy.visit('/');
+    cy.viewport(1200, 660);
   });
 
   it('Should render properly', () => {
@@ -51,14 +51,16 @@ describe('Navbar', () => {
 
   // have the curriculum and CTA on landing and /learn pages.
   it(
-    'Should have `Curriculum` link on landing and learn pages' +
+    'Should have `Forum` and `Curriculum` links on landing and learn pages' +
       'page when not signed in',
     () => {
-      cy.get(selectors.firstNavigationLink)
+      cy.get(selectors.navigationLinks).contains('Forum');
+      cy.get(selectors.navigationLinks)
         .contains('Curriculum')
         .click();
       cy.url().should('include', '/learn');
-      cy.get(selectors.firstNavigationLink).contains('Curriculum');
+      cy.get(selectors.navigationLinks).contains('Curriculum');
+      cy.get(selectors.navigationLinks).contains('Forum');
     }
   );
 
@@ -67,7 +69,7 @@ describe('Navbar', () => {
       'page when not signed in',
     () => {
       cy.contains(selectors.smallCallToAction, 'Sign In');
-      cy.get(selectors.firstNavigationLink)
+      cy.get(selectors.navigationLinks)
         .contains('Curriculum')
         .click();
       cy.contains(selectors.smallCallToAction, 'Sign In');
@@ -76,7 +78,7 @@ describe('Navbar', () => {
 
   it('Should have `Profile` link when user is signed in', () => {
     cy.login()
-      .get(selectors.lastNavigationLink)
+      .get(selectors.navigationLinks)
       .contains('Profile')
       .click();
     cy.url().should('include', '/developmentuser');