jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2025-12-30 03:03:06 -05:00
Code Issues Projects Releases Wiki Activity

fix: superblock intro expansion + test for superblock order (#58928)

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2025-02-21 15:01:51 +01:00
committed by GitHub
parent e0fc4fa7aa
commit 1a6a2ed646
3 changed files with 29 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/templates/Introduction/super-block-intro.tsx
View File

@@ -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) => {
<SuperBlockAccordion
challenges={superBlockChallenges}
superBlock={superBlock}
chosenBlock={chosenBlock}
chosenBlock={initialExpandedBlock}
completedChallengeIds={completedChallenges.map(c => c.id)}
/>
) : (

51
e2e/intro-page-rwd.spec.ts
View File

@@ -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();
});
});

7
e2e/landing.spec.ts
View File

@@ -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();
}
});