From c3b5c11afc40816c3712703221502c293394c39c Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Tue, 7 May 2024 17:59:02 +0200
Subject: [PATCH] feat: convert progressbar test to Playwright (#54636)

Co-authored-by: Naomi <nhcarrigan@gmail.com>
---
 .../default/learn/challenges/progress-bar.ts  | 85 -------------------
 e2e/progress-bar.spec.ts                      | 31 +++++++
 2 files changed, 31 insertions(+), 85 deletions(-)
 delete mode 100644 cypress/e2e/default/learn/challenges/progress-bar.ts

diff --git a/cypress/e2e/default/learn/challenges/progress-bar.ts b/cypress/e2e/default/learn/challenges/progress-bar.ts
deleted file mode 100644
index 95fb478a719..00000000000
--- a/cypress/e2e/default/learn/challenges/progress-bar.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-describe('progress bar', () => {
-  beforeEach(() => {
-    cy.task('seed');
-    cy.login();
-  });
-
-  it(
-    'Should show the progress bar showing the completed percent on legacy challenges',
-    { browser: 'electron' },
-    () => {
-      cy.visit(
-        '/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables'
-      );
-      cy.get(`${'.react-monaco-editor-container'} textarea`, { timeout: 16000 })
-        .click()
-        .focused()
-        .type('{ctrl}a')
-        .clear()
-        .type('var myName;');
-      cy.contains('Run the Tests (Ctrl + Enter)').click({ force: true });
-      cy.contains('Submit and go to next challenge');
-      cy.get('.progress-bar-container').contains('1% complete');
-    }
-  );
-
-  it(
-    'Should show the progress bar showing the completed percent on modern challenges',
-    { browser: 'electron' },
-    () => {
-      cy.visit(
-        '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
-      );
-      cy.get(`${'.react-monaco-editor-container'} textarea`, { timeout: 16000 })
-        .click()
-        .focused()
-        .type('{ctrl}a')
-        .clear()
-        .type(`<h1>CatPhotoApp</h1>\n<h2>Cat Photos</h2>`);
-      cy.contains('Check Your Code (Ctrl + Enter)').click({ force: true });
-      cy.contains('Submit and go to next challenge');
-      cy.get('.progress-bar-container').contains('1% complete');
-    }
-  );
-
-  it(
-    'Should show the progress bar showing the completed percent on modern challenges',
-    { browser: 'electron' },
-    () => {
-      cy.visit(
-        '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
-      );
-      cy.get(`${'.react-monaco-editor-container'} textarea`, { timeout: 16000 })
-        .click()
-        .focused()
-        .type('{ctrl}a')
-        .clear()
-        .type(
-          `<h2>Cat Photos</h2>\n<p>See more cat photos in our gallery.</p>`
-        );
-      cy.contains('Check Your Code (Ctrl + Enter)').click({ force: true });
-      cy.contains('Submit and go to next challenge');
-      cy.get('.progress-bar-container').contains('1% complete');
-    }
-  );
-  it(
-    'Should show the progress bar showing the completed percent on modern challenges',
-    { browser: 'electron' },
-    () => {
-      cy.visit(
-        '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-4'
-      );
-      cy.get(`${'.react-monaco-editor-container'} textarea`, { timeout: 16000 })
-        .click()
-        .focused()
-        .type('{ctrl}a')
-        .clear()
-        .type(
-          `<!-- TODO: Add link to cat photos -->\n<p>See more cat photos in our gallery.</p>`
-        );
-      cy.contains('Check Your Code (Ctrl + Enter)').click({ force: true });
-      cy.contains('Submit and go to next challenge');
-      cy.get('.progress-bar-container').contains('3% complete');
-    }
-  );
-});
diff --git a/e2e/progress-bar.spec.ts b/e2e/progress-bar.spec.ts
index 1334f3cae67..ab46b7b16e2 100644
--- a/e2e/progress-bar.spec.ts
+++ b/e2e/progress-bar.spec.ts
@@ -1,4 +1,5 @@
 import { expect, test } from '@playwright/test';
+test.use({ storageState: 'playwright/.auth/certified-user.json' });
 
 test.describe('Progress bar component', () => {
   test('Should appear with the correct content after the user has submitted their code', async ({
@@ -33,4 +34,34 @@ test.describe('Progress bar component', () => {
       .getByRole('button', { name: 'Submit and go to next challenge' })
       .click();
   });
+
+  test('should appear in the completion modal after user has submitted their code', async ({
+    page
+  }) => {
+    await page.goto(
+      '/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables'
+    );
+
+    const monacoEditor = page.getByLabel('Editor content');
+    await monacoEditor.focus();
+
+    await page.keyboard.press('Control+A');
+
+    await page.keyboard.press('Meta+A');
+    await page.keyboard.press('Backspace');
+
+    await page.keyboard.insertText('var myName;');
+
+    await page
+      .getByRole('button', { name: 'Run the Tests (Ctrl + Enter)' })
+      .click();
+
+    await expect(page.locator('.completion-block-meta')).toContainText(
+      '99% complete'
+    );
+
+    await page
+      .getByRole('button', { name: 'Submit and go to next challenge' })
+      .click();
+  });
 });