feat(Cypress): Add e2e tests for /learn (#39580)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

cypress/integration/learn/index.js

@@ -9,21 +9,21 @@ const locations = {
 };
 
 const superBlockNames = [
-  'Responsive Web Design',
+  'Responsive Web Design Certification',
-  'JavaScript Algorithms and Data Structures',
+  'JavaScript Algorithms and Data Structures Certification',
-  'Front End Libraries',
+  'Front End Libraries Certification',
-  'Data Visualization',
+  'Data Visualization Certification',
-  'APIs and Microservices',
+  'APIs and Microservices Certification',
-  'Quality Assurance',
+  'Quality Assurance Certification',
-  'Scientific Computing with Python',
+  'Scientific Computing with Python Certification',
-  'Data Analysis with Python',
+  'Data Analysis with Python Certification',
-  'Information Security',
+  'Information Security Certification',
-  'Machine Learning with Python',
+  'Machine Learning with Python Certification',
-  'Coding Interview Prep'
+  'Coding Interview Prep (Thousands of hours of challenges)'
 ];
 
-describe('Learn Landing page', function() {
+describe('Learn Landing page (not logged in)', () => {
-  it('renders', () => {
+  it('Should render', () => {
     cy.visit(locations.index);
 
     cy.title().should('eq', 'Learn to code at home | freeCodeCamp.org');
@@ -35,7 +35,7 @@ describe('Learn Landing page', function() {
     cy.contains('h1', "Welcome to freeCodeCamp's curriculum.");
   });
 
-  it('renders a curriuculum map', () => {
+  it('Should render a curriculum map', () => {
     cy.document().then(document => {
       const superBlocks = document.querySelectorAll(
         `${selectors.challengeMap} > ul > li`
@@ -48,3 +48,76 @@ describe('Learn Landing page', function() {
     });
   });
 });
+
+describe('Quotes', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.contains("Get started (it's free)").click({ force: true });
+  });
+
+  it('Should show a quote', () => {
+    cy.get('blockquote').within(() => {
+      cy.get('q').should('be.visible');
+    });
+  });
+
+  it('Should show quote author', () => {
+    cy.get('blockquote').within(() => {
+      cy.get('cite').should('be.visible');
+    });
+  });
+});
+
+describe('Superblocks and Blocks', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.contains("Get started (it's free)").click({ force: true });
+  });
+
+  it('Has first superblock and block collapsed by default', () => {
+    cy.contains(superBlockNames[0])
+      .should('be.visible')
+      .and('have.attr', 'aria-expanded', 'true');
+
+    cy.contains('Basic HTML and HTML5')
+      .should('be.visible')
+      .and('have.attr', 'aria-expanded', 'true');
+  });
+
+  it('Has all supeblocks visible but folded (excluding the first one)', () => {
+    cy.wrap(superBlockNames.slice(1)).each(name => {
+      cy.contains(name)
+        .should('be.visible')
+        .and('have.attr', 'aria-expanded', 'false');
+    });
+  });
+  it('Superblocks should be collapsable and foldable', () => {
+    cy.contains(superBlockNames[0])
+      .click({
+        force: true
+      })
+      .should('have.attr', 'aria-expanded', 'false');
+    cy.contains('Basic HTML and HTML5').should('not.be.visible');
+
+    cy.contains(superBlockNames[0])
+      .click({
+        force: true
+      })
+      .should('have.attr', 'aria-expanded', 'true');
+    cy.contains('Basic HTML and HTML5').should('be.visible');
+  });
+
+  it('Blocks should be collapsable and foldable', () => {
+    cy.contains('Basic HTML and HTML5')
+      .click({ force: true })
+      .should('have.attr', 'aria-expanded', 'false');
+    cy.contains('Introduction to Basic HTML and HTML5').should(
+      'not.be.visible'
+    );
+
+    cy.contains('Basic HTML and HTML5')
+      .click({ force: true })
+      .should('have.attr', 'aria-expanded', 'true');
+    cy.contains('Introduction to Basic HTML and HTML5').should('be.visible');
+  });
+});