Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: GraphQL Playground HTML #9058

Conversation

Tyrese-FullStackGenius
Copy link

@Tyrese-FullStackGenius Tyrese-FullStackGenius commented Mar 28, 2024

Pull Request

Fixed double quoting issue with "${JSON.stringify()}".

Issue

#9057

Closes: #9057

Approach

Remove quotes outside JSON.stringify()

Fixed double quoting issue with "${JSON.stringify()}".

Signed-off-by: Tyrese, Full Stack Genius <133923231+Tyrese-FullStackGenius@users.noreply.github.com>
Copy link

I will reformat the title to use the proper commit message syntax.

@parse-github-assistant parse-github-assistant bot changed the title fix: graphql playground html fix: Graphql playground html Mar 28, 2024
Copy link

parse-github-assistant bot commented Mar 28, 2024

Thanks for opening this pull request!

@Tyrese-FullStackGenius Tyrese-FullStackGenius changed the title fix: Graphql playground html fix: GraphQL Playground HTML Mar 28, 2024
@mtrezza
Copy link
Member

mtrezza commented Mar 28, 2024

Is it possible to add a test for this?

Copy link

codecov bot commented Mar 28, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.78%. Comparing base (33c06b2) to head (389b1f0).
Report is 1 commits behind head on alpha.

❗ Current head 389b1f0 differs from pull request most recent head 16f642c. Consider uploading reports for the commit 16f642c to get more accurate results

Additional details and impacted files
@@            Coverage Diff             @@
##            alpha    #9058      +/-   ##
==========================================
+ Coverage   84.95%   93.78%   +8.83%     
==========================================
  Files         186      186              
  Lines       14687    14687              
==========================================
+ Hits        12477    13774    +1297     
+ Misses       2210      913    -1297     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@Tyrese-FullStackGenius
Copy link
Author

Is it possible to add a test for this?

it's frontend bug, so I think you have to run the server to test.

@mtrezza
Copy link
Member

mtrezza commented Mar 28, 2024

Which server are you referring to?

@Tyrese-FullStackGenius
Copy link
Author

parse-server:7.0.0

@mtrezza
Copy link
Member

mtrezza commented Mar 28, 2024

This is parse sever. Running it is part of the testing.

@Tyrese-FullStackGenius
Copy link
Author

Tyrese-FullStackGenius commented Mar 28, 2024

understand, this is server start code:

const express = require("express");
const { ParseServer, ParseGraphQLServer } = require("parse-server");

const app = express();

const parseServer = new ParseServer({
  databaseURI:
    "mongodb+srv://tyrese3915:<password>@cluster0.xksqcbp.mongodb.net/parse-test",
  appId: "tyrese-app-1",
  javaScriptKey: "tyrese-secret-javascript-key",
  masterKey: "tyrese-secret-master-key",
  serverURL: "http://localhost:1337/parse",
  publicServerURL: "http://localhost:1337/parse",
});

const parseGraphQLServer = new ParseGraphQLServer(parseServer, {
  graphQLPath: "/graphql",
  playgroundPath: "/playground",
});

app.use("/parse", parseServer.app); // (Optional) Mounts the REST API
parseGraphQLServer.applyGraphQL(app); // Mounts the GraphQL API
parseGraphQLServer.applyPlayground(app); // (Optional) Mounts the GraphQL Playground - do NOT use in Production

parseServer
  .start()
  .then((res) => {
    app.listen(1337, () => {
      console.log("REST API running on http://localhost:1337/parse");
      console.log("GraphQL API running on http://localhost:1337/graphql");
      console.log(
        "GraphQL Playground running on http://localhost:1337/playground",
      );
    });
  })
  .catch((err) => {
    console.error(err);
  });

@mtrezza
Copy link
Member

mtrezza commented Mar 28, 2024

If you are familiar with testing frameworks in nodejs / js it should be easy for you to add. You could just take a look at the existing tests and add one for this bug.

Note that you may have exposed your DB access credentials in the comment above.

@Tyrese-FullStackGenius
Copy link
Author

where is test code example?

@mtrezza
Copy link
Member

mtrezza commented Mar 28, 2024

In /specs

@Tyrese-FullStackGenius
Copy link
Author

ok

@Tyrese-FullStackGenius
Copy link
Author

Tyrese-FullStackGenius commented Mar 28, 2024

@mtrezza I added test code to check render using puppeteer, and tested with that.

@@ -582,6 +583,26 @@ describe('ParseGraphQLServer', () => {
});
});

describe("Playground Render", () => {
it("should properly render the playground without JavaScript errors", async () => {
Copy link
Member

@mtrezza mtrezza Mar 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't it be much simpler to check the response from http://localhost:13377/playground for the correct headers? Not sure what effect initialEndpoint has and how that could be checked.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but I think rendering checks are good for the the future because if there are other errors that method can't catch them.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how do you think about it?

Copy link
Member

@mtrezza mtrezza Mar 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What errors specifically are you referring to? It would probably be more effective to have specific tests. A general "does it render a page" is very broad and doesn't check for anything specific.

In this specific bug we want to check for headers. I guess the test executes faster if you just check the headers in the response? Did you compare test run times?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any JavaScript rendering errors, such as script not found or other errors in the script;
It's using the script online, errors may occur if the online resource is updated.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated eslintrc and error is fixed

Copy link
Member

@mtrezza mtrezza Mar 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, the test you added was failing, it timed out.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you show me the full error? I can't see it.
I can't understand mongodb and postgres test why related to my code

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you open one of these failing jobs you can see the error.

@Tyrese-FullStackGenius Tyrese-FullStackGenius closed this by deleting the head repository Apr 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Playground is not working
2 participants