From b2a11dcb72257a4e3df7ccfac0854c12e6f588f7 Mon Sep 17 00:00:00 2001 From: Ahmad Abdolsaheb Date: Thu, 22 Oct 2020 19:27:41 +0300 Subject: [PATCH] feat: add back the forum nav item (#40060) --- client/src/components/Header/Header.test.js | 53 +++++++------------ .../components/Header/components/NavLinks.js | 33 ++++++++---- .../Header/components/universalNav.css | 6 +-- .../components/search/searchBar/searchbar.css | 2 +- .../learn/common-components/navbar.js | 16 +++--- 5 files changed, 55 insertions(+), 55 deletions(-) diff --git a/client/src/components/Header/Header.test.js b/client/src/components/Header/Header.test.js index 9b09badd40..9e99851b67 100644 --- a/client/src/components/Header/Header.test.js +++ b/client/src/components/Header/Header.test.js @@ -30,31 +30,14 @@ describe('', () => { const shallow = new ShallowRenderer(); shallow.render(); 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(); - 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('', () => { }); }); -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 ); }; diff --git a/client/src/components/Header/components/NavLinks.js b/client/src/components/Header/components/NavLinks.js index e928b0397c..18cfcaf5a0 100644 --- a/client/src/components/Header/components/NavLinks.js +++ b/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 = ( + <> +
  • + + Forum + +
    • +
  • + + Curriculum + +
    • + + ); + if (pending) { return (
    @@ -24,22 +45,14 @@ export function AuthOrProfile({ user, pending }) { } else if (!isUserSignedIn) { return ( <> -
  • - - Curriculum - -
    • + {CurriculumAndForumLinks} Sign In ); } else { return ( <> -
  • - - Curriculum - -
    • + {CurriculumAndForumLinks}
  • Profile diff --git a/client/src/components/Header/components/universalNav.css b/client/src/components/Header/components/universalNav.css index 61ee476c46..b6060f182a 100644 --- a/client/src/components/Header/components/universalNav.css +++ b/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; diff --git a/client/src/components/search/searchBar/searchbar.css b/client/src/components/search/searchBar/searchbar.css index 97a4ae1041..fbb28a3133 100644 --- a/client/src/components/search/searchBar/searchbar.css +++ b/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; diff --git a/cypress/integration/learn/common-components/navbar.js b/cypress/integration/learn/common-components/navbar.js index ffa2cf1abe..ba72611b5a 100644 --- a/cypress/integration/learn/common-components/navbar.js +++ b/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');