feat: convert report user test to Playwright (#54683)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/client-only-routes/show-user.tsx

@@ -124,7 +124,6 @@ function ShowUser({
             <FormGroup controlId='report-user-textarea'>
               <ControlLabel>{t('report.what')}</ControlLabel>
               <FormControl
-                data-cy='report-user'
                 componentClass='textarea'
                 onChange={handleChange}
                 placeholder={t('report.details')}

cypress/e2e/default/user/report-user.ts

@@ -1,21 +0,0 @@
-describe('Report User', () => {
-  beforeEach(() => {
-    cy.task('seed');
-    cy.login();
-  });
-  it('should be possible to report a user from their profile page', () => {
-    // Since going to a user page initially generates a 404, we have to ignore
-    // status codes on that request
-    cy.visit('/twaha', { failOnStatusCode: false });
-    // The following line is only required if you want to test it in development
-    // cy.contains('Preview custom 404 page').click();
-    cy.contains("Flag This User's Account for Abuse").click();
-    cy.contains("Do you want to report twaha's portfolio for abuse?");
-    cy.get('[data-cy="report-user"]').type('Some details');
-    cy.contains('Submit the report').click();
-    cy.location().should(loc => {
-      expect(loc.pathname).to.eq('/learn');
-    });
-    cy.contains('A report was sent to the team with foo@bar.com in copy');
-  });
-});

e2e/report-user.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test';
+test.use({ storageState: 'playwright/.auth/certified-user.json' });
+
+// To run this test you will need to run the email server.
+// To do this: https://contribute.freecodecamp.org/#/how-to-catch-outgoing-emails-locally?id=using-mailhog
+
+test('should be possible to report a user from their profile page', async ({
+  page
+}) => {
+  await page.goto('/twaha');
+
+  // If you build the client locally, delete the button click below.
+  if (!process.env.CI) {
+    await page.getByRole('button', { name: 'Preview custom 404 page' }).click();
+  }
+
+  await page.getByText("Flag This User's Account for Abuse").click();
+
+  await expect(
+    page.getByText("Do you want to report twaha's portfolio for abuse?")
+  ).toBeVisible();
+
+  await page.getByRole('textbox').nth(1).fill('Some details');
+  await page.getByRole('button', { name: 'Submit the report' }).click();
+  await expect(page).toHaveURL('/learn');
+
+  await expect(page.getByTestId('flash-message')).toBeVisible();
+  await expect(page.getByTestId('flash-message')).toContainText(
+    'A report was sent to the team with foo@bar.com in copy'
+  );
+});