From 18c7043c56326a923676e7c9330f36342069bb09 Mon Sep 17 00:00:00 2001
From: Ann-Cherian <121712751+Ann-Cherian@users.noreply.github.com>
Date: Thu, 26 Oct 2023 22:24:43 +0530
Subject: [PATCH] test(e2e,playwright): preview.tsx (#52027)

---
 e2e/preview.spec.ts | 46 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 e2e/preview.spec.ts

diff --git a/e2e/preview.spec.ts b/e2e/preview.spec.ts
new file mode 100644
index 00000000000..9590eca7c2b
--- /dev/null
+++ b/e2e/preview.spec.ts
@@ -0,0 +1,46 @@
+import { test, expect } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(
+    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+  );
+});
+
+test.describe('Challenge Preview Component', () => {
+  test('should render correct output of default code', async ({
+    page,
+    isMobile
+  }) => {
+    if (isMobile) {
+      await page
+        .getByRole('tab', { name: translations.learn['editor-tabs'].preview })
+        .click();
+    }
+    await expect(
+      page
+        .frameLocator('.challenge-preview-frame')
+        .first()
+        .getByRole('heading', { name: 'CatPhotoApp' })
+    ).toBeVisible();
+  });
+
+  test('should render correct output of changed code', async ({
+    page,
+    isMobile
+  }) => {
+    await page.getByLabel('Editor content').click();
+    await page.keyboard.insertText('<h1>FreeCodeCamp</h1>');
+    if (isMobile) {
+      await page
+        .getByRole('tab', { name: translations.learn['editor-tabs'].preview })
+        .click();
+    }
+    await expect(
+      page
+        .frameLocator('.challenge-preview-frame')
+        .first()
+        .getByRole('heading', { name: 'FreeCodeCamp' })
+    ).toBeVisible();
+  });
+});