test: add tests

alvarocastro · Jun 30, 2024 · 4dffb2f · 4dffb2f
1 parent 653ce0f
commit 4dffb2f
Show file tree

Hide file tree

Showing 28 changed files with 951 additions and 537 deletions.
diff --git a/packages/ember-draggable-modifiers/src/modifiers/draggable-item.js b/packages/ember-draggable-modifiers/src/modifiers/draggable-item.js
@@ -2,6 +2,30 @@ import { modifier } from 'ember-modifier';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { CLASS, prepareDataForCallback } from './drop-target.js';
 
+
+
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+
+    // onGenerateDragPreview: ({ nativeSetDragImage }) => {
+    //     setCustomNativeDragPreview({
+    //         render({ container }) {
+    //             // Create our preview element
+    //             const preview = document.createElement('div');
+
+    //             // Populate and style the preview element however you like
+    //             preview.textContent = 'My Preview';
+    //             Object.assign(preview.style, {
+    //                 padding: '20px',
+    //                 backgroundColor: 'lightpink',
+    //             });
+
+    //             // put the "preview" element into the container element
+    //             container.appendChild(preview);
+    //         },
+    //         nativeSetDragImage,
+    //     });
+    // },
+
 /**
  * Modifier to make a DOM element draggable.
  *
@@ -26,6 +50,7 @@ export default modifier(
       isDraggingClass = CLASS.DRAGGING,
       onDragStart = () => {},
       onDragEnd = () => {},
+      onGenerateDragPreview = () => {},
     } = {},
   ) {
     return draggable({

diff --git a/packages/ember-draggable-modifiers/src/utils/array.js b/packages/ember-draggable-modifiers/src/utils/array.js
@@ -1,3 +1,5 @@
+import { assert } from '@ember/debug';
+
 /**
  * Insert an item to an array in the specified index.
  * @param {Array} arr
@@ -6,6 +8,7 @@
  * @returns {Array} []
  */
 export function insertAt(arr, index, item) {
+  // assert('index is out of bounds', index > 0 && index < arr.length);
   const clone = [...arr];
   clone.splice(index, 0, item);
   return clone;
@@ -31,7 +34,9 @@ export function removeAt(arr, index) {
  * @return {Array} []
  */
 export function insertBefore(arr, targetItem, item) {
-  return insertAt(arr, arr.indexOf(targetItem), item);
+  const index = arr.indexOf(targetItem);
+  assert('Item must exist', index >= 0);
+  return insertAt(arr, index, item);
 }
 
 /**
@@ -42,7 +47,9 @@ export function insertBefore(arr, targetItem, item) {
  * @return {Array} []
  */
 export function insertAfter(arr, targetItem, item) {
-  return insertAt(arr, arr.indexOf(targetItem) + 1, item);
+  const index = arr.indexOf(targetItem);
+  assert('Item must exist', index >= 0);
+  return insertAt(arr, index + 1, item);
 }
 
 /**
@@ -52,5 +59,7 @@ export function insertAfter(arr, targetItem, item) {
  * @return {Array} []
  */
 export function removeItem(arr, item) {
-  return removeAt(arr, arr.indexOf(item));
+  const index = arr.indexOf(item);
+  assert('Item must exist', index >= 0);
+  return removeAt(arr, index);
 }
diff --git a/packages/test-app/app/components/api/index.js b/packages/test-app/app/components/api/index.js
diff --git a/packages/test-app/app/components/examples/board/index.hbs b/packages/test-app/app/components/examples/board/index.hbs
@@ -1,15 +1,8 @@
 <Ui::Subsection @title="Board">
-
-  <style type="text/css">
-    .a {
-      transform: rotate(-5deg);
-    }
-  </style>
   <div class="hstack gap-3 align-items-start overflow-scroll">
     {{#each this.columns as |column|}}
       <div
-        class="card flex-grow-0 flex-shrink-0 bg-body-tertiary"
-        style="width: 260px;"
+        class="card board-column flex-grow-0 flex-shrink-0 bg-body-tertiary"
         {{sortable-item
           data=column
           group="columns"
@@ -30,7 +23,7 @@
                 onDrop=this.moveCard
               }}
             >
-              <img src="https://api.dicebear.com/8.x/bottts-neutral/svg?seed={{card.seed}}" width="48" height="48" class="rounded pe-none" />
+              <img src="https://api.dicebear.com/8.x/bottts-neutral/svg?seed={{card.seed}}" alt="{{card.title}}" width="48" height="48" class="rounded pe-none" />
               <div class="ms-3 flex-grow-1">
                 <h5 class="card-title">{{card.title}}</h5>
                 <p class="card-text">{{card.text}}</p>

diff --git a/packages/test-app/app/components/examples/board/index.js b/packages/test-app/app/components/examples/board/index.js
@@ -1,18 +1,22 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { insertBefore, insertAfter, removeItem } from 'ember-draggable-modifiers/utils/array';
+import {
+  insertBefore,
+  insertAfter,
+  removeItem,
+} from 'ember-draggable-modifiers/utils/array';
 
 class Column {
   @tracked cards = [];
 
-  constructor (name, cards = []) {
+  constructor(name, cards = []) {
     this.name = name;
     this.cards = cards;
   }
 }
 class Card {
-  constructor (title, text, seed) {
+  constructor(title, text, seed) {
     this.title = title;
     this.text = text;
     this.seed = seed;
@@ -38,14 +42,9 @@ export default class ExamplesBoardComponent extends Component {
     ]),
   ];
 
-  @action moveColumn ({
-    source: {
-      data: draggedItem
-    },
-    target: {
-      data: dropTarget,
-      edge
-    }
+  @action moveColumn({
+    source: { data: draggedItem },
+    target: { data: dropTarget, edge },
   }) {
     this.columns = removeItem(this.columns, draggedItem);
 
@@ -56,27 +55,29 @@ export default class ExamplesBoardComponent extends Component {
     }
   }
 
-  @action moveCard ({
+  @action moveCard({
     source: {
-      data: {
-        item: draggedItem,
-        parent: draggedItemParent,
-      }
+      data: { item: draggedItem, parent: draggedItemParent },
     },
     target: {
-      data: {
-        item: dropTarget,
-        parent: dropTargetParent,
-      },
-      edge
+      data: { item: dropTarget, parent: dropTargetParent },
+      edge,
     },
   }) {
     draggedItemParent.cards = removeItem(draggedItemParent.cards, draggedItem);
 
     if (edge === 'top') {
-      dropTargetParent.cards = insertBefore(dropTargetParent.cards, dropTarget, draggedItem);
+      dropTargetParent.cards = insertBefore(
+        dropTargetParent.cards,
+        dropTarget,
+        draggedItem,
+      );
     } else {
-      dropTargetParent.cards = insertAfter(dropTargetParent.cards, dropTarget, draggedItem);
+      dropTargetParent.cards = insertAfter(
+        dropTargetParent.cards,
+        dropTarget,
+        draggedItem,
+      );
     }
   }
 }
diff --git a/packages/test-app/app/components/examples/handle/index.js b/packages/test-app/app/components/examples/handle/index.js
@@ -1,10 +1,14 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { insertBefore, insertAfter, removeItem } from 'ember-draggable-modifiers/utils/array';
+import {
+  insertBefore,
+  insertAfter,
+  removeItem,
+} from 'ember-draggable-modifiers/utils/array';
 
 export default class ExamplesHandleComponent extends Component {
-  @tracked items = [ 'One', 'Two', 'Three', 'Four', 'Five' ];
+  @tracked items = ['One', 'Two', 'Three', 'Four', 'Five'];
 
   hbsCode = `
     <ul>
@@ -17,9 +21,9 @@ export default class ExamplesHandleComponent extends Component {
     </ul>
   `;
 
-  get jsCode () {
+  get jsCode() {
     return `
-      @tracked items = [ ${this.items.map(item => JSON.stringify(item)).join(', ')} ];
+      @tracked items = [ ${this.items.map((item) => JSON.stringify(item)).join(', ')} ];
 
       @action move ({ source: { data: draggedItem }, target: { data: dropTarget, edge } }) {
         this.items = removeItem(this.items, draggedItem);
@@ -31,9 +35,12 @@ export default class ExamplesHandleComponent extends Component {
         }
       }
     `;
-  };
+  }
 
-  @action move ({ source: { data: draggedItem }, target: { data: dropTarget, edge } }) {
+  @action move({
+    source: { data: draggedItem },
+    target: { data: dropTarget, edge },
+  }) {
     this.items = removeItem(this.items, draggedItem);
 
     if (edge === 'top') {

diff --git a/packages/test-app/app/components/examples/nested-lists/index.js b/packages/test-app/app/components/examples/nested-lists/index.js
@@ -1,36 +1,35 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { insertBefore, insertAfter, removeItem } from 'ember-draggable-modifiers/utils/array';
+import {
+  insertBefore,
+  insertAfter,
+  removeItem,
+} from 'ember-draggable-modifiers/utils/array';
 
 class Item {
   @tracked childs = [];
 
-  constructor (name, childs = []) {
+  constructor(name, childs = []) {
     this.name = name;
     this.childs = childs;
   }
 }
 
 const dump = function (node, depth = 0, indent = '  ') {
   if (node.childs.length) {
-    return `new Item('${node.name}', [\n${indent.repeat(depth + 1)}${node.childs.map(child => dump(child, depth + 1, indent)).join(`,\n${indent.repeat(depth + 1)}`)}\n${indent.repeat(depth)}])`;
+    return `new Item('${node.name}', [\n${indent.repeat(depth + 1)}${node.childs.map((child) => dump(child, depth + 1, indent)).join(`,\n${indent.repeat(depth + 1)}`)}\n${indent.repeat(depth)}])`;
   }
   return `new Item('${node.name}')`;
 };
 
 export default class ExamplesNestedListsComponent extends Component {
   @tracked root = new Item('root', [
     new Item('One'),
-    new Item('Two', [
-      new Item('Six'),
-      new Item('Seven', [
-        new Item('Eight'),
-      ]),
-    ]),
+    new Item('Two', [new Item('Six'), new Item('Seven', [new Item('Eight')])]),
     new Item('Three'),
     new Item('Four'),
-    new Item('Five')
+    new Item('Five'),
   ]);
 
   hbsCode = `
@@ -61,7 +60,7 @@ export default class ExamplesNestedListsComponent extends Component {
     </li>
   `;
 
-  get jsCode () {
+  get jsCode() {
     return `
       class Item {
         @tracked childs = [];
@@ -76,8 +75,8 @@ export default class ExamplesNestedListsComponent extends Component {
         @tracked root = ${dump(this.root, 4)};
 
         @action move ({ source, target }) {
-          const { data: { item: draggedItem, parent: draggedItemParent }, group: fromList } = source;
-          const { data: { item: dropTarget, parent: dropTargetParent }, group: toList, edge, tree } = target;
+          const { data: { item: draggedItem, parent: draggedItemParent } } = source;
+          const { data: { item: dropTarget, parent: dropTargetParent }, edge, tree } = target;
 
           draggedItemParent.childs = removeItem(draggedItemParent.childs, draggedItem);
 
@@ -92,11 +91,20 @@ export default class ExamplesNestedListsComponent extends Component {
     `;
   }
 
-  @action move ({ source, target }) {
-    const { data: { item: draggedItem, parent: draggedItemParent }, group: fromList } = source;
-    const { data: { item: dropTarget, parent: dropTargetParent }, group: toList, edge, tree } = target;
+  @action move({ source, target }) {
+    const {
+      data: { item: draggedItem, parent: draggedItemParent },
+    } = source;
+    const {
+      data: { item: dropTarget, parent: dropTargetParent },
+      edge,
+      tree,
+    } = target;
 
-    draggedItemParent.childs = removeItem(draggedItemParent.childs, draggedItem);
+    draggedItemParent.childs = removeItem(
+      draggedItemParent.childs,
+      draggedItem,
+    );
 
     const parent = tree === 'make-child' ? dropTarget : dropTargetParent;
     if (edge === 'top') {

diff --git a/packages/test-app/app/components/examples/shared-lists/index.js b/packages/test-app/app/components/examples/shared-lists/index.js
@@ -1,11 +1,15 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { insertBefore, insertAfter, removeItem } from 'ember-draggable-modifiers/utils/array';
+import {
+  insertBefore,
+  insertAfter,
+  removeItem,
+} from 'ember-draggable-modifiers/utils/array';
 
 export default class ExamplesSharedListsComponent extends Component {
-  @tracked itemsTop = [ 'One', 'Two', 'Three', 'Four', 'Five' ];
-  @tracked itemsBottom = [ 'Six', 'Seven', 'Eight', 'Nine', 'Ten' ];
+  @tracked itemsTop = ['One', 'Two', 'Three', 'Four', 'Five'];
+  @tracked itemsBottom = ['Six', 'Seven', 'Eight', 'Nine', 'Ten'];
 
   hbsCode = `
     <ul>
@@ -38,10 +42,10 @@ export default class ExamplesSharedListsComponent extends Component {
     </ul>
   `;
 
-  get jsCode () {
+  get jsCode() {
     return `
-      @tracked itemsTop = [ ${this.itemsTop.map(item => JSON.stringify(item)).join(', ')} ];
-      @tracked itemsBottom = [ ${this.itemsBottom.map(item => JSON.stringify(item)).join(', ')} ];
+      @tracked itemsTop = [ ${this.itemsTop.map((item) => JSON.stringify(item)).join(', ')} ];
+      @tracked itemsBottom = [ ${this.itemsBottom.map((item) => JSON.stringify(item)).join(', ')} ];
 
       @action move ({ source, target }) {
         const { data: draggedItem, group: fromList } = source;
@@ -58,7 +62,7 @@ export default class ExamplesSharedListsComponent extends Component {
     `;
   }
 
-  @action move ({ source, target }) {
+  @action move({ source, target }) {
     const { data: draggedItem, group: fromList } = source;
     const { data: dropTarget, group: toList, edge } = target;