From 50d7f03763e7d64690391bc7a004eccbdd75156d Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Tue, 7 May 2024 18:09:33 +0200
Subject: [PATCH] feat: convert backend test to Playwright (#54641)

---
 .../workflows/temporary-container-checks.yml  |  2 +-
 .../e2e/default/learn/challenges/backend.ts   | 36 -------------------
 e2e/backend.spec.ts                           | 30 ++++++++++++++++
 3 files changed, 31 insertions(+), 37 deletions(-)
 delete mode 100644 cypress/e2e/default/learn/challenges/backend.ts
 create mode 100644 e2e/backend.spec.ts

diff --git a/.github/workflows/temporary-container-checks.yml b/.github/workflows/temporary-container-checks.yml
index b4a62ee17a2..a6370e0e434 100644
--- a/.github/workflows/temporary-container-checks.yml
+++ b/.github/workflows/temporary-container-checks.yml
@@ -158,4 +158,4 @@ jobs:
           config: baseUrl=http://localhost:8000
           browser: ${{ matrix.browsers }}
           # Only run one test to keep the run time down.
-          spec: 'cypress/e2e/default/learn/challenges/backend.ts'
+          spec: 'cypress/e2e/default/learn/challenges/codeally.ts'
diff --git a/cypress/e2e/default/learn/challenges/backend.ts b/cypress/e2e/default/learn/challenges/backend.ts
deleted file mode 100644
index 7e5daa91333..00000000000
--- a/cypress/e2e/default/learn/challenges/backend.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { selectors } from '../../../../support/selectors';
-
-const locations = {
-  index:
-    'learn/back-end-development-and-apis/managing-packages-with-npm/' +
-    'how-to-use-package-json-the-core-of-any-node-js-project-or-npm-package'
-};
-
-const unhandledErrorMessage = 'Something is not quite right';
-const runningOutput = '// running tests';
-const finishedOutput = '// tests completed';
-
-describe('Backend challenge', function () {
-  it('renders', () => {
-    cy.visit(locations.index);
-
-    cy.title().should(
-      'eq',
-      'Managing Packages with NPM - How to Use package.json, the Core of Any' +
-        ' Node.js Project or npm Package | Learn | freeCodeCamp.org'
-    );
-  });
-
-  it('does not generate unhandled errors on submission', () => {
-    cy.visit(locations.index);
-    cy.get(selectors.tag.inputSolution)
-      .type('https://example.com')
-      .type('{enter}')
-      .then(() => {
-        cy.get(selectors.dataCy.outputText)
-          .contains(runningOutput)
-          .contains(finishedOutput);
-        cy.contains(unhandledErrorMessage).should('not.exist');
-      });
-  });
-});
diff --git a/e2e/backend.spec.ts b/e2e/backend.spec.ts
new file mode 100644
index 00000000000..a67d770535c
--- /dev/null
+++ b/e2e/backend.spec.ts
@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test';
+
+const locations = {
+  index:
+    'learn/back-end-development-and-apis/managing-packages-with-npm/' +
+    'how-to-use-package-json-the-core-of-any-node-js-project-or-npm-package'
+};
+
+const unhandledErrorMessage = 'Something is not quite right';
+const runningOutput = '// running tests';
+const finishedOutput = '// tests completed';
+
+test.describe('Backend challenge', () => {
+  test('renders', async ({ page }) => {
+    await page.goto(locations.index);
+    await expect(page).toHaveTitle(
+      'Managing Packages with NPM - How to Use package.json, the Core of Any Node.js Project or npm Package | Learn | freeCodeCamp.org'
+    );
+  });
+
+  test('does not generate unhandled errors on submission', async ({ page }) => {
+    await page.goto(locations.index);
+    await page.fill('input[name="solution"]', 'https://example.com');
+    await page.keyboard.press('Enter');
+
+    await expect(page.getByText(runningOutput)).toContainText(finishedOutput);
+
+    await expect(page.getByText(unhandledErrorMessage)).not.toBeVisible();
+  });
+});