test(e2e): consolidate /learn tests (#55415)

e2e/intro.spec.ts

@@ -1,78 +0,0 @@
-import { test, expect } from '@playwright/test';
-import translations from '../client/i18n/locales/english/translations.json';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('/learn');
-});
-
-const IntroObject = {
-  randomQuote: 'random-quote',
-  randomAuthor: 'random-author',
-  youtubeChannelPlaceholder: "<0>freeCodeCamp's YouTube channel</0>",
-  youtubeText: "freeCodeCamp's YouTube channel",
-  forumPlaceholder: '<0>the freeCodeCamp forum</0>',
-  forumText: 'the freeCodeCamp forum',
-  userNamePlaceholder: '{{name}}',
-  userName: 'Full Stack User'
-};
-
-const IntroDescription = [
-  translations.learn['read-this'].p1,
-  translations.learn['read-this'].p2,
-  translations.learn['read-this'].p3,
-  translations.learn['read-this'].p4,
-  translations.learn['read-this'].p5,
-  translations.learn['read-this'].p6,
-  translations.learn['read-this'].p7,
-  translations.learn['read-this'].p8,
-  translations.learn['read-this'].p9.replace(
-    IntroObject.youtubeChannelPlaceholder,
-    IntroObject.youtubeText
-  ),
-  translations.learn['read-this'].p10,
-  translations.learn['read-this'].p11.replace(
-    IntroObject.forumPlaceholder,
-    IntroObject.forumText
-  ),
-  translations.learn['read-this'].p12
-];
-
-test.describe('Intro Component E2E Test Suite with Signed In User', () => {
-  test.use({ storageState: 'playwright/.auth/certified-user.json' });
-  test('Verifies the Correct Intro component heading', async ({ page }) => {
-    await expect(
-      page.getByText(
-        translations.learn['welcome-1'].replace(
-          IntroObject.userNamePlaceholder,
-          IntroObject.userName
-        )
-      )
-    ).toBeVisible();
-  });
-
-  test('Verifies the Random Quote Section', ({ page }) => {
-    const quote = page.getByTestId(IntroObject.randomQuote);
-    const author = page.getByTestId(IntroObject.randomAuthor);
-    expect(quote).not.toBeNull();
-    expect(author).not.toBeNull();
-  });
-});
-
-test.describe('Intro Component E2E Test Suite with Signed Out User', () => {
-  test('Verifies the Correct Intro component heading', async ({ page }) => {
-    await expect(page.getByText(translations.learn.heading)).toBeVisible();
-  });
-
-  test('Verifies Intro Description Section', async ({ page }) => {
-    await expect(
-      page.getByText(translations.learn['read-this'].heading)
-    ).toBeVisible();
-    for (let i = 0; i < IntroDescription.length; i++) {
-      await expect(page.getByText(IntroDescription[i])).toBeVisible();
-    }
-  });
-
-  test('Verifies Login CTA', async ({ page }) => {
-    await page.getByText(translations.buttons['logged-out-cta-btn']).click();
-  });
-});

e2e/learn.spec.ts

@@ -1,5 +1,4 @@
 import { test, expect } from '@playwright/test';
