test umd build only on ci, locally test cdn.ts

graphql · Aug 7, 2024 · ed713af · ed713af
1 parent d34246e
commit ed713af
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 60 deletions.
diff --git a/packages/graphiql/cypress.config.ts b/packages/graphiql/cypress.config.ts
@@ -1,8 +1,10 @@
 import { defineConfig } from 'cypress';
 
+const PORT = process.env.CI === 'true' ? 8080 : 5173;
+
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://localhost:8080',
+    baseUrl: `http://localhost:${PORT}`,
   },
   video: false,
   viewportWidth: 1920,

diff --git a/packages/graphiql/index.html b/packages/graphiql/index.html
@@ -22,22 +22,20 @@
         font-size: 4rem;
       }
     </style>
-  </head>
-  <body>
-    <div id="graphiql">
-      <div class="loading">Loading…</div>
-    </div>
+    <!--umd-replace-start-->
     <script type="module">
       import React from 'react';
       import ReactDOM from 'react-dom/client';
       import GraphiQL from './src/cdn';
 
-      Object.assign(globalThis, {
-        React,
-        ReactDOM,
-        GraphiQL,
-      });
+      Object.assign(globalThis, { React, ReactDOM, GraphiQL });
     </script>
+    <!--umd-replace-end-->
+  </head>
+  <body>
+    <div id="graphiql">
+      <div class="loading">Loading…</div>
+    </div>
     <script type="module" src="resources/renderExample.js"></script>
   </body>
 </html>
diff --git a/packages/graphiql/package.json b/packages/graphiql/package.json
@@ -32,7 +32,7 @@
     }
   },
   "scripts": {
-    "cypress-open": "yarn e2e-server 'cypress open'",
+    "cypress-open": "yarn dev 'cypress open'",
     "build": "vite build && UMD=true vite build",
     "dev": "concurrently 'cross-env PORT=8080 node test/e2e-server' vite",
     "e2e": "yarn e2e-server 'cypress run'",

diff --git a/packages/graphiql/resources/dev.html b/packages/graphiql/resources/dev.html
diff --git a/packages/graphiql/test/e2e-server.js b/packages/graphiql/test/e2e-server.js
@@ -7,8 +7,9 @@
 
 /* eslint-disable no-console */
 const { createServer } = require('node:http');
-const express = require('express');
+const fs = require('node:fs');
 const path = require('node:path');
+const express = require('express');
 const { createHandler } = require('graphql-http/lib/use/express');
 const { GraphQLError } = require('graphql');
 const schema = require('./schema');
@@ -35,17 +36,43 @@ app.post('/graphql-error/graphql', (_req, res, next) => {
   next();
 });
 
-const IS_DEV = process.env.npm_lifecycle_script.endsWith(' vite');
+// On CI we test the UMD build
+if (process.env.CI === 'true') {
+  const indexHtml = fs.readFileSync(
+    path.join(__dirname, '..', 'index.html'),
+    'utf8',
+  );
+  const start = '<!--umd-replace-start-->';
+  const end = '<!--umd-replace-end-->';
+  const contentToReplace = indexHtml.slice(
+    indexHtml.indexOf(start),
+    indexHtml.indexOf(end) + end.length,
+  );
+
+  const indexHtmlWithUmd = indexHtml.replace(
+    contentToReplace,
+    /* HTML */ `
+      <script
+        crossorigin
+        src="https://unpkg.com/react@18/umd/react.development.js"
+      ></script>
+      <script
+        crossorigin
+        src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
+      ></script>
+      <link href="/dist/style.css" rel="stylesheet" />
+      <script src="/dist/index.umd.js"></script>
+    `,
+  );
 
-if (IS_DEV) {
   app.get('/', (req, res) => {
-    res.redirect('http://localhost:5173');
+    res.send(indexHtmlWithUmd);
   });
+  app.use(express.static(path.join(__dirname, '..')));
 } else {
   app.get('/', (req, res) => {
-    res.sendFile(path.resolve(__dirname, '../resources/dev.html'));
+    res.redirect('http://localhost:5173');
   });
-  app.use(express.static(path.resolve(__dirname, '../')));
 }
 
 // messy but it allows close