From e5476a41cb84dd4e001872db8fd58bf866438454 Mon Sep 17 00:00:00 2001 From: munzah-shah Date: Wed, 23 Aug 2023 21:34:52 +0500 Subject: [PATCH 1/8] feat(e2e): adding playwright e2e tests for /learn/coding-interview-prep page --- .../coding-interview-prep/intro-page.spec.ts | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 e2e/default/learn/coding-interview-prep/intro-page.spec.ts diff --git a/e2e/default/learn/coding-interview-prep/intro-page.spec.ts b/e2e/default/learn/coding-interview-prep/intro-page.spec.ts new file mode 100644 index 00000000000000..3a90fea4177118 --- /dev/null +++ b/e2e/default/learn/coding-interview-prep/intro-page.spec.ts @@ -0,0 +1,26 @@ +import { test, expect, type Page } from '@playwright/test'; + +test.describe('Certification intro page', () => { + let page: Page; + + test.beforeAll(async ({ browser }) => { + page = await browser.newPage(); + await page.goto('/learn/coding-interview-prep/'); + }); + + test.afterAll(async () => { + await page.close(); + }); + + test('Should have a relevant page title', async () => { + await expect(page).toHaveTitle('Coding Interview Prep | freeCodeCamp.org'); + }); + + test('Should render', async () => { + await expect( + page.locator( + "text=If you're looking for free coding exercises to prepare for your next job interview, we've got you covered." + ) + ).toBeVisible(); + }); +}); From 82be1dffb2eb71327fba2be0a9074ea94f14ac46 Mon Sep 17 00:00:00 2001 From: munzah-shah Date: Thu, 24 Aug 2023 16:40:58 +0500 Subject: [PATCH 2/8] refactor(e2e): added an extra comment --- e2e/default/learn/coding-interview-prep/intro-page.spec.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/e2e/default/learn/coding-interview-prep/intro-page.spec.ts b/e2e/default/learn/coding-interview-prep/intro-page.spec.ts index 3a90fea4177118..3f218f988662f4 100644 --- a/e2e/default/learn/coding-interview-prep/intro-page.spec.ts +++ b/e2e/default/learn/coding-interview-prep/intro-page.spec.ts @@ -1,4 +1,6 @@ -import { test, expect, type Page } from '@playwright/test'; +import { test, expect, Page } from '@playwright/test'; + +// Testing: Remove this comment later test.describe('Certification intro page', () => { let page: Page; From ed979a7c0f6078fdcd1e515e1b29cca7ffc6d178 Mon Sep 17 00:00:00 2001 From: munzah-shah Date: Thu, 24 Aug 2023 17:11:46 +0500 Subject: [PATCH 3/8] refactor(e2e): restructured the folder to bring test file on e2e root level --- ...ro-page.spec.ts => coding-interview-prep-intro-page.spec.ts} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename e2e/{default/learn/coding-interview-prep/intro-page.spec.ts => coding-interview-prep-intro-page.spec.ts} (92%) diff --git a/e2e/default/learn/coding-interview-prep/intro-page.spec.ts b/e2e/coding-interview-prep-intro-page.spec.ts similarity index 92% rename from e2e/default/learn/coding-interview-prep/intro-page.spec.ts rename to e2e/coding-interview-prep-intro-page.spec.ts index 3f218f988662f4..e4fc491a1be202 100644 --- a/e2e/default/learn/coding-interview-prep/intro-page.spec.ts +++ b/e2e/coding-interview-prep-intro-page.spec.ts @@ -1,4 +1,4 @@ -import { test, expect, Page } from '@playwright/test'; +import { test, expect, type Page } from '@playwright/test'; // Testing: Remove this comment later From f8485827f9875951d026e2d3cb48842748f362ec Mon Sep 17 00:00:00 2001 From: munzah-shah Date: Thu, 24 Aug 2023 18:15:18 +0500 Subject: [PATCH 4/8] refactor(e2e): removed an extra comment --- e2e/coding-interview-prep-intro-page.spec.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/e2e/coding-interview-prep-intro-page.spec.ts b/e2e/coding-interview-prep-intro-page.spec.ts index e4fc491a1be202..3a90fea4177118 100644 --- a/e2e/coding-interview-prep-intro-page.spec.ts +++ b/e2e/coding-interview-prep-intro-page.spec.ts @@ -1,7 +1,5 @@ import { test, expect, type Page } from '@playwright/test'; -// Testing: Remove this comment later - test.describe('Certification intro page', () => { let page: Page; From 620cfa4ed1b463a1825f84004ab7a27ae20abaff Mon Sep 17 00:00:00 2001 From: munzah-shah Date: Wed, 20 Sep 2023 12:37:55 +0500 Subject: [PATCH 5/8] refactor(e2e): added playwright test labels to the elements and improved the tests to test all the elements inside of the coding interview superblock --- client/src/assets/icons/algorithm.tsx | 1 + .../components/super-block-intro.tsx | 20 ++++++--- e2e/coding-interview-prep-intro-page.spec.ts | 45 ++++++++++++++++--- 3 files changed, 54 insertions(+), 12 deletions(-) diff --git a/client/src/assets/icons/algorithm.tsx b/client/src/assets/icons/algorithm.tsx index 7c92581ecb4f89..b89f0e1c2b3497 100644 --- a/client/src/assets/icons/algorithm.tsx +++ b/client/src/assets/icons/algorithm.tsx @@ -6,6 +6,7 @@ function Algorithm( return ( <>

