metafizzy / metafizzy/packery

Issue with packery functions while executing unit test's

Open
#534 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
4.3k
Forks
324
PR merge metrics
No merged PRs in 30d

Description

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:

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No repository file or test path is named; the payload only identifies MemberTilesComponent, ngOnInit, Jasmine/Karma, PhantomJS, Packery, and Draggabilly. Start by running the failing “MemberTilesComponent should create member dashboard component” spec and inspect the Draggabilly constructor in the stack trace. Done means the test runs without the reported transform error, but the intended fix is not specified.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, javascript
Domain
frontend, testing-qa
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.