refactor(e2e): simplify playwright test: landing.spec.ts (#51977)

Co-authored-by: Ubuntu <ubuntu@ip-172-31-22-225.us-east-2.compute.internal>
This commit is contained in:
HARSH ANAND
2023-10-19 03:12:37 +05:30
committed by GitHub
parent c1a09c2154
commit 30d9b7b962
+36 -32
View File
@@ -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]);
}
});