Test(Cypress): Add tests for the landing page and the navbar (#39459)

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

cypress/integration/landing.js

@@ -7,16 +7,40 @@ const selectors = {
   landingPageImage: '.landing-page-image'
 };
 
-describe('Landing page', function() {
-  it('renders', function() {
+describe('Landing page', () => {
+  it('Should render', () => {
     cy.visit('/');
     cy.title().should('eq', 'Learn to code at home | freeCodeCamp.org');
-    cy.contains(selectors.heading, 'Learn to code at home.');
     cy.contains(selectors.callToAction, "Get started (it's free)");
     cy.get(selectors.callToAction).should('have.length', 2);
   });
 
-  it('has a visible large image on large viewports', function() {
+  it('Has visible header and sub-header', () => {
+    cy.contains(selectors.heading, 'Learn to code at home.');
+    cy.contains('Build projects.').should('be.visible');
+    cy.contains('Earn certifications.').should('be.visible');
+
+    cy.contains(
+      'Since 2014, more than 40,000 freeCodeCamp.org ' +
+        'graduates have gotten jobs at tech companies including:'
+    ).should('be.visible');
+  });
+
+  it('Has 5 brand logos', () => {
+    cy.get('.logo-row')
+      .children()
+      .its('length')
+      .should('eq', 5);
+  });
+
+  it('Has `as seens as` section', () => {
+    cy.contains('Build projects.').should('be.visible');
+    cy.get('.big-heading')
+      .siblings()
+      .get('svg');
+  });
+
+  it('Has a visible large image on large viewports', function() {
     cy.viewport(1200, 660)
       .get(selectors.landingPageImage)
       .should('be.visible');
@@ -26,13 +50,14 @@ describe('Landing page', function() {
       .should('not.be.visible');
   });
 
-  it('has 10 certifications', function() {
+  it('Has 10 certifications', function() {
     cy.get(selectors.certifications)
       .children()
       .its('length')
       .should('eq', 10);
   });
-  it('has 3 testimonial cards', function() {
+
+  it('Has 3 testimonial cards', function() {
     cy.get(selectors.testimonials)
       .children()
       .its('length')

cypress/integration/learn/common-components/navbar.js

@@ -0,0 +1,64 @@
+/* global cy */
+
+describe('Navbar', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('Should render properly', () => {
+    cy.get('#universal-nav').should('be.visible');
+    cy.get('#universal-nav').should('have.class', 'universal-nav nav-padding');
+  });
+
+  it('Should take user to news page when clicked on `/news`', () => {
+    cy.get('.nav-news').within(() => {
+      cy.contains('/news').click();
+    });
+    cy.url().should('include', '/news');
+  });
+
+  it('Should take user to forum page when clicked on `/forum`', () => {
+    cy.get('.nav-forum').within(() => {
+      // Can't click on it in test due to CORS policy
+      // So check the link instead
+      cy.contains('/forum').should(
+        'have.attr',
+        'href',
+        'https://forum.freecodecamp.org'
+      );
+    });
+  });
+
+  it('Should take user to learn page when clicked on `/learn`', () => {
+    cy.get('.nav-projects').within(() => {
+      cy.contains('/learn').click();
+    });
+    cy.url().should('include', '/learn');
+  });
+
+  it(
+    'Should take user to learn page when clicked on ' + 'the freeCodeCamp logo',
+    () => {
+      cy.get('.universal-nav-middle').within(() => {
+        cy.get('svg').click();
+      });
+      cy.url().should('include', '/learn');
+    }
+  );
+
+  it('Should be able to search on navbar search field', () => {
+    cy.get('.ais-SearchBox').within(() => {
+      cy.get('input').type('Learn');
+    });
+
+    cy.get('.ais-Hits-list')
+      .children()
+      .should('have.length', 1);
+
+    cy.get('.ais-SearchBox').within(() => {
+      cy.get('input').clear();
+    });
+
+    cy.get('div.ais-Hits').should('not.be.visible');
+  });
+});

sample.env

@@ -55,8 +55,8 @@ SHOW_UPCOMING_CHANGES=false
 # Application paths
 HOME_LOCATION='http://localhost:8000'
 API_LOCATION='http://localhost:3000'
-FORUM_LOCATION='https://localhost/forum'
-NEWS_LOCATION='https://localhost/news'
+FORUM_LOCATION='https://forum.freecodecamp.org'
+NEWS_LOCATION='https://www.freecodecamp.org/news'
 
 # ---------------------
 # Debugging Mode Keys