Setup testing library (#31)

* feat: add vitest testing library #29

* feat: add tests to CI #29

* test: TeritorioCluster constructor and defaults #29

.github/actions/setup/action.yml

@@ -0,0 +1,27 @@
+name: Setup Node.js (v20) with Yarn v2 🚀
+description: 'Set up Node.js version 20 and enable Yarn v2 using Corepack'
+
+inputs:
+  node-version:
+    description: 'The version of Node.js to set up.'
+    required: true
+    default: '20'
+
+outputs:
+  node-version:
+    description: 'The version of Node.js that was installed.'
+
+runs:
+  using: composite
+  steps:
+    - name: Set up Node.js v${{ inputs.node-version }} 💻
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+
+    - name: Enable Yarn v2 ⚡️
+      run: |
+        corepack enable
+        yarn --version
+        node --version
+      shell: bash

.github/workflows/deploy.yml

@@ -1,52 +1,102 @@
-# Simple workflow for deploying static content to GitHub Pages
-name: Deploy static content to Pages
+name: 🚀 Test & Deploy Static Content to GitHub Pages
 
-on:
-  # Runs on pushes targeting the default branch
-  push:
-    branches: ['main']
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
+on: push
 
 # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
 permissions:
-  contents: read
-  pages: write
-  id-token: write
+  contents: read  # Read access to repository contents
+  pages: write    # Write access for deployment to GitHub Pages
+  id-token: write # Allow GitHub to issue an ID token for authentication
 
-# Allow one concurrent deployment
+# Allow only one concurrent deployment at a time
 concurrency:
-  group: 'pages'
-  cancel-in-progress: true
+  group: 'pages'  # Group deployments by name for concurrency control
+  cancel-in-progress: true  # Cancel any in-progress deployments if a new one starts
 
 jobs:
-  # Single deploy job since we're just deploying
+  # Setup environment and dependencies
+  setup:
+    name: 🛠️ Setup Development Environment
+    runs-on: ubuntu-latest
+    outputs:
+      node-modules-path: ${{ steps.cache-dependencies.outputs.cache-hit }}
+
+    steps:
+      - name: Checkout Repository 📥
+        uses: actions/checkout@v4
+
+      - name: Cache Dependencies 📦
+        uses: actions/cache@v4
+        id: cache-dependencies
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Setup Node.js Environment ⚙️
+        uses: ./.github/actions/setup
+        with:
+          node-version: 20
+
+      - name: Install Dependencies 🛠️
+        run: yarn install --immutable
+        if: steps.cache-dependencies.outputs.cache-hit != 'true' # Only install if cache miss
+
+  tests:
+    name: 🔍 Execute Unit Tests
+    needs: setup
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository 📥
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js Environment ⚙️
+        uses: ./.github/actions/setup
+        with:
+          node-version: 20
+
+      - name: Install Dependencies 🛠️
+        run: yarn install --immutable
+
+      - name: Run Tests 🧪
+        run: yarn test
+
   deploy:
+    name: 🚀 Deploy to GitHub Pages
+    needs: [setup, tests]
+    if: github.ref == 'refs/heads/main' # Only deploy from the main branch
+
     environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+      name: github-pages  # Set deployment environment to GitHub Pages
+      url: ${{ steps.deployment.outputs.page_url }}  # Output page URL
+
     runs-on: ubuntu-latest
+
     steps:
-      - name: Checkout
+      - name: Checkout Repository 📥
         uses: actions/checkout@v4
-      - run: corepack enable
-      - name: Set up Node
-        uses: actions/setup-node@v4
+
+      - name: Setup Node.js Environment ⚙️
+        uses: ./.github/actions/setup
         with:
           node-version: 20
-          cache: 'yarn'
-      - name: Install dependencies
-        run: yarn install
-      - name: Build
-        run: yarn build:demo
-      - name: Setup Pages
+
+      - name: Install Dependencies 🛠️
+        run: yarn install --immutable
+
+      - name: Build Static Content 🏗️
+        run: yarn build:demo # Build the static site with Vite
+
+      - name: Setup GitHub Pages ⚙️
         uses: actions/configure-pages@v4
-      - name: Upload artifact
+
+      - name: Upload Build Artifacts 📦
         uses: actions/upload-pages-artifact@v3
         with:
-          # Upload dist folder
-          path: './dist'
-      - name: Deploy to GitHub Pages
+          path: './dist' # Path to the build output directory
+
+      - name: Deploy to GitHub Pages 🌐
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4 # Deploy the build to GitHub Pages

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 dist
+coverage/
 
 # Yarn v2
 .pnp.*

package.json

@@ -16,11 +16,13 @@
     }
   },
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build",
     "build:demo": "vite build --mode development",
