add tests for graphql playground and areadme

deno-libs · Nov 9, 2023 · 790d275 · 790d275
1 parent c475a6e
commit 790d275
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 18 deletions.
diff --git a/deno.lock b/deno.lock
diff --git a/graphiql/README.md b/graphiql/README.md
@@ -0,0 +1,26 @@
+# gql/graphiql
+
+[![][docs-badge]][docs]
+
+Tweaked version of
+[graphql-playground-html](https://github.com/graphql/graphql-playground/tree/main/packages/graphql-playground-html)
+without Electron and React environments.
+
+## Get Started
+
+```ts
+import { renderPlaygroundPage } from 'https://deno.land/x/[email protected]/graphiql/render.ts'
+
+const playground = renderPlaygroundPage({
+  endpoint: '/graphql',
+})
+
+return new Response(playground, {
+  headers: new Headers({
+    'Content-Type': 'text/html',
+  }),
+})
+```
+
+[docs-badge]: https://img.shields.io/github/v/release/deno-libs/gql?label=Docs&logo=deno&style=for-the-badge&color=DD3FAA
+[docs]: https://doc.deno.land/https/deno.land/x/gql/graphiql/render.ts
diff --git a/graphiql/render.ts b/graphiql/render.ts
@@ -5,8 +5,7 @@ export interface MiddlewareOptions {
   endpoint?: string
   subscriptionEndpoint?: string
   workspaceName?: string
-  env?: any
-  config?: any
+  config?: unknown
   settings?: ISettings
   schema?: IntrospectionResult
   tabs?: Tab[]
@@ -63,7 +62,6 @@ export interface IntrospectionResult {
 export interface RenderPageOptions extends MiddlewareOptions {
   version?: string
   cdnUrl?: string
-  env?: any
   title?: string
   faviconUrl?: string | null
 }
@@ -83,8 +81,6 @@ const CONFIG_ID = 'playground-config'
 
 const filter = (val: string) => {
   return filterXSS(val, {
-    // @ts-ignore
-    whiteList: [],
     stripIgnoreTag: true,
     stripIgnoreTagBody: ['script'],
   })
@@ -151,7 +147,6 @@ export function renderPlaygroundPage(options: RenderPageOptions) {
     extendedOptions.configString = JSON.stringify(options.config, null, 2)
   }
   if (!extendedOptions.endpoint && !extendedOptions.configString) {
-    /* tslint:disable-next-line */
     console.warn(
       `WARNING: You didn't provide an endpoint and don't have a .graphqlconfig. Make sure you have at least one of them.`,
     )
@@ -167,11 +162,7 @@ export function renderPlaygroundPage(options: RenderPageOptions) {
     <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro:400,700" rel="stylesheet">
     <title>${extendedOptions.title || 'GraphQL Playground'}</title>
-    ${
-    extendedOptions.env === 'react' || extendedOptions.env === 'electron'
-      ? ''
-      : getCdnMarkup(extendedOptions)
-  }
+    ${getCdnMarkup(extendedOptions)}
   </head>
   <body>
     <style type="text/css">

diff --git a/graphiql/render_test.ts b/graphiql/render_test.ts
@@ -0,0 +1,34 @@
+import { describe, it } from 'https://deno.land/[email protected]/testing/bdd.ts'
+import { expect } from 'https://deno.land/x/[email protected]/mod.ts'
+import { renderPlaygroundPage } from './render.ts'
+
+describe('renderPlaygroundPage', () => {
+  it('supports custom CDNs', () => {
+    const html = renderPlaygroundPage({ cdnUrl: 'https://unpkg.com' })
+
+    expect(html).toContain(
+      `https://unpkg.com/graphql-playground-react/build/static/css/index.css`,
+    )
+    expect(html).toContain(
+      `https://unpkg.com/graphql-playground-react/build/favicon.png`,
+    )
+    expect(html).toContain(
+      `https://unpkg.com/graphql-playground-react/build/static/js/middleware.js`,
+    )
+  })
+  it('supports custom versions of graphql-playground-react', () => {
+    const html = renderPlaygroundPage({ version: '1.7.27' })
+
+    expect(html).toContain(
+      `jsdelivr.net/npm/[email protected]/build/favicon.png`,
+    )
+    expect(html).toContain(
+      `jsdelivr.net/npm/[email protected]/build/static/js/middleware.js`,
+    )
+  })
+  it('supports custom GraphQL endpoint', () => {
+    const html = renderPlaygroundPage({ endpoint: '/grafql' })
+
+    expect(html).toContain(`/grafql`)
+  })
+})
diff --git a/mod.ts b/mod.ts
@@ -5,6 +5,7 @@ import {
   Status,
   STATUS_TEXT,
 } from './deps.ts'
+import { accepts } from 'https://deno.land/[email protected]/http/negotiation.ts'
 import { GQLOptions } from './types.ts'
 
 function toRequest<Req = Request, Ctx = unknown>(
@@ -38,10 +39,8 @@ export function GraphQLHTTP<
 
   return async function handleRequest(req: Request): Promise<Response> {
     try {
-      const accept = req.headers.get('Accept') || ''
-
       if (
-        req.method === 'GET' && graphiql && accept.split(';')[0] === 'text/html'
+        req.method === 'GET' && graphiql && accepts(req)[0] === 'text/html'
       ) {
         const urlQuery = req.url.substring(req.url.indexOf('?'))
         const queryParams = new URLSearchParams(urlQuery)

diff --git a/mod_test.ts b/mod_test.ts
@@ -1,11 +1,11 @@
 import { superdeno } from 'https://deno.land/x/[email protected]/mod.ts?target=deno'
-import { describe, it, run } from 'https://deno.land/x/[email protected]/mod.ts'
+import { describe, it } from 'https://deno.land/[email protected]/testing/bdd.ts'
 import {
   buildSchema,
   GraphQLObjectType,
   GraphQLSchema,
   GraphQLString,
-} from 'npm:graphql@16.6'
+} from 'npm:graphql@16.8.1'
 import { GraphQLHTTP } from './mod.ts'
 
 const schema = buildSchema(`
@@ -264,5 +264,3 @@ describe('GraphQLHTTP({ schema, rootValue })', () => {
     })
   })
 })
-
-run()