feat(e2e, playwright): adding data labels for learn page html (#51552)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/components/Intro/components/intro-description.tsx

@@ -10,32 +10,45 @@ function IntroDescription(): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <div className='intro-description'>
+    <div
+      className='intro-description'
+      data-playwright-test-label='learn-read-this-section'
+    >
       <Spacer size='medium' />
-      <p className='text-center'>
+      <p
+        className='text-center'
+        data-playwright-test-label='learn-read-this-heading'
+      >
         <strong>{t('learn.read-this.heading')}</strong>
       </p>
       <Spacer size='medium' />
-      <p>{t('learn.read-this.p1')}</p>
-      <p>{t('learn.read-this.p2')}</p>
-      <p>{t('learn.read-this.p3')}</p>
-      <p>{t('learn.read-this.p4')}</p>
-      <p>{t('learn.read-this.p5')}</p>
-      <p>{t('learn.read-this.p6')}</p>
-      <p>{t('learn.read-this.p7')}</p>
-      <p>{t('learn.read-this.p8')}</p>
+      {[...Array(8).keys()].map(i => (
+        <p key={i} data-playwright-test-label='learn-read-this-p'>
+          {t(`learn.read-this.p${i + 1}`)}
+        </p>
+      ))}
       <p>
-        <Trans i18nKey='learn.read-this.p9'>
+        <Trans
+          i18nKey='learn.read-this.p9'
+          data-playwright-test-label='learn-read-this-p'
+        >
           <Link className='inline' to='https://youtube.com/freecodecamp' />
         </Trans>
       </p>
-      <p>{t('learn.read-this.p10')}</p>
+      <p data-playwright-test-label='learn-read-this-p'>
+        {t('learn.read-this.p10')}
+      </p>
       <p>
-        <Trans i18nKey='learn.read-this.p11'>
+        <Trans
+          i18nKey='learn.read-this.p11'
+          data-playwright-test-label='learn-read-this-p'
+        >
           <Link className='inline' to={forumLocation} />
         </Trans>
       </p>
-      <p>{t('learn.read-this.p12')}</p>
+      <p data-playwright-test-label='learn-read-this-p'>
+        {t('learn.read-this.p12')}
+      </p>
       <strong>{t('misc.quincy')}</strong>
     </div>
   );

client/src/components/Intro/index.tsx

@@ -82,7 +82,11 @@ const Intro = ({
     return (
       <>
         <Spacer size='medium' />
-        <h1 id='content-start' className='text-center'>
+        <h1
+          id='content-start'
+          className='text-center'
+          data-playwright-test-label='learn-heading'
+        >
           {t('learn.heading')}
         </h1>
         <Spacer size='medium' />

client/src/pages/__snapshots__/email-sign-up.test.js.snap

@@ -23,6 +23,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
       />
       <div
         className="intro-description"
+        data-playwright-test-label="learn-read-this-section"
       >
         <div
           className="spacer"
@@ -34,6 +35,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
         />
         <p
           className="text-center"
+          data-playwright-test-label="learn-read-this-heading"
         >
           <strong>
             learn.read-this.heading
@@ -47,28 +49,44 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
             }
           }
         />
-        <p>
+        <p
+          data-playwright-test-label="learn-read-this-p"
+        >
           learn.read-this.p1
         </p>
-        <p>
+        <p
+          data-playwright-test-label="learn-read-this-p"
+        >
           learn.read-this.p2
         </p>
-        <p>
+        <p
+          data-playwright-test-label="learn-read-this-p"
+        >
           learn.read-this.p3
         </p>
-        <p>
+        <p
+          data-playwright-test-label="learn-read-this-p"
+        >
           learn.read-this.p4
         </p>
-        <p>
+        <p
+          data-playwright-test-label="learn-read-this-p"
+        >
           learn.read-this.p5
         </p>
-        <p>
+        <p
+          data-playwright-test-label="learn-read-this-p"
+        >
           learn.read-this.p6
         </p>
-        <p>
+        <p
+          data-playwright-test-label="learn-read-this-p"
+        >
           learn.read-this.p7
         </p>
-        <p>
+        <p
+          data-playwright-test-label="learn-read-this-p"
+        >
           learn.read-this.p8
         </p>
         <p>
@@ -79,7 +97,9 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
             target="_blank"
           />
         </p>
-        <p>
+        <p
+          data-playwright-test-label="learn-read-this-p"
+        >
           learn.read-this.p10
         </p>
         <p>
@@ -90,7 +110,9 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
             target="_blank"
           />
         </p>
-        <p>
+        <p
+          data-playwright-test-label="learn-read-this-p"
+        >
           learn.read-this.p12
         </p>
         <strong>

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]);
+  }
 });