react-leaflet-deflate 3.1.1 → 3.2.0

package/playwright.config.js

@@ -0,0 +1,17 @@
+const { defineConfig } = require('@playwright/test');
+
+module.exports = defineConfig({
+  testDir: './tests/e2e',
+  testMatch: '**/*.spec.js',
+  use: {
+    baseURL: 'http://127.0.0.1:4173',
+    browserName: 'chromium',
+    headless: true,
+  },
+  webServer: {
+    command: 'npm run test:e2e:build && node tests/e2e/server.js',
+    url: 'http://127.0.0.1:4173',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
+});

package/tests/e2e/deflate.spec.js

@@ -0,0 +1,48 @@
+const { test, expect } = require('@playwright/test');
+
+async function zoomTo12(page) {
+  const zoomOutput = page.getByTestId('zoom');
+
+  for (let zoom = 5; zoom <= 12; zoom += 1) {
+    await page.locator('.leaflet-control-zoom-in').click();
+    await expect(zoomOutput).toHaveText(String(zoom));
+  }
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+  await expect(page.getByRole('heading', { name: 'Deflate fixture' })).toBeVisible();
+});
+
+test('deflates small features and opens their feature popup when zoomed in', async ({ page }) => {
+  await expect(page.locator('.leaflet-marker-icon')).toHaveCount(1);
+  await zoomTo12(page);
+
+  const features = page.locator('.leaflet-interactive');
+  await expect(features).toHaveCount(3);
+  await features.first().click();
+  await expect(page.locator('.leaflet-popup-content')).toContainText('Feature #1');
+});
+
+test('toggles marker clustering on the map', async ({ page }) => {
+  const clusterCheckbox = page.getByRole('checkbox', { name: 'Marker clustering' });
+  await expect(clusterCheckbox).toBeChecked();
+  await expect(page.locator('.marker-cluster')).toBeVisible();
+
+  await clusterCheckbox.uncheck();
+
+  await expect(page.locator('.marker-cluster')).toHaveCount(0);
+  await expect(page.locator('.leaflet-marker-icon')).toHaveCount(3);
+});
+
+test('applies minimum-size and data-set changes', async ({ page }) => {
+  await zoomTo12(page);
+  await expect(page.locator('.leaflet-interactive')).toHaveCount(3);
+
+  await page.getByRole('spinbutton', { name: 'Minimum size' }).fill('1000');
+  await expect(page.locator('.leaflet-marker-icon')).toHaveCount(3);
+
+  await page.getByRole('combobox', { name: 'GeoJSON data set' }).selectOption('2');
+  await expect(page.getByTestId('dataset')).toHaveText('Data set 2');
+  await expect(page.locator('.leaflet-marker-icon')).toHaveCount(1);
+});

package/tests/e2e/empty-module.js

@@ -0,0 +1 @@
+export {};

package/tests/e2e/fixture.jsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { MapContainer, useMap } from 'react-leaflet';
+import Deflate from '../../src';
+
+const dataSets = {
+  1: {
+    type: 'FeatureCollection',
+    features: [
+      [-0.06, -0.02, 1],
+      [0, 0.02, 2],
+      [0.06, -0.02, 3],
+    ].map(([longitude, latitude, id]) => ({
+      type: 'Feature',
+      properties: { id },
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[
+          [longitude - 0.025, latitude - 0.025],
+          [longitude + 0.025, latitude - 0.025],
+          [longitude + 0.025, latitude + 0.025],
+          [longitude - 0.025, latitude + 0.025],
+          [longitude - 0.025, latitude - 0.025],
+        ]],
+      },
+    })),
+  },
+  2: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: { id: 9 },
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[
+          [0.01, 0.01],
+          [0.04, 0.01],
+          [0.04, 0.04],
+          [0.01, 0.04],
+          [0.01, 0.01],
+        ]],
+      },
+    }],
+  },
+};
+
+function ZoomReporter() {
+  const map = useMap();
+
+  React.useEffect(() => {
+    const zoomOutput = document.querySelector('[data-testid="zoom"]');
+    const reportZoom = () => {
+      zoomOutput.textContent = String(map.getZoom());
+    };
+
+    map.on('zoomend', reportZoom);
+    reportZoom();
+
+    return () => map.off('zoomend', reportZoom);
+  }, [map]);
+
+  return null;
+}
+
+function App() {
+  const [markerCluster, setMarkerCluster] = useState(true);
+  const [minSize, setMinSize] = useState(20);
+  const [dataSet, setDataSet] = useState('1');
+
+  return <>
+    <h1>Deflate fixture</h1>
+    <div className="controls">
+      <label>
+        <input
+          aria-label="Marker clustering"
+          type="checkbox"
+          checked={markerCluster}
+          onChange={(event) => setMarkerCluster(event.target.checked)}
+        />
+        Marker clustering
+      </label>
+      <label>
+        Minimum size
+        <input
+          aria-label="Minimum size"
+          type="number"
+          value={minSize}
+          onChange={(event) => setMinSize(Number(event.target.value))}
+        />
+      </label>
+      <label>
+        GeoJSON data set
+        <select
+          aria-label="GeoJSON data set"
+          value={dataSet}
+          onChange={(event) => setDataSet(event.target.value)}
+        >
+          <option value="1">Data set 1</option>
+          <option value="2">Data set 2</option>
+        </select>
+      </label>
+    </div>
+    <output data-testid="dataset">Data set {dataSet}</output>
+    <output data-testid="zoom">4</output>
+    <MapContainer center={[0, 0]} zoom={4} minZoom={1} maxZoom={22} className="map">
+      <ZoomReporter />
+      <Deflate
+        data={dataSets[dataSet]}
+        minSize={minSize}
+        markerCluster={markerCluster}
+        onEachFeature={(feature, layer) => {
+          layer.bindPopup(`Feature #${feature.properties.id}`);
+          layer.bindTooltip(`Feature #${feature.properties.id}`);
+        }}
+      />
+    </MapContainer>
+  </>;
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);

