metafizzy / packery

:bento: Gapless, draggable grid layouts
https://packery.metafizzy.co
4.13k stars 315 forks source link

Issue with packery functions while executing unit test's #534

Open vinuvinay3 opened 4 years ago

vinuvinay3 commented 4 years ago

I am using Angular 7 Here is my component code ngOnInit() {

 Packery.prototype.getShiftPositions = function (attrName) {
  attrName = attrName || 'id';
  return this.items.map(function (item) {
    return {
      attr: item.element.getAttribute(attrName),
      x: item.rect.x / this.pckry.width
    }
  });
};

Packery.prototype.initShiftLayout = function (positions, attr) {
  if (!positions) {
    // if no initial positions, run packery layout
    this.layout();
    return;
  }
  // parse string to JSON
  if (typeof positions === 'string') {
    try {
      positions = JSON.parse(positions);
    } catch (error) {
      console.error('JSON parse error: ' + error);
      this.layout();
      return;
    }
  }

  attr = attr || 'id'; // default to id attribute
  this._resetLayout();
  // set item order and horizontal position from saved positions
  this.items = positions.map(function (itemPosition) {
    const selector = '[' + attr + '="' + itemPosition.attr + '"]'
    const itemElem = this.element.querySelector(selector);
    const item = this.getItem(itemElem);
    item.rect.x = itemPosition.x * this.pckry.width;
    return item;
  }, this);
  this.shiftLayout();
};

this.pckry = new Packery('.grid', {
  itemSelector: '.grid-item',
  gutter: 10
});

// get saved dragged positions
// const initPositions = localStorage.getItem('dragPositions');
this.memberDashboardService.getUserPrefrences().subscribe(
  data => {
    this.pckry.initShiftLayout( data, 'data-item-id' );
   } ,
   error => {
    //console.log("Unable to retrieve User prefrences");
   }
);

this.pckry.getItemElements().forEach(itemElem => {
  const draggie = new Draggabilly(itemElem);
  this.pckry.bindDraggabillyEvents(draggie);
});

// save drag positions on event
this.pckry.on('dragItemPositioned', () => {
  const positions = this.pckry.getShiftPositions('data-item-id');
  this.memberDashboardService.updateUserPrefrences(positions).subscribe(
    data => {
      //console.log("User Prefrences Persisted");
    },
    error => {
      //console.log("Unable to store User prefrences");
    }
  );
});

}

when i run the unit test's using jasmine and karma I get the following error, can someone please help me with this

PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 4 of 29 (4 FAILED) (0 secs / 0.575 secs) PhantomJS 2.1.1 (Mac OS X 0.0.0) MemberTilesComponent should create member dashboard component FAILED TypeError: undefined is not an object (evaluating 'transform.indexOf') in http://localhost:9876/_karma_webpack_/vendor.js (line 137960) _addTransformPosition@http://localhost:9876/_karma_webpack_/vendor.js:137960:17 _getPosition@http://localhost:9876/_karma_webpack_/vendor.js:137942:29 _create@http://localhost:9876/_karma_webpack_/vendor.js:137875:20 Draggabilly@http://localhost:9876/_karma_webpack_/vendor.js:137848:15 http://localhost:9876/_karma_webpack_/main.js:1035:70591 forEach@[native code] ngOnInit@http://localhost:9876/_karma_webpack_/main.js:1035:70470 checkAndUpdateDirectiveInline@http://localhost:9876/_karma_webpack_/vendor.js:58260:27 checkAndUpdateNodeInline@http://localhost:9876/_karma_webpack_/vendor.js:59524:49 checkAndUpdateNode@http://localhost:9876/_karma_webpack_/vendor.js:59486:40 debugCheckAndUpdateNode@http://localhost:9876/_karma_webpack_/vendor.js:60120:43 debugCheckDirectivesFn@http://localhost:9876/_karma_webpack_/vendor.js:60080:36 debugUpdateDirectives@http://localhost:9876/_karma_webpack_/vendor.js:60072:37 checkAndUpdateView@http://localhost:9876/_karma_webpack_/vendor.js:59468:30 callWithDebugContext@http://localhost:9876/_karma_webpack_/vendor.js:60362:30 debugCheckAndUpdateView@http://localhost:9876/_karma_webpack_/vendor.js:60040:32 detectChanges@http://localhost:9876/_karma_webpack_/vendor.js:57849:40 _tick@http://localhost:9876/_karma_webpack_/vendor.js:61043:45 http://localhost:9876/_karma_webpack_/vendor.js:61057:54 invoke@http://localhost:9876/_karma_webpack_/polyfills.js:8046:31 onInvoke@http://localhost:9876/_karma_webpack_/vendor.js:179509:45 invoke@http://localhost:9876/_karma_webpack_/polyfills.js: