From 2c7f4ecde248bec0c4ae405bed7cde737c23a0d2 Mon Sep 17 00:00:00 2001
From: justynakantyka <64207552+justynakantyka@users.noreply.github.com>
Date: Thu, 26 Oct 2023 18:42:58 +0200
Subject: [PATCH] test(e2e, playwright): tool-panel.tsx (#51965)

Co-authored-by: Ahmad <57593864+Ahmadkashif@users.noreply.github.com>
---
 .../Challenges/components/output.tsx          |  1 +
 e2e/tool-panel.spec.ts                        | 53 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 e2e/tool-panel.spec.ts

diff --git a/client/src/templates/Challenges/components/output.tsx b/client/src/templates/Challenges/components/output.tsx
index cd1cf0a187e..b10692d2a10 100644
--- a/client/src/templates/Challenges/components/output.tsx
+++ b/client/src/templates/Challenges/components/output.tsx
@@ -21,6 +21,7 @@ function Output({ defaultOutput, output }: OutputProps): JSX.Element {
     <pre
       className='output-text'
       data-cy='output-text'
+      data-playwright-test-label='output-text'
       dangerouslySetInnerHTML={{ __html: message }}
       role='region'
       aria-label={i18next.t('learn.editor-tabs.console')}
diff --git a/e2e/tool-panel.spec.ts b/e2e/tool-panel.spec.ts
new file mode 100644
index 00000000000..42bbb2e94d3
--- /dev/null
+++ b/e2e/tool-panel.spec.ts
@@ -0,0 +1,53 @@
+import { test, expect } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+
+test.describe('Tool Panel', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(
+      '/learn/javascript-algorithms-and-data-structures/basic-javascript/increment-a-number-with-javascript'
+    );
+  });
+  test('should display "//running tests" in console after clicking "Run the Tests (Ctrl+Enter)" button', async ({
+    page
+  }) => {
+    await page
+      .getByRole('button', {
+        name: 'Run the Test'
+      })
+      .click();
+
+    await expect(page.getByTestId('output-text')).toContainText(
+      translations.learn['running-tests']
+    );
+  });
+
+  test('should display reset modal after clicking "Reset this lesson" button', async ({
+    page
+  }) => {
+    await page
+      .getByRole('button', { name: translations.buttons['reset-lesson'] })
+      .click();
+
+    await expect(
+      page.getByRole('heading', { name: translations.learn.reset })
+    ).toBeVisible();
+  });
+
+  test('should display list with expected links after clicking "Get Help"', async ({
+    page
+  }) => {
+    const expectedHelpLinks = [
+      `${translations.buttons['get-hint']} , ${translations.aria['opens-new-window']}`,
+      translations.buttons['watch-video'],
+      translations.buttons['ask-for-help']
+    ];
+    const helpLinks = [];
+
+    await page.getByTestId('get-help-dropdown').click();
+    helpLinks.push(await page.getByTestId('get-hint').textContent());
+    helpLinks.push(await page.getByTestId('watch-a-video').textContent());
+    helpLinks.push(await page.getByTestId('ask-for-help').textContent());
+
+    expect(helpLinks).toEqual(expectedHelpLinks);
+  });
+});