Feat: Convert landing page test to Typescript (#49022)

* Feat: Convert landing page test to Typescript

* Chore: Remove Eslint issue with template.

* Fix: Remove dumb typo.

* Set the types for the parameters and set unique name to please TypeScript

Co-authored-by: Sboonny <muhammed@freecodecamp.org>

cypress/e2e/default/landing.ts

@@ -1,10 +1,14 @@
-const selectors = {
+const landingPageElements = {
   heading: "[data-test-label='landing-header']",
   callToAction: "[data-test-label='landing-big-cta']",
   certifications: "[data-test-label='certifications']",
   testimonials: "[data-test-label='testimonial-cards']",
   landingPageImage: '.landing-page-image'
-};
+} as const;
+
+type LandingPageTypes<T> = T[keyof T];
+
+type LandingPageLogs = LandingPageTypes<typeof landingPageElements>;
 
 const certifications = [
   '(New) Responsive Web Design',
@@ -27,12 +31,12 @@ describe('Landing page', () => {
       'eq',
       'Learn to Code — For Free — Coding Courses for Busy People'
     );
-    cy.contains(selectors.callToAction, "Get started (it's free)");
-    cy.get(selectors.callToAction).should('have.length', 2);
+    cy.contains(landingPageElements.callToAction, "Get started (it's free)");
+    cy.get(landingPageElements.callToAction).should('have.length', 2);
   });
 
   it('Has visible header and sub-header', () => {
-    cy.contains(selectors.heading, 'Learn to code — for free.');
+    cy.contains(landingPageElements.heading, 'Learn to code — for free.');
     cy.contains('Build projects.').should('be.visible');
     cy.contains('Earn certifications.').should('be.visible');
 
@@ -52,19 +56,29 @@ describe('Landing page', () => {
   });
 
   it('Has a visible large image on large viewports', function () {
-    cy.viewport(1200, 660).get(selectors.landingPageImage).should('be.visible');
+    cy.viewport(1200, 660)
+      .get(landingPageElements.landingPageImage)
+      .should('be.visible');
 
-    cy.viewport(1199, 660).get(selectors.landingPageImage).should('not.exist');
+    cy.viewport(1199, 660)
+      .get(landingPageElements.landingPageImage)
+      .should('not.exist');
   });
 
   it('Has links to all the certifications', function () {
-    cy.get(selectors.certifications).children().its('length').should('eq', 11);
-    cy.wrap(certifications).each(cert => {
-      cy.get(selectors.certifications).contains(cert);
+    cy.get(landingPageElements.certifications)
+      .children()
+      .its('length')
+      .should('eq', 11);
+    cy.wrap(certifications).each((cert: LandingPageLogs) => {
+      cy.get(landingPageElements.certifications).contains(cert);
     });
   });
 
   it('Has 3 testimonial cards', function () {
-    cy.get(selectors.testimonials).children().its('length').should('eq', 3);
+    cy.get(landingPageElements.testimonials)
+      .children()
+      .its('length')
+      .should('eq', 3);
   });
 });

cypress/e2e/default/learn/index.ts

@@ -1,10 +1,10 @@
-const selectors = {
+const challengerSelector = {
   challengeMap: "[data-test-label='learn-curriculum-map']"
-};
+} as const;
 
-const locations = {
+const learnUrl = {
   index: '/learn'
-};
+} as const;
 
 const superBlockNames = [
   '(New) Responsive Web Design Certification',
@@ -24,7 +24,7 @@ const superBlockNames = [
 
 describe('Learn Landing page (not logged in)', () => {
   it('Should render', () => {
-    cy.visit(locations.index);
+    cy.visit(learnUrl.index);
 
     cy.title().should(
       'eq',
@@ -33,15 +33,15 @@ describe('Learn Landing page (not logged in)', () => {
   });
 
   it('Has the correct heading for an unauthenticated User', () => {
-    cy.visit(locations.index);
+    cy.visit(learnUrl.index);
 
     cy.contains('h1', "Welcome to freeCodeCamp's curriculum.");
   });
 
   it('Should render a curriculum map', () => {
     cy.document().then(document => {
-      const superBlocks = document.querySelectorAll(
-        `${selectors.challengeMap} > li > a`
+      const superBlocks = document.querySelectorAll<HTMLAnchorElement>(
+        `${challengerSelector.challengeMap} > li > a`
       );
       expect(superBlocks).to.have.length(13);
 
@@ -76,7 +76,7 @@ describe('Superblocks and Blocks', () => {
   });
 
   it('Has all superblocks visible', () => {
-    cy.wrap(superBlockNames.slice(1)).each(name => {
+    cy.wrap(superBlockNames.slice(1)).each((name: string) => {
       cy.contains(name).should('be.visible');
     });
   });