From f34f725e9a01ff2bee98d5f521bbfbc6d64d37cb Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Fri, 5 Apr 2024 17:50:45 +0200
Subject: [PATCH] test(e2e): migrate tags test to playwright (#54167)

---
 .../Challenges/components/side-panel.tsx      |  2 +-
 e2e/tags.spec.ts                              | 66 +++++++++++++++++++
 2 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 e2e/tags.spec.ts

diff --git a/client/src/templates/Challenges/components/side-panel.tsx b/client/src/templates/Challenges/components/side-panel.tsx
index cca3e69d768..197edd318b3 100644
--- a/client/src/templates/Challenges/components/side-panel.tsx
+++ b/client/src/templates/Challenges/components/side-panel.tsx
@@ -42,7 +42,7 @@ export function SidePanel({
 }: SidePanelProps): JSX.Element {
   useEffect(() => {
     const mathJaxChallenge =
-      block === 'rosetta-code' ||
+      superBlock === SuperBlocks.RosettaCode ||
       superBlock === SuperBlocks.ProjectEuler ||
       block === 'intermediate-algorithm-scripting';
     initializeMathJax(mathJaxChallenge);
diff --git a/e2e/tags.spec.ts b/e2e/tags.spec.ts
new file mode 100644
index 00000000000..61e5c98564e
--- /dev/null
+++ b/e2e/tags.spec.ts
@@ -0,0 +1,66 @@
+import { test, expect } from '@playwright/test';
+
+const challenges = {
+  responsiveWebDesign:
+    '/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements',
+  rosettaCode: '/learn/rosetta-code/rosetta-code-challenges/100-doors',
+  projectEuler:
+    '/learn/project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-or-5'
+};
+
+const social = {
+  description: 'Learn to Code — For Free'
+};
+
+const scripts = {
+  mathjax: {
+    selector: 'script[id="mathjax"]',
+    src: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML'
+  }
+};
+
+test.describe('The Document Metadata', () => {
+  test.describe('landing page', () => {
+    test('has correct <meta> tags', async ({ page }) => {
+      await page.goto('/');
+      await expect(
+        page.locator('head meta[name="description"]')
+      ).toHaveAttribute('content', 'Learn to Code — For Free');
+      await expect(page.locator('head meta[name="og:title"]')).toHaveAttribute(
+        'content',
+        'freeCodeCamp.org'
+      );
+      await expect(
+        page.locator('head meta[name="og:description"]')
+      ).toHaveAttribute('content', social.description);
+      await expect(
+        page.locator('head meta[name="twitter:title"]')
+      ).toHaveAttribute('content', 'freeCodeCamp.org');
+      await expect(
+        page.locator('head meta[name="twitter:description"]')
+      ).toHaveAttribute('content', social.description);
+      await expect(page.locator(scripts.mathjax.selector)).not.toBeVisible();
+    });
+  });
+
+  test.describe('responsive web design challenges', () => {
+    test('should not have mathjax body script', async ({ page }) => {
+      await page.goto(challenges.responsiveWebDesign);
+      await expect(page.locator(scripts.mathjax.selector)).not.toBeVisible();
+    });
+  });
+
+  test.describe('project euler challenges', () => {
+    test('should have mathjax body script', async ({ page }) => {
+      await page.goto(challenges.projectEuler);
+      await expect(page.locator(scripts.mathjax.selector)).toHaveCount(1);
+    });
+  });
+
+  test.describe('rosetta code challenges', () => {
+    test('should have mathjax body script', async ({ page }) => {
+      await page.goto(challenges.rosettaCode);
+      await expect(page.locator(scripts.mathjax.selector)).toHaveCount(1);
+    });
+  });
+});