gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(tools): better tests for navlinks (#41021)

Browse Source 
Fixes the tests for the NavLinks component to remove the need
for magic numbers when travelling the DOM tree.
This commit is contained in:
Nicholas Carrigan (he/him)
2021-02-10 03:32:00 -08:00
committed by GitHub
parent f157eda1af
commit e195eb1ebe
2 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
client/src/components/Header/Header.test.js
View File

@ -184,34 +184,37 @@ describe('<AuthOrProfile />', () => {
}); });
}); });
const navigationLinks = (component, navItem) => { const navigationLinks = (component, key) => {
return component.props.children[navItem].props; const target = component.props.children.find(
child => child && child.key === key
);
return target.props;
}; };
const profileNavItem = component => component.props.children; const profileNavItem = component => component.props.children;
const hasDonateNavItem = component => { const hasDonateNavItem = component => {
const { children, to } = navigationLinks(component, 0); const { children, to } = navigationLinks(component, 'donate');
return children === 'buttons.donate' && to === '/donate'; return children === 'buttons.donate' && to === '/donate';
}; };
const hasThanksForDonating = component => { const hasThanksForDonating = component => {
const { children } = navigationLinks(component, 0); const { children } = navigationLinks(component, 'donate');
return children[0].props.children === 'donate.thanks'; return children[0].props.children === 'donate.thanks';
}; };
const hasSignInNavItem = component => { const hasSignInNavItem = component => {
const { children } = navigationLinks(component, 1); const { children } = navigationLinks(component, 'signin');
return children === 'buttons.sign-in'; return children === 'buttons.sign-in';
}; };
const hasCurriculumNavItem = component => { const hasCurriculumNavItem = component => {
const { children, to } = navigationLinks(component, 2); const { children, to } = navigationLinks(component, 'learn');
return children === 'buttons.curriculum' && to === '/learn'; return children === 'buttons.curriculum' && to === '/learn';
}; };
const hasProfileAndSettingsNavItems = (component, username) => { const hasProfileAndSettingsNavItems = (component, username) => {
const fragment = navigationLinks(component, 3); const fragment = navigationLinks(component, 'profile-settings');
const profile = fragment.children[0].props; const profile = fragment.children[0].props;
const settings = fragment.children[1].props; const settings = fragment.children[1].props;
@ -225,7 +228,7 @@ const hasProfileAndSettingsNavItems = (component, username) => {
}; };
const hasForumNavItem = component => { const hasForumNavItem = component => {
const { children, to } = navigationLinks(component, 5); const { children, to } = navigationLinks(component, 'forum');
return ( return (
children[0].props.children === 'buttons.forum' && children[0].props.children === 'buttons.forum' &&
to === 'https://forum.freecodecamp.org/' to === 'https://forum.freecodecamp.org/'
@ -233,7 +236,7 @@ const hasForumNavItem = component => {
}; };
const hasNewsNavItem = component => { const hasNewsNavItem = component => {
const { children, to } = navigationLinks(component, 6); const { children, to } = navigationLinks(component, 'news');
return ( return (
children[0].props.children === 'buttons.news' && children[0].props.children === 'buttons.news' &&
to === 'https://www.freecodecamp.org/news' to === 'https://www.freecodecamp.org/news'
@ -241,7 +244,7 @@ const hasNewsNavItem = component => {
}; };
const hasRadioNavItem = component => { const hasRadioNavItem = component => {
const { children, to } = navigationLinks(component, 7); const { children, to } = navigationLinks(component, 'radio');
return ( return (
children[0].props.children === 'buttons.radio' && children[0].props.children === 'buttons.radio' &&
to === 'https://coderadio.freecodecamp.org' to === 'https://coderadio.freecodecamp.org'
@ -249,7 +252,7 @@ const hasRadioNavItem = component => {
}; };
const hasSignOutNavItem = component => { const hasSignOutNavItem = component => {
const { children } = navigationLinks(component, 12); const { children } = navigationLinks(component, 'signout-frag');
const signOutProps = children[1].props; const signOutProps = children[1].props;
return ( return (

16
client/src/components/Header/components/NavLinks.js
View File

@ -1,4 +1,4 @@
import React, { Component } from 'react'; import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
@ -86,7 +86,7 @@ export class NavLinks extends Component {
{t('buttons.curriculum')} {t('buttons.curriculum')}
</Link> </Link>
{username && ( {username && (
<> <Fragment key='profile-settings'>
<Link <Link
className='nav-link' className='nav-link'
key='profile' key='profile'
@ -103,7 +103,7 @@ export class NavLinks extends Component {
> >
{t('buttons.settings')} {t('buttons.settings')}
</Link> </Link>
</> </Fragment>
)} )}
<hr className='nav-line' /> <hr className='nav-line' />
<Link <Link
@ -188,12 +188,16 @@ export class NavLinks extends Component {
) )
)} )}
{username && ( {username && (
<> <Fragment key='signout-frag'>
<hr className='nav-line-2' /> <hr className='nav-line-2' />
<a className='nav-link' href={`${apiLocation}/signout`}> <a
className='nav-link'
href={`${apiLocation}/signout`}
key='sign-out'
>
{t('buttons.sign-out')} {t('buttons.sign-out')}
</a> </a>
</> </Fragment>
)} )}
</div> </div>
); );