tests: add integration test for webpack example (#327)

.gitignore

@@ -15,3 +15,4 @@
 /typings
 /test-results
 /playwright-report
+/graphql-voyager-*.tgz

docker-compose.yml

@@ -9,7 +9,15 @@ services:
       - ./worker-dist:/home/worker-dist
     stdin_open: true
     tty: true
+  serve-webpack-example:
+    build:
+      context: .
+      dockerfile: ./example/webpack/Dockerfile
+    stdin_open: true
+    tty: true
   test:
+    depends_on:
+      - serve-webpack-example
     build:
       context: .
       dockerfile: ./tests/Dockerfile

example/webpack/Dockerfile

@@ -0,0 +1,17 @@
+# syntax=docker/dockerfile:1
+
+FROM node:18
+
+WORKDIR /app
+
+COPY ./graphql-voyager-*.tgz graphql-voyager.tgz
+
+COPY ./example/webpack ./example/webpack
+
+WORKDIR example/webpack
+RUN npm install
+# FIXME
+# RUN npm test
+
+EXPOSE  9091
+CMD npm start

example/webpack/package.json

@@ -7,9 +7,8 @@
   },
   "dependencies": {
     "graphql": "16.5.0",
-    "graphql-voyager": "1.0.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "graphql-voyager": "../../graphql-voyager.tgz",
+    "react": "18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.29",

example/webpack/webpack.config.js

@@ -2,8 +2,8 @@ const path = require('node:path');
 
 module.exports = {
   devServer: {
-    https: true,
     port: 9090,
+    allowedHosts: 'all',
     static: {
       directory: __dirname,
     },

package.json

@@ -36,7 +36,7 @@
     "prettier": "prettier --cache --write --list-different . **/*.svg",
     "prettier:check": "prettier --cache --check . **/*.svg",
     "check:spelling": "cspell --cache --no-progress '**/*'",
-    "testonly": "npm run build:demo && docker-compose up --abort-on-container-exit --build test",
+    "testonly": "npm run build:demo && npm pack && docker-compose up --abort-on-container-exit --build test",
     "declarations": "tsc --emitDeclarationOnly -p tsconfig.lib.json"
   },
   "peerDependencies": {

playwright.config.ts

@@ -47,6 +47,18 @@ const config: PlaywrightTestConfig = {
         baseURL: 'http://localhost:9090',
       },
     },
+    {
+      name: 'WebpackExample',
+      testMatch: 'webpack.spec.ts',
+      use: {
+        ...devices['Desktop Chrome'],
+        trace: 'on',
+        viewport: { width: 1920, height: 1001 },
+
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        baseURL: 'http://serve-webpack-example:9090',
+      },
+    },
   ],
   outputDir: 'test-results/',
   webServer: {

tests/webpack.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test';
+
+import { gotoVoyagerPage } from './PageObjectModel';
+
+test('open webpack example', async ({ page }) => {
+  const voyagerPage = await gotoVoyagerPage(page);
+
+  await voyagerPage.waitForGraphToBeLoaded();
+  await expect(voyagerPage.page).toHaveScreenshot('loaded-webpack-example.png');
+});