From 80b09bb7bbb4b69619bf099134e62cde65b76f9f Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Mon, 6 May 2024 21:03:05 +0200
Subject: [PATCH] feat: convert intro page rwd to Playwright (#54666)

---
 .../learn/responsive-web-design/intro-page.ts | 41 ----------------
 e2e/intro-page-rwd.spec.ts                    | 47 +++++++++++++++++++
 2 files changed, 47 insertions(+), 41 deletions(-)
 delete mode 100644 cypress/e2e/default/learn/responsive-web-design/intro-page.ts
 create mode 100644 e2e/intro-page-rwd.spec.ts

diff --git a/cypress/e2e/default/learn/responsive-web-design/intro-page.ts b/cypress/e2e/default/learn/responsive-web-design/intro-page.ts
deleted file mode 100644
index bae7a815948..00000000000
--- a/cypress/e2e/default/learn/responsive-web-design/intro-page.ts
+++ /dev/null
@@ -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');
-  });
-});
diff --git a/e2e/intro-page-rwd.spec.ts b/e2e/intro-page-rwd.spec.ts
new file mode 100644
index 00000000000..42994483b0c
--- /dev/null
+++ b/e2e/intro-page-rwd.spec.ts
@@ -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();
+  });
+});