From 98d85ed664e81e8cb3304efcd1cdf24eaac98e49 Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Wed, 29 May 2024 18:23:11 +0200
Subject: [PATCH] feat: convert "editor spec" to Playwright (#54970)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
---
 .../default/learn/common-components/editor.ts | 29 ---------------
 e2e/legacy-editor.spec.ts                     | 36 +++++++++++++++++++
 2 files changed, 36 insertions(+), 29 deletions(-)
 delete mode 100644 cypress/e2e/default/learn/common-components/editor.ts
 create mode 100644 e2e/legacy-editor.spec.ts

diff --git a/cypress/e2e/default/learn/common-components/editor.ts b/cypress/e2e/default/learn/common-components/editor.ts
deleted file mode 100644
index 9d1c6872371..00000000000
--- a/cypress/e2e/default/learn/common-components/editor.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-const editorElement = {
-  editor: '.monaco-editor'
-};
-
-describe('Editor Shortcuts', () => {
-  it('Should handle Alt+Enter', () => {
-    cy.visit(
-      'learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements'
-    );
-    cy.get(editorElement.editor, { timeout: 15000 })
-      .first()
-      .click()
-      .focused()
-      .type('{alt}{enter}')
-      .should('have.value', '<h1>Hello</h1>\n');
-  });
-
-  it('Should ignore Ctrl+Enter', () => {
-    cy.visit(
-      'learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements'
-    );
-    cy.get(editorElement.editor, { timeout: 15000 })
-      .first()
-      .click()
-      .focused()
-      .type('{ctrl}{enter}')
-      .should('have.value', '<h1>Hello</h1>');
-  });
-});
diff --git a/e2e/legacy-editor.spec.ts b/e2e/legacy-editor.spec.ts
new file mode 100644
index 00000000000..076a2b17bbd
--- /dev/null
+++ b/e2e/legacy-editor.spec.ts
@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test';
+import { focusEditor } from './utils/editor';
+
+test.describe('Editor Shortcuts', () => {
+  test('Should add a new line if the user presses Alt+Enter', async ({
+    page,
+    isMobile
+  }) => {
+    await page.goto(
+      'learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements'
+    );
+    await focusEditor({ page, isMobile });
+
+    await page.keyboard.press('Alt+Enter');
+    await expect(
+      page
+        .getByTestId('editor-container-indexhtml')
+        .getByText('<h1>Hello</h1>\n')
+    ).toBeVisible();
+  });
+
+  test('Should not add a new line if the user presses Ctrl+Enter', async ({
+    page,
+    isMobile
+  }) => {
+    await page.goto(
+      'learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements'
+    );
+    await focusEditor({ page, isMobile });
+
+    await page.keyboard.press('Control+Enter');
+    await expect(
+      page.getByTestId('editor-container-indexhtml').getByText('<h1>Hello</h1>')
+    ).toBeVisible();
+  });
+});