Fix tests for new editor

Author: hasparus

.gitignore

@@ -63,3 +63,5 @@ public/sitemap.xml
 out/
 
 tsconfig.tsbuildinfo
+
+playwright-report/

src/globals.css

@@ -112,52 +112,10 @@ div[id^="headlessui-menu-items"] {
   }
 }
 
-.CodeMirror-selected {
-  @apply !bg-primary/50 dark:bg-primary/40;
-}
-
-.CodeMirror-cursor {
-  @apply dark:border-white;
-}
-
-.CodeMirror {
-  @apply p-2;
-}
-
 ::selection {
   @apply bg-pri-base/25 dark:bg-pri-light/50;
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    /*background: linear-gradient(*/
-    /*    125deg,*/
-    /*    rgba(234, 117, 195, 0.3) -10%,*/
-    /*    rgba(234, 117, 195, 0) 8%*/
-    /*  ),*/
-    /*  linear-gradient(*/
-    /*    -125deg,*/
-    /*    rgba(234, 117, 195, 0.3) -10%,*/
-    /*    rgba(234, 117, 195, 0) 8%*/
-    /*  ),*/
-    /*  linear-gradient(0deg, #05031c, #05031c);*/
-    /*@apply bg-gradient-to-b from-primary/10 to-[#05031c]*/
-
-    /*background:*/
-    /*        !*linear-gradient(0deg, #05031c, #05031c),*!*/
-    /*  linear-gradient(*/
-    /*    125.93deg,*/
-    /*    rgba(234, 117, 195, 0.7) -10.45%,*/
-    /*    rgba(234, 117, 195, 0) 28.49%*/
-    /*  ),*/
-    /*  linear-gradient(*/
-    /*    -125.93deg,*/
-    /*    rgba(234, 117, 195, 0.7) -33.25%,*/
-    /*    rgba(234, 117, 195, 0) 26.45%*/
-    /*  );*/
-  }
-}
-
 .donts-images ul {
   gap: 0 3em;
   @apply flex flex-wrap;

test/e2e/graphql-interactive.spec.ts

@@ -5,9 +5,9 @@ test.describe("interactive examples", () => {
     page,
   }) => {
     await page.goto("/learn")
-    await page.waitForSelector(".CodeMirror", { timeout: 10000 })
+    await page.waitForSelector(".cm-editor", { timeout: 10000 })
 
-    const editors = page.locator(".miniGraphiQL")
+    const editors = page.locator(".cm-editor")
     let heroEditor: Locator | null = null
 
     for (let i = 0; i < (await editors.count()); i++) {
@@ -23,12 +23,7 @@ test.describe("interactive examples", () => {
       throw new Error("Could not find hero GraphQL editor")
     }
 
-    const codeMirrorEditor = heroEditor.locator(".CodeMirror").first()
-    await expect(codeMirrorEditor).toBeVisible()
-
-    await codeMirrorEditor.click()
-
-    const codeLines = codeMirrorEditor.locator(".CodeMirror-line")
+    const codeLines = heroEditor.locator(".cm-line")
 
     // Find the line containing "name" and click after it
     for (let i = 0; i < (await codeLines.count()); i++) {
@@ -47,20 +42,24 @@ test.describe("interactive examples", () => {
     await page.keyboard.type("ap")
     await page.keyboard.press("Control+Space")
 
-    const autoCompleteMenu = page.locator(".CodeMirror-hints")
+    const autoCompleteMenu = page.locator(".cm-tooltip-autocomplete")
     await expect(autoCompleteMenu).toBeVisible({ timeout: 5000 })
 
     const appearsInSuggestion = page
-      .locator(".CodeMirror-hints li")
+      .locator(".cm-completionLabel")
       .filter({ hasText: "appearsIn" })
 
+    expect(page.locator(".cm-completionDetail").first()).toHaveText(
+      "[Episode]!",
+    )
+
     if (await appearsInSuggestion.isVisible()) {
       await appearsInSuggestion.click()
     } else {
       await page.keyboard.press("Enter")
     }
 
-    const resultViewer = heroEditor.locator(".result-window")
+    const resultViewer = page.locator(".result-window").first()
     await expect(resultViewer).toBeVisible()
 
     await expect
@@ -91,7 +90,7 @@ test.describe("interactive examples", () => {
     await page.waitForLoadState("networkidle")
 
     // Find the mutation example that has GraphiQL enabled
-    const editors = page.locator(".miniGraphiQL")
+    const editors = page.locator(".cm-editor")
     let mutationEditor: Locator | null = null
 
     for (let i = 0; i < (await editors.count()); i++) {