e2e tests, minor changes

js/e2e.js

@@ -0,0 +1,106 @@
+const playwright = require('playwright');
+const USER1 = 'Test' + Math.random().toString().slice(2);
+
+(async () => {
+    const browser = await playwright['chromium'].launch({
+        // headless: false, slowMo: 100, // Uncomment to visualize test
+    });
+    const page = await browser.newPage();
+
+    // Load "http://localhost:5000/"
+    await page.goto('http://localhost:5000/');
+
+    // Resize window to 1854 x 963
+    await page.setViewportSize({ width: 1854, height: 963 });
+
+    // Click on <a> "👤 Your account"
+    await Promise.all([
+        page.click('[href="/me"]'),
+        page.waitForNavigation()
+    ]);
+
+    // Click on <a> "Register"
+    await Promise.all([
+        page.click('[href="/register"]'),
+        page.waitForNavigation()
+    ]);
+
+    // Click on <input> #email > #email
+    await page.click('#email > #email');
+
+    // Fill "[email protected]" on <input> #email > #email
+    await page.fill('#email > #email', `${USER1}@cd.nl`);
+
+    // Press Tab on input
+    await page.press('#email > #email', 'Tab');
+
+    // Fill "User1" on <input> #username > #username
+    await page.fill('#username > #username', USER1);
+
+    // Press Tab on input
+    await page.press('#username > #username', 'Tab');
+
+    // Fill "12345678" on <input> #password > #password
+    await page.fill('#password > #password', '12345678');
+
+    // Press Tab on input
+    await page.press('#password > #password', 'Tab');
+
+    // Fill "12345678" on <input> #password_confirm > #password_confirm
+    await page.fill('#password_confirm > #password_confirm', '12345678');
+
+    // Press Tab on input
+    await page.press('#password_confirm > #password_confirm', 'Tab');
+
+    // Press Enter on input
+    await Promise.all([
+        page.press('#submit > #submit', 'Enter'),
+        page.waitForNavigation()
+    ]);
+
+    // Click on <a> "📍 Add spot"
+    await page.click('.add-spot > a');
+
+    // Click on <button> "Done"
+    await page.click('.step1 > button:nth-child(3)');
+
+    // Click on <button> "Skip"
+    await page.click('.step2 > button:nth-child(3)');
+
+    // Click on <label> "★"
+    await page.click('[title="4 stars"]');
+
+    // Click on <input> [name="wait"]
+    await page.click('[name="wait"]');
+
+    // Fill "20" on <input> [name="wait"]
+    await page.fill('[name="wait"]', '20');
+
+    // Press Tab on input
+    await page.press('[name="wait"]', 'Tab');
+
+    // Fill "abcde" on <textarea> [name="comment"]
+    await page.fill('[name="comment"]', 'abcde');
+
+    // Click on <summary> "more optional fields"
+    await page.click('#details-summary');
+
+    // Click on <select> #signal
+    await page.click('#signal');
+
+    // Fill "sign" on <select> #signal
+    await page.selectOption('#signal', 'sign');
+
+    // Click on <input> #datetime_ride
+    await page.click('#datetime_ride');
+
+    // Fill "1994-01-01T01:01" on <input> #datetime_ride
+    await page.fill('#datetime_ride', '1994-01-01T01:01');
+
+    // Click on <button> "Submit"
+    await page.click('#spot-form > button');
+
+    await browser.close();
+
+    console.log('Test successful!')
+})();

js/filters.js

