feat: convert "Donation Block Completion modal" tests to Playwright (#54903)

cypress/e2e/default/learn/donate/donation-block-completion-modal.ts

@@ -1,39 +0,0 @@
-describe('Donate page', () => {
-  before(() => {
-    cy.task('seed');
-    cy.login();
-  });
-
-  after(() => {
-    cy.task('seed');
-  });
-
-  const projects = [
-    'random-quote-machine',
-    'markdown-previewer',
-    'drum-machine',
-    'javascript-calculator',
-    '25--5-clock'
-  ];
-
-  it('Should be possible to submit projects', () => {
-    const submitProject = (str: string) => {
-      cy.visit(
-        `/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-${str}`
-      );
-      cy.get('#dynamic-front-end-form')
-        .get('#solution')
-        .type('https://codepen.io/camperbot/full/oNvPqqo', {
-          force: true
-        });
-
-      cy.contains("I've completed this challenge").click();
-      cy.contains('Submit and go to next challenge').click();
-    };
-
-    projects.forEach(project => submitProject(project));
-
-    // pop up modal
-    cy.get("div[role='dialog'] img#donation-animation").should('be.visible');
-  });
-});

e2e/donation-block-completion-modal.spec.ts

@@ -0,0 +1,48 @@
+import { execSync } from 'child_process';
+import { test, expect, Page } from '@playwright/test';
+test.use({ storageState: 'playwright/.auth/development-user.json' });
+
+test.beforeAll(() => {
+  execSync('node ./tools/scripts/seed/seed-demo-user');
+});
+
+test.afterAll(() => {
+  execSync('node ./tools/scripts/seed/seed-demo-user certified-user');
+});
+const projects = [
+  'random-quote-machine',
+  'markdown-previewer',
+  'drum-machine',
+  'javascript-calculator',
+  '25--5-clock'
+];
+
+test.describe('Donate page', () => {
+  const submitProject = async (page: Page, str: string) => {
+    await page.goto(
+      `/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-${str}`
+    );
+    await page
+      .getByRole('textbox', { name: 'solution' })
+      .fill('https://codepen.io/camperbot/full/oNvPqqo');
+    await page
+      .getByRole('button', { name: "I've completed this challenge" })
+      .click();
+    await page
+      .getByRole('button', { name: 'Submit and go to next challenge' })
+      .click();
+  };
+
+  test('Should be possible to submit projects, after the donation modal should show', async ({
+    page
+  }) => {
+    for (const project of projects) {
+      await submitProject(page, project);
+    }
+
+    await expect(page.getByRole('dialog')).toBeVisible();
+    await expect(
+      page.locator("div[role='dialog'] img#donation-animation")
+    ).toBeVisible();
+  });
+});