+

{i18nSuperBlock}

{generateIconComponent(superBlock, 'cert-header-icon')} - {superBlockIntroText.map((str, i) => ( -

{str}

- ))} +
+ {superBlockIntroText.map((str, i) => ( +

{str}

+ ))} +
{superBlockNoteText && ( -
+
{superBlockNoteText}
)} diff --git a/e2e/coding-interview-prep-intro-page.spec.ts b/e2e/coding-interview-prep-intro-page.spec.ts index 3a90fea4177118..0f1f98e6673135 100644 --- a/e2e/coding-interview-prep-intro-page.spec.ts +++ b/e2e/coding-interview-prep-intro-page.spec.ts @@ -12,15 +12,46 @@ test.describe('Certification intro page', () => { await page.close(); }); - test('Should have a relevant page title', async () => { + test('Should have a relevant page title ', async () => { await expect(page).toHaveTitle('Coding Interview Prep | freeCodeCamp.org'); }); - test('Should render', async () => { - await expect( - page.locator( - "text=If you're looking for free coding exercises to prepare for your next job interview, we've got you covered." - ) - ).toBeVisible(); + test('Should have course heading and relevant icon image in the superblock', async () => { + const heading = page.getByTestId('superblock-heading'); + await expect(heading).toBeVisible(); + await expect(heading).toContainText('Coding Interview Prep'); + + const icon = page.getByTestId('algorithm-icon'); + expect(icon).toBeDefined(); + }); + + test('Should have relevant course description in the superblock', async () => { + const description = page.getByTestId('superblock-description-box'); + const childParagraphs = description.locator('p'); + + // container should be visible + await expect(description).toBeVisible(); + + // container should have 2 paragraphs + await expect(childParagraphs).toHaveCount(2); + + // expected content + const expectedTexts = [ + "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.", + 'This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio.' + ]; + + // checks if received content is equal to the expected content + const receivedTexts = await childParagraphs.allInnerTexts(); + expect(receivedTexts).toEqual(expectedTexts); + }); + + test('Should display the note if it exists', async () => { + const noteText = page.getByTestId('superblock-note'); + + await expect(noteText).toBeVisible(); + await expect(noteText).toContainText( + "The Project Euler Project has been moved to it's own course. Go back to curriculum to see the list of courses we offer." + ); }); }); From 962a5732faf0b656d95b6d1bf03d9419e5bd55dd Mon Sep 17 00:00:00 2001 From: munzah-shah Date: Wed, 20 Sep 2023 17:17:00 +0500 Subject: [PATCH 6/8] refactor(e2e): changed the superblock icon test to first test the visibility of icon div element then the svg inside of it --- .../Introduction/components/super-block-intro.tsx | 4 +++- e2e/coding-interview-prep-intro-page.spec.ts | 7 +++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/client/src/templates/Introduction/components/super-block-intro.tsx b/client/src/templates/Introduction/components/super-block-intro.tsx index 0d9adbda305121..226ed6b137a5f3 100644 --- a/client/src/templates/Introduction/components/super-block-intro.tsx +++ b/client/src/templates/Introduction/components/super-block-intro.tsx @@ -33,7 +33,9 @@ function SuperBlockIntro(props: SuperBlockIntroProps): JSX.Element { {i18nSuperBlock} - {generateIconComponent(superBlock, 'cert-header-icon')} +
+ {generateIconComponent(superBlock, 'cert-header-icon')} +
{superBlockIntroText.map((str, i) => ( diff --git a/e2e/coding-interview-prep-intro-page.spec.ts b/e2e/coding-interview-prep-intro-page.spec.ts index 0f1f98e6673135..839bc216ac7a7d 100644 --- a/e2e/coding-interview-prep-intro-page.spec.ts +++ b/e2e/coding-interview-prep-intro-page.spec.ts @@ -21,8 +21,11 @@ test.describe('Certification intro page', () => { await expect(heading).toBeVisible(); await expect(heading).toContainText('Coding Interview Prep'); - const icon = page.getByTestId('algorithm-icon'); - expect(icon).toBeDefined(); + const superblockIcon = page.getByTestId('superblock-icon'); + await expect(superblockIcon).toBeVisible(); + + const algorithmIcon = superblockIcon.getByTestId('algorithm-icon'); + await expect(algorithmIcon).toBeVisible(); }); test('Should have relevant course description in the superblock', async () => { From 5c94f50125addc4e6dd21d8c26e2616c4dd1040e Mon Sep 17 00:00:00 2001 From: munzah-shah Date: Wed, 20 Sep 2023 17:38:09 +0500 Subject: [PATCH 7/8] refactor(e2e): used the required text content from english translation module instead of hardcoding them in the test file --- e2e/coding-interview-prep-intro-page.spec.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/e2e/coding-interview-prep-intro-page.spec.ts b/e2e/coding-interview-prep-intro-page.spec.ts index 839bc216ac7a7d..f26d639c52f65e 100644 --- a/e2e/coding-interview-prep-intro-page.spec.ts +++ b/e2e/coding-interview-prep-intro-page.spec.ts @@ -1,4 +1,5 @@ import { test, expect, type Page } from '@playwright/test'; +import superblockTexts from '../client/i18n/locales/english/intro.json'; test.describe('Certification intro page', () => { let page: Page; @@ -38,15 +39,11 @@ test.describe('Certification intro page', () => { // container should have 2 paragraphs await expect(childParagraphs).toHaveCount(2); - // expected content - const expectedTexts = [ - "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.", - 'This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio.' - ]; - // checks if received content is equal to the expected content const receivedTexts = await childParagraphs.allInnerTexts(); - expect(receivedTexts).toEqual(expectedTexts); + expect(receivedTexts).toEqual( + superblockTexts['coding-interview-prep'].intro + ); }); test('Should display the note if it exists', async () => { @@ -54,7 +51,7 @@ test.describe('Certification intro page', () => { await expect(noteText).toBeVisible(); await expect(noteText).toContainText( - "The Project Euler Project has been moved to it's own course. Go back to curriculum to see the list of courses we offer." + superblockTexts['coding-interview-prep'].note ); }); }); From e9cad8fe9ba3ef6e13a20696cb42af5322cf8324 Mon Sep 17 00:00:00 2001 From: Munzah Shah Date: Fri, 22 Sep 2023 21:04:39 +0500 Subject: [PATCH 8/8] refactor(e2e): removing the locator label and using test-id label on child paragraph tags instead --- .../templates/Introduction/components/super-block-intro.tsx | 2 +- e2e/coding-interview-prep-intro-page.spec.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/client/src/templates/Introduction/components/super-block-intro.tsx b/client/src/templates/Introduction/components/super-block-intro.tsx index 226ed6b137a5f3..2fc49c4734f152 100644 --- a/client/src/templates/Introduction/components/super-block-intro.tsx +++ b/client/src/templates/Introduction/components/super-block-intro.tsx @@ -39,7 +39,7 @@ function SuperBlockIntro(props: SuperBlockIntroProps): JSX.Element {
{superBlockIntroText.map((str, i) => ( -

{str}

+

{str}

))}
{superBlockNoteText && ( diff --git a/e2e/coding-interview-prep-intro-page.spec.ts b/e2e/coding-interview-prep-intro-page.spec.ts index f26d639c52f65e..94cc457c85c6a6 100644 --- a/e2e/coding-interview-prep-intro-page.spec.ts +++ b/e2e/coding-interview-prep-intro-page.spec.ts @@ -31,7 +31,9 @@ test.describe('Certification intro page', () => { test('Should have relevant course description in the superblock', async () => { const description = page.getByTestId('superblock-description-box'); - const childParagraphs = description.locator('p'); + const childParagraphs = description.getByTestId( + 'superblock-description-para' + ); // container should be visible await expect(description).toBeVisible();