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;
};