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');