tests: check for console.{error, log, warn} during initial loading (#426)

Author: IvanGoncharov

example/webpack/package.json

@@ -2,7 +2,7 @@
   "private": "true",
   "description": "An example using GraphQL-Voyager",
   "scripts": {
-    "start": "webpack-dev-server --config webpack.config.js --mode=development",
+    "start": "webpack-dev-server --config webpack.config.js --mode=production",
     "test": "tsc"
   },
   "dependencies": {

example/webpack/webpack.config.js

@@ -4,11 +4,12 @@ module.exports = {
   devServer: {
     port: 9090,
     allowedHosts: 'all',
-    static: {
-      directory: __dirname,
-    },
-    liveReload: true,
+    static: { directory: __dirname },
+    // needed to prevent info messages during integration tests
+    client: { logging: 'warn' },
   },
+  // disable hints since Voyager is too big :(
+  performance: { hints: false },
   resolve: {
     extensions: ['.mjs', '.ts', '.tsx', '.js'],
   },

tests/PageObjectModel.ts

@@ -11,6 +11,41 @@ export async function gotoVoyagerPage(
   page: Page,
   searchParams?: VoyagerURLParams,
 ) {
+  // Add error/console checkers before we open Voyager page to track errors during loading
+  page.on('pageerror', (error) => {
+    throw error;
+  });
+  page.on('requestfailed', (request) => {
+    throw new Error(request.url() + ' ' + request.failure()?.errorText);
+  });
+  page.on('response', (response) => {
+    if (response.status() != 200) {
+      throw new Error(
+        `${response.url()}: ${response.status()} ${response.statusText()}`,
+      );
+    }
+  });
+  page.on('console', (message) => {
+    const type = message.type();
+    const text = message.text();
+    const { url, lineNumber } = message.location();
+    const location = `${url}:${lineNumber}`;
+
+    switch (type) {
+      case 'timeEnd':
+        if (text.startsWith('graphql-voyager: Rendering SVG:')) {
+          return;
+        }
+        break;
+      case 'log':
+        if (text.startsWith('graphql-voyager: SVG cached')) {
+          return;
+        }
+        break;
+    }
+    throw new Error(`[${type.toUpperCase()}] at '${location}': ${text}`);
+  });
+
   const search = new URLSearchParams();
   if (searchParams?.url != null) {
     search.append('url', searchParams.url);
@@ -56,40 +91,6 @@ class PlaywrightVoyagerPage {
     });
 
     this.changeSchemaDialog = new PlaywrightChangeSchemaDialog(page);
-
-    page.on('pageerror', (error) => {
-      throw error;
-    });
-    page.on('requestfailed', (request) => {
-      throw new Error(request.url() + ' ' + request.failure()?.errorText);
-    });
-    page.on('response', (response) => {
-      if (response.status() != 200) {
-        throw new Error(
-          `${response.url()}: ${response.status()} ${response.statusText()}`,
-        );
-      }
-    });
-    page.on('console', (message) => {
-      const type = message.type();
-      const text = message.text();
-      const { url, lineNumber } = message.location();
-      const location = `${url}:${lineNumber}`;
-
-      switch (type) {
-        case 'timeEnd':
-          if (text.startsWith('graphql-voyager: Rendering SVG:')) {
-            return;
-          }
-          break;
-        case 'log':
-          if (text.startsWith('graphql-voyager: SVG cached')) {
-            return;
-          }
-          break;
-      }
-      throw new Error(`[${type.toUpperCase()}] at '${location}': ${text}`);
-    });
   }
 
   async waitForGraphToBeLoaded(): Promise<void> {

webpack.config.ts

@@ -15,9 +15,8 @@ const BANNER = `GraphQL Voyager - Represent any GraphQL API as an interactive gr
 
 const baseConfig: webpack.Configuration = {
   devtool: 'source-map',
-  performance: {
-    hints: false,
-  },
+  // disable hints since Voyager is too big :(
+  performance: { hints: false },
   resolve: {
     extensions: ['.ts', '.tsx', '.mjs', '.js', '.json', '.css', '.svg'],
     alias: { '../../worker': '../../worker-dist' },