Added small unit test

.gitignore

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

package.json

@@ -12,6 +12,7 @@
         "build": "pnpm run --recursive build",
         "lint": "eslint 'packages/*/{src,demo}/*.{ts,tsx,vue,js}'",
         "lint:fix": "pnpm run lint --fix",
+        "test:ui": "lerna run test --scope @viselect/vanilla",
         "test:ci": "pnpm run lint:fix && pnpm run build",
         "release:major": "lerna version major",
         "release:minor": "lerna version minor",

packages/vanilla/package.json

@@ -19,7 +19,8 @@
     },
     "scripts": {
         "build": "vite build",
-        "dev": "vite"
+        "dev": "vite",
+        "test": "vitest --dir ./tests"
     },
     "files": [
         "dist"
@@ -36,5 +37,12 @@
     ],
     "publishConfig": {
         "access": "public"
+    },
+    "devDependencies": {
+        "@testing-library/dom": "10.4.0",
+        "@vitest/browser": "2.1.2",
+        "@vitest/ui": "2.1.2",
+        "playwright": "1.48.0",
+        "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,105 @@
+import {default as SelectionArea} from '../src';
+import './index.css';
+
+import {beforeEach, describe, expect, it} from 'vitest';
+import {fireEvent} from '@testing-library/dom';
+
+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++) {
+            const 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 the green container
+        const greenContainer = document.querySelector('.green');
+        const greenRect = greenContainer?.getBoundingClientRect();
+
+        // Find the start of green container, and middle X
+        const startX = greenRect?.left + OFFSET, startY = greenRect?.top + OFFSET;
+        const middleX = startX + greenRect?.width / 2;
+        const endX = greenRect?.left + greenRect?.width;
+        const endY = greenRect?.top + greenRect?.height;
+
+        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');
+    });
+});

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,14 @@ export default defineConfig(env => ({
 
     define: {
         'VERSION': JSON.stringify(version)
-    }
+    },
+
+    test: {
+        reporters: ['html'],
+        browser: {
+            enabled: true,
+            name: 'chromium',
+            provider: 'playwright',
+        },
+    },
 }));