Issue with packery functions while executing unit test's
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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