Reproduce GraphQL unknown operation named issue (#5681)

* Add smoke check to reproduce #5665

* add debug code

* clean up

Co-authored-by: Mark Kim <mark.kim@konghq.com>
This commit is contained in:
Filipe Freire 2023-01-17 15:55:39 +00:00 committed by GitHub
parent fc51f7a3cb
commit b7028eb62a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 3 deletions

View File

@ -42,3 +42,30 @@ test('can render schema and send GraphQL requests', async ({ app, page }) => {
});
await expect(responseBody).toContainText('"bearer": "Gandalf"');
});
test('can send GraphQL requests after editing and prettifying query', async ({ app, page }) => {
test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');
// Create a new the project
await page.click('[data-testid="project"]');
await page.click('text=Create');
const text = await loadFixture('graphql.yaml');
await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
await page.click('button:has-text("Clipboard")');
await page.click('text=CollectionSmoke GraphQLjust now');
await page.click('button:has-text("POSTGQLGraphQL request")');
// Edit and prettify query
await page.locator('pre[role="presentation"]:has-text("hello,")').click();
await page.locator('.app').press('Enter');
await page.locator('text=Prettify GraphQL').click();
await page.click('[data-testid="request-pane"] >> text=Send');
const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
await expect(statusTag).toContainText('200 OK');
const responseBody = page.locator('[data-testid="response-pane"] >> [data-testid="CodeEditor"]:visible', {
has: page.locator('.CodeMirror-activeline'),
});
await expect(responseBody).toContainText('"bearer": "Gandalf"');
});

View File

@ -36,6 +36,34 @@ import { Toolbar } from '../../key-value-editor/key-value-editor';
import { useDocBodyKeyboardShortcuts } from '../../keydown-binder';
import { TimeFromNow } from '../../time-from-now';
function getGraphQLContent(body: GraphQLBody, query?: string, operationName?: string, variables?: string): string {
// the body object is one dimensional, so we don't need to worry about shallow copying.
const { query: originalQuery, ...optionalProps } = body;
const content: GraphQLBody = { query: originalQuery };
if (optionalProps.operationName) {
content.operationName = optionalProps.operationName;
}
if (optionalProps.variables) {
content.variables = optionalProps.variables;
}
if (query) {
content.query = query;
}
if (operationName) {
content.operationName = operationName;
}
if (variables) {
content.variables = variables;
}
return JSON.stringify(content);
}
const isOperationDefinition = (def: DefinitionNode): def is OperationDefinitionNode => def.kind === Kind.OPERATION_DEFINITION;
const fetchGraphQLSchemaForRequest = async ({
@ -230,13 +258,16 @@ export const GraphQLEditor: FC<Props> = ({
beautifyRequestBody,
});
const changeOperationName = (operationName: string) => {
onChange(JSON.stringify({ ...state.body, operationName }));
const content = getGraphQLContent(state.body, undefined, operationName);
onChange(content);
setState(prevState => ({ ...prevState, body: { ...prevState.body, operationName } }));
};
const changeVariables = (variablesInput: string) => {
try {
const variables = JSON.parse(variablesInput || '{}');
onChange(JSON.stringify({ ...state.body, variables }));
const content = getGraphQLContent(state.body, undefined, operationName, variables);
onChange(content);
setState(state => ({
...state,
body: { ...state.body, variables },
@ -261,7 +292,9 @@ export const GraphQLEditor: FC<Props> = ({
operationName = operations[oldPostion] || operations[0] || '';
}
}
onChange(JSON.stringify({ ...state.body, query, operationName }));
const content = getGraphQLContent(state.body, query);
onChange(content);
setState(state => ({
...state,