graphiql custom subscription url test added

fabiangfd · Oct 24, 2023 · e386d27 · e386d27
1 parent 5613a88
commit e386d27
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 0 deletions.
diff --git a/tests/explorers/snapshots/snap_test_explorers.py b/tests/explorers/snapshots/snap_test_explorers.py
@@ -148,6 +148,99 @@
 </html>
 '''
 
+snapshots['test_graphiql_explorer_with_custom_subscription_url 1'] = '''<!--
+ *  Copyright (c) 2021 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
+    <title>Ariadne GraphQL</title>
+    <style>
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #graphiql {
+        height: 100vh;
+      }
+
+      #graphiql-loading {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        color: #545454;
+        font-size: 1.5em;
+        font-family: sans-serif;
+        font-weight: bold;
+      }
+    </style>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/graphiql.min.css" />
+    
+  </head>
+
+  <body>
+    <div id="graphiql">
+      <div id="graphiql-loading">Loading Ariadne GraphQL...</div>
+    </div>
+
+    <script
+      crossorigin
+      src="https://unpkg.com/react@17/umd/react.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
+    ></script>
+
+    <script
+      crossorigin
+      src="https://unpkg.com/[email protected]/graphiql.min.js"
+    ></script>
+
+    
+
+    <script>
+      var fetcher = GraphiQL.createFetcher({
+        url: window.location.href,
+        
+        subscriptionUrl: "ws://custom_url",
+        
+      });
+
+      function AriadneGraphiQL() {
+        var [query, setQuery] = React.useState(
+          \'#\\n# GraphiQL is an in -browser tool for writing, validating, and\\n# testing GraphQL queries.\\n#\\n# Type queries into this side of the screen, and you will see intelligent\\n# typeaheads aware of the current GraphQL type schema and live syntax and\\n# validation errors highlighted within the text.\\n#\\n# GraphQL queries typically start with a "{" character. Lines that start\\n# with a # are ignored.\\n#\\n# An example GraphQL query might look like:\\n#\\n#     {\\n#       field(arg: "value") {\\n#         subField\\n#\\n#       }\\n#\\n#     }\\n#\\n# Keyboard shortcuts:\\n#\\n#   Prettify query: Shift - Ctrl - P(or press the prettify button)\\n#\\n#  Merge fragments: Shift - Ctrl - M(or press the merge button)\\n#\\n#        Run Query: Ctrl - Enter(or press the play button)\\n#\\n#    Auto Complete: Ctrl - Space(or just start typing)\\n#\',
+        );
+        
+        return React.createElement(GraphiQL, {
+          fetcher: fetcher,
+          defaultEditorToolsVisibility: true,
+          
+          query: query,
+          onEditQuery: setQuery,
+        });
+      }
+
+      ReactDOM.render(
+        React.createElement(AriadneGraphiQL),
+        document.getElementById('graphiql'),
+      );
+    </script>
+  </body>
+</html>
+'''
+
 snapshots['test_graphiql_explorer_produces_html 1'] = '''<!--
  *  Copyright (c) 2021 GraphQL Contributors
  *  All rights reserved.

diff --git a/tests/explorers/test_explorers.py b/tests/explorers/test_explorers.py
@@ -21,6 +21,11 @@ def test_graphiql_explorer_includes_explorer_plugin(snapshot):
     snapshot.assert_match(explorer.html(None))
 
 
+def test_graphiql_explorer_with_custom_subscription_url(snapshot):
+    explorer = ExplorerGraphiQL(subscription_url="ws://custom_url")
+    snapshot.assert_match(explorer.html(None))
+
+
 def test_playground_explorer_produces_html(snapshot):
     explorer = ExplorerPlayground()
     snapshot.assert_match(explorer.html(None))