fix: show-cert... Cypress tests (#44911)

* fix: scroll to certification section

* test: refactor and update show-cert

Pulls out the flaky code from the before hook (where a single failure
kills the suite) into the test.  Also, the visit to settings to view the
certification only needed to happen once.

client/src/components/settings/Certification.js

@@ -11,6 +11,7 @@ import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
 import { createSelector } from 'reselect';
 
+import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor';
 import {
   projectMap,
   legacyProjectMap
@@ -25,6 +26,8 @@ import SectionHeader from './section-header';
 
 import './certification.css';
 
+configureAnchors({ offset: -40, scrollDuration: 0 });
+
 const propTypes = {
   completedChallenges: PropTypes.arrayOf(
     PropTypes.shape({
@@ -309,6 +312,7 @@ export class CertificationSettings extends Component {
               block={true}
               bsStyle='primary'
               href={certLocation}
+              data-cy={`btn-for-${certSlug}`}
               onClick={createClickHandler(certSlug)}
             >
               {isCert ? t('buttons.show-cert') : t('buttons.claim-cert')}
@@ -424,27 +428,31 @@ export class CertificationSettings extends Component {
 
     const { t } = this.props;
     return (
-      <section id='certification-settings'>
+      <ScrollableAnchor id='certification-settings'>
-        <SectionHeader>{t('settings.headings.certs')}</SectionHeader>
+        {/* it's weird that we repeat the id, but the ScrollableAnchor does not
-        {certifications.map(certName =>
+        add any elements to the DOM and cannot be used for styling  */}
-          this.renderCertifications(certName, projectMap)
+        <section id='certification-settings'>
-        )}
+          <SectionHeader>{t('settings.headings.certs')}</SectionHeader>
-        <SectionHeader>{t('settings.headings.legacy-certs')}</SectionHeader>
+          {certifications.map(certName =>
-        {this.renderLegacyFullStack()}
+            this.renderCertifications(certName, projectMap)
-        {legacyCertifications.map(certName =>
+          )}
-          this.renderCertifications(certName, legacyProjectMap)
+          <SectionHeader>{t('settings.headings.legacy-certs')}</SectionHeader>
-        )}
+          {this.renderLegacyFullStack()}
-        {isOpen ? (
+          {legacyCertifications.map(certName =>
-          <ProjectModal
+            this.renderCertifications(certName, legacyProjectMap)
-            challengeFiles={challengeFiles}
+          )}
-            handleSolutionModalHide={this.handleSolutionModalHide}
+          {isOpen ? (
-            isOpen={isOpen}
+            <ProjectModal
-            projectTitle={projectTitle}
+              challengeFiles={challengeFiles}
-            solution={solution}
+              handleSolutionModalHide={this.handleSolutionModalHide}
-            t={t}
+              isOpen={isOpen}
-          />
+              projectTitle={projectTitle}
-        ) : null}
+              solution={solution}
-      </section>
+              t={t}
+            />
+          ) : null}
+        </section>
+      </ScrollableAnchor>
     );
   }
 }

cypress/integration/learn/responsive-web-design/show-cert-from-superblock.js

@@ -44,6 +44,25 @@ describe('Responsive Web Design Superblock', () => {
       cy.exec('npm run seed');
       cy.login();
       cy.toggleAll();
+    });
+
+    it('should be possible to view certifications from the settings page', () => {
+      submitFrontEndSolutions();
+      cy.visit(`/learn/${projects.superBlock}/`);
+      cy.contains('Go to settings to claim your certification').click();
+      cy.location().should(loc => {
+        expect(loc.pathname).to.eq(`/settings`);
+      });
+      cy.get('[data-cy=btn-for-responsive-web-design]').click();
+      cy.contains('Show Certification').click();
+      cy.location().should(loc => {
+        expect(loc.pathname).to.eq(
+          `/certification/developmentuser/${projects.superBlock}`
+        );
+      });
+    });
+
+    function submitFrontEndSolutions() {
       const { superBlock, block, challenges } = projects;
       challenges.forEach(({ slug, solution }) => {
         const url = `/learn/${superBlock}/${block}/${slug}`;
@@ -64,23 +83,7 @@ describe('Responsive Web Design Superblock', () => {
         cy.location().should(loc => {
           expect(loc.pathname).to.not.eq(url);
         });
-        cy.visit('/settings');
-        cy.get(
-          `[href="/certification/developmentuser/${projects.superBlock}"]`
-        ).click();
-        cy.visit(`/learn/${projects.superBlock}/`);
       });
-    });
+    }
-    it('should be possible to view certifications from the superBlock page', () => {
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq(`/learn/${projects.superBlock}/`);
-      });
-      cy.contains('Show Certification').click();
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq(
-          `/certification/developmentuser/${projects.superBlock}`
-        );
-      });
-    });
   });
 });