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

feat(client): improve SuperBlock cert claiming UX (#41147)

Browse Source 
* feat(client): improve SuperBlock cert claiming UX

* broken: add certCard foundation

* broken: add TODO comments for scatter-brain

* restructure stepsToClaimSelector

* add api-server verifyCanClaimCert logic

* temp: correct verifyCanClaim URL

* move GET logic to CertificationCard, remove console.logs

* add error handling, and navigation logic

* correct verification logical flow

* fix completion-epic updates, fix cert verify

* update widget to button, disable button unless verified

* working: refactor CertChallenge with hook state

* add StepsType

* update Honesty snapshot

* add DonationModal to SuperBlockIntro

* disable Claim Cert button unless also isHonest

* prevent warning when viewing cert

* test: use navigate in Modal to return to hash

* test: replace gatsby.navigate with reach/router.navigate

* add propTypes

* fix: rename propTypes -> prop-types

* use react-scrollable-anchor to squash modal bug

* update location parser type

* open-source Oliver's suggestion

* fix superblock title

* add claim-cert-from-learn tests

* use larger tests

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix some cypress stuff

* fix ShowCertification cypress test

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Shaun Hamilton
2021-07-15 15:51:27 +01:00
committed by GitHub
parent 5a52c229f5
commit 6ca6d9950c
17 changed files with 634 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
cypress/integration/learn/responsive-web-design/claim-cert-from-learn.js Normal file
View File

@ -0,0 +1,89 @@
/* global cy */
const projects = {
superBlock: 'responsive-web-design',
block: 'responsive-web-design-projects',
challenges: [
{
slug: 'build-a-tribute-page',
solution: 'https://codepen.io/moT01/pen/ZpJpKp'
},
{
slug: 'build-a-survey-form',
solution: 'https://codepen.io/moT01/pen/LrrjGz?editors=1010'
},
{
slug: 'build-a-product-landing-page',
solution: 'https://codepen.io/moT01/full/qKyKYL/'
},
{
slug: 'build-a-technical-documentation-page',
solution: 'https://codepen.io/moT01/full/JBvzNL/'
},
{
slug: 'build-a-personal-portfolio-webpage',
solution: 'https://codepen.io/moT01/pen/vgOaoJ'
}
]
};
describe('Responsive Web Design Superblock', () => {
before(() => {
cy.exec('npm run seed');
cy.login();
cy.visit('/learn/responsive-web-design');
});
describe('Before submitting projects', () => {
it('should have a card with href "claim-cert-block"', () => {
cy.get('a[href="#claim-cert-block"]').scrollIntoView();
cy.get('a[href="#claim-cert-block"]').should('be.visible');
});
it('should have an anchor element with the text "Claim Certification", and class "disabled"', () => {
cy.get('a.disabled').should('be.visible');
cy.get('a.disabled').should('have.text', 'Claim Certification');
});
it('should have an unordered list with class "map-challenges-ul" containing 5 items', () => {
cy.get('[data-cy=claim-cert-steps]').should('be.visible');
cy.get('[data-cy=claim-cert-steps]').children().should('have.length', 5);
});
});
describe('After submitting all 5 projects', () => {
before(() => {
cy.toggleAll();
const { superBlock, block, challenges } = projects;
challenges.forEach(({ slug, solution }) => {
const url = `/learn/${superBlock}/${block}/${slug}`;
cy.visit(url);
cy.get('#dynamic-front-end-form')
.get('#solution')
.type(solution, { force: true, delay: 0 });
cy.contains("I've completed this challenge")
.should('not.be.disabled')
.click();
cy.contains('Submit and go to next challenge').click();
cy.location().should(loc => {
expect(loc.pathname).to.not.eq(url);
});
});
});
it('should be possible to claim and view certifications from the superBlock page', () => {
cy.location().should(loc => {
expect(loc.pathname).to.eq(`/learn/${projects.superBlock}/`);
});
cy.get('.donation-modal').should('be.visible');
cy.contains('Ask me later').click();
cy.get('.donation-modal').should('not.be.visible');
// directed to claim-cert-block section
cy.url().should('include', '#claim-cert-block');
cy.contains('Claim Certification').should('not.be.disabled').click();
cy.contains('Show Certification').click();
cy.location().should(loc => {
expect(loc.pathname).to.eq(
'/certification/developmentuser/responsive-web-design'
);
});
});
});
});