test: check for presence/absence of preview modal

client/src/templates/Challenges/components/project-preview-modal.tsx

@@ -51,6 +51,7 @@ export function ProjectPreviewModal({
 
   return (
     <Modal
+      data-cy='project-preview-modal'
       dialogClassName='project-preview-modal'
       onHide={() => {
         closeModal();

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

@@ -0,0 +1,54 @@
+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 the case here, the
+    // element is not rendered initially. 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');
+        // if no modals are showing, then the editor should have focus:
+        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');
+    });
+  });
+});

cypress/plugins/index.js

@@ -14,11 +14,19 @@
 
 const { execSync } = require('child_process');
 const { existsSync } = require('fs');
+require('dotenv').config();
 
 module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  config.env = config.env || {};
   on('before:run', () => {
     if (!existsSync('../../config/curriculum.json')) {
       execSync('npm run build:curriculum');
     }
   });
+
+  // Allows us to test the new curriculum before it's released:
+  config.env.SHOW_UPCOMING_CHANGES = process.env.SHOW_UPCOMING_CHANGES;
+  return config;
 };