feat: convert "user token" tests to Playwright (#54939)

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'
               >

cypress/e2e/default/settings/user-token.ts

@@ -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');
-    });
-  });
-});

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();
+  });
+});