From 30d9b7b962e827e48a19114e27899ce84990680e Mon Sep 17 00:00:00 2001
From: HARSH ANAND <94885893+anand-harsh@users.noreply.github.com>
Date: Thu, 19 Oct 2023 03:12:37 +0530
Subject: [PATCH] refactor(e2e): simplify playwright test: landing.spec.ts
 (#51977)

Co-authored-by: Ubuntu <ubuntu@ip-172-31-22-225.us-east-2.compute.internal>
---
 e2e/landing.spec.ts | 68 ++++++++++++++++++++++++---------------------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/e2e/landing.spec.ts b/e2e/landing.spec.ts
index 3abf8ebaeae..cb1b8cc8428 100644
--- a/e2e/landing.spec.ts
+++ b/e2e/landing.spec.ts
@@ -1,4 +1,6 @@
 import { test, expect, type Page } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+import intro from '../client/i18n/locales/english/intro.json';
 
 const landingPageElements = {
   heading: 'landing-header',
@@ -10,26 +12,26 @@ const landingPageElements = {
   faq: 'landing-page-faq'
 } as const;
 
-let page: Page;
-
 const superBlocks = [
-  'Responsive Web Design',
-  'JavaScript Algorithms and Data Structures',
-  'Front End Development Libraries',
-  'Data Visualization',
-  'Relational Database',
-  'Back End Development and APIs',
-  'Quality Assurance',
-  'Scientific Computing with Python',
-  'Data Analysis with Python',
-  'Information Security',
-  'Machine Learning with Python',
-  'College Algebra with Python',
-  'Foundational C# with Microsoft',
-  'Coding Interview Prep',
-  'Project Euler'
+  translations.certification.title['Responsive Web Design'],
+  translations.certification.title['JavaScript Algorithms and Data Structures'],
+  translations.certification.title['Front End Development Libraries'],
+  translations.certification.title['Data Visualization'],
+  translations.certification.title['Relational Database'],
+  translations.certification.title['Back End Development and APIs'],
+  translations.certification.title['Quality Assurance'],
+  translations.certification.title['Scientific Computing with Python'],
+  translations.certification.title['Data Analysis with Python'],
+  translations.certification.title['Information Security'],
+  translations.certification.title['Machine Learning with Python'],
+  translations.certification.title['College Algebra with Python'],
+  translations.certification.title['Foundational C# with Microsoft'],
+  intro['coding-interview-prep'].title,
+  intro['project-euler'].title
 ];
 
+let page: Page;
+
 test.beforeAll(async ({ browser }) => {
   page = await browser.newPage();
   await page.goto('/');
@@ -37,18 +39,22 @@ test.beforeAll(async ({ browser }) => {
 
 test('The component Landing-top renders correctly', async () => {
   const landingHeading1 = page.getByTestId('landing-big-heading-1');
-  await expect(landingHeading1).toHaveText('Learn to code — for free.');
+  await expect(landingHeading1).toHaveText(
+    translations.landing['big-heading-1']
+  );
 
   const landingHeading2 = page.getByTestId('landing-big-heading-2');
-  await expect(landingHeading2).toHaveText('Build projects.');
+  await expect(landingHeading2).toHaveText(
+    translations.landing['big-heading-2']
+  );
 
   const landingHeading3 = page.getByTestId('landing-big-heading-3');
-  await expect(landingHeading3).toHaveText('Earn certifications.');
+  await expect(landingHeading3).toHaveText(
+    translations.landing['big-heading-3']
+  );
 
   const landingH2Heading = page.getByTestId('landing-h2-heading');
-  await expect(landingH2Heading).toHaveText(
-    'Since 2014, more than 40,000 freeCodeCamp.org graduates have gotten jobs at tech companies including:'
-  );
+  await expect(landingH2Heading).toHaveText(translations.landing['h2-heading']);
 });
 
 test('Has 5 brand logos', async () => {
@@ -63,7 +69,6 @@ test('The campers landing page figure is visible on desktop and hidden on mobile
   isMobile
 }) => {
   const landingPageImage = page.getByTestId('landing-page-figure');
-
   if (isMobile) {
     await expect(landingPageImage).toBeHidden();
   } else {
@@ -73,8 +78,9 @@ test('The campers landing page figure is visible on desktop and hidden on mobile
 
 test('The as seen in container is visible with featured logos', async () => {
   const asSeenInContainer = page.getByTestId('landing-as-seen-in-text');
-  await expect(asSeenInContainer).toHaveText('As seen in:');
-
+  await expect(asSeenInContainer).toHaveText(
+    translations.landing['as-seen-in']
+  );
   const featuredLogos = page.getByTestId('landing-as-seen-in-container-logos');
   await expect(featuredLogos).toBeVisible();
 });
@@ -82,15 +88,13 @@ test('The as seen in container is visible with featured logos', async () => {
 test('Testimonial section has a header', async () => {
   const testimonialsHeader = page.getByTestId('testimonials-section-header');
   await expect(testimonialsHeader).toHaveText(
-    'Here is what our alumni say about freeCodeCamp:'
+    translations.landing.testimonials['heading']
   );
 });
 
 test('Testimonial endorser people have images, occupation, location and testimony visible', async () => {
   const cards = page.getByTestId('testimonial-card');
-
   await expect(cards).toHaveCount(3);
-
   for (const card of await cards.all()) {
     await expect(card).toBeVisible();
     await expect(
@@ -111,9 +115,9 @@ test('Testimonial endorser people have images, occupation, location and testimon
 test('Has links to all superblocks', async () => {
   const curriculumBtns = page.getByTestId(landingPageElements.curriculumBtns);
   await expect(curriculumBtns).toHaveCount(15);
-  for (let i = 0; i < superBlocks.length; i++) {
-    const btn = curriculumBtns.nth(i);
-    await expect(btn).toContainText(superBlocks[i]);
+  for (let index = 0; index < superBlocks.length; index++) {
+    const btn = curriculumBtns.nth(index);
+    await expect(btn).toContainText(superBlocks[index]);
   }
 });