test: titles in project previews (#45051)

* fix: trim titles before injecting into iframes

Surrounding whitespace isn't useful

* test: check preview iframe has correct title

client/src/templates/Challenges/utils/build.js

@@ -213,7 +213,9 @@ export function updateProjectPreview(buildData, document) {
     const titleMatch = buildData?.sources?.index?.match(
       /<title>(.*?)<\/title>/
     );
-    const frameTitle = titleMatch ? titleMatch[1] + ' preview' : 'preview';
+    const frameTitle = titleMatch
+      ? titleMatch[1].trim() + ' preview'
+      : 'preview';
     createProjectPreviewFramer(document, frameTitle)(buildData);
   } else {
     throw new Error(

cypress/integration/learn/challenges/project-preview.js

@@ -1,12 +1,64 @@
-const practiceProjectUrls = [
+const practiceProjects = [
-  '/learn/responsive-web-design/css-variables-skyline/',
+  {
-  '/learn/responsive-web-design/basic-html-cat-photo-app/',
+    title: 'freeCodeCamp: Accessibility Quiz',
-  '/learn/responsive-web-design/basic-css-cafe-menu/',
+    url: '/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/'
-  '/learn/responsive-web-design/css-picasso-painting/',
+  },
-  '/learn/responsive-web-design/css-box-model/',
+  {
-  '/learn/responsive-web-design/css-piano/',
+    title: 'Camper Cafe Menu',
-  '/learn/responsive-web-design/registration-form/',
+    url: '/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/'
-  '/learn/responsive-web-design/accessibility-quiz/'
+  },
+  {
+    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', () => {
-    it('should appear on the first challenges of each practice project', () => {
+    practiceProjects.forEach(({ url, title }) => {
-      practiceProjectUrls.forEach(url => {
+      cy.visit(url + 'step-1');
-        cy.visit(url + 'part-1');
+      cy.contains("Here's a preview of what you will build");
-        cy.contains('Complete project demo.');
+      cy.get('[data-cy="project-preview-modal"]')
-        cy.get('[data-cy="project-preview-modal"]').should('be.focused');
+        .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,
+  // 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
+  // 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.
+  // 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', () => {
+  it('should NOT appear on the second challenges of each practice project', () => {
-      practiceProjectUrls.forEach(url => {
+    practiceProjects.forEach(({ url }) => {
-        cy.visit(url + 'part-2');
+      cy.visit(url + 'step-2');
-        cy.focused()
+      cy.focused()
-          .parents()
+        .parents()
-          .should('have.class', 'react-monaco-editor-container');
+        .should('have.class', 'react-monaco-editor-container');
-      });
     });
-  }
+  });
 
   it('should NOT appear on the first challenges of legacy blocks', () => {
     legacyFirstChallengeUrls.forEach(url => {

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