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

feat: show project preview (#43967)

Browse Source 
* feat: add data for preview to challengeMeta

* feat: allow creation of project preview frames

* feat: make project preview data available for frame

* refactor: simplify reducer

* feat: show project preview for first challenge

* feat: show project preview on MultiFile challenges

* test: check for presence/absence of preview modal

* fix: simplify previewProject saga

* test: uncomment project preview test

* fix: increase modal size + change modal title

* modal-footer

* feat: adjust preview size

* fix: remove margin, padding, and line-height for preview of finished projects

* Revert "fix: remove margin, padding, and line-height for preview of finished projects"

This reverts commit 0db11a0819.

* fix: remove margin on all previews

* refactor: use closeModal('projectPreview') for clarity

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: get started -> start coding!

* fix: update closeModal type

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
This commit is contained in:
Oliver Eyton-Williams
2021-11-29 19:30:28 +01:00
committed by GitHub
parent a8b0332720
commit bb7893db8e
17 changed files with 361 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
cypress/integration/learn/challenges/project-preview.js Normal file
View File

@ -0,0 +1,53 @@
const practiceProjectUrls = [
'/learn/responsive-web-design/css-variables-skyline/',
'/learn/responsive-web-design/basic-html-cat-photo-app/',
'/learn/responsive-web-design/basic-css-cafe-menu/',
'/learn/responsive-web-design/css-picasso-painting/',
'/learn/responsive-web-design/css-box-model/',
'/learn/responsive-web-design/css-piano/',
'/learn/responsive-web-design/registration-form/',
'/learn/responsive-web-design/accessibility-quiz/'
];
const legacyFirstChallengeUrls = [
'/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements',
'/learn/responsive-web-design/basic-css/change-the-color-of-text',
'/learn/responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property',
'/learn/responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility',
'/learn/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes',
'/learn/responsive-web-design/css-grid/create-your-first-css-grid'
];
describe('project preview', () => {
if (Cypress.env('SHOW_UPCOMING_CHANGES') === 'true') {
it('should appear on the first challenges of each practice project', () => {
practiceProjectUrls.forEach(url => {
cy.visit(url + 'part-1');
cy.contains('Complete project demo.');
cy.get('[data-cy="project-preview-modal"]').should('be.focused');
});
});
// Tests for the absence of an element are tricky, if, as is the case here,
// the element is not rendered straight away. So, instead, we test for a
// side effect of not showing the modal: an editor is allowed to get focus.
it('should NOT appear on the second challenges of each practice project', () => {
practiceProjectUrls.forEach(url => {
cy.visit(url + 'part-2');
cy.focused()
.parents()
.should('have.class', 'react-monaco-editor-container');
});
});
}
it('should NOT appear on the first challenges of legacy blocks', () => {
legacyFirstChallengeUrls.forEach(url => {
cy.visit(url);
// if no modals are showing, then the editor should have focus:
cy.focused()
.parents()
.should('have.class', 'react-monaco-editor-container');
});
});
});