From f55a4c48dbd649c08b3f3e64272d4e79b27d976b Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Fri, 3 Jun 2022 10:44:20 +0200
Subject: [PATCH] test: tighten up two more cypress tests (#46273)

* test: tighten up user-token

This should be faster and a little more reliable.  before should have
worked, but beforeEach seems more reliable, so I'm trying it.

* test: use a single test for intro-page

Should be more robust as well as a lot faster.
---
 client/src/components/settings/user-token.tsx |  2 +-
 .../templates/Challenges/codeally/show.tsx    |  1 +
 .../learn/responsive-web-design/intro-page.js | 21 ++++++++-----------
 cypress/integration/settings/user-token.js    | 17 +++++++--------
 4 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/client/src/components/settings/user-token.tsx b/client/src/components/settings/user-token.tsx
index 6daf9bad7ce..a356decf882 100644
--- a/client/src/components/settings/user-token.tsx
+++ b/client/src/components/settings/user-token.tsx
@@ -29,7 +29,7 @@ class UserToken extends Component<UserTokenProps> {
     const { t } = this.props;
 
     return (
-      <div className='user-token text-center'>
+      <div data-cy='user-token' className='user-token text-center'>
         <FullWidthRow>
           <Panel className='user-panel'>
             <Panel.Heading>{t('user-token.title')}</Panel.Heading>
diff --git a/client/src/templates/Challenges/codeally/show.tsx b/client/src/templates/Challenges/codeally/show.tsx
index bcf84f1e3e9..1fc7b9fd0a0 100644
--- a/client/src/templates/Challenges/codeally/show.tsx
+++ b/client/src/templates/Challenges/codeally/show.tsx
@@ -236,6 +236,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
         <Helmet title={`${blockName}: ${title} | freeCodeCamp.org`} />
         <iframe
           className='codeally-frame'
+          data-cy='codeally-frame'
           // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
           sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
           src={`https://codeally.io/embed/?repoUrl=${url}&${goBackTo}&${envVariables}&${tempToken}&${date}`}
diff --git a/cypress/integration/learn/responsive-web-design/intro-page.js b/cypress/integration/learn/responsive-web-design/intro-page.js
index 76b10101ce6..200fb0c6053 100644
--- a/cypress/integration/learn/responsive-web-design/intro-page.js
+++ b/cypress/integration/learn/responsive-web-design/intro-page.js
@@ -5,37 +5,34 @@ const selectors = {
 describe('Certification intro page', () => {
   before(() => {
     cy.exec('npm run seed');
-    cy.clearCookies();
     cy.login();
-    cy.visit('/learn/2022/responsive-web-design');
   });
 
-  it('Should render', () => {
+  beforeEach(() => {
+    cy.preserveSession();
+  });
+
+  it('Should render and toggle correctly', () => {
+    cy.visit('/learn/2022/responsive-web-design');
     cy.title().should(
       'eq',
       '(New) Responsive Web Design Certification | freeCodeCamp.org'
     );
-  });
-
-  it('Should have certification intro text', () => {
     cy.contains(
       "In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages"
     ).should('be.visible');
-  });
 
-  it('First block should be expanded', () => {
+    // First block should be expanded
     cy.contains(
       'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.'
     ).should('be.visible');
-  });
 
-  it('Second block should be closed', () => {
+    // Second block should be closed
     cy.contains(
       'CSS tells the browser how to display your webpage. You can use CSS to set the color, font, size, and other aspects of HTML elements.'
     ).should('not.exist');
-  });
 
-  it('Block should handle toggle clicks correctly', () => {
+    // Block should handle toggle clicks correctly
     cy.get(selectors.firstBlock).click();
     cy.contains(
       'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.'
diff --git a/cypress/integration/settings/user-token.js b/cypress/integration/settings/user-token.js
index edd172e3d6a..d3f54521fdb 100644
--- a/cypress/integration/settings/user-token.js
+++ b/cypress/integration/settings/user-token.js
@@ -1,15 +1,15 @@
 describe('User token widget on settings page,', function () {
   describe('initially', function () {
-    before(() => {
+    beforeEach(() => {
       cy.exec('npm run seed');
       cy.login();
-      cy.visit('/settings');
     });
 
     it('should not render', function () {
+      cy.visit('/settings');
       // make sure 'Danger Zone' is there so we know the page has rendered
       cy.contains('Danger Zone');
-      cy.get('.user-token').should('not.exist');
+      cy.get('[data-cy=user-token]').should('not.exist');
     });
   });
 
@@ -21,19 +21,18 @@ describe('User token widget on settings page,', function () {
         '/learn/relational-database/learn-bash-by-building-a-boilerplate/build-a-boilerplate'
       );
       cy.get('[data-cy=start-codeally]').click();
-      cy.wait(2000);
-      cy.visit('/settings');
+      cy.get('[data-cy=codeally-frame]').should('be.visible');
     });
 
-    it('should render', function () {
+    it('should allow you to delete your token', () => {
+      cy.visit('/settings');
       // make sure 'Danger Zone' is there so we know the page has rendered
       cy.contains('Danger Zone');
-      cy.get('.user-token').should('have.length', 1);
-    });
+      cy.get('[data-cy=user-token]').should('have.length', 1);
 
-    it('should allow you to delete your token', function () {
       cy.get('[data-cy=delete-user-token]').click();
       cy.contains('Your user token has been deleted.');
+      cy.get('[data-cy=user-token]').should('not.exist');
     });
   });
 });