@@ -17,7 +17,7 @@ export let filterDestLineGroup = null,
 
 function setQueryParameter(key, value) {
     const url = new URL(window.location.href); // Get the current URL
-    if (value)
+    if (value || value === 0)
         url.searchParams.set(key, value); // Set or update the query parameter
     else
         url.searchParams.delete(key);

js/map.js

@@ -330,10 +330,7 @@ bars.forEach(bar => {
 map.on('click', e => {
     var added = false;
 
-    if (document.body.classList.contains('zoomed-out'))
-        return
-
-    if (window.innerWidth < 780) {
+    if (!document.body.classList.contains('zoomed-out') && window.innerWidth < 780) {
         var layerPoint = map.latLngToLayerPoint(e.latlng)
         let markers = document.body.classList.contains('filtering') ? filterMarkerGroup : allMarkers
         var closest = closestMarker(markers, e.latlng.lat, e.latlng.lng)

package.json

@@ -4,8 +4,8 @@
   "description": "The map to hitchhiking the world. Read more [here](https://hitchwiki.org/en/Hitchwiki:Maps).",
   "main": "js/map.js",
   "scripts": {
-      "test": "echo \"Error: no test specified\" && exit 1",
-      "build": "esbuild js/map.js --bundle --outfile=dist/out.js"
+    "test": "node js/e2e.js",
+    "build": "esbuild js/map.js --bundle --outfile=dist/out.js"
   },
   "repository": {
     "type": "git",
@@ -18,6 +18,7 @@
   },
   "homepage": "https://github.com/bopjesvla/hitch#readme",
   "dependencies": {
-    "esbuild": "^0.24.2"
+    "esbuild": "^0.24.2",
+    "playwright": "^1.50.1"
   }
 }

scripts/show.py

@@ -245,7 +245,8 @@ def e(s):
         f.write(index_rendered)
 elif CITIES:
     points.sort_values("datetime", inplace=True, ascending=False)
-    cities = pd.read_csv(os.path.join(db_dir, "cities.csv"))
+    cities = pd.read_csv(os.path.join(db_dir, "cities.csv")).drop_duplicates().sort_values("city")
+    rendered_cities = []
 
     for city in cities.itertuples():
         country_folder = os.path.join(dist_dir, "city", city.country)
@@ -254,10 +255,15 @@ def e(s):
         city_reviews = (
             points[points.text.str.contains(pattern, case=False, regex=True).astype(bool)].dropna(subset="comment").iloc[:20]
         )
-        rendered = city_template.render(city=city, title=city.city, reviews=city_reviews)
-        with open(os.path.join(country_folder, f"{city.city}.html"), "w") as f:
-            f.write(rendered)
-    index_rendered = city_index.render(grouped_cities=cities.groupby("country"))
+        rendered_cities.append(len(city_reviews) >= 3)
+        if rendered_cities[-1]:
+            rendered = city_template.render(city=city, title=city.city, reviews=city_reviews)
+            with open(os.path.join(country_folder, f"{city.city}.html"), "w") as f:
+                f.write(rendered)
+
+    print(rendered_cities)
+
+    index_rendered = city_index.render(grouped_cities=cities[rendered_cities].groupby("country"))
     with open(os.path.join(os.path.join(dist_dir, "city"), "index.html"), "w") as f:
         f.write(index_rendered)
 

templates/city_index.html

@@ -3,7 +3,7 @@
 Hitchhiking tips for European cities
 {% endblock %}
 {% block content %}
-<h1>Cities</h1>
+<h1>Hitchhiking guides to European cities</h1>
 {% for country, places in grouped_cities %}
 <h2>{{ country }}</h2>
 <ul>

templates/city_template.html

@@ -6,7 +6,7 @@
 {% block content %}
 <div class="container mx-auto px-4 py-8">
     <div class="bg-white rounded-lg shadow-lg p-6">
-        <p><a href="/city/index.html" id="back">&lt; All cities</a></p>
+        <nav><br><a href="/city/index.html" id="back">&lt; All cities</a><br></nav>
         <article class="mt-6">
             <h2>Hitchhiking from {{city.city}}</h2>
 

templates/security/base.html

@@ -47,7 +47,7 @@
              transform: translate(-50%, max(-50%, -40vh)); /* Centers the overlay */
              padding: 20px 40px; /* Adds some spacing inside the overlay */
              max-width: 350px; /* Prevents the overlay from being too wide */
-             width: 90vw;
+             width: calc(90vw - 80px); /* remove padding */
              background: #fff; /* Semi-transparent background */
              border-radius: 8px; /* Adds rounded corners */
              box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Subtle shadow for better visibility */