Skip to content

Commit 971b7bc

Browse files
authored
Fix: Typing works again in Variables Editor (#650)
* refactor: replace useEffect with useMount for initialization in VariablesEditor * test: add tests for VariablesEditor
1 parent 4783eae commit 971b7bc

File tree

4 files changed

+118
-2
lines changed

4 files changed

+118
-2
lines changed

src/modules/EditorView/VariablesEditor.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { drawSelection, dropCursor, EditorView, highlightSpecialChars, keymap, l
2929
import { dracula, tomorrow } from "@mjfwebb/thememirror";
3030
import { Button } from "@neo4j-ndl/react";
3131
import classNames from "classnames";
32+
import { useMount } from "react-use";
3233

3334
import type { Extension } from "../../components/Filename";
3435
import { FileName } from "../../components/Filename";
@@ -106,7 +107,7 @@ export const VariablesEditor = ({ id, loading, fileExtension, fileName, borderRa
106107
[formatTheCode, theme.theme, updateListener]
107108
);
108109

109-
useEffect(() => {
110+
useMount(() => {
110111
if (elementRef.current === null) {
111112
return;
112113
}
@@ -123,7 +124,7 @@ export const VariablesEditor = ({ id, loading, fileExtension, fileName, borderRa
123124
view.destroy();
124125
setEditorView(null);
125126
};
126-
}, [value]);
127+
});
127128

128129
useEffect(() => {
129130
if (editorView) {
@@ -163,6 +164,7 @@ export const VariablesEditor = ({ id, loading, fileExtension, fileName, borderRa
163164
rightButtons={
164165
<Button
165166
aria-label="Prettify code"
167+
data-testid="variables-editor-prettify-button"
166168
className={classNames(
167169
"mr-2",
168170
theme.theme === Theme.LIGHT ? "ndl-theme-light" : "ndl-theme-dark"

tests/pages/Editor.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,22 @@ export class Editor extends Screen {
2727
await this.page.locator(`#${EDITOR_QUERY_INPUT} .cm-content`).fill(query);
2828
}
2929

30+
public async getQuery(): Promise<string> {
31+
const text = (await this.page.locator(`#${EDITOR_QUERY_INPUT} .cm-content`).innerText()).valueOf();
32+
return text;
33+
}
34+
3035
public async setParams(params: string) {
3136
await this.page.waitForSelector("[data-test-editor-query-button]");
3237
await this.page.locator(`#${EDITOR_PARAMS_INPUT} .cm-content`).clear();
3338
await this.page.locator(`#${EDITOR_PARAMS_INPUT} .cm-content`).fill(params);
3439
}
3540

41+
public async getParams(): Promise<string> {
42+
const text = (await this.page.locator(`#${EDITOR_PARAMS_INPUT} .cm-content`).innerText()).valueOf();
43+
return text;
44+
}
45+
3646
public async submitQuery() {
3747
await this.page.waitForSelector("[data-test-editor-query-button]");
3848
await this.page.click("[data-test-editor-query-button]");
@@ -77,4 +87,17 @@ export class Editor extends Screen {
7787
await this.page.waitForSelector(`[data-test-query-editor-tab="${tabName}"]`);
7888
await this.page.click(`[data-test-query-editor-tab="${tabName}"]`);
7989
}
90+
91+
public async isVariablesEditorDisabled(): Promise<boolean> {
92+
const isDisabled = await this.page.evaluate(() => {
93+
const editor = document.querySelector(`#${EDITOR_PARAMS_INPUT}`);
94+
return editor ? editor.classList.contains("cm-disabled") : false;
95+
});
96+
return isDisabled;
97+
}
98+
99+
public async prettifyVariables() {
100+
await this.page.waitForSelector("[data-testid='variables-editor-prettify-button']");
101+
await this.page.click("[data-testid='variables-editor-prettify-button']");
102+
}
80103
}

tests/queryeditortabs.test.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,4 +87,26 @@ test.describe("query editor tabs", () => {
8787
await expect(page.getByRole("tab", { name: "MyTest1" })).toBeVisible();
8888
await expect(page.getByRole("tab", { name: "MyTest2" })).not.toBeVisible();
8989
});
90+
91+
test("should display typed query in the editor", async ({ loginPage, schemaEditorPage, editorPage }) => {
92+
await loginPage.loginDismissIntrospection(NEO_USER, NEO_PASSWORD, NEO_URL);
93+
94+
await schemaEditorPage.setTypeDefs(typeDefs);
95+
await schemaEditorPage.buildSchema();
96+
97+
await editorPage.addNewTab();
98+
99+
const testQuery = `
100+
query TestQuery {
101+
movies {
102+
id
103+
}
104+
}
105+
`;
106+
107+
await editorPage.setQuery(testQuery);
108+
109+
const currentQuery = await editorPage.getQuery();
110+
expect(currentQuery.replace(/\s/g, "")).toContain("queryTestQuery{movies{id}}");
111+
});
90112
});

tests/variableseditor.test.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
* Copyright (c) "Neo4j"
3+
* Neo4j Sweden AB [http://neo4j.com]
4+
*
5+
* This file is part of Neo4j.
6+
*
7+
* Licensed under the Apache License, Version 2.0 (the "License");
8+
* you may not use this file except in compliance with the License.
9+
* You may obtain a copy of the License at
10+
*
11+
* http://www.apache.org/licenses/LICENSE-2.0
12+
*
13+
* Unless required by applicable law or agreed to in writing, software
14+
* distributed under the License is distributed on an "AS IS" BASIS,
15+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16+
* See the License for the specific language governing permissions and
17+
* limitations under the License.
18+
*/
19+
20+
import * as dotenv from "dotenv";
21+
22+
import { expect, test } from "./utils/pagemodel";
23+
24+
dotenv.config();
25+
26+
const { NEO_USER = "admin", NEO_PASSWORD = "password", NEO_URL = "neo4j://localhost:7687/neo4j" } = process.env;
27+
28+
test.describe("variables editor", () => {
29+
const typeDefs = /* GraphQL */ `
30+
type Movie @node {
31+
id: ID!
32+
}
33+
`;
34+
35+
const query = /* GraphQL */ `
36+
query MyTest1 {
37+
movies {
38+
id
39+
}
40+
}
41+
`;
42+
43+
test("should display typed variables in the editor", async ({ loginPage, schemaEditorPage, editorPage }) => {
44+
await loginPage.loginDismissIntrospection(NEO_USER, NEO_PASSWORD, NEO_URL);
45+
await schemaEditorPage.setTypeDefs(typeDefs);
46+
await schemaEditorPage.buildSchema();
47+
await editorPage.addNewTab();
48+
await editorPage.setQuery(query);
49+
50+
const testVariables = '{ "id": "123", "name": "The Matrix" }';
51+
await editorPage.setParams(testVariables);
52+
const currentVariables = await editorPage.getParams();
53+
expect(currentVariables.replace(/\s/g, "")).toContain('"id":"123","name":"TheMatrix"');
54+
});
55+
56+
test("variables editor prettifies JSON correctly", async ({ loginPage, schemaEditorPage, editorPage }) => {
57+
await loginPage.loginDismissIntrospection(NEO_USER, NEO_PASSWORD, NEO_URL);
58+
await schemaEditorPage.setTypeDefs(typeDefs);
59+
await schemaEditorPage.buildSchema();
60+
await editorPage.addNewTab();
61+
await editorPage.setQuery(query);
62+
63+
const uglyJson = '{"id":1,"name":"Test"}';
64+
await editorPage.setParams(uglyJson);
65+
await editorPage.prettifyVariables();
66+
const prettyJson = await editorPage.getParams();
67+
expect(prettyJson).toMatch(/\s+"id": 1,?\s+"name": "Test"/);
68+
});
69+
});

0 commit comments

Comments
 (0)