From 422bacd15dc73d1e3367b5b9b7074763fefe25f8 Mon Sep 17 00:00:00 2001 From: Tom <20648924+moT01@users.noreply.github.com> Date: Thu, 24 Sep 2020 07:03:11 -0500 Subject: [PATCH] feat: add button to add cert to LinkedIn profile (#39466) --- .../client-only-routes/ShowCertification.js | 47 ++++++++-- .../src/components/layouts/Certification.js | 11 ++- cypress/integration/ShowCertification.js | 88 +++++++++++++++++++ 3 files changed, 137 insertions(+), 9 deletions(-) create mode 100644 cypress/integration/ShowCertification.js diff --git a/client/src/client-only-routes/ShowCertification.js b/client/src/client-only-routes/ShowCertification.js index 3de455e05f..f2b2cd03bf 100644 --- a/client/src/client-only-routes/ShowCertification.js +++ b/client/src/client-only-routes/ShowCertification.js @@ -25,7 +25,7 @@ import standardErrorMessage from '../utils/standardErrorMessage'; import reallyWeirdErrorMessage from '../utils/reallyWeirdErrorMessage'; import RedirectHome from '../components/RedirectHome'; -import { Loader } from '../components/helpers'; +import { Loader, Spacer } from '../components/helpers'; const propTypes = { cert: PropTypes.shape({ @@ -46,6 +46,9 @@ const propTypes = { errored: PropTypes.bool }), isDonating: PropTypes.bool, + location: PropTypes.shape({ + pathname: PropTypes.string + }), showCert: PropTypes.func.isRequired, signedInUserName: PropTypes.string, userFetchState: PropTypes.shape({ @@ -158,7 +161,8 @@ class ShowCertification extends Component { fetchState, validCertName, createFlashMessage, - certName + signedInUserName, + location: { pathname } } = this.props; const { @@ -196,6 +200,11 @@ class ShowCertification extends Component { completionTime } = cert; + const certDate = new Date(issueDate); + const certYear = certDate.getFullYear(); + const certMonth = certDate.getMonth(); + const certURL = `https://freecodecamp.org${pathname}`; + const donationCloseBtn = (
+ + + + ); + return (
{isDonationDisplayed && !isDonationClosed ? donationSection : ''} @@ -250,7 +284,7 @@ class ShowCertification extends Component {
Issued  - {format(new Date(issueDate), 'MMMM D, YYYY')} + {format(certDate, 'MMMM D, YYYY')}
@@ -286,15 +320,12 @@ class ShowCertification extends Component {

Executive Director, freeCodeCamp.org

-

- Verify this certification at: - https://www.freecodecamp.org/certification/ - {username}/{certName} -

+

Verify this certification at {certURL}

 + {signedInUserName === username ? shareCertBtns : ''}
); } diff --git a/client/src/components/layouts/Certification.js b/client/src/components/layouts/Certification.js index 9756ec4de1..25b43c7acc 100644 --- a/client/src/components/layouts/Certification.js +++ b/client/src/components/layouts/Certification.js @@ -4,6 +4,7 @@ import { connect } from 'react-redux'; import { fetchUser, isSignedInSelector, executeGA } from '../../redux'; import { createSelector } from 'reselect'; +import Helmet from 'react-helmet'; const mapStateToProps = createSelector( isSignedInSelector, @@ -22,8 +23,16 @@ class CertificationLayout extends Component { } this.props.executeGA({ type: 'page', data: pathname }); } + render() { - return {this.props.children}; + const { children } = this.props; + + return ( + + + {children} + + ); } } diff --git a/cypress/integration/ShowCertification.js b/cypress/integration/ShowCertification.js new file mode 100644 index 0000000000..d3a085a998 --- /dev/null +++ b/cypress/integration/ShowCertification.js @@ -0,0 +1,88 @@ +/* global cy */ + +describe('A certification,', function() { + describe('while viewing your own,', function() { + before(() => { + cy.visit('/'); + cy.contains("Get started (it's free)").click({ force: true }); + cy.contains('Update my account settings').click({ force: true }); + + // set user settings to public to claim a cert + cy.get('label:contains(Public)>input').each(el => { + if (!/toggle-active/.test(el[0].parentElement.className)) { + cy.wrap(el).click({ force: true }); + cy.wait(1000); + } + }); + + // if honest policy not accepted + cy.get('.honesty-policy button').then(btn => { + if (btn[0].innerText === 'Agree') { + btn[0].click({ force: true }); + cy.wait(1000); + } + }); + + // fill in legacy front end form + cy.get('#dynamic-legacy-front-end input').each(el => { + cy.wrap(el) + .clear({ force: true }) + .type('https://nhl.com', { force: true, delay: 0 }); + }); + + // if "Save Progress" button exists + cy.get('#dynamic-legacy-front-end').then(form => { + if (form[0][10] && form[0][10].innerHTML === 'Save Progress') { + form[0][10].click({ force: true }); + cy.wait(1000); + } + }); + + // if "Claim Certification" button exists + cy.get('#dynamic-legacy-front-end').then(form => { + if (form[0][10] && form[0][10].innerHTML === 'Claim Certification') { + form[0][10].click({ force: true }); + cy.wait(1000); + } + }); + + cy.get('#button-legacy-front-end') + .contains('Show Certification') + .click({ force: true }); + }); + + it('should render a LinkedIn button', function() { + cy.contains('Add this certification to my LinkedIn profile').should( + 'have.attr', + 'href', + 'https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=Legacy Front End&organizationId=4831032&issueYear=2020&issueMonth=8&certUrl=https://freecodecamp.org/certification/developmentuser/legacy-front-end' + ); + }); + + it('should render a Twitter button', function() { + cy.contains('Share this certification on Twitter').should( + 'have.attr', + 'href', + 'https://twitter.com/intent/tweet?text=I just earned the Legacy Front End certification @freeCodeCamp! Check it out here: https://freecodecamp.org/certification/developmentuser/legacy-front-end' + ); + }); + }); + + describe("while viewing someone else's,", function() { + before(() => { + cy.go('back'); + cy.contains('Sign me out of freeCodeCamp').click({ force: true }); + cy.visit('/certification/developmentuser/legacy-front-end'); + }); + + it('should not render a LinkedIn button', function() { + cy.contains('Add this certification to my LinkedIn profile').should( + 'not.exist' + ); + }); + + it('should not render a Twitter button', function() { + cy.contains('Share this certification on Twitter').should('not.exist'); + }); + }); +});