From 35faca5df6fd5032c18c35f221fc620afd128ac7 Mon Sep 17 00:00:00 2001 From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> Date: Tue, 9 Jul 2024 02:36:47 -0700 Subject: [PATCH] test(e2e): consolidate /learn tests (#55415) --- e2e/intro.spec.ts | 78 -------------------------------------- e2e/learn.spec.ts | 95 +++++++++++++++++++++++++++++++---------------- 2 files changed, 63 insertions(+), 110 deletions(-) delete mode 100644 e2e/intro.spec.ts diff --git a/e2e/intro.spec.ts b/e2e/intro.spec.ts deleted file mode 100644 index 7ce133b567c..00000000000 --- a/e2e/intro.spec.ts +++ /dev/null @@ -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", - youtubeText: "freeCodeCamp's YouTube channel", - forumPlaceholder: '<0>the freeCodeCamp forum', - 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(); - }); -}); diff --git a/e2e/learn.spec.ts b/e2e/learn.spec.ts index c09a5ecebd9..9ce0b901d34 100644 --- a/e2e/learn.spec.ts +++ b/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 }) => { - await page.goto('/learn'); - await expect(page).toHaveTitle( - 'Learn to Code — For Free — Coding Courses for Busy People' - ); +test.describe('Learn - Unauthenticated user', () => { + test.use({ storageState: { cookies: [], origins: [] } }); - const header = page.getByTestId('learn-heading'); - await expect(header).toBeVisible(); - await expect(header).toContainText(translations.learn.heading); + test('the page should render correctly', async ({ page }) => { + await page.goto('/learn'); - // Advice for new learners - const learnReadThisSection = page.getByTestId('learn-read-this-section'); - await expect(learnReadThisSection).toBeVisible(); + await expect(page).toHaveTitle( + 'Learn to Code — For Free — Coding Courses for Busy People' + ); - const learnReadThisSectionHeading = page.getByTestId( - 'learn-read-this-heading' - ); - await expect(learnReadThisSectionHeading).toBeVisible(); + await expect( + page.getByRole('heading', { + level: 1, + name: "Welcome to freeCodeCamp's curriculum." + }) + ).toBeVisible(); - const learnReadThisSectionParagraphs = page.getByTestId('learn-read-this-p'); - await expect(learnReadThisSectionParagraphs).toHaveCount(10); + // Advice for new learners + const learnReadThisSection = page.getByTestId('learn-read-this-section'); + await expect(learnReadThisSection).toBeVisible(); - 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]); - } + const learnReadThisSectionHeading = page.getByTestId( + 'learn-read-this-heading' + ); + await expect(learnReadThisSectionHeading).toBeVisible(); + + const learnReadThisSectionParagraphs = + page.getByTestId('learn-read-this-p'); + await expect(learnReadThisSectionParagraphs).toHaveCount(10); + + 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 ({ - page - }) => { + test('the page should render correctly', async ({ 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]); + } }); });