test: quick node and browser e2e test after build (#2550)

* test: quick node and browser e2e test after build

* ci: ensure browsers are available on CI

Author: axe312ger

.circleci/config.yml

@@ -2,11 +2,12 @@ version: 2.1
 orbs:
   vault: contentful/vault@1
   node: circleci/[email protected]
+  browser-tools: circleci/[email protected]
 
 executors:
   docker-with-node:
     docker:
-      - image: cimg/node:18.19
+      - image: 'cimg/node:18.20.1-browsers'
     working_directory: ~/build-and-test
 
 commands:

eslint.config.mjs

@@ -2,10 +2,20 @@
 
 import eslint from '@eslint/js'
 import tseslint from 'typescript-eslint'
+import globals from 'globals'
 
 export default tseslint.config(
   eslint.configs.recommended,
   tseslint.configs.recommended,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+        createClient: true,
+      },
+    },
+  },
   // Library
   {
     files: ['lib/**/*'],

package-lock.json

@@ -26,6 +26,7 @@
   "scripts": {
     "clean": "rimraf dist",
     "build": "npm run clean && npm run build:modules && npm run build:standalone && npm run build:types",
+    "postbuild": "npm run test:demo-projects",
     "build:modules": "BABEL_ENV=modules babel --extensions \".ts\" --extensions \".js\" lib -d dist/es-modules/",
     "build:standalone": "webpack && NODE_ENV=production webpack",
     "build:standalone:log": "NODE_ENV=production WEBPACK_MODE=log webpack --json --profile --progress > webpack-build-log.json && webpack-bundle-analyzer webpack-build-log.json",
@@ -48,6 +49,9 @@
     "test:browser": "npx playwright install && npx vitest --project browser-unit --run && npx vitest --project browser-integration --run",
     "test:version": "grep -r \"0.0.0-determined-by-semantic-release\" ./dist > /dev/null && echo \"version 0.0.0-determined-by-semantic-release found in output\" && exit 1 || exit 0",
     "test:size": "size-limit",
+    "test:demo-projects": "npm run test:demo-node && npm run test:demo-browser",
+    "test:demo-node": "rimraf ./test/output-integration/node/node-modules && npm --prefix ./test/output-integration/node ci && vitest --run ./test/output-integration/node",
+    "test:demo-browser": "rimraf ./test/output-integration/browser/node-modules && npm --prefix ./test/output-integration/browser ci && npm --prefix ./test/output-integration/browser run test",
     "test:prepush": "npm run build && npm run test:unit && npm run test:size",
     "prettier": "prettier --write '**/*.{jsx,js,ts,tsx}'",
     "prettier:check": "prettier --check '**/*.{jsx,js,ts,tsx}'",
@@ -65,7 +69,8 @@
     "@contentful/rich-text-types": "^16.6.1",
     "axios": "^1.7.9",
     "contentful-sdk-core": "^9.0.1",
-    "fast-copy": "^3.0.0"
+    "fast-copy": "^3.0.0",
+    "globals": "^15.15.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.6",

package.json

@@ -0,0 +1,2 @@
+public/contentful*.js
+public/env.js

test/output-integration/browser/.gitignore

@@ -0,0 +1,10 @@
+## Browser demo
+
+This small demo application shows how the contentful-management.js library can be used in a browser client.
+Furthermore it is also used to test if the build bundles can be correctly accessed by a client.
+
+To run the test execute:
+
+```sh
+npm install && npm run test
+```