From 14a64daefd48710bdd9877704aef919c1d60fe16 Mon Sep 17 00:00:00 2001 From: Ahmad <57593864+Ahmadkashif@users.noreply.github.com> Date: Tue, 12 Sep 2023 12:46:38 +0500 Subject: [PATCH] refactor(e2e,playwright): input labels to test perf and improve coverage for landing page (#51501) Co-authored-by: Oliver Eyton-Williams --- .../images/components/as-seen-in-text.tsx | 1 + client/src/components/Map/index.tsx | 5 +- .../landing/components/as-seen-in.tsx | 13 ++- .../landing/components/big-call-to-action.tsx | 6 +- .../landing/components/campers-image.tsx | 6 +- .../src/components/landing/components/faq.tsx | 6 +- .../landing/components/landing-top.tsx | 24 ++++- .../landing/components/testimonials.tsx | 53 +++++++---- e2e/landing.spec.ts | 93 +++++++++++++------ e2e/playwright.config.ts | 2 +- 10 files changed, 154 insertions(+), 55 deletions(-) diff --git a/client/src/assets/images/components/as-seen-in-text.tsx b/client/src/assets/images/components/as-seen-in-text.tsx index 31c866ebcef..2e2f453a4a8 100644 --- a/client/src/assets/images/components/as-seen-in-text.tsx +++ b/client/src/assets/images/components/as-seen-in-text.tsx @@ -12,6 +12,7 @@ const AsSeenInText = ( xmlnsXlink='http://www.w3.org/1999/xlink' {...props} fill={fill} + data-playwright-test-label='landing-as-seen-in-container-logos' > )} -
  • +
  • {generateIconComponent(superBlock, 'map-icon')} diff --git a/client/src/components/landing/components/as-seen-in.tsx b/client/src/components/landing/components/as-seen-in.tsx index 1eb6a84eb7e..07abb0966ac 100644 --- a/client/src/components/landing/components/as-seen-in.tsx +++ b/client/src/components/landing/components/as-seen-in.tsx @@ -7,8 +7,17 @@ const AsSeenIn = (): JSX.Element => { const { t } = useTranslation(); return ( - -

    {t('landing.as-seen-in')}

    + +

    + {t('landing.as-seen-in')} +

    ); diff --git a/client/src/components/landing/components/big-call-to-action.tsx b/client/src/components/landing/components/big-call-to-action.tsx index 8d123ec4589..05e7b7f1aa3 100644 --- a/client/src/components/landing/components/big-call-to-action.tsx +++ b/client/src/components/landing/components/big-call-to-action.tsx @@ -6,7 +6,11 @@ const BigCallToAction = (): JSX.Element => { const { t } = useTranslation(); return ( - + {t('buttons.logged-in-cta-btn')} ); diff --git a/client/src/components/landing/components/campers-image.tsx b/client/src/components/landing/components/campers-image.tsx index 6e4c44293af..25808944dd5 100644 --- a/client/src/components/landing/components/campers-image.tsx +++ b/client/src/components/landing/components/campers-image.tsx @@ -27,7 +27,11 @@ function CampersImage({ pageName }: CampersImageProps): JSX.Element { return ( -
    +
    {

    {t('landing.faq')}

    {faqItems.map((faq, i) => ( -
    +

    {faq.question}

    {faq.answer.map((answer, i) => (

    {answer}

    diff --git a/client/src/components/landing/components/landing-top.tsx b/client/src/components/landing/components/landing-top.tsx index cf5a3611b8c..01fb9a41a1e 100644 --- a/client/src/components/landing/components/landing-top.tsx +++ b/client/src/components/landing/components/landing-top.tsx @@ -30,13 +30,29 @@ function LandingTop(): JSX.Element { id='content-start' className='big-heading' data-test-label='landing-header' + data-playwright-test-label='landing-big-heading-1' > {t('landing.big-heading-1')} -

    {t('landing.big-heading-2')}

    -

    {t('landing.big-heading-3')}

    -

    {t('landing.h2-heading')}

    -
    +

    + {t('landing.big-heading-2')} +

    +

    + {t('landing.big-heading-3')} +

    +

    + {t('landing.h2-heading')} +

    +
    diff --git a/client/src/components/landing/components/testimonials.tsx b/client/src/components/landing/components/testimonials.tsx index c0dc90bd1da..ff7be37e062 100644 --- a/client/src/components/landing/components/testimonials.tsx +++ b/client/src/components/landing/components/testimonials.tsx @@ -12,12 +12,21 @@ const Testimonials = (): JSX.Element => { return (
    -

    +

    {t('landing.testimonials.heading')}

    -
    -
    +
    +
    {
    -

    +

    {' '} landing.testimonials.shawn.location

    -

    +

    landing.testimonials.shawn.occupation

    -

    +

    landing.testimonials.shawn.testimony

    -
    -
    +
    +
    {
    -

    +

    {' '} landing.testimonials.sarah.location

    -

    +

    landing.testimonials.sarah.occupation

    -

    +

    landing.testimonials.sarah.testimony

    -
    -
    +
    +
    {
    -

    +

    {' '} landing.testimonials.emma.location

    -

    +

    landing.testimonials.emma.occupation

    -

    +

    landing.testimonials.emma.testimony

    diff --git a/e2e/landing.spec.ts b/e2e/landing.spec.ts index 97d53366e20..42c82bfbf15 100644 --- a/e2e/landing.spec.ts +++ b/e2e/landing.spec.ts @@ -39,35 +39,77 @@ test.afterAll(async () => { await page.close(); }); -test('Should render', async () => { - await expect(page).toHaveTitle( - 'Learn to Code — For Free — Coding Courses for Busy People' - ); - const callToAction = page.getByTestId(landingPageElements.callToAction); - const callToActionHeader = page.locator('a .login-btn-text').nth(1); - await expect(callToActionHeader).toHaveText("Get started (it's free)"); - await expect(callToAction).toHaveCount(4); -}); +test('The component Landing-top renders correctly', async () => { + const landingHeading1 = page.getByTestId('landing-big-heading-1'); + await expect(landingHeading1).toHaveText('Learn to code — for free.'); -test('Has visible header and sub-header', async () => { - const heading = page.getByTestId(landingPageElements.heading); - await expect(heading).toContainText('Learn to code — for free.'); - expect(await page.isVisible('text=Build projects.')).toBeTruthy(); - expect(await page.isVisible('text=Earn certifications.')).toBeTruthy(); - expect( - await page.isVisible( - 'text=Since 2014, more than 40,000 freeCodeCamp.org ' + - 'graduates have gotten jobs at tech companies including:' - ) - ).toBeTruthy(); + const landingHeading2 = page.getByTestId('landing-big-heading-2'); + await expect(landingHeading2).toHaveText('Build projects.'); + + const landingHeading3 = page.getByTestId('landing-big-heading-3'); + await expect(landingHeading3).toHaveText('Earn certifications.'); + + const landingH2Heading = page.getByTestId('landing-h2-heading'); + await expect(landingH2Heading).toHaveText( + 'Since 2014, more than 40,000 freeCodeCamp.org graduates have gotten jobs at tech companies including:' + ); }); test('Has 5 brand logos', async () => { - await expect(page.locator('#featured-logos')).toBeVisible(); + const logos = page.getByTestId('brand-logo-container').locator('svg'); + await expect(logos).toHaveCount(5); + for (const logo of await logos.all()) { + await expect(logo).toBeVisible(); + } }); -test('Has `as seen in` section', async () => { - await expect(page.locator('.as-seen-in')).toBeVisible(); +test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({ + isMobile +}) => { + const landingPageImage = page.getByTestId('landing-page-figure'); + + if (isMobile) { + await expect(landingPageImage).toBeHidden(); + } else { + await expect(landingPageImage).toBeVisible(); + } +}); + +test('The as seen in container is visible with featured logos', async () => { + const asSeenInContainer = page.getByTestId('landing-as-seen-in-text'); + await expect(asSeenInContainer).toHaveText('As seen in:'); + + const featuredLogos = page.getByTestId('landing-as-seen-in-container-logos'); + await expect(featuredLogos).toBeVisible(); +}); + +test('Testimonial section has a header', async () => { + const testimonialsHeader = page.getByTestId('testimonials-section-header'); + await expect(testimonialsHeader).toHaveText( + 'Here is what our alumni say about freeCodeCamp:' + ); +}); + +test('Testimonial endorser people have images, occupation, location and testimony visible', async () => { + const cards = page.getByTestId('testimonial-card'); + + await expect(cards).toHaveCount(3); + + for (const card of await cards.all()) { + await expect(card).toBeVisible(); + await expect( + card.getByTestId('testimonials-endorser-image-container') + ).toBeVisible(); + await expect( + card.getByTestId('testimonials-endorser-location') + ).toBeVisible(); + await expect( + card.getByTestId('testimonials-endorser-occupation') + ).toBeVisible(); + await expect( + card.getByTestId('testimonials-endorser-testimony') + ).toBeVisible(); + } }); test('Has links to all superblocks', async () => { @@ -79,11 +121,6 @@ test('Has links to all superblocks', async () => { } }); -test('Has 3 testimonial cards', async () => { - const testimonials = page.locator(`.${landingPageElements.testimonials}`); - await expect(testimonials).toHaveCount(3); -}); - test('Has FAQ section', async () => { const faqs = page.getByTestId(landingPageElements.faq); await expect(faqs).toHaveCount(9); diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts index 47114822d01..c9d74360bdf 100644 --- a/e2e/playwright.config.ts +++ b/e2e/playwright.config.ts @@ -33,7 +33,7 @@ export default defineConfig({ trace: 'on-first-retry', /* Use custom test attribute */ - testIdAttribute: 'data-test-label' + testIdAttribute: 'data-playwright-test-label' }, /* Configure projects for major browsers */