Invert Disable Drop (#108)

* Don't commit videos and screenshots
* Configured a CI test workflow
* Updated the contributing document

Author: jameskerr

.github/workflows/test.yml

@@ -14,4 +14,4 @@ jobs:
           registry-url: "https://registry.npmjs.org"
       - run: yarn
       - run: yarn build
-      - run: yarn build:showcase
+      - run: yarn test

CONTRIBUTING.md

@@ -1,9 +1,15 @@
 # Testing Locally
 
 1. Clone the repo
-2. From the root, run yarn start
+2. From the root, run yarn && yarn start
 3. Visit localhost:3000
 
+# Running Tests
+
+Run `yarn build && yarn test` from the root of the repo.
+
+To test individual packages, cd into them and run `yarn test`. For example, running the unit tests would be `cd packages/react-arborist && yarn test`.
+
 # Publishing a Release
 
 ### Release Branch

package.json

@@ -4,18 +4,19 @@
     "./packages/*"
   ],
   "scripts": {
-    "bump": "yarn workspace react-arborist version",
-    "start:showcase": "yarn workspace showcase dev",
-    "start:library": "yarn workspace react-arborist watch",
     "start": "run-p 'start:**'",
-    "build": "yarn workspace react-arborist build",
-    "watch": "yarn workspace react-arborist watch",
-    "build:showcase": "yarn build && yarn workspace showcase build"
+    "start:showcase": "yarn workspace showcase start",
+    "start:library": "yarn workspace react-arborist start",
+    "build": "run-s build:react-arborist build:showcase",
+    "build:react-arborist": "yarn workspace react-arborist build",
+    "build:showcase": "yarn workspace showcase build",
+    "test": "run-p test:react-arborist test:e2e",
+    "test:react-arborist": "yarn workspace react-arborist test",
+    "test:e2e": "yarn workspace e2e test"
   },
   "private": true,
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@parcel/transformer-typescript-types": "2.7.0",
     "npm-run-all": "^4.1.5",
     "typescript": ">=3.0.0"
   }

packages/e2e/.gitignore

@@ -0,0 +1,3 @@
+cypress/videos
+cypress/screenshots
+cypress/downloads

packages/e2e/cypress/e2e/spec.cy.ts packages/e2e/cypress/e2e/gmail-spec.cy.tspackages/e2e/cypress/e2e/spec.cy.ts renamed to packages/e2e/cypress/e2e/gmail-spec.cy.ts

@@ -1,6 +1,6 @@
 import "@4tw/cypress-drag-drop";
 
-describe("template spec", () => {
+describe("Testing the Gmail Demo", () => {
   beforeEach(() => {
     cy.visit("http://localhost:3000/gmail");
     cy.get("[role=treeitem]").as("item");

packages/e2e/package.json

@@ -1,14 +1,18 @@
 {
   "name": "e2e",
   "packageManager": "[email protected]",
-  "dependencies": {
+  "scripts": {
+    "cy:run": "yarn cypress run",
+    "start": "yarn cypress open",
+    "serve": "yarn workspace showcase serve > /dev/null",
+    "test": "start-server-and-test serve http://localhost:3000 cy:run"
+  },
+  "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.2.3",
     "cypress": "^12.4.1",
     "cypress-drag-drop": "^1.1.1",
+    "serve": "^14.2.0",
+    "start-server-and-test": "^1.15.3",
     "typescript": "^4.9.4"
-  },
-  "scripts": {
-    "test": "yarn cypress run",
-    "open": "yarn cypress open"
   }
 }

packages/react-arborist/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

packages/react-arborist/package.json

@@ -6,6 +6,17 @@
   "main": "dist/index.js",
   "module": "dist/module.js",
   "types": "dist/index.d.ts",
+  "scripts": {
+    "start": "run-p 'watch:**'",
+    "build": "npm-run-all clean -p 'build:**'",
+    "test": "jest",
+    "build:js": "parcel build --target main --target module",
+    "build:types": "tsc --outDir dist",
+    "clean": "rimraf dist",
+    "start:js": "parcel watch --target main --target module --no-hmr --no-cache",
+    "start:types": "tsc --outDir dist --watch",
+    "prepack": "yarn build"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/brimdata/react-arborist.git"
@@ -30,15 +41,6 @@
     "redux": "^4.1.1",
     "use-sync-external-store": "^1.2.0"
   },
-  "scripts": {
-    "build": "run-p 'build:**'",
-    "build:js": "parcel build --target main --target module",
-    "build:types": "tsc --outDir dist",
-    "watch:js": "parcel watch --target main --target module --no-hmr --no-cache",
-    "watch:types": "tsc --outDir dist --watch",
-    "watch": "run-p 'watch:**'",
-    "prepack": "yarn build"
-  },
   "peerDependencies": {
     "react": ">= 16.14",
     "react-dom": ">= 16.14"
@@ -49,9 +51,11 @@
     "@types/react": "^18.0.0",
     "@types/react-window": "^1.8.5",
     "@types/use-sync-external-store": "^0.0.3",
-    "jest": "^27.5.1",
+    "jest": "^29.4.1",
     "npm-run-all": "^4.1.5",
     "parcel": "^2.3.2",
+    "rimraf": "^4.1.2",
+    "ts-jest": "^29.0.5",
     "typescript": "^4.6.2"
   }
 }

packages/react-arborist/src/interfaces/tree-api.test.ts

@@ -0,0 +1,15 @@
+import { createStore } from "redux";
+import { rootReducer } from "../state/root-reducer";
+import { TreeProps } from "../types/tree-props";
+import { TreeApi } from "./tree-api";
+
+function setupApi(props: TreeProps<any>) {
+  const store = createStore(rootReducer);
+  return new TreeApi(store, props, { current: null }, { current: null });
+}
+
+test("tree.canDrop()", () => {
+  expect(setupApi({ disableDrop: true }).canDrop()).toBe(false);
+  expect(setupApi({ disableDrop: () => false }).canDrop()).toBe(true);
+  expect(setupApi({ disableDrop: false }).canDrop()).toBe(true);
+});

packages/react-arborist/src/interfaces/tree-api.ts

@@ -408,7 +408,7 @@ export class TreeApi<T> {
     if (this.isFiltered) return false;
     const parentNode = this.get(this.state.dnd.parentId) ?? this.root;
     const dragNodes = this.dragNodes;
-    const check = this.props.disableDrop;
+    const isDisabled = this.props.disableDrop;
 
     for (const drag of dragNodes) {
       if (!drag) return false;
@@ -417,17 +417,17 @@ export class TreeApi<T> {
     }
 
     // Allow the user to insert their own logic
-    if (typeof check == "function") {
-      return check({
+    if (typeof isDisabled == "function") {
+      return !isDisabled({
         parentNode,
         dragNodes: this.dragNodes,
         index: this.state.dnd.index,
       });
-    } else if (typeof check == "string") {
+    } else if (typeof isDisabled == "string") {
       // @ts-ignore
-      return !!parentNode.data[check];
-    } else if (typeof check === "boolean") {
-      return check;
+      return !parentNode.data[isDisabled];
+    } else if (typeof isDisabled === "boolean") {
+      return !isDisabled;
     } else {
       return true;
     }