+    "coverage": "vitest run --coverage",
+    "dev": "vite",
+    "preversion": "yarn build",
     "preview": "vite preview",
-    "preversion": "yarn build"
+    "test": "vitest"
   },
   "repository": {
     "type": "git",
@@ -33,8 +35,10 @@
   },
   "homepage": "https://github.com/teritorio/maplibre-gl-teritorio-cluster#readme",
   "devDependencies": {
+    "@vitest/coverage-v8": "2.1.5",
     "typescript": "^5.6.2",
-    "vite": "^5.4.4"
+    "vite": "^5.4.4",
+    "vitest": "^2.1.5"
   },
   "dependencies": {
     "@turf/bbox": "^7.1.0",

tests/mocks/maplibre-gl.mock.ts

@@ -0,0 +1,14 @@
+import { vi } from 'vitest'
+
+vi.mock('maplibre-gl', () => {
+  return {
+    Map: vi.fn().mockImplementation(() => ({
+      on: vi.fn(),
+      querySourceFeatures: vi.fn().mockReturnValue([]),
+      getSource: vi.fn().mockReturnValue({
+        getClusterLeaves: vi.fn(),
+      }),
+      fitBounds: vi.fn(),
+    }))
+  }
+})

tests/teritorio-cluster.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { TeritorioCluster } from '../src/teritorio-cluster'
+import { Map as MapGL } from 'maplibre-gl'
+
+describe('TeritorioCluster', () => {
+  let map: MapGL
+  let teritorioCluster: TeritorioCluster
+
+  beforeEach(() => {
+    // Create a mock map
+    map = new MapGL({ container: 'map'})
+
+    // Initialize the cluster
+    teritorioCluster = new TeritorioCluster(map, 'sourceId')
+  })
+
+  it('should initialize with default values', () => {
+    expect(teritorioCluster.map).toMatchObject(map)
+    expect(teritorioCluster.clusterLeaves).toBeInstanceOf(Map)
+    expect(teritorioCluster.clusterLeaves.size).toBe(0)
+    expect(teritorioCluster.clusterMaxZoom).toBe(17)
+    expect(teritorioCluster.clusterMinZoom).toBe(0)
+
+    // Should have the default render function
+    expect(teritorioCluster.clusterRender).toBeUndefined()
+
+    expect(teritorioCluster.featuresMap).toBeInstanceOf(Map)
+    expect(teritorioCluster.featuresMap.size).toBe(0)
+    expect(teritorioCluster.fitBoundsOptions).toMatchObject({ padding: 20 })
+    expect(teritorioCluster.initialFeature).toBeUndefined()
+
+    // Should have the default render function
+    expect(teritorioCluster.markerRender).toBeUndefined()
+
+    expect(teritorioCluster.markerSize).toBe(24)
+    expect(teritorioCluster.markersOnScreen).toBeInstanceOf(Map)
+    expect(teritorioCluster.markersOnScreen.size).toBe(0)
+    expect(teritorioCluster.pinMarker).toBeNull()
+
+    // Should have the default render function
+    expect(teritorioCluster.pinMarkerRender).toBeUndefined()
+
+    expect(teritorioCluster.selectedClusterId).toBeNull()
+    expect(teritorioCluster.selectedFeatureId).toBeNull()
+    expect(teritorioCluster.sourceId).toBe('sourceId')
+    expect(teritorioCluster.ticking).toBeFalsy()
+
+    // Should have the default render function
+    expect(teritorioCluster.unfoldedClusterRender).toBeUndefined()
+
+    expect(teritorioCluster.unfoldedClusterMaxLeaves).toBe(7)
+  })
+})

vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    coverage: {
+      reporter: ['text', 'json', 'html'],
+    },
+    setupFiles: './tests/mocks/maplibre-gl.mock.ts',
+  },
+})