From 394d2f7459ec2fcf861c11497579a486ab372c0c Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Thu, 21 Oct 2021 17:38:58 +0200
Subject: [PATCH] test: check for presence/absence of preview modal

---
 .../components/project-preview-modal.tsx      |  1 +
 .../learn/challenges/project-preview.js       | 54 +++++++++++++++++++
 cypress/plugins/index.js                      |  8 +++
 3 files changed, 63 insertions(+)
 create mode 100644 cypress/integration/learn/challenges/project-preview.js

diff --git a/client/src/templates/Challenges/components/project-preview-modal.tsx b/client/src/templates/Challenges/components/project-preview-modal.tsx
index ce4a61a765..dceb667b9b 100644
--- a/client/src/templates/Challenges/components/project-preview-modal.tsx
+++ b/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();
diff --git a/cypress/integration/learn/challenges/project-preview.js b/cypress/integration/learn/challenges/project-preview.js
new file mode 100644
index 0000000000..e29a01e4f6
--- /dev/null
+++ b/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');
+    });
+  });
+});
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
index 721b36beb6..fbce33037e 100644
--- a/cypress/plugins/index.js
+++ b/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;
 };