diff --git a/client/src/components/Intro/components/intro-description.tsx b/client/src/components/Intro/components/intro-description.tsx index 76ca2f6b25e..4396d034eef 100644 --- a/client/src/components/Intro/components/intro-description.tsx +++ b/client/src/components/Intro/components/intro-description.tsx @@ -10,32 +10,45 @@ function IntroDescription(): JSX.Element { const { t } = useTranslation(); return ( -
+
-

+

{t('learn.read-this.heading')}

-

{t('learn.read-this.p1')}

-

{t('learn.read-this.p2')}

-

{t('learn.read-this.p3')}

-

{t('learn.read-this.p4')}

-

{t('learn.read-this.p5')}

-

{t('learn.read-this.p6')}

-

{t('learn.read-this.p7')}

-

{t('learn.read-this.p8')}

+ {[...Array(8).keys()].map(i => ( +

+ {t(`learn.read-this.p${i + 1}`)} +

+ ))}

- +

-

{t('learn.read-this.p10')}

+

+ {t('learn.read-this.p10')} +

- +

-

{t('learn.read-this.p12')}

+

+ {t('learn.read-this.p12')} +

{t('misc.quincy')}
); diff --git a/client/src/components/Intro/index.tsx b/client/src/components/Intro/index.tsx index 72c1000a6f6..d96f6a12cf3 100644 --- a/client/src/components/Intro/index.tsx +++ b/client/src/components/Intro/index.tsx @@ -82,7 +82,11 @@ const Intro = ({ return ( <> -

+

{t('learn.heading')}

diff --git a/client/src/pages/__snapshots__/email-sign-up.test.js.snap b/client/src/pages/__snapshots__/email-sign-up.test.js.snap index 411a2ece4fe..0f3daab3be3 100644 --- a/client/src/pages/__snapshots__/email-sign-up.test.js.snap +++ b/client/src/pages/__snapshots__/email-sign-up.test.js.snap @@ -23,6 +23,7 @@ exports[` Non-Authenticated user "not accepted terms and conditio />
Non-Authenticated user "not accepted terms and conditio />

learn.read-this.heading @@ -47,28 +49,44 @@ exports[` Non-Authenticated user "not accepted terms and conditio } } /> -

+

learn.read-this.p1

-

+

learn.read-this.p2

-

+

learn.read-this.p3

-

+

learn.read-this.p4

-

+

learn.read-this.p5

-

+

learn.read-this.p6

-

+

learn.read-this.p7

-

+

learn.read-this.p8

@@ -79,7 +97,9 @@ exports[` Non-Authenticated user "not accepted terms and conditio target="_blank" />

-

+

learn.read-this.p10

@@ -90,7 +110,9 @@ exports[` Non-Authenticated user "not accepted terms and conditio target="_blank" />

-

+

learn.read-this.p12

diff --git a/e2e/learn.spec.ts b/e2e/learn.spec.ts index e6c2f32bd8a..793b60056e6 100644 --- a/e2e/learn.spec.ts +++ b/e2e/learn.spec.ts @@ -3,9 +3,23 @@ import translations from '../client/i18n/locales/english/translations.json'; let page: Page; -type StaticDataTransalations = { - [key: string]: string; -}; +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' +]; test.beforeAll(async ({ browser }) => { page = await browser.newPage(); @@ -23,22 +37,33 @@ test('the page should render with correct title', async () => { }); test('the page should have the correct header', async () => { - await expect( - page.getByRole('heading', { name: `${translations.learn.heading}` }) - ).toBeVisible(); + const header = page.getByTestId('learn-heading'); + await expect(header).toBeVisible(); + await expect(header).toContainText(translations.learn.heading); }); test('the page should have all static data correctly placed', async () => { - const staticDataIterable: StaticDataTransalations = - translations.learn['read-this']; - let staticDataKey: keyof StaticDataTransalations; - for (staticDataKey in staticDataIterable) { - const urlSafeTranslations = staticDataIterable[staticDataKey].split('<0>'); - await expect(page.getByText(`${urlSafeTranslations[0]}`)).toBeVisible(); + const learnReadThisSection = page.getByTestId('learn-read-this-section'); + await expect(learnReadThisSection).toBeVisible(); + + 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(); } }); test('the page renders all curriculum certifications', async () => { const curriculumBtns = page.getByTestId('curriculum-map-button'); await expect(curriculumBtns).toHaveCount(15); + for (let i = 0; i < superBlocks.length; i++) { + const btn = curriculumBtns.nth(i); + await expect(btn).toContainText(superBlocks[i]); + } });