Added simple unit test

.gitignore

@@ -4,3 +4,5 @@ dist
 *.iml
 .idea/
 .log
+html/
+test-results/

packages/vanilla/package.json

@@ -19,7 +19,8 @@
     },
     "scripts": {
         "build": "vite build",
-        "dev": "vite"
+        "dev": "vite",
+        "test": "vitest --ui --dir ./tests"
     },
     "files": [
         "dist"
@@ -36,5 +37,11 @@
     ],
     "publishConfig": {
         "access": "public"
+    },
+    "devDependencies": {
+        "@testing-library/dom": "^10.4.0",
+        "context": "link:@vitest/browser/context",
+        "playwright": "^1.47.2",
+        "vitest": "^2.1.2"
     }
 }

packages/vanilla/tests/index.css

@@ -0,0 +1,86 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+    height: 200vh;
+}
+
+#root {
+    width: 100%;
+    max-width: 50em;
+    margin: 1.5em auto;
+    padding-bottom: 500px;
+}
+
+#root > h1 {
+    text-align: center;
+    margin: 1rem 0;
+    font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
+    font-weight: lighter;
+    color: #212128;
+}
+
+#root .container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    border: 2px solid rgba(66, 68, 90, 0.075);
+    border-radius: 0.15em;
+    padding: 1em 0;
+    user-select: none;
+    margin-bottom: 3em;
+}
+
+#root .container.red {
+    display: grid;
+    grid-template-columns: repeat(28, 1fr);
+    grid-gap: 0.4em;
+    align-items: flex-start;
+    justify-content: flex-start;
+    max-height: 15em;
+    overflow: auto;
+    padding: 0.5em;
+    margin-bottom: 3em;
+}
+
+#root .container.red > div {
+    margin: 0;
+}
+
+#root .container div {
+    height: 3em;
+    width: 3em;
+    margin: 0.2em;
+    background: rgba(66, 68, 90, 0.075);
+    border: 2px solid transparent;
+    border-radius: 0.15em;
+    cursor: pointer;
+}
+
+#root .container.green div.selected {
+    background: hsl(100, 80%, 65%);
+    border: 2px solid rgba(0, 0, 0, 0.075);
+}
+
+#root .container.blue div.selected {
+    background: hsl(150, 80%, 65%);
+    border: 2px solid rgba(0, 0, 0, 0.075);
+}
+
+#root .container.red div.selected {
+    background: hsl(200, 80%, 65%);
+    border: 2px solid rgba(0, 0, 0, 0.075);
+}
+
+.selection-area {
+    background: rgba(46, 115, 252, 0.11);
+    border: 1px solid rgba(98, 155, 255, 0.85);
+    border-radius: 0.15em;
+}

packages/vanilla/tests/index.spec.ts

@@ -0,0 +1,106 @@
+import {default as SelectionArea} from "../src";
+import "./index.css";
+
+import { beforeEach, describe, expect, it } from "vitest";
+import { page, userEvent} from "@vitest/browser/context";
+import { fireEvent } from "@testing-library/dom";
+import { aw } from "vitest/dist/chunks/reporters.DAfKSDh5.js";
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const OFFSET = 10;
+
+const boxes: [string, number][] = [
+  ["section.green", 42],
+  ["section.blue", 42],
+  ["section.red", 252],
+];
+
+const buildBoxes = function () {
+  for (const [sel, items] of boxes) {
+    const container = document.querySelector(sel);
+    for (let i = 0; i < items; i++) {
+      let element = document.createElement("div");
+      if (i == 0) {
+        element.classList.add("first");
+      } else if (i == items - 1) {
+        element.classList.add("last");
+      }
+      container?.appendChild(element);
+    }
+  }
+};
+
+describe("Simple selection", async () => {
+  beforeEach(() => {
+    document.body.id = 'root';
+    document.body.innerHTML =
+      '<h1>Vanilla</h1><section class="container green"></section><section class="container blue"></section><section class="container red"></section>';
+    buildBoxes();
+  });
+
+  it("Should create selection area", async () => {
+    const selection = new SelectionArea({
+      selectables: ['body > section > div'],
+      boundaries: ['body > section'],
+      behaviour: {
+        startThreshold: 0,
+      },
+      features: {
+          singleTap: {allow: true},
+          deselectOnBlur: true,
+      }
+    }).on('start', ({store, event}) => {
+
+      if (!(event as MouseEvent).ctrlKey && !(event as MouseEvent).metaKey) {
+
+          for (const el of store.stored) {
+              el.classList.remove('selected');
+          }
+
+          selection.clearSelection();
+      }
+
+  }).on('move', ({store: {changed: {added, removed}}}) => {
+
+    for (const el of added) {
+        el.classList.add('selected');
+    }
+
+    for (const el of removed) {
+        el.classList.remove('selected');
+    }
+});
+
+    // Find green container
+    const greenContainer = document.querySelector('.green');
+    const greenRect = greenContainer?.getBoundingClientRect();
+
+    // Find start of green container, and middle X
+    const startX = greenRect?.left + OFFSET, startY = greenRect?.top + OFFSET, middleX = startX + greenRect?.width / 2;
+    const endX = greenRect?.left + greenRect?.width;
+    const endY = greenRect?.top + greenRect?.height;
+
+    const firstGreen = document.querySelector('.green > .first');
+    const lastGreen = document.querySelector('.green > .last');
+
+    fireEvent.mouseDown(greenContainer, { clientX: startX, clientY: startY });
+    await sleep(100);
+
+    // Moving the mouse to middle x
+    fireEvent(document, new MouseEvent('mousemove', { clientX: middleX, clientY: endY,  bubbles: true,
+         cancelable: true, }));
+    await sleep(100);
+
+    // Moving to end x & y
+    fireEvent(document, new MouseEvent('mousemove', { clientX: endX, clientY: endY,  bubbles: true,
+      cancelable: true, }));
+
+    // Releasing mouse down
+    fireEvent.mouseUp(greenContainer, { clientX: endX, clientY: endY });
+
+    expect(selection.getSelection().length).eq(24, 'Not matching selected elements');
+  });
+
+});
+
+// Should

packages/vanilla/tsconfig.json

@@ -14,6 +14,9 @@
         "noUnusedLocals": true,
         "noUnusedParameters": true,
         "noImplicitReturns": true,
-        "skipLibCheck": true
+        "skipLibCheck": true,
+        "types": [
+            "@vitest/browser/providers/playwright"
+        ]
     }
 }

packages/vanilla/vite.config.mts

@@ -5,7 +5,7 @@ import dts from 'vite-plugin-dts';
 
 const header = `/*! @viselect/vanilla v${version} MIT | https://github.com/Simonwep/selection/tree/master/packages/vanilla */`;
 
-export default defineConfig(env => ({
+export default defineConfig((env) => ({
     root: env.mode === 'production' ? '.' : './demo',
 
     plugins: [
@@ -29,5 +29,15 @@ export default defineConfig(env => ({
 
     define: {
         'VERSION': JSON.stringify(version)
-    }
+    },
+    test: {
+        // Lit recommends using browser environment for testing
+        // https://lit.dev/docs/tools/testing/#testing-in-the-browser
+        reporters: ['html'],
+        browser: {
+          enabled: true,
+          name: 'chromium',
+          provider: 'playwright',
+        },
+      },
 }));