jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-18 07:03:01 -04:00
Code Issues Projects Releases Wiki Activity

feat: convert intro page rwd to Playwright (#54666)

Browse Source
This commit is contained in:
Sem Bauke
2024-05-06 21:03:05 +02:00
committed by GitHub
parent 418ba649d1
commit 80b09bb7bb
2 changed files with 47 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
cypress/e2e/default/learn/responsive-web-design/intro-page.ts
View File

@@ -1,41 +0,0 @@
const introPageSelectors = {
firstBlock: '[data-cy="learn-html-by-building-a-cat-photo-app"]'
};
describe('Certification intro page', () => {
before(() => {
cy.task('seed');
cy.login();
});
it('Should render and toggle correctly', () => {
cy.visit('/learn/2022/responsive-web-design');
cy.title().should(
'eq',
'Responsive Web Design Certification | freeCodeCamp.org'
);
cy.contains(
"In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages"
).should('be.visible');
// First block should be expanded
cy.contains(
'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.'
).should('be.visible');
// Second block should be closed
cy.contains(
'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.'
).should('not.exist');
// Block should handle toggle clicks correctly
cy.get(introPageSelectors.firstBlock).click();
cy.contains(
'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.'
).should('not.exist');
cy.get(introPageSelectors.firstBlock).click();
cy.contains(
'HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.'
).should('be.visible');
});
});

47
e2e/intro-page-rwd.spec.ts Normal file
View File

@@ -0,0 +1,47 @@
import { test, expect } from '@playwright/test';
test.describe('Certification intro page', () => {
test('Should render and toggle correctly', async ({ page }) => {
const title = page.getByRole('button', {
name: 'Learn HTML by Building a Cat Photo App'
});
await page.goto('/learn/2022/responsive-web-design');
await expect(page).toHaveTitle(
'Responsive Web Design Certification | freeCodeCamp.org'
);
await expect(
page.getByText(
"this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages"
)
).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();
});
});