Housekeeping

.eslintrc

@@ -1,8 +1,8 @@
 {
   "extends": [
-    "colinrcummings",
-    "colinrcummings/jest",
-    "colinrcummings/prettier"
+    "colinrobertbrooks",
+    "colinrobertbrooks/jest",
+    "colinrobertbrooks/prettier"
   ],
   "env": {
     "browser": true
@@ -11,10 +11,7 @@
     "import/no-unresolved": [
       "error",
       {
-        "ignore": [
-          "@testing-library/jest-dom/extend-expect",
-          "@testing-library/react"
-        ]
+        "ignore": ["@testing-library/jest-dom"]
       }
     ]
   }

.github/workflows/main.yml

@@ -0,0 +1,41 @@
+name: CI
+on: [pull_request]
+jobs:
+  build:
+    name: Verify react-beautiful-dnd-test-utils on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['12.18.1']
+        os: [ubuntu-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install module dependencies (without cache)
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: Validate module
+        run: npm run validate
+
+      - name: Build module
+        run: npm run build
+
+      - name: Install example app dependencies (without cache)
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+          working-directory: ./example
+
+      - name: Test example app with built module
+        run: npm run test
+        working-directory: ./example

.npmignore

@@ -0,0 +1,3 @@
+example
+other
+src

README.md

@@ -27,13 +27,13 @@ npm install --save-dev react-beautiful-dnd-test-utils
 
 ## Supported versions of `rbd`
 
-Version 3 of this library supports testing `rbd` version 12. Use version 2 of this library for testing `rbd` version 11.
+Version 3 of this library supports testing `rbd` version 12+. Use version 2 of this library for testing `rbd` version 11.
 
 ## Usage
 
 Currently supports moving a [`<Draggable />`](https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md) _n_ positions up or down inside a [`<Droppable />`](https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md).
 
-See an [example test](https://github.com/colinrcummings/react-beautiful-dnd-test-utils-example/blob/master/src/App.test.js) in the [`react-beautiful-dnd-test-utils-example`](https://github.com/colinrcummings/react-beautiful-dnd-test-utils-example) repo.
+See an [example test](./example/src/App.test.js).
 
 ## License
 

example/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

example/README.md

@@ -0,0 +1,27 @@
+# react-beautiful-dnd-test-utils-example
+
+A fork of the `working-board` branch of [react-beautiful-dnd-task-app](https://github.com/alexreardon/react-beautiful-dnd-task-app) tested with [react-beautiful-dnd-test-utils](https://github.com/colinrobertbrooks/react-beautiful-dnd-test-utils).
+
+---
+
+## Setup
+
+Run `npm run build` in the root directory, then run`npm install`.
+
+---
+
+## Run the Task App
+
+Run `npm start` and open [localhost:3000](http://localhost:3000/).
+
+---
+
+## Tests
+
+Run `npm test`.
+
+---
+
+## Boilerplate
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

example/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "react-beautiful-dnd-test-utils-example",
+  "version": "3.2.1",
+  "private": true,
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test"
+  },
+  "dependencies": {
+    "@atlaskit/css-reset": "^6.1.4",
+    "react": "^16.8.0",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-dom": "^16.8.0",
+    "styled-components": "^5.3.3"
+  },
+  "devDependencies": {
+    "@sheerun/mutationobserver-shim": "^0.3.3",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.2",
+    "react-beautiful-dnd-test-utils": "file:../",
+    "react-scripts": "^4.0.3"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

example/public/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+  </body>
+</html>

example/src/.eslintrc

@@ -0,0 +1,12 @@
+{
+  "rules": {
+    "import/extensions": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/no-unresolved": "off",
+    "max-classes-per-file": "off",
+    "no-shadow": "off",
+    "react/no-access-state-in-setstate": "off",
+    "react/prop-types": "off",
+    "react/state-in-constructor": "off"
+  }
+}

example/src/App.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import styled from 'styled-components';
+import Column from './Column';
+
+const Container = styled.div`
+  display: flex;
+`;
+
+const reorder = (array, startIndex, endIndex) => {
+  const result = Array.from(array);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+class InnerList extends React.PureComponent {
+  render() {
+    const { column, taskMap, index } = this.props;
+    const tasks = column.taskIds.map(taskId => taskMap[taskId]);
+    return <Column column={column} tasks={tasks} index={index} />;
+  }
+}
+
+class App extends React.Component {
+  state = this.props.initialState;
+
+  onDragEnd = result => {
+    const { destination, source, draggableId, type } = result;
+
+    if (!destination) {
+      return;
+    }
+
+    if (
+      destination.droppableId === source.droppableId &&
+      destination.index === source.index
+    ) {
+      return;
+    }
+
+    if (type === 'COLUMN') {
+      this.setState({
+        ...this.state,
+        columnOrder: reorder(
+          this.state.columnOrder,
+          source.index,
+          destination.index
+        )
+      });
+      return;
+    }
+
+    const home = this.state.columns[source.droppableId];
+    const foreign = this.state.columns[destination.droppableId];
+
+    if (home === foreign) {
+      const newColumn = {
+        ...home,
+        taskIds: reorder(home.taskIds, source.index, destination.index)
+      };
+
+      const newState = {
+        ...this.state,
+        columns: {
+          ...this.state.columns,
+          [newColumn.id]: newColumn
+        }
+      };
+
+      this.setState(newState);
+      return;
+    }
+
+    const homeTaskIds = Array.from(home.taskIds);
+    homeTaskIds.splice(source.index, 1);
+    const newHome = {
+      ...home,
+      taskIds: homeTaskIds
+    };
+
+    const foreignTaskIds = Array.from(foreign.taskIds);
+    foreignTaskIds.splice(destination.index, 0, draggableId);
+    const newForeign = {
+      ...foreign,
+      taskIds: foreignTaskIds
+    };
+
+    const newState = {
+      ...this.state,
+      columns: {
+        ...this.state.columns,
+        [newHome.id]: newHome,
+        [newForeign.id]: newForeign
+      }
+    };
+    this.setState(newState);
+  };
+
+  render() {
+    return (
+      <DragDropContext onDragEnd={this.onDragEnd}>
+        <Droppable droppableId="board" direction="horizontal" type="COLUMN">
+          {provided => (
+            <Container ref={provided.innerRef} {...provided.droppableProps}>
+              {this.state.columnOrder.map((columnId, index) => {
+                const column = this.state.columns[columnId];
+
+                return (
+                  <InnerList
+                    key={column.id}
+                    column={column}
+                    index={index}
+                    taskMap={this.state.tasks}
+                  />
+                );
+              })}
+              {provided.placeholder}
+            </Container>
+          )}
+        </Droppable>
+      </DragDropContext>
+    );
+  }
+}
+
+export default App;