From 263fc81b62b9913a4c4dd7857a888c6dc758617a Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Fri, 24 May 2024 22:55:29 +0200
Subject: [PATCH] feat: convert "user token" tests to Playwright (#54939)

---
 client/src/components/settings/user-token.tsx |  6 ++-
 cypress/e2e/default/settings/user-token.ts    | 37 -------------------
 e2e/user-token.spec.ts                        | 35 ++++++++++++++++++
 3 files changed, 39 insertions(+), 39 deletions(-)
 delete mode 100644 cypress/e2e/default/settings/user-token.ts
 create mode 100644 e2e/user-token.spec.ts

diff --git a/client/src/components/settings/user-token.tsx b/client/src/components/settings/user-token.tsx
index 02dfba17d88..d56ee887fdc 100644
--- a/client/src/components/settings/user-token.tsx
+++ b/client/src/components/settings/user-token.tsx
@@ -27,7 +27,10 @@ class UserToken extends Component<UserTokenProps> {
     const { t } = this.props;
 
     return (
-      <div data-cy='user-token' className='user-token text-center'>
+      <div
+        data-playwright-test-label='user-token'
+        className='user-token text-center'
+      >
         <FullWidthRow>
           <Panel variant='info'>
             <Panel.Heading>{t('user-token.title')}</Panel.Heading>
@@ -39,7 +42,6 @@ class UserToken extends Component<UserTokenProps> {
                 block={true}
                 size='large'
                 variant='info'
-                data-cy='delete-user-token'
                 onClick={this.deleteToken}
                 type='button'
               >
diff --git a/cypress/e2e/default/settings/user-token.ts b/cypress/e2e/default/settings/user-token.ts
deleted file mode 100644
index 5c049272b39..00000000000
--- a/cypress/e2e/default/settings/user-token.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-describe('User token widget on settings page,', function () {
-  describe('initially', function () {
-    beforeEach(() => {
-      cy.task('seed');
-      cy.login();
-    });
-
-    it('should not render', function () {
-      cy.visit('/settings');
-      // make sure 'Danger Zone' is there so we know the page has rendered
-      cy.contains('Danger Zone');
-      cy.get('[data-cy=user-token]').should('not.exist');
-    });
-  });
-
-  describe('after creating token', function () {
-    beforeEach(() => {
-      cy.task('seed');
-      cy.login();
-      cy.visit(
-        '/learn/relational-database/learn-bash-by-building-a-boilerplate/build-a-boilerplate'
-      );
-      cy.contains('Start the course').click();
-    });
-
-    it('should allow you to delete your token', () => {
-      cy.visit('/settings');
-      // make sure 'Danger Zone' is there so we know the page has rendered
-      cy.contains('Danger Zone');
-      cy.get('[data-cy=user-token]').should('have.length', 1);
-
-      cy.get('[data-cy=delete-user-token]').click();
-      cy.contains('Your user token has been deleted.');
-      cy.get('[data-cy=user-token]').should('not.exist');
-    });
-  });
-});
diff --git a/e2e/user-token.spec.ts b/e2e/user-token.spec.ts
new file mode 100644
index 00000000000..e97e87ce944
--- /dev/null
+++ b/e2e/user-token.spec.ts
@@ -0,0 +1,35 @@
+import { execSync } from 'child_process';
+import { test, expect } from '@playwright/test';
+test.use({ storageState: 'playwright/.auth/development-user.json' });
+
+test.beforeEach(() => {
+  execSync('node ./tools/scripts/seed/seed-demo-user');
+});
+
+test.afterAll(() => {
+  execSync('node ./tools/scripts/seed/seed-demo-user certified-user');
+});
+
+test.describe('Initially', () => {
+  test('should not render', async ({ page }) => {
+    await page.goto('/settings');
+    await expect(page.getByTestId('user-token')).not.toBeVisible();
+  });
+});
+
+test.describe('After creating token', () => {
+  test('should allow you to delete your token', async ({ page }) => {
+    await page.goto(
+      '/learn/relational-database/learn-bash-by-building-a-boilerplate/build-a-boilerplate'
+    );
+    await page.getByRole('button', { name: 'Start the course' }).click();
+
+    await page.goto('/settings');
+    await expect(page.getByTestId('user-token')).toBeVisible();
+    await page.getByRole('button', { name: 'Delete my user token' }).click();
+    await expect(page.getByTestId('flash-message')).toContainText(
+      /Your user token has been deleted./
+    );
+    await expect(page.getByTestId('user-token')).not.toBeVisible();
+  });
+});