{editor}
{
componentDidUpdate() {
if (!this.view) return
+ let value = this.props.value || ""
+ if (this.props.vainlyExtractData) {
+ try {
+ const json = JSON.parse(value)
+ if (json && typeof json === "object" && "data" in json) {
+ value = JSON.stringify(json.data, null, 2)
+ }
+ } catch {
+ // ignore
+ }
+ }
+
this.view.dispatch({
changes: {
from: 0,
to: this.view.state.doc.length,
- insert: this.props.value || "",
+ insert: value,
},
})
}
diff --git a/src/components/interactive-code-block/syntax-highlighting.css b/src/components/interactive-code-block/syntax-highlighting.css
index 62580fb102..fd24ab4726 100644
--- a/src/components/interactive-code-block/syntax-highlighting.css
+++ b/src/components/interactive-code-block/syntax-highlighting.css
@@ -63,6 +63,7 @@
background: var(--cm-background);
color: var(--cm-foreground);
position: relative;
+ max-height: 184px;
& .cm-content {
padding: 16px 0;
@@ -75,6 +76,8 @@
& .cm-scroller {
line-height: 1.5;
font-family: var(--font-mono);
+ overflow: auto;
+ -webkit-font-smoothing: auto;
}
}
diff --git a/src/components/interactive-code-block/variable-editor.tsx b/src/components/interactive-code-block/variable-editor.tsx
index 73fe6a5e7c..d73f1829bc 100644
--- a/src/components/interactive-code-block/variable-editor.tsx
+++ b/src/components/interactive-code-block/variable-editor.tsx
@@ -3,7 +3,6 @@ import { EditorView } from "@codemirror/view"
import { EditorState } from "@codemirror/state"
import { json } from "@codemirror/lang-json"
import { history } from "@codemirror/commands"
-import { syntaxHighlighting } from "@codemirror/language"
import { codeMirrorThemeExtension } from "./codemirror-theme"
interface VariableEditorProps {
@@ -44,7 +43,6 @@ export class VariableEditor extends Component {
componentDidMount() {
if (!this.domNode) return
- // Create editor state for JSON (variables are JSON)
const state = EditorState.create({
doc: this.props.value || "",
extensions: [
diff --git a/test/e2e/graphql-interactive.spec.ts b/test/e2e/graphql-interactive.spec.ts
index 84946b81cd..a03d57cb65 100644
--- a/test/e2e/graphql-interactive.spec.ts
+++ b/test/e2e/graphql-interactive.spec.ts
@@ -1,79 +1,99 @@
-import { test, expect, type Locator } from "@playwright/test"
-
-test.describe("interactive examples", () => {
- test("adds appearsIn field to hero query and gets correct response", async ({
- page,
- }) => {
- await page.goto("/learn")
- await page.waitForSelector(".cm-editor", { timeout: 10000 })
-
- const editors = page.locator(".cm-editor")
- let heroEditor: Locator | null = null
-
- for (let i = 0; i < (await editors.count()); i++) {
- const editor = editors.nth(i)
- const content = await editor.textContent()
- if (content && content.includes("hero")) {
- heroEditor = editor
- break
- }
+import { test, expect, type Locator, type Page } from "@playwright/test"
+
+// Helper functions to reduce duplication
+async function findEditorByContent(
+ page: Page,
+ searchText: string,
+): Promise {
+ const editors = page.locator(".cm-editor")
+
+ for (let i = 0; i < (await editors.count()); i++) {
+ const editor = editors.nth(i)
+ const content = await editor.textContent()
+ if (content && content.includes(searchText)) {
+ return editor
}
-
- if (!heroEditor) {
- throw new Error("Could not find hero GraphQL editor")
+ }
+
+ throw new Error(`Could not find GraphQL editor containing "${searchText}"`)
+}
+
+async function typeInQuery(
+ page: Page,
+ editor: Locator,
+ afterText: string,
+ newField: string,
+): Promise {
+ const codeLines = editor.locator(".cm-line")
+
+ for (let i = 0; i < (await codeLines.count()); i++) {
+ const line = codeLines.nth(i)
+ const lineText = await line.textContent()
+ if (lineText && lineText.includes(afterText)) {
+ await line.click()
+ await page.keyboard.press("End")
+ await page.keyboard.press("Enter")
+ await page.keyboard.type(newField)
+ break
}
-
- const codeLines = heroEditor.locator(".cm-line")
-
- // Find the line containing "name" and click after it
- for (let i = 0; i < (await codeLines.count()); i++) {
- const line = codeLines.nth(i)
- const lineText = await line.textContent()
- if (lineText && lineText.includes("name")) {
- await line.click()
- // Move to end of line
- await page.keyboard.press("End")
- // Add new line
- await page.keyboard.press("Enter")
- break
+ }
+}
+
+async function expectJsonResult(
+ resultViewer: Locator,
+ expectedResult: object,
+): Promise {
+ await expect(resultViewer).toBeVisible()
+
+ await expect
+ .poll(async () => {
+ const resultContent = await resultViewer.textContent()
+ const jsonMatch = resultContent?.match(/\{[\s\S]*\}/)
+ if (jsonMatch) {
+ try {
+ return JSON.parse(jsonMatch[0])
+ } catch {
+ return {}
+ }
}
- }
+ return {}
+ })
+ .toStrictEqual(expectedResult)
+}
- await page.keyboard.type("ap")
- await page.keyboard.press("Control+Space")
+test.describe("interactive examples", () => {
+ test.describe("Learn", () => {
+ test("adds appearsIn field to hero query and gets correct response", async ({
+ page,
+ }) => {
+ await page.goto("/learn")
+ await page.waitForSelector(".cm-editor", { timeout: 10000 })
- const autoCompleteMenu = page.locator(".cm-tooltip-autocomplete")
- await expect(autoCompleteMenu).toBeVisible({ timeout: 5000 })
+ const heroEditor = await findEditorByContent(page, "hero")
- const appearsInSuggestion = page
- .locator(".cm-completionLabel")
- .filter({ hasText: "appearsIn" })
+ await typeInQuery(page, heroEditor, "name", "ap")
+ await page.keyboard.press("Control+Space")
- expect(page.locator(".cm-completionDetail").first()).toHaveText(
- "[Episode]!",
- )
+ const autoCompleteMenu = page.locator(".cm-tooltip-autocomplete")
+ await expect(autoCompleteMenu).toBeVisible({ timeout: 5000 })
- if (await appearsInSuggestion.isVisible()) {
- await appearsInSuggestion.click()
- } else {
- await page.keyboard.press("Enter")
- }
+ const appearsInSuggestion = page
+ .locator(".cm-completionLabel")
+ .filter({ hasText: "appearsIn" })
- const resultViewer = page.locator(".result-window").first()
- await expect(resultViewer).toBeVisible()
+ expect(page.locator(".cm-completionDetail").first()).toHaveText(
+ "[Episode]!",
+ )
- await expect
- .poll(async () => {
- const resultContent = await resultViewer.textContent()
- const jsonMatch = resultContent?.match(/\{[\s\S]*\}/)
- if (jsonMatch) {
- const responseJson = JSON.parse(jsonMatch[0])
- return responseJson
- }
+ if (await appearsInSuggestion.isVisible()) {
+ await appearsInSuggestion.click()
+ } else {
+ await page.keyboard.press("Enter")
+ }
- return {}
- })
- .toStrictEqual({
+ const resultViewer = page.locator(".result-window").first()
+
+ await expectJsonResult(resultViewer, {
data: {
hero: {
name: "R2-D2",
@@ -81,43 +101,67 @@ test.describe("interactive examples", () => {
},
},
})
- })
+ })
+
+ test("edits variables and receives an expected mutation result", async ({
+ page,
+ }) => {
+ await page.goto("/learn/mutations")
+ await page.waitForLoadState("networkidle")
- test("edits variables and receives an expected mutation result", async ({
- page,
- }) => {
- await page.goto("/learn/mutations")
- await page.waitForLoadState("networkidle")
-
- // Find the mutation example that has GraphiQL enabled
- const editors = page.locator(".cm-editor")
- let mutationEditor: Locator | null = null
-
- for (let i = 0; i < (await editors.count()); i++) {
- const editor = editors.nth(i)
- const content = await editor.textContent()
- if (content && content.includes("CreateReviewForEpisode")) {
- mutationEditor = editor
- break
+ const mutationEditor = await findEditorByContent(
+ page,
+ "CreateReviewForEpisode",
+ )
+
+ const variableEditor = mutationEditor.locator(".variable-editor").first()
+
+ if (await variableEditor.isVisible()) {
+ await variableEditor.click()
+
+ await page.getByText('"This is a great movie!"').first().click()
+ await page.keyboard.press("ControlOrMeta+ArrowRight")
+ for (let i = 0; i < 4; i++)
+ await page.keyboard.press("Alt+Shift+ArrowLeft")
+ await page.keyboard.type('almost as good as Andor"')
+
+ const resultViewer = mutationEditor.locator(".result-window")
+
+ await expectJsonResult(resultViewer, {
+ data: {
+ createReview: {
+ stars: 5,
+ commentary: "This is almost as good as Andor",
+ },
+ },
+ })
}
- }
+ })
+ })
- if (!mutationEditor) {
- throw new Error("Could not find mutation GraphQL editor")
- }
+ test.describe("Landing", () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto("/")
+ await page.waitForLoadState("networkidle")
+ page.locator(`text="How it works"`).scrollIntoViewIfNeeded()
+ })
+
+ test("allows editing query and gets updated results", async ({ page }) => {
+ await page.waitForSelector(".cm-editor", { timeout: 10000 })
- const variableEditor = mutationEditor.locator(".variable-editor").first()
+ const editor = page.locator(".cm-editor").first()
- if (await variableEditor.isVisible()) {
- await variableEditor.click()
+ await editor.click()
- await page.getByText('"This is a great movie!"').first().click()
- await page.keyboard.press("ControlOrMeta+ArrowRight")
- for (let i = 0; i < 4; i++)
- await page.keyboard.press("Alt+Shift+ArrowLeft")
- await page.keyboard.type('almost as good as Andor"')
+ await typeInQuery(page, editor, "tagline", "des")
- const resultViewer = mutationEditor.locator(".result-window")
+ await page.keyboard.press("Control+Space")
+
+ const autoCompleteMenu = page.locator(".cm-tooltip-autocomplete")
+ await expect(autoCompleteMenu).toBeVisible({ timeout: 5000 })
+ await page.locator(".cm-completionLabel").click()
+
+ const resultViewer = page.locator(".result-window").first()
await expect(resultViewer).toBeVisible()
await expect
@@ -125,19 +169,33 @@ test.describe("interactive examples", () => {
const resultContent = await resultViewer.textContent()
const jsonMatch = resultContent?.match(/\{[\s\S]*\}/)
if (jsonMatch) {
- const responseJson = JSON.parse(jsonMatch[0])
- return responseJson
+ try {
+ const result = JSON.parse(jsonMatch[0])
+ return result.project && result.project.description ? true : false
+ } catch {
+ return false
+ }
}
- return {}
+ return false
})
- .toStrictEqual({
- data: {
- createReview: {
- stars: 5,
- commentary: "This is almost as good as Andor",
- },
- },
- })
- }
+ .toBe(true)
+ })
+
+ test("shows syntax errors", async ({ page }) => {
+ await page.waitForSelector(".cm-editor", { timeout: 10000 })
+
+ const editor = page.locator(".cm-editor").first()
+
+ await editor.click()
+ await page.keyboard.press("ControlOrMeta+a")
+ await page.keyboard.press("Backspace")
+
+ const playButton = page.getByText("Run query")
+ await playButton.click()
+
+ const resultViewer = page.locator(".result-window").first()
+ const resultContent = await resultViewer.textContent()
+ expect(resultContent).toContain("Syntax Error: Unexpected .")
+ })
})
})