feat: Farm category toggles, test and build on CI (#22)

.github/workflows/node.js.yml

@@ -0,0 +1,27 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    # Ref: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs#example-using-npm
+    # Did not commit package-lock.json file therefore cannot use `npm ci`
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22.x"
+      - name: Install dependencies
+        run: npm install
+      - run: npm run build --if-present
+      - run: npm test

README.md

@@ -46,6 +46,11 @@ Standard build
 Format the code
 
 `npm run prettier`
+🧪
+
+### Test app
+
+`npm run test`
 
 ### Run app 🚀
 

package.json

@@ -7,7 +7,8 @@
     "build:watch": "node --watch-path=./src build.js",
     "build": "node build.js",
     "prettier": "prettier . --write",
-    "start": "node dev-server.js"
+    "start": "node dev-server.js",
+    "test": "node --test"
   },
   "author": "",
   "license": "MIT",

src/alpaca-map.js

@@ -1,3 +1,4 @@
+import { compareExact, compareSparse } from "./utils";
 import { LitElement, html, css } from "lit";
 import { MarkerClusterer } from "@googlemaps/markerclusterer";
 
@@ -147,31 +148,36 @@ export default class AlpacaMap extends LitElement {
 
   _filterMarkers(element) {
     const form = new FormData(element.target.parentElement);
-    console.log(
-      "element.target.parentElement.id",
-      element.target.parentElement.id
-    );
 
-    console.log("has public", form.has("public"));
-    console.log("has private", form.has("private"));
+    const templatePublicPrivate = {
+      public: form.get("public") === "on",
+      private: form.get("private") === "on",
+    };
+
+    // Build up object with user selected values
+    const templateSelected = {};
+
+    for (const key of form.keys()) {
+      if (key !== "private" && key !== "public") {
+        templateSelected[key] = true;
+      }
+    }
 
     const markers = this.farms
       .filter((farm) => {
-        if (form.has("public") && form.has("private")) {
+        if (templatePublicPrivate?.public && templatePublicPrivate?.private) {
           return true;
         }
 
-        if (!form.has("public") && !form.has("private")) {
-          return false;
-        }
+        const obj = {
+          public: farm?.category?.public,
+          private: farm?.category?.private,
+        };
 
-        if (form.has("public") && farm.public) {
-          return true;
-        }
-
-        if (form.has("private") && farm.private) {
-          return true;
-        }
+        return compareExact(templatePublicPrivate, obj);
+      })
+      .filter((farm) => {
+        return compareSparse(templateSelected, farm?.category);
       })
       .map((farm) => {
         return farm._marker;
@@ -180,8 +186,7 @@ export default class AlpacaMap extends LitElement {
     this.cluster.clearMarkers();
     this.cluster.addMarkers(markers);
 
-    console.log(markers.length);
-    console.log("_filterMarkers");
+    console.log("markers.length", markers.length);
   }
 
   render() {
@@ -193,6 +198,24 @@ export default class AlpacaMap extends LitElement {
 
           <input type="checkbox" id="private" name="private" checked />
           <label for="private">Private farms</label>
+
+          <input type="checkbox" id="alpacaSales" name="alpacaSales" />
+          <label for="alpacaSales">Alpaca sales</label>
+
+          <input type="checkbox" id="alpacaWalking" name="alpacaWalking" />
+          <label for="alpacaWalking">Alpaca walking</label>
+
+          <input type="checkbox" id="bookable" name="bookable" />
+          <label for="bookable">Bookable</label>
+
+          <input type="checkbox" id="shop" name="shop" />
+          <label for="shop">Shop</label>
+
+          <input type="checkbox" id="overnightStay" name="overnightStay" />
+          <label for="overnightStay">Overnight stay</label>
+
+          <input type="checkbox" id="studServices" name="studServices" />
+          <label for="studServices">Stud services</label>
         </form>
       </header>
       <div id="map"></div>

src/utils.js

@@ -0,0 +1,18 @@
+export const compareExact = (template, obj) => {
+  let templateKeys = Object.keys(template);
+
+  if (templateKeys.length === Object.keys(obj).length) {
+    return templateKeys.every(
+      (key) => obj.hasOwnProperty(key) && obj[key] === template[key]
+    );
+  }
+  return false;
+};
+
+export const compareSparse = (template, obj) => {
+  let templateKeys = Object.keys(template);
+
+  return templateKeys.every(
+    (key) => obj.hasOwnProperty(key) && obj[key] === template[key]
+  );
+};

test/utils.js

@@ -0,0 +1,59 @@
+import { compareExact, compareSparse } from "../src/utils.js";
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+test(`compareExact() of equal objects - return true`, () => {
+  const template = {
+    private: false,
+    public: true,
+  };
+  const obj = { private: false, public: true };
+
+  assert.equal(compareExact(template, obj), true);
+});
+
+test(`compareExact() of non equal objects - return false`, () => {
+  const template = {
+    private: false,
+    public: true,
+  };
+  const obj = { private: true, public: true };
+
+  assert.equal(compareExact(template, obj), false);
+});
+
+test(`compareSparse() contains equal key, values - return true`, () => {
+  const template = {
+    bookable: true,
+    shop: true,
+  };
+
+  const obj = {
+    alpacaSales: true,
+    alpacaWalking: true,
+    bookable: true,
+    shop: true,
+    overnightStay: true,
+    studServices: false,
+  };
+
+  assert.equal(compareSparse(template, obj), true);
+});
+
+test(`compareSparse() contains non-equal key, values - return false`, () => {
+  const template = {
+    bookable: true,
+    shop: true,
+  };
+
+  const obj = {
+    alpacaSales: true,
+    alpacaWalking: true,
+    bookable: false,
+    shop: true,
+    overnightStay: true,
+    studServices: false,
+  };
+
+  assert.equal(compareSparse(template, obj), false);
+});