Add test

Author: gjmooney

examples/contour.jGIS

@@ -1,39 +1,57 @@
 {
-  "filters": {
-    "feature": "mag",
-    "operator": ">",
-    "value": 1.0
-  },
+  "filters": [],
   "layerTree": [
-    "db57b9b7-6f8a-4e01-bb56-93dd9388dbed"
+    "e7981932-deb1-4dfa-903b-9ce5ad602b80",
+    "0f188a35-f6d5-4a0b-880c-06f5454f6e80"
   ],
   "layers": {
-    "db57b9b7-6f8a-4e01-bb56-93dd9388dbed": {
+    "0f188a35-f6d5-4a0b-880c-06f5454f6e80": {
+      "filters": [],
       "name": "Custom GeoJSON Layer",
       "parameters": {
-        "color": "#FF0000",
+        "color": "#865e3c",
         "opacity": 1.0,
-        "source": "4e6e4908-6723-4936-b6f0-23b9a837aae7",
+        "source": "e3e896c0-a8a7-491f-ab97-6d9cffa08c1a",
         "type": "circle"
       },
       "type": "VectorLayer",
       "visible": true
+    },
+    "e7981932-deb1-4dfa-903b-9ce5ad602b80": {
+      "name": "OpenStreetMap.Mapnik Layer",
+      "parameters": {
+        "source": "fa6c912d-b9ea-49e3-8659-d30e77c2143c"
+      },
+      "type": "RasterLayer",
+      "visible": true
     }
   },
   "options": {
     "bearing": 0.0,
-    "latitude": 0.0,
-    "longitude": 0.0,
+    "latitude": 34.26764446380909,
+    "longitude": -117.6752272928693,
     "pitch": 0.0,
-    "zoom": 0.0
+    "zoom": 3.4228699049925186
   },
   "sources": {
-    "4e6e4908-6723-4936-b6f0-23b9a837aae7": {
+    "e3e896c0-a8a7-491f-ab97-6d9cffa08c1a": {
       "name": "Custom GeoJSON Layer Source",
       "parameters": {
         "path": "eq.json"
       },
       "type": "GeoJSONSource"
+    },
+    "fa6c912d-b9ea-49e3-8659-d30e77c2143c": {
+      "name": "OpenStreetMap.Mapnik",
+      "parameters": {
+        "attribution": "(C) OpenStreetMap contributors",
+        "maxZoom": 19.0,
+        "minZoom": 0.0,
+        "provider": "OpenStreetMap",
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "urlParameters": {}
+      },
+      "type": "RasterSource"
     }
   },
   "terrain": {

examples/earthquakes.jGIS

@@ -39,7 +39,7 @@ const FilterRow = ({
   // Update the value when a new feature is selected
   useEffect(() => {
     const valueSelect = document.getElementById(
-      `filter-value${index}`
+      `jp-gis-value-select-${index}`
     ) as HTMLSelectElement;
 
     if (!valueSelect) {
@@ -75,6 +75,7 @@ const FilterRow = ({
   return (
     <div className="jp-gis-filter-row">
       <select
+        id={`jp-gis-feature-select-${index}`}
         className="jp-mod-styled jp-SchemaForm"
         onChange={handleKeyChange}
       >
@@ -90,6 +91,7 @@ const FilterRow = ({
         ))}
       </select>
       <select
+        id={`jp-gis-operator-select-${index}`}
         className="jp-mod-styled jp-SchemaForm"
         onChange={handleOperatorChange}
       >
@@ -104,8 +106,8 @@ const FilterRow = ({
         ))}
       </select>
       <select
+        id={`jp-gis-value-select-${index}`}
         className="jp-mod-styled jp-SchemaForm"
-        id={`filter-value${index}`}
         onChange={handleValueChange}
       >
         {/* Populate options based on the values of the selected key */}
@@ -120,7 +122,10 @@ const FilterRow = ({
             </option>
           ))}
       </select>
-      <Button className="jp-Button jp-gis-filter-icon">
+      <Button
+        id={`jp-gis-remove-filter-${index}`}
+        className="jp-Button jp-gis-filter-icon"
+      >
         <FontAwesomeIcon icon={faTrash} onClick={deleteRow} />
       </Button>
     </div>

packages/base/src/panelview/components/filter-panel/FilterRow.tsx

@@ -0,0 +1,64 @@
+import { galata, test } from '@jupyterlab/galata';
+import { expect } from '@playwright/test';
+import path from 'path';
+
+test.describe('#filters', () => {
+  test.beforeAll(async ({ request }) => {
+    const content = galata.newContentsHelper(request);
+    await content.deleteDirectory('/testDir');
+    await content.uploadDirectory(
+      path.resolve(__dirname, './gis-files'),
+      '/testDir'
+    );
+  });
+  test.beforeEach(async ({ page }) => {
+    await page.filebrowser.open('testDir/filter-test.jGIS');
+  });
+
+  test.afterEach(async ({ page }) => {
+    await page.activity.closeAll();
+  });
+
+  test('filters should apply and be removed', async ({ page }) => {
+    const main = page.locator('.jGIS-Mainview');
+    await expect(main).toBeVisible();
+
+    /// Open Layer
+    await page.getByText('Custom GeoJSON Layer', { exact: true }).click();
+
+    // Add first filter
+    await page.getByRole('button', { name: 'Add' }).click();
+    await page.locator('#jp-gis-feature-select-0').selectOption('mag');
+    await page.locator('#jp-gis-operator-select-0').selectOption('>');
+    await page.locator('#jp-gis-value-select-0').selectOption('2.73');
+    await page.getByRole('button', { name: 'Submit' }).click();
+
+    // Add second filter
+    await page.getByRole('button', { name: 'Add' }).click();
+    await page.locator('#jp-gis-feature-select-1').selectOption('felt');
+    await page.locator('#jp-gis-operator-select-1').selectOption('>');
+    await page.locator('#jp-gis-value-select-1').selectOption('10');
+    await page.getByRole('button', { name: 'Submit' }).click();
+
+    expect(await main.screenshot()).toMatchSnapshot({
+      name: 'two-filter.png',
+      maxDiffPixelRatio: 0.01
+    });
+
+    // Remove filter
+    await page.locator('#jp-gis-remove-filter-1').click();
+
+    expect(await main.screenshot()).toMatchSnapshot({
+      name: 'one-filter.png',
+      maxDiffPixelRatio: 0.01
+    });
+
+    // Clear filters
+    await page.getByRole('button', { name: 'Clear' }).click();
+
+    expect(await main.screenshot()).toMatchSnapshot({
+      name: 'no-filter.png',
+      maxDiffPixelRatio: 0.01
+    });
+  });
+});