diff --git a/client/src/templates/Challenges/utils/build.js b/client/src/templates/Challenges/utils/build.js index ae3b73c38a..68530884a5 100644 --- a/client/src/templates/Challenges/utils/build.js +++ b/client/src/templates/Challenges/utils/build.js @@ -213,7 +213,9 @@ export function updateProjectPreview(buildData, document) { const titleMatch = buildData?.sources?.index?.match( /(.*?)<\/title>/ ); - const frameTitle = titleMatch ? titleMatch[1] + ' preview' : 'preview'; + const frameTitle = titleMatch + ? titleMatch[1].trim() + ' preview' + : 'preview'; createProjectPreviewFramer(document, frameTitle)(buildData); } else { throw new Error( diff --git a/cypress/integration/learn/challenges/project-preview.js b/cypress/integration/learn/challenges/project-preview.js index 4e0b54d48d..d1e4bfdbf9 100644 --- a/cypress/integration/learn/challenges/project-preview.js +++ b/cypress/integration/learn/challenges/project-preview.js @@ -1,12 +1,64 @@ -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 practiceProjects = [ + { + title: 'freeCodeCamp: Accessibility Quiz', + url: '/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/' + }, + { + title: 'Camper Cafe Menu', + url: '/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/' + }, + { + title: 'Learn CSS Animations by Building a Ferris Wheel', + url: '/learn/2022/responsive-web-design/learn-css-animation-by-building-a-ferris-wheel/' + }, + { + title: 'CSS Color Markers', + url: '/learn/2022/responsive-web-design/learn-css-colors-by-building-a-set-of-colored-markers/' + }, + { + title: 'CSS Flexbox Photo Gallery', + url: '/learn/2022/responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/' + }, + { + title: 'CSS Grid Magazine', + url: '/learn/2022/responsive-web-design/learn-css-grid-by-building-a-magazine/' + }, + { + title: 'CSS Penguin', + url: '/learn/2022/responsive-web-design/learn-css-transforms-by-building-a-penguin/' + }, + { + title: 'freeCodeCamp Skyline Project', + url: '/learn/2022/responsive-web-design/learn-css-variables-by-building-a-city-skyline/' + }, + { + title: 'CatPhotoApp', + url: '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/' + }, + { + title: 'freeCodeCamp Registration Form Project', + url: '/learn/2022/responsive-web-design/learn-html-forms-by-building-a-registration-form/' + }, + { + title: 'freeCodeCamp Picasso Painting', + url: '/learn/2022/responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/' + }, + { + title: 'AcmeWidgetCorp Balance Sheet', + url: '/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/' + }, + { + title: 'Responsive Web Design Piano', + url: '/learn/2022/responsive-web-design/learn-responsive-web-design-by-building-a-piano/' + }, + { + title: 'Rothko', + url: '/learn/2022/responsive-web-design/learn-the-css-box-model-by-building-a-rothko-painting/' + }, + { + title: 'Nutrition Label', + url: '/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/' + } ]; const legacyFirstChallengeUrls = [ @@ -19,27 +71,28 @@ const legacyFirstChallengeUrls = [ ]; 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'); - }); + it('should appear on the first challenges of each practice project', () => { + practiceProjects.forEach(({ url, title }) => { + cy.visit(url + 'step-1'); + cy.contains("Here's a preview of what you will build"); + cy.get('[data-cy="project-preview-modal"]') + .should('be.focused') + .find('iframe') + .should('have.attr', 'title', title + ' preview'); }); + }); - // 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'); - }); + // 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', () => { + practiceProjects.forEach(({ url }) => { + cy.visit(url + 'step-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 => { diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index 69e8ecefa8..3b3395cd27 100644 --- a/cypress/plugins/index.js +++ b/cypress/plugins/index.js @@ -26,8 +26,6 @@ module.exports = (on, config) => { } }); - // Allows us to test the new curriculum before it's released: - config.env.SHOW_UPCOMING_CHANGES = process.env.SHOW_UPCOMING_CHANGES; config.env.API_LOCATION = process.env.API_LOCATION; return config; };