-import translations from '../client/i18n/locales/english/translations.json';
 import words from '../client/i18n/locales/english/motivation.json';
 
 const superBlocks = [
@@ -26,47 +25,71 @@ const superBlocks = [
   'Legacy Python for Everybody'
 ];
 
-test('the page should render correctly', async ({ page }) => {
+test.describe('Learn - Unauthenticated user', () => {
-  await page.goto('/learn');
+  test.use({ storageState: { cookies: [], origins: [] } });
-  await expect(page).toHaveTitle(
-    'Learn to Code — For Free — Coding Courses for Busy People'
-  );
 
-  const header = page.getByTestId('learn-heading');
+  test('the page should render correctly', async ({ page }) => {
-  await expect(header).toBeVisible();
+    await page.goto('/learn');
-  await expect(header).toContainText(translations.learn.heading);
 
-  // Advice for new learners
+    await expect(page).toHaveTitle(
-  const learnReadThisSection = page.getByTestId('learn-read-this-section');
+      'Learn to Code — For Free — Coding Courses for Busy People'
-  await expect(learnReadThisSection).toBeVisible();
+    );
 
-  const learnReadThisSectionHeading = page.getByTestId(
+    await expect(
-    'learn-read-this-heading'
+      page.getByRole('heading', {
-  );
+        level: 1,
-  await expect(learnReadThisSectionHeading).toBeVisible();
+        name: "Welcome to freeCodeCamp's curriculum."
+      })
+    ).toBeVisible();
 
-  const learnReadThisSectionParagraphs = page.getByTestId('learn-read-this-p');
+    // Advice for new learners
-  await expect(learnReadThisSectionParagraphs).toHaveCount(10);
+    const learnReadThisSection = page.getByTestId('learn-read-this-section');
+    await expect(learnReadThisSection).toBeVisible();
 
-  for (const paragraph of await learnReadThisSectionParagraphs.all()) {
+    const learnReadThisSectionHeading = page.getByTestId(
-    await expect(paragraph).toBeVisible();
+      'learn-read-this-heading'
-  }
+    );
-  // certifications
+    await expect(learnReadThisSectionHeading).toBeVisible();
-  const curriculumBtns = page.getByTestId('curriculum-map-button');
+
-  await expect(curriculumBtns).toHaveCount(superBlocks.length);
+    const learnReadThisSectionParagraphs =
-  for (let i = 0; i < superBlocks.length; i++) {
+      page.getByTestId('learn-read-this-p');
-    const btn = curriculumBtns.nth(i);
+    await expect(learnReadThisSectionParagraphs).toHaveCount(10);
-    await expect(btn).toContainText(superBlocks[i]);
+
-  }
+    for (const paragraph of await learnReadThisSectionParagraphs.all()) {
+      await expect(paragraph).toBeVisible();
+    }
+
+    // certifications
+    const curriculumBtns = page.getByTestId('curriculum-map-button');
+    await expect(curriculumBtns).toHaveCount(superBlocks.length);
+    for (let i = 0; i < superBlocks.length; i++) {
+      const btn = curriculumBtns.nth(i);
+      await expect(btn).toContainText(superBlocks[i]);
+    }
+
+    await expect(
+      page.getByRole('link', { name: 'Sign in to save your progress' })
+    ).toBeVisible();
+  });
 });
 
-test.describe('Learn (authenticated user)', () => {
+test.describe('Learn - Authenticated user)', () => {
   test.use({ storageState: 'playwright/.auth/certified-user.json' });
 
-  test('the page shows a random quote for an authenticated user', async ({
+  test('the page should render correctly', async ({ page }) => {
-    page
-  }) => {
     await page.goto('/learn');
+
+    await expect(page).toHaveTitle(
+      'Learn to Code — For Free — Coding Courses for Busy People'
+    );
+
+    await expect(
+      page.getByRole('heading', {
+        level: 1,
+        name: 'Welcome back, Full Stack User.'
+      })
+    ).toBeVisible();
+
     const shownQuote = await page.getByTestId('random-quote').textContent();
 
     const shownAuthorText = await page
@@ -80,5 +103,13 @@ test.describe('Learn (authenticated user)', () => {
 
     expect(allMotivationalQuotes).toContain(shownQuote);
     expect(allAuthors).toContain(shownAuthor);
+
+    // certifications
+    const curriculumBtns = page.getByTestId('curriculum-map-button');
+    await expect(curriculumBtns).toHaveCount(superBlocks.length);
+    for (let i = 0; i < superBlocks.length; i++) {
+      const btn = curriculumBtns.nth(i);
+      await expect(btn).toContainText(superBlocks[i]);
+    }
   });
 });