package/tests/e2e/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>react-leaflet-deflate test fixture</title>
+    <link rel="stylesheet" href="/leaflet/leaflet.css">
+    <link rel="stylesheet" href="/markercluster/MarkerCluster.css">
+    <link rel="stylesheet" href="/markercluster/MarkerCluster.Default.css">
+    <style>
+      body { font-family: sans-serif; margin: 16px; }
+      .controls { display: flex; gap: 16px; margin-bottom: 12px; }
+      .map { height: 500px; width: 800px; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/fixture.js"></script>
+  </body>
+</html>

package/tests/e2e/server.js

@@ -0,0 +1,42 @@
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const root = path.resolve(__dirname, '../..');
+const routes = {
+  '/': [path.join(__dirname, 'index.html'), 'text/html; charset=utf-8'],
+  '/debug.html': [path.join(root, 'example/debug.html'), 'text/html; charset=utf-8'],
+  '/src/Deflate.jsx': [path.join(root, 'src/Deflate.jsx'), 'text/javascript; charset=utf-8'],
+  '/debug/empty-module.js': [path.join(__dirname, 'empty-module.js'), 'text/javascript; charset=utf-8'],
+  '/fixture.js': [path.join(root, '.e2e-build', 'fixture.js'), 'text/javascript; charset=utf-8'],
+  '/leaflet/leaflet.css': [path.join(root, 'node_modules/leaflet/dist/leaflet.css'), 'text/css; charset=utf-8'],
+  '/markercluster/MarkerCluster.css': [path.join(root, 'node_modules/leaflet.markercluster/dist/MarkerCluster.css'), 'text/css; charset=utf-8'],
+  '/markercluster/MarkerCluster.Default.css': [path.join(root, 'node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css'), 'text/css; charset=utf-8'],
+};
+
+const server = http.createServer((request, response) => {
+  const pathname = new URL(request.url, 'http://127.0.0.1').pathname;
+  const imageMatch = pathname.match(/^\/leaflet\/images\/([A-Za-z0-9._-]+)$/);
+  const route = imageMatch
+    ? [path.join(root, 'node_modules/leaflet/dist/images', imageMatch[1]), 'image/png']
+    : routes[pathname];
+
+  if (!route) {
+    response.writeHead(404);
+    response.end('Not found');
+    return;
+  }
+
+  fs.readFile(route[0], (error, contents) => {
+    if (error) {
+      response.writeHead(500);
+      response.end(error.message);
+      return;
+    }
+
+    response.writeHead(200, { 'Content-Type': route[1] });
+    response.end(contents);
+  });
+});
+
+server.listen(4173, '127.0.0.1');

package/webpack.e2e.config.js

@@ -0,0 +1,23 @@
+const path = require('path');
+
+module.exports = {
+  mode: 'development',
+  entry: path.resolve(__dirname, 'tests/e2e/fixture.jsx'),
+  output: {
+    path: path.resolve(__dirname, '.e2e-build'),
+    filename: 'fixture.js',
+    clean: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: 'babel-loader',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+};