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

@@ -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>

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

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.'

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