Skip to content

Commit bec05d5

Browse files
usefulthinkusefulthink
committed
test: add bundler integration tests for vite, webpack, and rollup
Introduce bundler-specific test setups to ensure `@googlemaps/js-api-loader` works seamlessly with Vite, Webpack, and Rollup. Includes build scripts, configurations, and validation for production and development modes.
1 parent 742dc44 commit bec05d5

File tree

16 files changed

+461
-2
lines changed

16 files changed

+461
-2
lines changed

‎eslint.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { defineConfig } from "eslint/config";
66

77
export default defineConfig(
88
{
9-
ignores: ["dist/", "node_modules/", "src/bootstrap.js"],
9+
ignores: ["**/dist/", "**/node_modules/", "src/bootstrap.js"],
1010
},
1111
{
1212
languageOptions: {

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@
3434
"scripts": {
3535
"prepack": "npm run build",
3636
"lint": "eslint .",
37-
"test": "NODE_OPTIONS='--experimental-vm-modules --disable-warning=ExperimentalWarning' jest ./src",
37+
"test": "npm run lint && npm run test:unit && npm run test:bundlers",
38+
"test:unit": "NODE_OPTIONS='--experimental-vm-modules --disable-warning=ExperimentalWarning' jest ./src",
39+
"test:bundlers": "cd test-bundlers && ./test-all.sh",
3840
"build": "rm -rf ./dist && rollup -c",
3941
"format": "eslint . --fix"
4042
},

‎test-bundlers/.gitignore‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Dependencies
2+
node_modules/
3+
package-lock.json
4+
5+
# Build outputs
6+
*/dist/
7+
*/build.log
8+
9+
# Tarball
10+
*.tgz

‎test-bundlers/README.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# Bundler Integration Tests
2+
3+
This directory contains integration tests to verify that
4+
`@googlemaps/js-api-loader` works correctly with popular JavaScript bundlers
5+
without requiring any configuration from consumers.
6+
7+
The @googlemaps/js-api-loader library has a development-mode (based on
8+
`process.env.NODE_ENV` checks) that toggle detailed warning messages during
9+
development.
10+
11+
The tests in this directory ensure that some of the most popular bundlers
12+
correctly handle the development mode in a default configuration.
13+
14+
1. **Vite** - Correctly replaces `process.env.NODE_ENV` via its built-in
15+
`define` config
16+
2. **Webpack** - Correctly replaces it via DefinePlugin (default behavior)
17+
3. **Rollup** - Works with standard `@rollup/plugin-replace` configuration
18+
19+
The tests verify both modes:
20+
21+
- **Production mode**: `process.env.NODE_ENV` is replaced, dev warnings are
22+
removed
23+
- **Development mode**: `process.env.NODE_ENV` is replaced with `"development"`,
24+
dev warnings are preserved
25+
26+
## Running Tests
27+
28+
```bash
29+
./test-all.sh
30+
```
31+
32+
### Individual bundler:
33+
34+
```bash
35+
cd vite-test
36+
npm install
37+
npm install $(npm pack --silent ../../)
38+
npm run build
39+
```
40+
41+
## What Each Test Does
42+
43+
### Vite (`vite-test/`)
44+
45+
- Uses Vite's zero-config setup
46+
- Relies on Vite's automatic `process.env.NODE_ENV` replacement
47+
- development mode is approximated by disabling minification and building with
48+
`NODE_ENV='development' vite build --mode development`
49+
50+
### Webpack (`webpack-test/`)
51+
52+
- Uses Webpack 5 with minimal config
53+
- Relies on DefinePlugin (enabled by default in production mode)
54+
55+
### Rollup (`rollup-test/`)
56+
57+
- Uses standard Rollup with `@rollup/plugin-replace`
58+
- Represents how users typically configure Rollup
59+
60+
## Expected Output
61+
62+
All tests should pass with:
63+
64+
```
65+
✓ All bundler tests passed!
66+
```
67+
68+
If any test fails, it means the library is shipping code that won't work
69+
correctly in that bundler without additional user configuration.

‎test-bundlers/rollup-test/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "rollup-test",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"build": "rollup -c",
8+
"build:dev": "rollup -c rollup.config.dev.js"
9+
},
10+
"devDependencies": {
11+
"@rollup/plugin-node-resolve": "^15.2.3",
12+
"@rollup/plugin-replace": "^5.0.5",
13+
"@rollup/plugin-terser": "^0.4.4",
14+
"rollup": "^4.6.1"
15+
},
16+
"dependencies": {
17+
"@googlemaps/js-api-loader": "file:../../googlemaps-js-api-loader-2.0.1.tgz"
18+
}
19+
}

‎test-bundlers/rollup-test/rollup.config.dev.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { nodeResolve } from "@rollup/plugin-node-resolve";
2+
import replace from "@rollup/plugin-replace";
3+
4+
export default {
5+
input: "src/index.js",
6+
output: {
7+
file: "dist/bundle.js",
8+
format: "esm",
9+
},
10+
plugins: [
11+
nodeResolve(),
12+
replace({
13+
preventAssignment: true,
14+
values: {
15+
"process.env.NODE_ENV": JSON.stringify("development"),
16+
},
17+
}),
18+
// Note: No minification in dev mode
19+
],
20+
};

‎test-bundlers/rollup-test/rollup.config.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { nodeResolve } from "@rollup/plugin-node-resolve";
2+
import replace from "@rollup/plugin-replace";
3+
import terser from "@rollup/plugin-terser";
4+
5+
export default {
6+
input: "src/index.js",
7+
output: {
8+
file: "dist/bundle.js",
9+
format: "esm",
10+
},
11+
plugins: [
12+
nodeResolve(),
13+
replace({
14+
preventAssignment: true,
15+
values: {
16+
"process.env.NODE_ENV": JSON.stringify("production"),
17+
},
18+
}),
19+
terser(),
20+
],
21+
};

‎test-bundlers/rollup-test/src/index.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { importLibrary, setOptions } from "@googlemaps/js-api-loader";
2+
3+
// Configure the Google Maps API
4+
setOptions({
5+
apiKey: "YOUR_API_KEY",
6+
version: "weekly",
7+
});
8+
9+
// Initialize the map
10+
async function initMap() {
11+
const { Map } = await importLibrary("maps");
12+
13+
return new Map(document.getElementById("map"), {
14+
center: { lat: 37.7749, lng: -122.4194 },
15+
zoom: 12,
16+
});
17+
}
18+
19+
// Load markers
20+
async function addMarkers(map) {
21+
const { AdvancedMarkerElement } = await importLibrary("marker");
22+
23+
const marker = new AdvancedMarkerElement({
24+
position: { lat: 37.7749, lng: -122.4194 },
25+
title: "San Francisco",
26+
});
27+
marker.map = map;
28+
}
29+
30+
// Start the application
31+
initMap()
32+
.then((map) => addMarkers(map))
33+
.catch(console.error);

‎test-bundlers/test-all.sh‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
#!/bin/bash
2+
3+
# Test bundler compatibility for @googlemaps/js-api-loader
4+
# This script tests that the library works with various popular bundlers
5+
# without requiring any configuration from the user.
6+
7+
set -e # Exit on any error
8+
9+
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
10+
ROOT_DIR="$(dirname "$SCRIPT_DIR")"
11+
12+
echo "======================================"
13+
echo "Testing Bundler Compatibility"
14+
echo "======================================"
15+
echo ""
16+
17+
# Colors for output
18+
GREEN='\033[0;32m'
19+
RED='\033[0;31m'
20+
NC='\033[0m' # No Color
21+
22+
# Pack the library
23+
echo "📦 Packing library..."
24+
cd "$ROOT_DIR"
25+
TARBALL=$(npm pack --silent 2> /dev/null)
26+
echo " created: $TARBALL"
27+
echo ""
28+
29+
for bundler in vite webpack rollup ; do
30+
dir="$SCRIPT_DIR/${bundler}-test"
31+
32+
(
33+
cd $dir
34+
# Install dependencies
35+
echo " Installing dependencies for $bundler..."
36+
npm install --silent
37+
npm install --silent "../../$TARBALL"
38+
)
39+
done
40+
41+
echo ""
42+
43+
# Function to test a bundler in production mode
44+
test_bundler_prod() {
45+
local bundler=$1
46+
local dir="$SCRIPT_DIR/${bundler}-test"
47+
48+
cd "$dir"
49+
50+
echo "Testing $bundler (production)..."
51+
52+
# Run production build
53+
echo " Building (production)..."
54+
if npm run build > build.log 2>&1; then
55+
# Check for process.env.NODE_ENV references in actual code (not in strings/comments)
56+
# We pipe find to xargs to grep through all bundles at once.
57+
# The if condition checks the exit code of grep.
58+
if find dist -name "*.js" -type f -print0 | xargs -0 grep -qE "process\.env\.NODE_ENV|process\.env\\["; then
59+
echo -e " ${RED}✗ NUM_FAILED${NC} - Found process.env.NODE_ENV in bundle code"
60+
return 1
61+
fi
62+
63+
# Verify that importLibrary is still present (not tree-shaken)
64+
if ! find dist -name "*.js" -type f -exec grep -q "importLibrary" {} \;; then
65+
echo -e " ${RED}✗ NUM_FAILED${NC} - importLibrary was incorrectly tree-shaken"
66+
return 1
67+
fi
68+
69+
echo -e " ${GREEN}✓ PASSED${NC} - process.env replaced, bundle optimized"
70+
return 0
71+
else
72+
echo -e " ${RED}✗ NUM_FAILED${NC} - Build error"
73+
echo "~~~~ build log:"
74+
cat build.log
75+
echo "~~~~"
76+
77+
return 1
78+
fi
79+
}
80+
81+
# Function to test a bundler in development mode
82+
test_bundler_dev() {
83+
local bundler=$1
84+
local dir="$SCRIPT_DIR/${bundler}-test"
85+
86+
cd "$dir"
87+
88+
echo "Testing $bundler (development)..."
89+
90+
# Run development build
91+
echo " Building (development)..."
92+
rm -rf dist
93+
if npm run build:dev > build-dev.log 2>&1; then
94+
# Check that dev warning code is present in the bundle
95+
# We look for the actual console.warn message, not just the function definition.
96+
if find dist -name "*.js" -type f -print0 | xargs -0 grep -qE "console\.warn.*@googlemaps/js-api-loader"; then
97+
echo -e " ${GREEN}✓ PASSED${NC} - dev warnings preserved"
98+
return 0
99+
else
100+
echo -e " ${RED}✗ NUM_FAILED${NC} - dev warning code not found (dead code eliminated incorrectly)"
101+
cat build-dev.log
102+
return 1
103+
fi
104+
else
105+
echo -e " ${RED}✗ NUM_FAILED${NC} - Build error"
106+
cat build-dev.log
107+
return 1
108+
fi
109+
}
110+
111+
NUM_FAILED=0
112+
113+
# Production mode tests
114+
echo "========== PRODUCTION MODE =========="
115+
116+
for bundler in vite webpack rollup ; do
117+
echo ""
118+
test_bundler_prod $bundler || NUM_FAILED=$((NUM_FAILED + 1))
119+
done
120+
echo ""
121+
122+
# Development mode tests
123+
echo "========== DEVELOPMENT MODE =========="
124+
for bundler in vite webpack rollup ; do
125+
echo ""
126+
test_bundler_dev $bundler || NUM_FAILED=$((NUM_FAILED + 1))
127+
done
128+
echo ""
129+
130+
# Summary
131+
echo "======================================"
132+
if [ $NUM_FAILED -eq 0 ]; then
133+
echo -e "${GREEN}✓ All bundler tests passed!${NC}"
134+
exit 0
135+
else
136+
echo -e "${RED}✗ $NUM_FAILED bundler test(s) failed${NC}"
137+
exit 1
138+
fi

‎test-bundlers/vite-test/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite Test - Google Maps</title>
7+
<style>
8+
body,
9+
html {
10+
margin: 0;
11+
padding: 0;
12+
height: 100%;
13+
}
14+
#map {
15+
width: 100%;
16+
height: 100%;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<div id="map"></div>
22+
<script type="module" src="/src/main.js"></script>
23+
</body>
24+
</html>

0 commit comments

Comments
 (0)