diff --git a/client/src/templates/Introduction/super-block-intro.tsx b/client/src/templates/Introduction/super-block-intro.tsx index 5a49e3ee23a..3c5ad91b075 100644 --- a/client/src/templates/Introduction/super-block-intro.tsx +++ b/client/src/templates/Introduction/super-block-intro.tsx @@ -174,7 +174,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProps) => { const superBlockWithAccordionView = [SuperBlocks.FullStackDeveloper]; - const getChosenBlock = (): string => { + const getInitiallyExpandedBlock = (): string => { // if coming from breadcrumb click if ( location.state && @@ -207,7 +207,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProps) => { if (!isEmpty(completedChallenges)) { const lastCompletedChallengeId = last(completedChallenges)?.id; - const lastCompletedChallenge = allChallenges.find( + const lastCompletedChallenge = superBlockChallenges.find( ({ id }) => id === lastCompletedChallengeId ); @@ -222,10 +222,10 @@ const SuperBlockIntroductionPage = (props: SuperBlockProps) => { const { resetExpansion, toggleBlock } = props; resetExpansion(); - return toggleBlock(getChosenBlock()); + return toggleBlock(getInitiallyExpandedBlock()); }; - const chosenBlock = getChosenBlock(); + const initialExpandedBlock = getInitiallyExpandedBlock(); const onCertificationDonationAlertClick = () => { callGA({ @@ -262,7 +262,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProps) => { c.id)} /> ) : ( diff --git a/e2e/intro-page-rwd.spec.ts b/e2e/intro-page-rwd.spec.ts index 42994483b0c..d3b617aba72 100644 --- a/e2e/intro-page-rwd.spec.ts +++ b/e2e/intro-page-rwd.spec.ts @@ -2,46 +2,35 @@ import { test, expect } from '@playwright/test'; test.describe('Certification intro page', () => { test('Should render and toggle correctly', async ({ page }) => { - const title = page.getByRole('button', { + const firstBlockToggle = page.getByRole('button', { name: 'Learn HTML by Building a Cat Photo App' }); + const firstBlockText = page.getByText( + 'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.' + ); + + const secondBlockText = page.getByText( + 'CSS tells the browser how to display your webpage. You can use CSS to set the color, font, size, and other aspects of HTML elements.' + ); + + const superBlockText = page.getByText( + "this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages" + ); + await page.goto('/learn/2022/responsive-web-design'); await expect(page).toHaveTitle( 'Responsive Web Design Certification | freeCodeCamp.org' ); + await expect(superBlockText).toBeVisible(); + await expect(firstBlockText).toBeVisible(); + await expect(secondBlockText).not.toBeVisible(); - await expect( - page.getByText( - "this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages" - ) - ).toBeVisible(); + await firstBlockToggle.click(); + await expect(firstBlockText).not.toBeVisible(); - await expect( - page.getByText( - 'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.' - ) - ).toBeVisible(); - - await expect( - page.getByText( - 'CSS tells the browser how to display your webpage. You can use CSS to set the color, font, size, and other aspects of HTML elements.' - ) - ).not.toBeVisible(); - - await title.click(); - await expect( - page.getByText( - 'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.' - ) - ).not.toBeVisible(); - - await title.click(); - await expect( - page.getByText( - 'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.' - ) - ).toBeVisible(); + await firstBlockToggle.click(); + await expect(firstBlockText).toBeVisible(); }); }); diff --git a/e2e/landing.spec.ts b/e2e/landing.spec.ts index 51ac80d2e3b..fb144d4afbf 100644 --- a/e2e/landing.spec.ts +++ b/e2e/landing.spec.ts @@ -16,6 +16,7 @@ const landingPageElements = { } as const; const superBlocks = [ + intro[SuperBlocks.FullStackDeveloper].title, intro[SuperBlocks.RespWebDesignNew].title, intro[SuperBlocks.JsAlgoDataStructNew].title, intro[SuperBlocks.FrontEndDevLibs].title, @@ -28,7 +29,6 @@ const superBlocks = [ intro[SuperBlocks.InfoSec].title, intro[SuperBlocks.MachineLearningPy].title, intro[SuperBlocks.CollegeAlgebraPy].title, - intro[SuperBlocks.FullStackDeveloper].title, intro[SuperBlocks.A2English].title, intro[SuperBlocks.B1English].title, intro[SuperBlocks.FoundationalCSharp].title, @@ -201,12 +201,13 @@ test.describe('Landing Page', () => { } }); - test('Has links to all curriculum', async ({ page }) => { + test('Links to all superblocks in order', async ({ page }) => { const curriculumBtns = page.getByTestId(landingPageElements.curriculumBtns); await expect(curriculumBtns).toHaveCount(superBlocks.length); for (let index = 0; index < superBlocks.length; index++) { const btn = curriculumBtns.nth(index); - await expect(btn).toContainText(superBlocks[index]); + const link = btn.getByRole('link', { name: superBlocks[index] }); + await expect(link).toBeVisible(); } });